javaScript - let, var, const

자바스크립트에서 변수를 선언하는 방식은 3가지가 존재한다. 먼저 과거 자바스크립트의 유일한 변수 선언 방법인 var가 존재하였고 ES6에 let, const 가 추가되었다.

1. var

과거의 자바스크립트부터 사용된 변수 var는 중복된 변수를 다시한번 선언하더라도 아무런 오류가 발생하지 않는다.

var number = 111
    console.log(number) // 111

var number = 222
    console.log(number) // 222

이와 같은 같은 변수명 number에 다시한번 다른 값을 할당해 선언하더라도 아무런 오류가 발생하지 않는다.

이런 특성은 간단한 테스트를 위한 변수선언으로는 간편할 수 있으나,
코드의 양이 많아진다면 언제 어디서 사용된지 파악하기가 어렵고 값이 바뀔 우려가 있어 유지보수에 적합하지 않다는 큰 단점을 지니게 된다.

그래서 ES6와 함께 등장한 변수 선언 방식이 let 과 const이다,

2. let

let number = 111
    console.log(number) // 111

let number = 222
    console.log(number) 
// Uncaught SyntaxError: Identifier 'number' has already been declared

number = 222
console.log(number) //222

let은 변수의 재선언은 불가능하다. 이미 선언된 변수명을 다시한번 사용하면 해당 변수명은 이미 선언되었다는 오류가 발생한다. 이는 const와 동일하다.

하지만 변수의 값을 재할당 하여 저장된 값을 변경하는것은 가능하다.
위의 코드에서는 number 변수의 값을 222로 재할당하는 동작이 정상적으로 이루어 지는것을 확인 할 수 있다.

3. const

그렇다면 let 과 const 의 차이는 무엇일까
이 둘의 차이점은 immutable의 여부이다.

immutable - 변경할 수 없는, 불변의

let 변수는 한번 선언한 값의 재할당이 가능했다. 하지만 const 변수의 경우 재선언과 재할당이 모두 불가능한 immutable한 특성을 지니고 있다.

const number = 111
    console.log(number) // bathingape

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

number = 222
console.log(number) 
//Uncaught TypeError: Assignment to constant variable.

다음과 같이 const 변수는 재선언과 재할당시 모두 오류가 발생한다.

4. 결론

그렇다면, 세가지의 변수 선언 방식중 어떤 방식을 사용해야 할까?

먼저 변수의 할당 방식을 바탕으로 변수 사용을 고민해 볼 수 있다.

• 기본적으로 변수는 메모리 주소의 할당과 함께 선언되는데 mutable 값은 값에대한 메모리 주소를 참조하기 때문에 값을 변경했을시 해당 값을 참조하고 있는 모든곳에서 side effect가 발생해 예상치 못한 버그를 유발 할 수 있다,
• 반면 immutable로 객체를 선언하고 사용하게 되면 객체의 메모리 주소가 불변하기 때문에 구조를 단순하게 유지할 수 있어 높은 안전성과 성능을 지니게 된다.

따라서 코드의 안전성과 성능을 높이기 위해서는

기본적으로 const를 사용하고, 재할당이 필요한 경우에 한정해 let 을 사용하는 것이 좋을 것이라고 생각한다.

그리고 이는 화살표함수를 사용한 함수 선언, 객체 선언 등에 모두 통용되어야 한다.
immutable한 특성을 지닌 const 사용을 통해 성능적인 이점과 안전성을 모두 확보할 수 있다.

결론적으로는 정리하자면

1. 재할당이 필요한 경우에 한정해 let 을 사용한다.
2. 재할당이 필요 없는 상수와 객체에는 const 를 사용한다.