JS레벨업 - ES6 문법 정리하기 (1) 새로운 변수 선언 키워드

Edwin·2023년 4월 22일
0
post-thumbnail

자바스크립트의 역사

01) 역사적 등장

자바스크립트는 1996년 3월 넷스케이프를 통해서 지원되기 시작했으며, 넷스케이프는 지원을 시작한 이례로 꾸준히 자바스크립트의 기술 규격을 표준화하여 ECMA 인터내셔널에 제출하였다.

이렇게 시작된 표준화를 ECMA-262라고 명칭했으며, ECMA-262의 초판이 ECMA 일반 회의에서 1997년 6월 채택되게 되었다.

ECMA 인터내셔널
1961년 유럽에서 컴퓨터 시스템을 표준화하기 위해 세워진 ECMA 인터내셔널는 정보와 통신 시스템을 위한 국제적 표준화 기구이다. 원래 이름은 European Computer Manufacturers Association (ECMA)이었으나, 기구의 국제적 확장을 반영하여 현재의 이름으로 바뀌었다.(위키백과)

02) ECMA-262, ECMA스크립트, JS

ECMA스크립트는 ECMA-262에 의해 표준화된 언어의 이름을 지칭하며, Javascript는 이러한 ECMA스크립트의 사양을 따르는 언어 가운데 하나이다.

03) ES(ECMAscript)

ECMA-262를 간략하게 부르는 것이 ES이며, ES에 대한 문법이 정리된 판을 ES+Num이라 현재 부르고 있다.

역사적인 초판인 ES1는 1997년 6월에 선언되었으며, 이후 꾸준히 표준이 정립되며 발전 중에 있다. 그 가운데 가장 획기적인 변화가 있었던 판은 ES6판(2015년)이다. 이번 포스트는 해당 판을 중심으로 내용을 정리해보고자 한다.

ES6문법 살펴보기

01) 변수 선언의 새로운 두 키워드

변수선언과 스코프

먼저, 변수 선언에 대해서 알기 위해서는 스코프에 대한 이해가 선행되어야 한다. 스코프(Scope)란 변수나 함수의 유효한 범위를 나타낸다. 즉 변수나 함수는 해당 범위를 벗어나면 참조할 수 없음을 의미한다.

첫째, 전역 스코프(Global Scope)
전역 스코프는 함수와 블록에 속하지 않은 전역 범위에서 선언된 변수와 함수의 유효한 범위를 말한다. 해당 스코프에서 선언된 변수와 함수는 모든 스크립트에서 접근이 가능하다.

둘째, 함수 스코프(Function Scope)
함수 스코프는 함수 내에서 선언된 변수가 지역 변수로 제한되는 유요한 범위를 지칭한다.(var로 선언된 변수)

셋째, 블록 스코프
블록 스코프는 중괄호({})로 둘러싸인 블록 내부에서 선언된 변수나 함수가 해당 블록 범위 내에서만 유효한 것을 말한다. 즉 블록 외부에서는 접근이 불가능한 스코프를 말한다.(let과 const)

ES6 이전에는 변수 선언은 var 만 가능했다. 그러나 var의 한계를 극복하고자 ES6는 let과 const를 표준화하였다. 상세한 설명으로 들어가기 전에, 아래의 코드로 내용을 살펴보자.

var x = 10; // 전역 스코프

function foo() {
  var y = 20; // 함수 스코프
  if (true) {
    var z = 30; // 함수 스코프 (var 키워드는 블록 스코프를 지원하지 않음)
    let w = 40; // 블록 스코프 (ES6에서 추가된 let 키워드)
  }
  console.log(x, y); // 10, 20
  console.log(z); // 30
  console.log(w); // ReferenceError: w is not defined
}

foo();
console.log(x); // 10
console.log(y); // ReferenceError: y is not defined
console.log(z); // ReferenceError: z is not defined
console.log(w); // ReferenceError: w is not defined

식별자 x는 최상위 스코프(전역)에서 선언된 변수이다. 함수스코프 내에서 콘솔에 출력해도, 전역에도 출력해도 그 값을 출력할 수 있는 범위를 가지고 있다는 점에서, 전역 스코프에 해당된다.

식별자 y는 함수 내에서 선언된 변수이다. 그러기에 함수 밖에서 콘솔에 해당 변수를 선언하면, 값을 출력할 수 없다. 이는 식별자 y는 그 유요한 범위가 함수 내에서만 유요하기 때문이다.

식별자 z는 함수 안에 있는 조건문의 블록 안에서 선언되었지만, 변수 키워드 var는 블록 스코프에 제한되지 않기에 foo() 함수가 선언되었을 때 콘솔에 기록될 수 있는 것이다.

식별자 w는 블록스코프를 따름으로, 해당 블록 내에서만 그 유효한 범위가 제한된다. 이런 특징으로 전역이나, 블록 밖에서는 콘솔에 기록될 수 없다.

이상의 내용으로 var와 let의 변수 키워드와 해당 키워드가 상속되는 스코프들에 대해서 살펴보았다.

기존 var의 한계와 let과 const의 등장

var 키워드(함수스코프)는 선언되면, 선언과 함께 초기화가 이뤄진다. 그리고 선언된 변수는 함수 스코프를 가지게 된다. 그 결과 함수 내에서는 그 어떤 곳에서든 사용이 가능해진다는 말이기도 하다. 그런데 이렇게 되면 의도지 않은 상황에서 변수의 값이 변경될 수 있었고, 이것을 인지하지 못한 결과 에러를 초래할 수 있는 위험을 잠재하고 있었다.

function foo() {
  var count = 0;
  console.log("count:", count); // 0
  
  if (true) {
    var count = 1; // 의도치 않은 중복 선언
    console.log("count:", count); // 1
  }
  
  console.log("count:", count); // 1
}

foo();

JS에는 인터프리터 언어이다. 즉 위에서부터 아래로 한줄씩 읽어가며 내용이 실행되는 언어이다. 그러기에 3번째 줄의 콘솔은 바로 위에서 선언된 변수의 값이 출력된다. 그러나 문제는 조건문의 2번째 줄에 있다. 동일한 식별자의 명이 선언되면, 함수스코프에서 현재 선언 중인 기존의 식별자는 내용이 덮어씌어지는 문제가 발생되는 것이다. 이러한 에러를 잠재하고 있던 var로 인해서, let과 const가 ES6에서는 추가되었다.

let 키워드(블록스코프)는 선언되면, 선언과 초기화가 분리되어 이뤄지며, 블록스코프를 가지며 선언된다. 나아가 let은 변수의 값을 재할당하여 변경할 수 있지만, 기존의 var가 가지고 있던 한계가 극복되어, 같은 이름으로 변수를 재선언하는 것은 불가능하다는 것이며, 이를 통해서 코드의 안정성이 높아지게 되었다.

const 키워드(블록스코프)는 선언과 함께 값을 할당해야 한다. 즉 재할당이 불가능한 키워드가 const 인데, 이러한 특징으로 상수라고 불리기도 한다. 그럼에도 해당 키워드로 선언된 식별자가 객체나 배열을 대입받고 있다면 메모지에 저장되는 특징으로 그 내의 값이 변경될 수 있기도 하다. 그러기에 완전한 상수라고 부를 수는 없다.

profile
신학전공자의 개발자 도전기!!

0개의 댓글