변수 선언 (var, let, const)

1. 변수 선언 3가지 방법

1) var ( function scope, mutable )

되도록 사용하지 말 것! 

# 선언과 초기화
var i;  // 선언, "undefined"가 저장됨
var sum = 0;  // 선언과 초기화

# 한 번에 여러 개의 변수를 함께 선언할 수 있음
var i, sum; 

# 선언과 초기화를 동시에 해줄 수 있음
var i=0, sum=10, message=”Hello”;  

# 선언되지 않은 변수는 전역 변수가 됨
name = "javascript";   

var의 문제점

1. 변수의 정의를 위쪽으로 끌어올리기(변수 호이스팅) 때문에, 변수를 정의하기 전에 그 변수를 사용해도 에러가 발생하지 않는다. 
2. 블록 단위를 철저히 무시하는 함수 유효범위를 가진다. 
3. var로 선언한 변수는 재정의가 가능하기 때문에 직관적이지 않다.
4. 함수안에서 var 키워드를 사용하지 않고 변수에 값을 할당하면 전역 변수가 된다. (글로벌한 변수들은 어플리케이션이 시작할 때부터 끝날 때까지 언제나 메모리에 탑재되어 있기 때문에 최소한으로 사용하는 것이 좋다.) ☞ 전역 변수가 되는 것을 피하기 위해 파일의 최상단에 'use strict'를 선언할 수 있다.
5. 반복문에서 정의된 변수가 반복문이 끝난 이후에도 계속 남아있다. ☞ var변수는 함수 스코프이므로 즉시 실행 함수로 묶으면 변수의 스코프를 제한할 수 있다.

 

<변수> 2) let ( block scope, mutable )

# 선언과 초기화
let i;  // 선언, "undefined"가 저장됨
let sum = 0;  // 선언과 초기화

# 한 번에 여러 개의 변수를 함께 선언할 수 있음
let i, sum; 

# 선언과 초기화를 동시에 해줄 수 있음
let i=0, sum=10, message=”Hello”;  

let의 특징

• var 은 함수 레벨 스코프였던 반면, let 은 블록 레벨 스코프 변수를 선언한다.
• let 으로 변수 이름을 중복하여 선언할 수 없으며 SyntaxError문법 에러가 발생한다.
• var 키워드로 선언된 변수는 전역 객체의 프로퍼티가 된다. 그러나 let 으로 선언한 전역 변수는 전역 객체의 프로퍼티가 될 수 없다.

 

<상수> 3) const ( block scope, immutable ) 

const 변수에 할당된 값은 재할당할 수 없으며 다시 선언할 수도 없기 때문에, 처음 선언할 때, 반드시 초기화를 해야한다.

보통 관습적으로 대문자를 사용해서 선언한다.

const MY_NUM = 7;

immutable의 장점

1. 한 번 작성한 값을 다른 해커들이 이상한 코드를 삽입해 값을 계속 변경하는 것을 방지할 수 있다.
2. 여러 개의 thread가 변수의 값을 동시에 접근하여 변경하는 위험이 없다.
3. 사람의 실수를 줄여준다.

 

---

2. function scope(함수 유효 범위) vs block scope(블록 유효 범위)

함수 유효범위	함수 유효범위는 어떤 함수 안에서 선언된 모든 변수는 그 함수 전체에 걸쳐 유효하다는 의미이다. 이는 변수가 미처 선언되기 전에도 유효하다는 뜻이기도 하다. => Hoisting 된다.
블록 유효 범위	let은 변수가 선언된 블록, 구문 또는 표현식 내에서만 유효한 변수를 선언한다. 이는 var 키워드가 블록 범위를 무시하고 전역 변수나 함수 지역 변수로 선언되는 것과 다른 점이다. 프로그램이나 함수의 최상위에서는 let과 var는 서로 다르게 행동한다. var는 전역 객체의 프로퍼티를 생성하지만, let은 전역 객체의 속성 값을 생성하지 않는다. Hoisting 되지 않는다. 변수가 초기화(선언)되기 전에 참조할 경우 ReferenceError가 발생한다.

크롬 개발자 도구의 Sources탭에서 중단점을 설정하고, 로드하면, 오른쪽 하단 Scope 창에서 유효범위를 알아볼 수 있다.

 

2-1) Hoisting 

호이스팅이란, 어디에 선언했냐에 상관없이 항상 제일 위로 끌어올려주는 것을 말한다.

• var 변수 선언과 함수선언문에서만 호이스팅이 일어난다.
• var 변수/함수의 선언만 위로 끌어 올려지며, 할당은 끌어 올려지지 않는다.
• let/const 변수 선언과 함수표현식에서는 호이스팅이 발생하지 않는다.