변수

변수란?

변수는 하나의 값을 저장하기 위해 확보한 메모리 공간을 식별하기 위해 붙인 상징적인 이름입니다. 쉽게 말해 값의 위치를 가리키는 상징적인 이름 이죠.

쉽다고 했지만 처음 프로그래밍을 접하는 사람에겐 값이 뭔지, 어디에 위치한다는 것인지 알 수가 없습니다.

값은 식이 평가되어 생성된 결과를 말합니다. 여기서 식은 표현식을 말하는 데 이후 포스트에서 다룹니다. 중요한 것은 생성된 결과입니다.

그렇다면 위치는 무엇일까요? 위치라는 것은 컴퓨터 공학에서 보았을 때 메모리 상에 어디에 있냐를 의미합니다. 메모리라는 것을 잘 모르겠다면 건물이라고 생각합시다.

프로그램은 건물에 특정 층들을 차지합니다. 그 층은 여러 방으로 이루어져 있고 그 방에는 방을 이용하는 사람이 있겠죠? 그 방을 이용하는 사람이 될 수 있는 것이 바로 값입니다.

우리가 프로그래밍을 하면서 값을 가지고 오는 방법은 몇 층에 몇 번째 방에 가서 가져오지만 이를 쉽게 접근하기 위해서 변수라는 것을 이용합니다. 어떤 값을 가지고 오기 위해서 방에 이름표를 붙이는 것입니다. 그 값을 사용할 때는 그 이름만 가지고 오면 되는 것입니다.

왜 이름이 있는 방에 값을 넣는다고 하지 않은지는 나중에 알 수 있습니다. 지금은 값이 먼저 방을 잡고 그 방에 이름표를 붙인다고 기억하세요.

변수의 이름은 값이 의미하는 바로 정하는 것이 좋겠죠?

변수 선언

변수를 선언한다는 것은 이용하는 사람이 있는 방에 이름표를 붙이는 것입니다. 그 방을 쓰고 있는 사람이 있다는 것을 알게 되는 것이죠.

단, 원래 있던 사용자를 새로운 사용자로 교체하는 방식이 아닙니다! 같은 이름의 방에 새로운 값을 넣는 것은(재할당) 기존의 방에 이름표를 떼어 새로운 사용자가 있는 방에 이름표를 다시 붙이는 것입니다. 기존 사용자가 방에서 나갈 시간을 주는 것이죠.

var a; // 방을 하나 잡고 a라는 이름을 붙인다.
let b;
const c='';

자바스크립트는 위와 같이 var let const를 사용하여 변수를 선언할 수 있습니다. ES6이전에는 var키워드를 사용했지만 var의 단점이 있어 이를 보완하여 let과 const가 도입되었습니다.

자바스크립트는 변수 선언과 동시에 undefined라는 값이 할당됩니다. 이는 변수를 선언하고 바로 접근하여 쓰레기값을 받는 위험으로부터 안전하게 만들어 줍니다.

쓰레기값이란 그 방을 이전에 쓰던 사람들이 남긴, 현재 나에게 필요없는 무의미한 값입니다. 몇몇 프로그래밍 언어는 변수를 선언할 시 쓰레기 값이 들어가서 다른 값으로 바꾸기 전에 변수에 접근하면(변수를 사용하는 것을 의미합니다.) 이상한 숫자가 출력되는 경우가 있는데, 변수에 쓰레기값이 있는 경우에 해당됩니다.

변수 선언은 소스코드 평가 과정에서 실행됩니다. (런타임 전에 실행)

변수 할당

변수 할당과 재할당은 방의 이름표를 떼어 값이 있는 방에 붙이는 것입니다. 왜 할당과 재할당이 모두 이름표를 떼서 새로운 방에 붙이는 것일까요? 재할당만 해당되는 것이 아닐까요?

위에서 설명했듯이 변수를 선언하게 되면 자바스크립트 엔진(자바스크립트를 실행해주는 친구라고 생각하세요)가 임의로 undefined를 할당해줍니다. 즉, undefined가 있는 방에 이름표를 먼저 붙인다는 것이죠! 그래서 할당하는 것도 어떻게 보면 재할당하는 것과 같은 것입니다. 새로운 값이 있는 방에 선언한 이름을 붙이는 것이죠.

