JavaScript - 변수

변수(Variable)란?

• 데이터를 편리하게 다루기 위해 데이터 보관함(메모리)에 이름을 붙이는 것
• 보관함의 크기는 모두 동일하고 재활용 및 재할당이 가능하다.
• 변수를 선언하고 할당하는 가장 큰 이유는 반복적으로 사용하는 값을 데이터 보관함에 넣어 두었다가 편하게 꺼내서 사용하기 위함이다.

자바스크립트에서 변수는 선언 -> 초기화 -> 할당 단계를 거쳐 생성 및 수행된다.

• 선언 단계: 변수명을 등록하여 자바스크립트 엔진에 변수의 존재를 알린다.

• 초기화 단계: 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화한다.

1. 보관함 확보 및 초기화

선언(Declaration) 및 초기화(Initialization)

let age;  // undefined

2. 보관함에 데이터 저장

할당(Assignment)

age = 20;  // 20

• = 는 '같다'라는 의미가 아니라 '할당'을 하는 할당 연산자이고 '같다'라는 의미의 연산자는 === 이다.

3. 선언과 할당을 동시에

let age = 20;  // 20

• 변수를 이용해서 값을 계산하고자 하는 것을 표현식(expression)이라 한다.

    let pi = 3.141592
	pi * 5 * 5; 

• 위 식에서 변수로 둘 수 있는 것이 하나 더 있다.

let radius = 5;
pi * radius * radius;

• 결과물을 다시 변수로 담을 수 있다.

	let area0fCircle = pi * radius * radius;

• 한번 선언했던 변수를 다시 사용할 때는(재할당) let을 쓰지 않는다.

let age = 20;
age = 25;

• 명령문이 한 줄을 다 차지할 경우 세미콜론이 필요하지 않지만 한 줄에 두개 이상의 명령문이 필요하다면 반드시 세미콜론으로 구분해야 한다. 하지만 세미콜론이 필요하지 않는 경우라도 항상 세미콜론으로 끝마치는 편이 버그 예방 차원에서 더 좋은 습관이다.

• 변수명에 공백을 넣을 수 없고 가독성을 위해 단어의 시작 문자를 대문자로 써 붙인다. (Camelcase)

• 변수 선언 후 할당이 없다면 undefined, 정의되지 않음

• 대소문자를 구별하며 유니코드 문자셋을 이용한다.

let, const, var

변수의 선언은 let, const, var 키워드로 할 수 있으며 let과 const는 Es6에서 추가되었다.

• let은 변수 재선언은 불가능하지만 재할당은 가능하다.

    let name = 'javascript'
    console.log(name) // javascript
    
    let name = 'java'
    console.log(name) // Uncaught SyntaxError: Identifier 'name' has already been declared
    
    name = 'react'
    console.log(name) // react
    

• const는 변수 재선언, 변수 재할당 모두 불가능하다.

    const name = 'javascript'
    console.log(name) // javascript

    const name = 'java'
    console.log(name) // Uncaught SyntaxError: Identifier 'name' has already been declared

    name = 'react'
    console.log(name) //Uncaught TypeError: Assignment to constant variable.
    

var를 사용하지 않는 이유

1. var는 변수 중복 선언이 가능해 코드량이 많아지면 어디에서 어떻게 사용될지 파악하기 힘들고 값을 재할당하게 되는 등의 실수가 발생할 수 있다.

// 첫번째 변수 선언
var a = 10;
console.log(a); // 10


// 두번째 변수 선언
var a = 20;
console.log(a); // 20


// 세번째 변수 선언(마지막에 할당된 값이 변수에 저장)
var a; // 20, 초기화x
console.log(a); // 20

2. var는 함수 내부에 선언된 변수만 지역변수로 인정하는 함수 레벨 스코프(function-level scope)이며 나머지는 모두 전역 변수로 간주하므로 어디에서나 참조할 수 있다.

if(true) {
    var a = 10;
    console.log(a); // 10
}
console.log(a);  // 10

• let과 const는 함수는 물론 조건문, 반복문 등 블록 내부에서 선언된 변수까지도 지역변수로 인정하는 블록 레벨 스코프(block-level scope)이다.

if(true) {
let a = 10;
console.log(a) // 10
}
console.log(a) // ReferenceError: a is not defined

3. var 키워드를 사용하여 변수 선언 시 해당 변수가 속한 범위의(scope) 최상단으로 올려버리는 호이스팅이 발생하고, 전반적으로 코드가 어떻게 작동될지 직관적으로 예측하기 어려운 경우가 자주 발생한다.

console.log(a);	 // ReferenceError: a is not defined

변수 a가 선언된적이 없으므로 ReferenceError

console.log(a);  // undefined
var a;	 

하지만 var 키워드로 선언 시 변수 a가 호이스팅 되었기 때문에 undefined

let, const, var 중 어떤 것을 사용해야 하는지?

• 변수 선언에는 기본적으로 const를 사용하고 재할당이 필요한 경우에 한정해 let 을 사용하는 것이 좋다.

• var는 let과 const가 등장한 ES6 이후부터는 사용할 필요가 없는듯 하다.