[JavaScript] 스코프, 클로저 개념정리

FMA·2024년 3월 30일

HTML/CSS/JS

목록 보기

5/9

1. 스코프

1. 스코프 주요 규칙

스코프는 블록(중괄호) 또는 함수에 의해 나뉜다.
바깥 스코프에 정의된 변수는 안쪽 스코프에서 사용할 수 있다.안쪽 스코프에 정의된 변수는 바깥 스코프에서 사용하지 못한다.

let username = 'Dyract';
if (username) {let message = `Hello, ${username}!`;
console.log(message);// ?}console.log(message);// ?

출력 :

"Hello, Dyract!"
ReferenceError

4번째 줄에서 message를 출력할 때는 3번째 줄의 username을 바깥 스코프에서 가져왔으므로 정상적으로 출력한다.

6번째 줄에서는 message라는 변수 자체가 안쪽 스코프에 선언되어 있으므로 바깥쪽에서 접근할 수 없다.

스코프는 중첩이 가능하다.
- 전역 스코프(Global Scope) : 가장 바깥쪽의 스코프
- 지역 스코프(local Scope) : 전역이 아닌 다른 스코프
지역 변수는 전역 변수보다 더 높은 우선순위를 가진다.
- 전역 변수 : 전역 스코프에서 선언한 변수
- 지역 변수 : 지역 스코프에서 선언한 변수

let name = '김영희';

function showName() {
	let name = '김철수';// 지역 변수
	console.log(name);// 두 번째 출력
}

console.log(name);// 첫 번째 출력
showName();
console.log(name);// 세 번째 출력

출력 :

김영희
김철수
김영희

전역 변수 name과 function showName에 선언된 지역 변수 name은 서로 다른 변수이다.

let name = '김영희';

function showName() {name = '김철수';
console.log(name);// 두 번째 출력}console.log(name);// 첫 번째 출력showName();
console.log(name);// 세 번째 출력

출력 :

김철수
김영희
김영희

지역 스코프에서 새로 선언되지 않은 변수는 전역 변수와 같은 변수이다.

2. 스코프의 종류

블록 스코프(block scope) : 중괄호를 기준으로 범위 구분
- 화살표 함수는 블록 스코프로 취급
- 블록 스코프 안에서 정의된 변수는 블록 범위를 벗어나는 즉시 접근할 수 없음
함수 스코프(function scope) : function 키워드가 등장하는 함수 선언식 및 함수 표현식이 만드는 스코프

3. var, let, const

var : 블록 스코프를 무시하고 함수 스코프만 따름. -> var보다는 let으로 선언하는 것을 권장
let : 재선언 방지(에러 출력)
const : 값이 변하지 않는 상수를 정의할 때 사용, 값을 새롭게 할당할 일이 없다면 const 사용 권장

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

4. 변수 선언 시 유의할 점

var로 선언된 전역 변수 및 지역 변수는 window 객체에 속한다.
- window 객체는 브라우저의 창을 의미하는 객체이지만, 전역 영역을 담고 있기도 하다.
전역 변수에 너무 많은 변수를 선언하면 안 된다.
- 앱을 만들 때에는 직접 작성하지 않은 수많은 다른 함수와 로직이 포함되어 전역 변수의 이름이 겹칠 수 있음. (side effect)
- -> 전역변수 최소화는 side effect를 줄일 수 있는 좋은 방법
var은 블록 스코프를 무시하며, 재선언을 해도 에러를 내지 않는다.
- 같은 스코프에서 동일한 이름의 변수를 재선언하는 것은 에러 유발
전역 변수를 var로 선언하는 경우 문제가 될 수 있다.
- var로 선언한 변수가 window 기능을 덮어씌워서 내장 기능을 사용할 수 없게 만들 수 있음
선언 키워드(var, let, const) 없이 변수를 할당해서는 안 된다.
- 선언 키워드 없이 할당하면 var로 선언한 전역 변수처럼 취급
- 실수 방지하기 위해 Strict Mode 사용 가능

'user strict';//문법적으로 실수할 수 있는 부분을 에러로 판단
finction showAge() {‌
	age = 90;// 여기서 에러가 발생
	console.log(age);//90
}
showAge();

2. 클로저

클로저 : 함수와 함수가 선언된 어휘적(lexical) 환경의 조합. 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역변수로 구성됨.

클로저 함수 : 외부 함수의 변수에 접근할 수 있는 내부 함수

1. 클로저 함수의 특징

함수를 리턴하는 함수

const adder = x => y => x + y;
adder(5)(7);//12

이와 같이 화살표를 두 번 사용한 함수를 기본 형태로 바꾸면 다음과 같다.

const adder = function(x) {‌
	return function(y) {
		‌‌return x + y;
	‌}
}

함수에 의해 스코프가 구분된다.

외부 함수는 y에 접근 불가능
내부 함수는 x에 접근 가능

2. 클로저 함수의 활용

데이터 보존하기

: 외부 함수의 실행이 끝나더라도 외부 함수 내 변수를 사용할 수 있음

const adder = function(x) {
	‌return function(y) {
		‌‌return x + y;
	‌}
}
const add5 = adder(5);
add5(7)//12
add5(10)//15

클로저 모듈 패턴

: 내부 함수를 단 하나만 리턴하는 것에 그치지 않고, 객체에 담아 여러 개의 내부 함수를 리턴하도록 만듦.

const makeCounter = () => {‌
	let value = 0;

	return {
		‌increase: () => {
			‌value = value + 1
		},
		decrease: () => {
			‌value = value - 1
		},
		getValue: () => value
		}
}

const counter1 = makeCounter();
counter1// { increase : f, decrease : f, getValue : f }, type: 객체

value라는 변수에 값을 새롭게 직접 할당할 수 없음. (지역변수)

=> 정보의 접근 제한(캡슐화), 의도치 않은 전역 변수 생성 방지

const counter1 = makeCounter();
const1.increase();
const1.increase();
const1.decrease();
const1.getValue();// 1const counter2 = makeCounter();
const2.decrease();
const2.decrease();
const2.decrease();
const2.getValue();// -3