Variables & Identifiers (변수와 식별자)
식별자 정의와 특징
- 식별자(identifier)는 변수를 구분할 수 있는 변수명을 말함
- 식별자는 반드시 문자, 달러($) 또는 밑줄(_)로 시작
- 대소문자를 구분하며, 클래스명 외에는 모두 소문자로 시작
- 예약어 사용 불가능
- 예시:
for
,if
,case
등
- 예시:
식별자 작성 스타일
- 카멜 케이스(camelCase, lower-camel-case)
- 변수, 객체, 함수에 사용
- 파스칼 케이스(PascalCase, upper-camel-case)
- 클래스, 생성자에 사용
- 대문자 스네이크 케이스(SNAKE_CASE)
- 상수에 사용
- 상수 : 개발자의 의도와 상관없이 변경될 가능성이 없는 값
- 상수에 사용
// 카멜 케이스
const userInfo = { name: 'Theo', age: 100 }
// 파스칼 케이스
class User {
constructor(options) {
this.name = options.name
}
}
// 스네이크 케이스
const API_KEY = 'a1b2c3d4'
변수 선언 키워드 (let, const)
let
- 재할당 할 수 있는 변수 선언 시 사용
- 변수 재선언 불가능
- 블록 스코프
const
- 재할당 할 수 없는 변수 선언시 사용
- 변수 재선언 불가능
- 블록 스코프
// 선언, 할당, 초기화
let foo // 선언
console.log(foo) // undefined
foo = 11 // 할당
console.log(foo) // 11
let bar = 0 // 선언 + 할당
console.log(bar) // 0
- 선언 (Declaration)
- 변수를 생성하는 행위 또는 시점
- 할당 (Assignment)
- 선언된 변수에 값을 저장하는 행위 또는 시점
- 초기화 (Initialization)
- 선언된 변수에 처음으로 값을 저장하는 행위 또는 시점
// let (재할당 가능)
let number = 10 // 1. 선언 및 초기값 할당
number = 10 // 2. 재할당
console.log(number) // 10
// const (재할당 불가능)
const number = 10 // 1. 선언 및 초기값 할당
number = 10 // 2. 재할당 불가능
=> Uncaught TypeError
:Assignment to constant variable.
- 재선언은
let
,const
모두 불가능
블록 스코프
if
,for
, 함수 등의 중괄호 내부를 가리킴- 블록 스코프를 가지는 변수는 블록 바깥에서 접근 불가능
변수 선언 키워드 (var)
var
로 선언한 변수는 재선언 및 재할당 모두 가능- ES6 이전에 변수를 선언할 때 사용되던 키워드
- 호이스팅되는 특성으로 인해 예기치 못한 문제 발생 가능
- 따라서 ES6 이후부터는 var 대신 const와 let을 사용하는 것을 권장
- 함수 스코프
// 재선언 및 재할당 모두 가능
var number = 10 // 1. 선언 및 초기값 할당
var number = 50 // 2. 재할당
console.log(number) // 50
- 함수 스코프
- 함수의 중괄호 내부를 가리킴
- 함수 스코프를 가지는 변수는 함수 바깥에서 접근 불가능
- 호이스팅 (hoisting)
- 변수를 선언 이전에 참조할 수 있는 현상
- 변수 선언 이전의 위치에서 접근 시 undefinded를 반환
정리
키워드 | 재선언 | 재할당 | 스코프 | 비고 |
---|---|---|---|---|
let |
X | O | 블록 스코프 | ES6부터 도입 |
const |
X | X | 블록 스코프 | ES6부터 도입 |
var |
O | O | 함수 스코프 | 사용 X |
'Web > JavaScript' 카테고리의 다른 글
JS 기초_05 (Conditions & Loops) (0) | 2021.05.10 |
---|---|
JS 기초_04 (Types & Operators) (0) | 2021.05.10 |
JS 기초_02 (ECMAScript 6) (0) | 2021.05.09 |
JS 기초_01 (Event) (0) | 2021.05.09 |
JS 기초_00 (DOM) (0) | 2021.05.09 |