함수와 변수선언 3가지씩 정리

*선언과 할당

- 선언 : 변수명을 자바스크립트 엔진에 알리는 것

- 할당 : 변수에 값을 저장하는 것(=할당연산자)

 

=> 변수선언은 '선언 - 초기화 - 할당'의 3단계를 거친다. 이를 lifecycle이라고도 한다.

i)선언단계(Declaration phase) : 변수를 실행 컨텍스트의 변수 객체에 등록. 이 객체가 스코프가 참조하는 대상이 된다.

ii)초기화단계(Initialization phase) : 선언단계의 변수 객체를 위한 메모리는 만드는 단계. 할당된 메모리는 undefined로 초기화

iii)할당단계(Assignment phase) : 사용자가 undefined로 초기화된 메모리의 다른 값을 할당하는 단꼐

 

*TDZ(Temporal Dead Zone)

직역하면 일시적인 사각지대라는 뜻인데, 스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 말한다.

 

 

1. 각 변수의 라이프사이클

1) var : 변수 선언 전에 선언 단계와 초기화 단계를 동시에 진행. 재할당/재선언 모두 가능

var name = "name1"
console.log(name) // name1

var name = "name2"
console.log(name) // name2

 

2) let : 선언단계와 초기화 단계가 분리되어서 진행. 실행 컨텍스트에 변수를 등록했지만 TDZ구간에서 메모리가 할당되지 않아 접근할 수 없기에 참조에러(ReferenceError)가 발생하는 것이다.

let value = "value1"
console.log(value) // value1

value = "value2" // 재할당 가능
console.log(value) // value2

let value = "value3" // 재선언 불가능, SyntaxError: Identifier 'value' has already been declared

 

3) const :선언과 동시에 할당을 진행하며, 그렇기에 재할당이 금지된다.그래서 상수라고도 한다.

const value; // 초기값 없이 선언 불가능, SyntaxError: Missing initializer in const declaration
---
const value = "value1"
console.log(value) // value1

value = "value2" // 재할당 불가능, TypeError: Assignment to constant variable.

const value = "value2" // 재선언 불가능, SyntaxError: Identifier 'value' has already been declared

 

2. 함수

1)함수 선언식

function 함수명() {
  구현 로직
}

 

2)함수 표현식

// 예시
var funcExpression = function () {
    return 'A function expression';
}
funcExpression(); // 'A function expression'

 

*둘의 차이점 : 함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않는다.

 

3)화살표 함수 

a. function이나 retrun 키워드 없이 함수를 만드는 방법. ES6에서 처음 도입

// ES5
function func() {
	return true
}

//ES6
const func = () => true
const func = () => {
	return true
}

 

 b. 화살표 함수는 실행 컨텍스트 생성 시, this를 바인딩하는 과정이 제외됨. 이 함수 내부에는 this의 할당과정이 아예 없으며, 접근코자 하면 스코프체인상 가장 가까운 this에 접근하게 됨.