Var, Const, let

김민성·2022년 5월 7일
0
post-thumbnail

3가지 변수 선언 방법에 대한 이해가 부족한 상태로 코딩을 하는것 같아 정리를 해두고자 한다.

var는 옛날것임 최신거를 써야지 않겠나?

const와 let은 ES6이후에 등장한 개념이다.
그렇다면 var가 어떤 문제점이 있어서 등장했고 3가지 방식에 대한 차이점은 어떤것이 있을까?

var,let, const 특징

  • 초기값 변경 가능 유무

    • 가능: var, let
    • 불가능: const
  • Scope

    • 함수 스코프: var
    • 블록 스코프 : const, let
  • Hoisting

    • 가능: var
    • 불가능: let, const

    위 특징에서 알 수 있는 var의 문제점은 3가지가 있다.

  1. 변수의 중복선언 가능성 → 예기치 못한 오류 발생 가능
  2. 함수 스코프 → 함수 외부에서 선언한 변수는 전역변수로 됨
  3. 변수 선언 이전에 변수를 선언할 시 → undefined를 반환

이에대한 해결점을 알아보기전에 Scope, Hoisting에 대한 기본 이해를 다지고 어떻게 적용이 되는지 알아보자

Scope

  • 전역(Global Scope) : 코드의 모든범위에서 사용가능
  • 함수(Function Scope) : 함수 안에서만 사용 가능 (var)
  • 블록(Block Scope): if, for, switch등 특정 블록 내부에서만 사용 가능 (let,const)
const value = 'hello!'; // 전역

function myFunction() {
  console.log('myFunction: ');
  console.log(value); // 전역 사용
}

function otherFunction() {
  console.log('otherFunction: ');
  const value = 'bye!'; //함수 scope
  console.log(value);  // bye !
}

myFunction();
otherFunction();

console.log('global scope: '); 
console.log(value);  // hello!

함수, 블록 스코프

블록 스코프(const ,let)

const value = 'hello!';

function myFunction() {
  const value = 'bye!'; // 함수 scope
  if (true) {
    const value = 'world'; // block scope
    console.log('block scope: ');
    console.log(value); // world
  }
  console.log('function scope: ');
  console.log(value); // bye
}

myFunction();
console.log('global scope: ');
console.log(value); // hello

함수 스코프(var)

  • if내에서 선언한 value가 블록 바깥에도 영향을 미침
var value = 'hello!';

function myFunction() {
  var value = 'bye!';
  if (true) {
    var value = 'world';
    console.log('block scope: ');
    console.log(value); // world
  }
  console.log('function scope: ');
  console.log(value); // world
}

myFunction();
console.log('global scope: ');
console.log(value); // hello

Hoisting

  • 아직 선언되지 않은 함수/변수를 끌어올려서 사용하는 방식

만약 아래의 코드를 실행했으면 아래와같은 오류가 떠야 정상이다.

하지만 undefined로 출력된다.

console.log(number); // undefined
var number = 2;

그 이유는 호이스팅 때문에 아래와 같이 받아들이기 때문이다.
하지만 const와 let은 Hoisting이 생기지 않는다.

var number;
console.log(number);
number = 2;

ES6 이후 let, const가 개선한 부분

1. 초기값 변경 가능

1) let
아래와 같이 변수 중복선언은 불가하다.
하지만 값은 재할당 할 수 있음.

let name = 'kmj'
console.log(name) // output: kmj

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

name = 'howdy'
console.log(name) // output: howdy


2) const

let과 동일하게 변수 중복선언 불가함
let과 다르게 재할당도 불가하다. 하지만 객체의 재할당은 가능하다.

// 원시값의 재할당
const name = 'kmj'
name = 'howdy' // output: Uncaught TypeError: Assignment to constant variable.

// 객체의 재할당
const name = {
  eng: 'kmj',
}
name.eng = 'howdy'

console.log(name) // output: { eng: "howdy" }

2. 블록레벨 스코프

스코프는 최대한 깊숙한것이 다른코드에 영향을 주지않으므로 유지,보수에 좋다.
let,const는 블록레벨 스코프이므로 var보다 사용을 권장한다.

let letA = 1
var varA = 3

if (true) {
  let letA = 5
  var varA = 10
}

letA // 1
varA // 10

결론: const와 let 을 사용하자, 바뀌면 안되는 값은 const 아니면 let을 쓰자

참고 블로그

profile
다양한 경험의 개발자를 꿈꾼다

1개의 댓글

comment-user-thumbnail
2023년 1월 26일

안녕하세요!! 글 잘읽었습니다:-)
글에서 const와 var가 호이스팅이 불가능하다고 적혀있던데, 제가 알기론 불가능한게 아니라 호이스팅이 발생하지 않는것 처럼 보일 뿐 실제로는 호이스팅이 발생하는 것으로 알고있습니다. 혹시 제가 잘못 알고있는건지 궁금해서 댓글남깁니다!!

답글 달기