실제로는 아래와 같이 동작한다고 생각하시면 됩니다. 각 칸은 건물의 방이 되고, 왼쪽의 0x00은 몇층 몇 번째인지 나타내는 주소, 그 왼쪽의 num이 방의 이름표, 칸의 내용이 값입니다.

var name = 'kim'; // 'kim'이라는 사용자가 있는 방에 name이라는 이름을 붙인다.

// kim이라는 값을 사용하고 싶다면 방이름을 쓰면 된다.
name; // 결과 : kim

변수에 특정 값을 할당할 때는 할당연산자 =을 사용합니다. ‘수학의 같다’ 기호와 같지만 의미는 다르죠.

할당 연산자는 우측의 값을 좌측의 식별자에 할당한다는 의미입니다. 할당한다는 것은 값이 있는 방에 이름을 붙인다는 것입니다.

값을 재할당 하는 것은 이미 값을 가진 변수에 할당연산자를 사용하여 다른 값으로 다시 할당하는 것을 의미하죠. 그렇다고 말했듯이 교체하는 것이 아니라 새로운 방에 이름표만 옮긴다고 생각해야 됩니다.

만약 값을 재할당 할 수 없다면 그것을 상수라고 한다.(const가 해당됩니다.)

변수 할당은 런타임 과정에서 수행됩니다.

변수 호이스팅

호이스팅을 쉽게 생각하면 예약하는 기능이라고 볼 수 있죠.

사실은 변수 선언하는 과정이 런타임 이전에 상위로 끌어올려져 먼저 수행되고 소스코드가 실행된다는 의미입니다.

console.log(test); // undefined
var test; // 변수 선언

위의 방식으로 코드를 실행하면 test가 선언되지 않았는데 에러가 나는 것이 아니라 undefined가 출력이 됩니다. 변수 선언은 런타임 시점이 아닌 그 이전에 먼저 이루어진다는 의미입니다.

자바스크립트는 소스코드 실행에 앞서 평가를 먼저 하게 되는데, 이때 변수, 함수 등의 선언문을 먼저 실행해 등록합니다. (어디에 등록하는 지는 다른 포스트에서 설명하겠습니다.) 그래서 위의 코드가 undefined의 값을 낼 수 있게 된 것죠. 그 이후 평가 과정이 끝나면 선언문을 제외한 코드가 실행되게 됩니다.

그런데 let과 const는 호이스팅이 되지 않는 것처럼 동작합니다.

console.log(foo); // Reference Error : foo is not defined;
let foo;
console.log(foo); // undefined;

let const var의 호이스팅 차이와 각각의 설명은 추후에 포스트 할 예정입니다.

네이밍 규칙

여러 사람들과 프로그래밍을 하다보면 무슨 코드인지 이해하기 어려운 경우도 종종 발생합니다. 이런 일을 줄이기 위해서 프로그래머들 사이에서 여러 암묵적인 규칙들을 정해왔습니다.

변수와 같은 식별자의 이름을 짓는 특정 규칙이 존재합니다.

식별자는 특수문자를 제외한 문자,숫자,언더스코어(_),달러 기호($)를 포함할 수 있다.
단, 숫자로 식별자가 시작하는 것은 혀용되지 않는다.
예약어는 식별자로 사용될 수 없다.

예약어란 프로그래밍 언어에서 사용되고 있거나 사용될 예정인 단어입니다. (ex var)

var var // SyntaxError: Unexpected token 'var'

예약어를 이용해 변수를 만드려고 하면 문법 에러가 발생하게 됩니다.

네이밍 컨벤션 변수를 만들다 보면 값의 의미를 정확하게 하기 위해서 여러 단어로 이름을 짓게 되는 경우가 많습니다.

하나 이상의 영어 단어로 구성된 식별자를 만들 때 가독성을 좋게 하기 위한 규칙입니다. 자바스크립트의 경우 함수,변수명에는 카멜 케이스를 사용한다. 생성자 함수나 클래스는 파스칼 케이스를 사용합니다. (파스칼 케이스를 사용하지 않는 경우도 있습니다. 같이 프로그램을 하는 사람들과 방식을 맞춘다는 것이 중요한 것입니다.)

//카멜 케이스
var firstName;

// 스네이크 케이스
var first_name;

//파스칼 케이스
var FirstName;