var, 이제는 bye var-e: var, let, const

 어떤가 나의 놀라운 드립, 다들 감탄을 그치지 못하겠지만 넘어가자면, 오늘 내용은 var를 지양하고 let, const를 지향해야 하는 이유에 대해서 알아보고자 한다.

 

 JS는 ES6가 발표된 2015년 전까지 모든 변수 선언을 var 선언으로 시작했다. ES6가 발표되면서 let과 const가 생겨나기 시작한 것이다.

 

 var는 다음과 같은 특징을 지닌다. 특징을 설명하며 지양해야할 이유도 아는 범위 내에서 적어보겠다.

 

 

 

 1. 동일한 변수명의 중복 선언이 가능하다

var number = 1;
var number = 2;

console.log(number);
// 출력: 2

 불필요한 코드가 작성될 수 있어 지양한다.

 다량의 코드를 작성 시 변수명 사용 여부를 알기 어려워 지양한다.

 

 

 

 2. 함수 스코프를 가진다.

 함수 내에 선언된 var 변수는 함수 내에서만 활용이 가능하나

// 함수 스코프 안에서의 var
function ex() {
  var number = 1;
  console.log(number);
}

ex();
// 출력 1


function ex() {
  var number = 1;
}

console.log(number);
// number is not undefined

 

 

 함수 밖에 선언된 var 변수는 스코프의 제약 없이 사용할 수 있다.

// 함수 스코프가 아닌 전역/지역 스코프 안에서의 var
if (true) {
  var number = 1;
  console.log(number);
  //   출력: 1
}

console.log(++number);
// 출력: 2

 

 

 반면, let은 어떨까

// let 이라면?
if (true) {
  let number = 1;
  console.log(number);
  //   출력: 아래 코드에서 오류가 발생하여 파일 자체가 실행되지 않음.
}

console.log(++number);
// 출력: number is undefined

 

 

 두 예시 코드가 공존한다면 오지랖이 넓은 var가 도와줄 것이다.

// 함수 스코프가 아닌 전역/지역 스코프 안에서의 var
if (true) {
  var number = 1;
  console.log(number);
  //   출력: 1
}

console.log(++number);
// 출력: 2

if (true) {
  let number = 1;
  console.log(number);
  //   출력: 1
}

console.log(++number);
// 출력: 3 (var 선언이 이어져 2값에 ++ 연산자가 적용 후 3을 출력함)

 

 

 

 또한 반복문을 사용할 때 지정한 범위보다 초과하여 출력하기에 의도를 넘어가 지양한다.

// 0부터 10까지 출력하는 코드 작성
for (var number = 0; number <= 5; number++) {
  console.log(number);
// 출력: 1
//       2
//       3
//       4
//       5
}

console.log(number);
// 출력: 6
// ??????????????????????????? 왜지
// let 또는 const는 에러가 발생한다.

 

 

 

3. 선언과 할당의 호이스팅

 

 호이스팅이란 위에 작성된 코드가 아래 작성된 코드의 영향을 받아 실행되는 방식인데

예를 들어, 보통 함수는 선언부가 작성되고 호출부가 작성되도록 코드를 작성하는데 JS는 호출부가 작성된 후 선언부가 작성되어도 정상적으로 작동할 수 있게 도와준다. 타 언어에선 이를 지원하지 않는 경우가 태반이다.

// 함수 호출부
introduce();
// 출력: 안녕하세요 :)

// 함수 선언부
function introduce() {
  console.log("안녕하세요 :)");
}

 

 

 근데 var는 한차원 남다른 호이스팅을 보여준다.

// 함수 호출부
introduce();
// 출력: 안녕하세요 :)

// 함수 선언부
function introduce() {
  // 1. 변수에 값을 할당하고
  insa = "안녕하세요 :)";
  //   2. 변수를 호출하고 ..?
  console.log(insa);
  //   선언이 뒤따른다... 예?
  var insa;
}

 

 

근데 또 선언 - 호출 - 할당은 안된다.

// 함수 호출부
introduce();
// 출력: undefined

// 함수 선언부
function introduce() {
  // 변수 선언
  var insa;
  // 변수 호출
  console.log(insa);
  //   변수에 값 할당
  insa = "안녕하세요 :)";
}

 

물론 위 예시 코드들에서 let으로 바꾸면 죄다 에러다. 일관성 있어서 좋다.

 

참고로 화살표 함수를 사용할 때에는 함수 호이스팅은 불가능하다.

// 함수 호출부
introduce();
// 출력: introduce is not a function

// 함수 선언부
var introduce = () => {
  // 1. 변수에 값을 할당하고
  insa = "안녕하세요 :)";
  //   2. 변수를 호출하고 ..?
  console.log(insa);
  //   선언이 뒤따른다... 예?
  var insa;
};

 

 

 

오늘의 결론: 금쪽이 var, 이제는 놓아주자.

 

 

나도 놓아줬으니, 너도 놓아줄 수 있다.