자바스크립트 이론2 - var, let, const

# var 변수의 문제점

1. 변수 중복 선언 허용

var x = 1;

var x = 100;

console.log(x); // 100

 

var 키워드로 변수 선언하고 동일한 이름으로 중복선언시, var 키워드 안 붙인 것 처럼 동작 함.

동일 이름의 변수가 선언된지 모르고 중복 선언시, 의도치 않게 변수의 값이 변경되는 부작용 발생.

 

1. 블록 레벨 스코프 지원하지 않음

var x = 1;

if(true) {

var x = 10;

}

console.log(x); //10

 

var 키워드 변수는 오로지 함수의 영역 만을 지역 스코프로 인정 함.(**함수의 영역과 관련된 예시 필요)

함수가 아닌 블록들 에서는 모두 전역 변수로 일괄 적용됨. (말 그대로 전역변수로 전체적으로 적용됨)

전역변수를 남발할 가능성이 커지는 문제가 생김.

 

1. 변수 호이스팅

y = 100;

console.log(`y: ${y}`);

var y;

 

var 키워드로 변수를 선언하면 변수 호이스팅에 의해\

변수 선언문이 자동으로 맨 위로 끌어올려진 것 처럼 동작 함.

이는 프로그램의 흐름을 방해, 코드의 가독성과 유지보수성을 떨어뜨림.

 

# let 키워드

1. 변수 중복 선언 불가능

let x = 3;

let x = 4; // Syntax error.

identifier x has already been declared.

 

var의 단점을 보완하기 위해 새로운 변수 선언 키워드 let 과 const 등장.

let은 var과 달리 변수의 중복 선언을 허용하지 않고 에러를 발생시켜 안전성 제공함.

 

1. 블록 레벨 스코프 지원

let y = 10;

if(true) {

let y = 20;

console.log(`if 내부 y: ${y}`); // if 내부 y: 20

}

console.log(`if 외부 y: ${y}`); // if 외부 y: 10

 

let 키워드로 선언한 변수는 모든 코드 블록을 각각의 지역 스코프로 인정하는

블록레벨 스코프 지원함(함수, if문, for문, while문, try/catch문 등).

전역변수의 사용을 제어할 수 있음.

 

1. 변수 호이스팅이 일어나지 않음.

z = 10;

console.log(z); // reference error

 

let z; //cannot access z before initialization

 

let 키워드로 선언된 변수는 선언단계와 초기화 단계 엄격하게 구분함.

암묵적으로 호이스팅이 일어나지 않음.

 

# const 키워드

1. const는 반드시 선언과 동시에 초기화 해야 함.

const x; //syntax error

//missing initializer in const declaration

 

const 키워드는 상수를 선언하기 위해 사용 함.

let과 마찬가지로 블록 레벨 스코프 지원.

let과는 달리 반드시 초기에 값을 할당하는 초기화 작업 필수.

 

1. 상수

const TAX-RATE = 0.1; //세율

let preTaxPrice = 100; //세전가격

let afterTaxPrice = preTaxPrice + (preTaxPrice*TAX-RATE); //세후가격

 

상수란 변수의 반대개념으로 값 변경이 금지된 변수.

값의 상태 유지와 가독성과 유지보수의 편의를 위해 적극적으로 사용할 필요.

이름은 대문자로 지정하는 것이 관례

 

1. const 키워드와 객체

const person = {

name: 'Smith'

};

person.name = 'Tom';

person.age = 25;

 

const 키워드에 기본타입의 값을 할당한 경우 변경할 수 없지만, //상수

객체를 할당한 경우에는 프로퍼티를 변경 가능.

 

# 정리

재할당이 필요한 경우에만 한정하여 let 사용, 변수의 스코프는 최대한 좁게.

변경이 발생하지 않고 읽기 전용으로 사용하는 기본타입의 값과 객체에는 const 사용.

 

출처 : 학원자료