[JavaScript] 스코프(Scope)

스코프를 알아보기 전에 함수 선언식과 함수 표현식에 대해 알아보자.

1. 함수 선언식 (Function Declaration)

• function 키워드를 사용해서 함수를 선언한다.
• 함수가 실행되기 위해서는 호출을 해야한다.
• 호이스팅(hoisting) 이 발생한다.

function sum(a, b) {
	return a + b;
}

2. 함수 표현식 (Function Expression)

• 변수를 선언해서 함수를 할당한다.
• 이후 코드에서 변수를 사용함으로써 함수가 호출이 된다.
• 호이스팅이 일어나지 않는다. (엄밀히 말해서 호이스팅이 발생하지 않는 것 처럼 보인다.)

const sum = function (a, b) {
	return a + b;
}

함수 표현식을 사용하면 좋은 점?

호이스팅이 일어나는 상황을 지양하기 위해 되도록이면 함수 표현식을 이용해서 코드를 작성하는 것이 좋다.

참고: Function Declarations vs. Function Expressions
https://medium.com/@mandeep1012/function-declarations-vs-function-expressions-b43646042052

스코프(Scope)

"모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다. 이를 스코프라 한다. 즉, 스코프는 식별자가 유효한 범위를 말한다." - 모던 자바스크립트 Deep Dive p. 190

내가 이해하기 쉬운 스코프의 정의는, "변수에 접근할 수 있는 유효 범위" 이다.

스코프는 몇 가지 특징이 있다.

• 범위는 코드블록 {} 또는 함수에 의해 나뉘어진다.
• 안쪽 스코프에서 바깥쪽 스코프로 접근할 수 있다. 하지만, 반대의 경우는 불가능하다. (안에서 밖을 바라볼 수 있고 밖에서는 안이 보이지 않는 창문을 상상하면 이해하기 조금 쉽다.)
• 중첩이 가능하다.
• 안쪽 스코프를 지역 스코프(local scope)라고 하고, 가장 바깥의 스코프는 전역 스코프(global scope) 라고 한다.
  • 지역 스코프에서 선언된 변수는 지역 변수(local variable)
  • 전역 스코프에서 선언된 변수는 전역 변수(global variable)
• 지역 스코프가 전역 스코프 보다 높은 우선순위를 가진다. 마찬가지로, 지역 변수가 전역 변수보다 더 높은 우선순위를 가진다.

JavaScript 는 변수를 참조(refer)할 때 스코프를 통해 변수를 참조한다.
지역 스코프에서 찾고, 없으면 → 상위 스코프 → ... → 전역 스코프 순으로.