끝판왕 클로저를 뿌시러 가는 여정

스코프

Before ES6 (2015), JavaScript had only Global Scope and Function Scope. ES6 introduced two important new JavaScript keywords: let and const. These two keywords provide Block Scope in JavaScript. _w3schools

Function-level scope인 자바스크립트는 ES6부터는 다른 프로그래밍 언어처럼 const와 let을 이용해 블록 레벨 스코프를 지원하기 시작했다. const와 let은 블록 레벨 스코프, 오래된 var 변수는 함수 레벨 스코프이다.

---

스코프, 유효 범위란?

• 블록 {} 또는 함수에 의해 나눠지는, 변수에 접근할 수 있는 유효 범위를 스코프라고 한다.

• 가장 바깥쪽의 스코프를 전역 스코프(global scope)라고 하며 전역 스코프에 선언한 변수는 전역 변수이다.

• 그 외의 스코프는 모두 지역 스코프(local scope)이며, 지역 스코프에 선언한 변수는 지역 변수이다.

블록 레벨 스코프

if (true) {
	let lastName = 'kim'
}
console.log(lastName) // ReferenceError

⇒ let, const 키워드로 선언된 변수는 if, for, while... 등 모든 코드 블록을 스코프로 간주한다.

함수 레벨 스코프

if (true) {
	var lastName = 'kim'
}
console.log(lastName) // 'kim'

⇒ var 키워드로 선언된 변수는 함수 function(){}만 지역 스코프로 간주한다.

let name = () => {
  	let lastName = 'kim'
	return lastName
}

console.log(lastName) // ReferenceError

---

let과 const 그리고 var

변수 let과 상수 const, let은 왜 let일까

	let	const	var
유효범위	블록 스코프 및 함수 스코프	블록 스코프 및 함수 스코프	함수 스코프
값 재할당	가능	불가능	가능
재선언	불가능	불가능	가능

---

전역 변수와 지역 변수

우선순위

지역 변수는 전역 변수보다 더 높은 우선 순위를 가진다. 즉 안쪽에 있는 변수가 우선이다. 위 예시처럼 name과 age같이 변수 이름이 동일할 때, 내부 변수에 의해 외부 변수가 덮어씌워지는 현상을 쉐도잉(variable shadowing)이라고 한다.

스코프 체인 (Scope chain)

city 변수같은 경우에 지역 변수에 없어, 바깥쪽의 전역 스코프에서 city 변수를 찾는다. 이처럼 만약 지역 스코프 내부에서 변수를 참조할 때 해당 스코프에 선언이 없으면, 한 단계씩 바깥 스코프로 범위를 넓히며 변수를 탐색하는 것을 말한다.(아래 그림 참고)

window 객체

• 브라우저 창을 대표하는 객체, 하지만 브라우저 창과 관계없는 전역 항목도 담고 있다.
• 함수 선언식으로 선언한 함수와 var로 전역 함수를 만들면 window 객체에서 찾을 수 있다.

var carName = "Volvo";
// code here can use window.carName

let carName = "Volvo";
// code here can not use window.carName

!!주의사항!!

• 전역 변수는 어디에서든 접근이 가능하다는 특징 대신, 의도치 않은 사이드 이펙트를 야기할 수도 있다.
• 전역 변수를 var로 선언하는 것은 window 내장 기능을 사용하지 못하게 할 수도 있다.
• 선언 없이 변수를 할당하면, 해당 변수는 var로 선언한 전역 변수처럼 취급된다.

myFunction();

// code here can use carName

function myFunction() {
  carName = "Volvo";
}

Strict mode

'use strict'

All modern browsers support running JavaScript in "Strict Mode". In "Strict Mode", undeclared variables are not automatically global.

• 'strict mode'에서는 선언되지 않은 변수가 자동으로 전역 변수가 되지 않는다.
• js 파일 상단에 입력한다.
• 문법적으로 실수할 수 있는 부분을 방지한다.

---

출처

js scope | w3schools
JavaScript Visualized: Scope