ES6에서 바뀐 문법들을 정리해보려고 합니다.


1. var 키워드는 어떻게 사용되었나요?


1-1. ES6 이전 문법에서는 변수를 선언하기 위해 var 키워드를 사용합니다.

// 기본적인 변수 선언과 할당 방법
var number;                 // 변수 number 선언
number = 9;                 // 변수 number에 9 할당
// 변수 선언과 할당을 동시에 하는 방법
var i = 10;                 // 변수 i 선언하고 숫자 10을 할당
var a = "apple";            // 변수 a 선언하고 문자열 apple를 할당
// 여러개의 변수를 선언하는 방법
var b = 1, c = 2, d = 3;     // 여러개의 변수를 한번에 선언하고 할당
// 선언한 변수를 다시 선언하는 방법
var a = 0;
var a = 5;                // 이미 선언된 변수 a를 다시 선언하면 값을 덮어씌울 수 있습니다.
console.log(a);           // 5 출력

1-2. var 키워드로 선언된 변수의 유효범위는?

  • 변수의 유효범위란 프로그램 안에서 어떤 변수가 정의되어 있는 영역을 말합니다.

  • 다시 말해서 어떤 변수가 소스코드 안에서 존재하고 있는 범위를 의미합니다.

// 함수 밖에 변수를 선언하면 전역 변수가 됩니다.
var scope = "global";         // 전역 변수 scope 선언.
function foo() {
  // 함수 안에 변수를 선언하면 지역 변수가 됩니다.
    var scope = "local";        // 지역 변수 scope 선언
    console.log(scope);         // 전역 변수가 아닌 지역 변수의 값 "local" 출력
}
console.log(scope);           // 전역 변수의 값 "global" 출력
foo();                        // 지역 변수의 값 "local" 출력
  • var 키워드로 선언한 변수는 함수 스코프 변수입니다.

  • 함수 스코프 변수의 특징을 알아보겠습니다.

    1. 함수 안에서 선언된 함수 스코프 변수는 함수 내부에서만 접근할 수 있는 지역 변수 입니다.

    2. 따라서 위의 함수 스코프 변수는 함수 밖에서 접근이 불가능 합니다.

    3. 함수 밖에 선언한 함수 스코프 변수는 전체 소스코드 어디에서든지 접근할 수 있는 전역 변수입니다.

function foo(){
  var a = "local";
}
console.log(a); // 호출 불가능
  • 전역 변수와 지역 변수의 변수명이 같다면 함수 안에서는 지역 변수가 호출됩니다.

1-3. 키워드 없이 변수를 선언한다면 어떻게 동작하나요?

  • Strict mode가 아닌 상황에서 아직 선언하지 않는 변수에 값을 할당하면 자바스크립트는 자동으로 전역 변수를 생성합니다.
a = "global";            // 전역 변수 a 선언
function foo() {
    a = "local";           // 함수 안에서 전역 변수 a의 값 변경
    b = "global";          // 전역 변수 b 선언
}
foo();
console.log(a);   // "local" 출력
console.log(b);   // "global" 출력
b = "전역 변수 b 값 변경"
console.log(b);          // "전역 변수 b 값 변경" 출력
  • 하지만 좋지 않은 습관이므로 변수 선언 키워드와 함께 변수를 선언해야 합니다.

2. let 키워드는 무엇이 다른가요?


2-1. let 키워드는 블록 스코프 변수를 선언하는 키워드입니다.

  • 블록의 단위는 중괄호 {} 입니다.

  • 블록 스코프 변수의 특징을 알아보겠습니다.

    1. 블록 안에서 변수를 선언하면 변수가 선언된 블록과 그 하위 블록에서만 접근이 가능합니다.
    function foo() {
            let a = 2;
            if(true) {
                let b = 10;
                console.log(a);   // 변수 a가 선언된 블록의 하위 블록에서 접근 가능
            }
            console.log(b);       // 변수 b는 if문 내부에서 선언되었으므로 
                                  // 블록 밖에서 접근 불가능
            for (let i = 0; i < 10; i++) {
                let c = 20;
            }
            console.log(c);       // 변수 c는 for문 내부에서 선언되었으므로
                                  // 블록 밖에서 접근 불가능
    }
  • var 키워드와 비교
    function foo() {
            var a = 2;
            if(true) {
                  var b = 10;
                  console.log(a); // a 접근 가능
            }
            console.log(b);       // b 접근 가능, 
                                  // 변수 b는 var 키워드로 선언되었으므로 
                                  // 함수 내부 어디에서든지 접근 가능
            for (let i = 0; i < 10; i++) {
                var c = 20;
            }
            console.log(c);       // c 접근 가능
                                  //변수 c는 var 키워드로 선언되었으므로
                                  // 함수 내부 어디에서든지 접근 가능
    }

2-2. let 키워드는 변수 재선언이 불가능합니다.

  • 위에서 var 키워드로 변수를 선언할 경우, 변수 재선언이 가능하다고 했었습니다.

  • 하지만 let 키워드로 변수를 선언할 경우, 선언된 변수와 동일한 이름의 변수를 다시 선언할 수 없습니다.

let a;
let a; // 이미 위에서 변수 a가 선언되었으므로 오류가 발생
  • 주의할 점은 let 키워드는 블록 스코프 변수이므로 다른 블록에서 동일한 변수명으로 변수를 다시 선언하면 새로운 변수가 선언됩니다.
function foo() {
    let a = 1;
    var b = 2;
    console.log(a); // 1 출력
    console.log(b); // 2 출력
    if (true) {
        let a = 5; // if문 블록 안에서 동일한 이름으로 
                   // 새로운 변수를 생성하면 if문 밖의 변수 a와 다른 변수 a가 선언된다.
                   // 이 변수 a는 if문 안에서만 존재한다.
        var b = 10; // if 문 밖의 변수 b에 10을 덮어 씌운다.

        console.log(a); // 5 출력
        console.log(b); // 10 출력
    }
    console.log(a); // 1 출력
    console.log(b); // 10 출력
}
foo();

3. const 키워드는 무엇이 다른가요?


  • const 키워드로 변수를 선언하고 값을 할당하면 값을 변경할 수 없습니다.
const a = 10;
a = 15;        // 값을 변경하므로 에러 발생
  • const 키워드는 변수 선언과 할당을 동시에 해야합니다.
const b;       // 변수 b에 값이 할당되지 않았으므로 에러 발생
b = 5;
  • const 키워드는 let 키워드와 같은 블록 스코프 변수입니다.

  • const 키워드로 선언된 변수에 객체를 할당하면 객체 자체가 할당되는 것이 아니라 객체의 주소값이 할당됩니다.

  • const 변수를 이용한 객체 속성 변경이 가능합니다. 객체 속성을 변경할 경우, const 변수에 할당된 객체의 주소값은 바뀌지 않으므로 문제가 없습니다.

const object = {
      "num" : 12
};
object.num = 10;         // 속성에 새로운 값 할당 가능 
console.log(object.num); // 10 출력
object = {"string": "bird"}; // object 변수에 새로운 객체의 주소값을 할당하므로 에러 발생

4. 더 공부해볼 부분들

  • 전역 객체?
  • strict mode?
  • 호이스팅?

참고자료