[JavaScript] 1. JavaScript의 기초, 변수와 식별자에 대해

개인적으로 JavaScript를 공부하고 그 흔적을 남기는 곳입니다.

 

 

 

1. 서론

• ECMA : 정보 통신에 대한 표준을 제정하는 비영리 표준화 기구
  • 현재 자바스크립트의 표준이 되는 ES6는 ECMAScript6의 줄임말로, ECMA에서 제안하는 6번째 표준 명세를 말한다.
  • ES6는 2015년에 발표되어, ES2015라고도 하며 이 시기를 기점으로 자바스크립트에 대대적인 변화가 있었다.

 

• 세미콜론
  • 자바스크립트는 반드시 세미콜론을 문장의 끝에 붙이지 않아도 된다.
  • 세미콜론이 없는 경우, ASI(Automatic Semicolon Insertion)에 의해 자동으로 세미콜론이 삽입된다.
  • 다양한 코딩 스타일이 있지만, 대표적으로는 에어비앤비의 자바스크립트 코딩 스타일을 따른다.

airbnb/javascript

 

2. 변수와 식별자

• 식별자(identifier) : 변수를 구분할 수 있는 변수명을 말한다.
  • 반드시 문자, $, _ 로 시작해야 한다.
  • 대소문자를 구분하며, 클래스명 외에는 모두 소문자로 시작한다.
  • 자바스크립트 예약어 (ex. for, if..등)은 사용할 수 없다.

 

• 식별자 작성 스타일
  • 변수, 객체, 함수명에는 카멜 케이스를 사용한다.
  • 클래스, 생성자에는 파스칼 케이스를 사용한다.
  • 상수에는 대문자 스네이크 케이스를 사용한다.

 

• let과 const
  • let : 재할당O, 재선언X, 블록 스코프
  • const : 재할당X, 재선언X, 블록 스코프
  • 즉 let은 선언 후 다시 값을 할당하는 것만 가능하고, 중괄호 {} 안에서만 그 효력 범위를 갖는다.
  • 반면 const는 재선언과 재할당이 모두 불가능하고, let과 같이 중괄호 {} 안에서만 효력 범위를 갖는다.

 

• var
  • 재선언O, 재할당O, 함수 스코프
  • let과 const가 나오기 이전에 자바스크립트에서 변수를 선언할 때는 var 키워드를 사용하였다.
  • var는 호이스팅(Hoisting)의 특성에 의해 예기치 못한 문제가 발생할 수 있으므로 ES6부터는 let과 const를 사용하는 것이 권장된다.

 

• 호이스팅 이란?
  • Hoist는 끌어 올리다라는 뜻을 가진 영단어이다.
  • 즉 변수의 선언이 위로 끌어 올려지는 현상을 말하는 것인데, 아래의 예시를 보며 더 자세히 설명하겠다.

console.log(hoisted)
var hoisted = 'can you see me?' // var의 선언이 hoist 되어 console 보다 먼저 선언되며, undefined 가 들어간다.

console.log(lunch)
const lunch = '초밥' // var와는 다르게, const도 hoist는 되지만, 초기화가 되지 않으므로 어떤 값도 할당되지 않는다.

console.log(dinner)
let dinner = '스테이크'

var hoisted가 console.log 보다 아래에 있지만, 호이스팅 현상으로 인해 변수 선언이 console.log보다 끌어 올려진다.

따라서 console.log(hoisted)도 에러가 나지 않고, 값이 없는 "undefined"가 출력되게 된다.

 

let과 const도 호이스팅이 안되는 것은 아니다! 호이스팅으로 인해 선언이 끌어 올려지긴 한다!!!

 

다만 var와 다르게 let과 const는 선언과 초기화 단계 사이에 TDZ(Temporal Dead Zone : 일시적 사각지대)라고 하는 것이 있어서 초기화가 되기 전에 해당 변수를 사용하려 할 경우 ReferenceError를 내뿜는다.

 

그러므로 ES6+ 부터는 변수를 선언할 때 let과 const의 사용을 권장하고 있다!