let, const, var

이재홍·2022년 6월 9일
0

Basic JS

목록 보기
7/18
post-thumbnail

자바스크립트에서 var로 변수 선언이 가능했는데 왜 const 와 let이 등장했고 왜 이것들을 사용하는 것을 권장하는지 알아보자.

변수

변수(variable)는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말함.
프로그래밍은 변수를 통해 값을 저장하고 참조하며 연산자로 값을 연산, 평가하고 조건문과 반복문에 의한 흐름제어로 데이터의 흐름을 제어하고 함수로 재사용이 가능한 구문의 집합을 만들며 객체, 배열 등으로 자료를 구조화하는 것

var 의 문제점

ES5 에서 변수를 선언할 수 있는 유일한 방법은 var키워드를 사용하는 것이였음. 설계상 오류로 주의를 기울이지 않으면 심각한 문제를 발생시킨다
1. 함수레벨 스코프 (Funtion-level scope)

  • 전역 변수의 남발
  • for loop 초기화식에서 사용한 변수를 for loop 외부 또는 전역에서 참조할 수 있다.
  1. var 키워드 생략 허용
  • 의도하지 않은 변수의 전역화
  1. 중복 선언 허용
  • 의도하지 않은 변수값 변경
  1. 변수 호이스팅
  • 변수를 선언하기 전에 참조가 가능하다.

대부분의 문제는 전역 변수로 인해서 발생한다고 한다. 전역변수는 간단한 APP의 경우, 사용한 편리한 면이 있찌만 불가피한 상황을 제외하고는 사용을 억제해야한다!
전역변수는 유효범위(Scope)가 넓어서 어디에서 어떻게 사용될지 파악하기 힘듬!
의도치 않은 변수의 변경이 발생할 가능성이 증가한다는 의미이고, 여러 함수와 상호 의존하는 부수 효과가 있을 수 있어서 복잡성이 증가한당

그래서 변수의 유효범위(scope)는 좁을수록 좁다!

그렇게 등장한게 let 과 const 키워드이다!

1. 중복선언불가

(1) let

let 키워드로는 변수 중복 선언이 불가하지만, 재할당은 가능하다.

let name = 'JHL'
console.log(name) // JHL

let name = 'howdy' // Uncaught SyntaxError: Identifier 'name' has already been declared

name = '철수'
console.log(name) // 철수

(2) const

const가 let과 다른 점이 있다면, 반드시 선언과 초기화를 동시에 진행되어야 한다.

const name; // Uncaught SyntaxError: Missing initializer in const declaration
const name = 'JHL'

const도 let과 마찬가지로 재선언이 불가하며, 더 나아가 재할당도 불가하다. 재할당의 경우, 원시 값은 불가능하지만, 객체는 가능하다. const 키워드는 재할당을 금지할 뿐, ‘불변’을 의미하지 않는다.

2.블록레벨 스코프

let, const 키워드로 선언한 변수는 모두 코드 블록(function, if, for, while, try/catch 문 등)을 지역 스코프로 인정하는 블록 레벨 스코프

3. 변수 호이스팅

(1) let
let 키워드로 선언한 변수는 선언 단계와 초기화 단계가 분리되어 진행된다. 즉, 런타임 이전에 자바스크립트 엔진에 의해 선언 단계가 먼저 실행되지만, 초기화 단계가 실행되지 않았을 때 해당 변수에 접근하려고 하면 참조 에러가 뜬다.

(2) const
const 키워드는 선언 단계와 초기화 단계가 동시에 진행된다.


인용

Var vs Let vs Const

변수 선언에는 기본적으로 const를 사용하고 let은 재할당이 필요한 경우에 한정해 사용하는 것이 좋다. 원시 값의 경우, 가급적 상수를 사용하는 편이 좋다. 그리고 객체를 재할당하는 경우는 생각보다 흔하지 않다. const 키워드를 사용하면 의도치 않은 재할당을 방지해 주기 때문에 보다 안전하다.

var와 let, 그리고 const는 다음처럼 사용하는 것을 추천한다.

ES6를 사용한다면 var 키워드는 사용하지 않는다.
재할당이 필요한 경우에 한정해 let 키워드를 사용한다. 이때 변수의 스코프는 최대한 좁게 만든다.
변경이 발생하지 않는(재할당이 필요 없는 상수) 원시 값과 객체에는 const 키워드를 사용한다. const 키워드는 재할당을 금지하므로 var, let 보다 안전하다.
변수를 선언하는 시점에는 재할당이 필요할지 잘 모르는 경우가 많다. 그리고 객체는 의외로 재할당을 하는 경우가 드물다. 따라서 변수를 선언할 때에는 일단 const 키워드를 사용하도록 하자. 반드시 재할당이 필요하다면(반드시 재할당이 필요한지 한번 생각해 볼 일이다.) 그때 const를 let 키워드로 변경해도 결코 늦지 않는다.

https://poiemaweb.com/es6-block-scope

0개의 댓글