스코프(Scope)와 클로저(closer)

범위라는 뜻으로 컴퓨터 공학, 자바스크립트에서는 변수의 유효범위를 의미

스코프의 주요 규칙

중첩 규칙

let name = '정코딩'; //전역 변수

function showName() {
	let name = '정해커'; //지역 변수
}

• 스코프는 중첩이 가능
• 안쪽 스코프에서 바깥쪽 스코프로 접근하는 것만 가능
• 이때 가장 바깥쪽 스코프만 전역 스코프(Global Scope)
• 나머지는 모두 지역 스코프(Local Scope)
• 지역 변수는 전역 변수보다 더 높은 우선순위를 가진다

let name = '정코딩';

function showName() {
	//지역 스코프에서 새로운 변수로 선언
  let name = '박해커'; // 지역 변수
  console.log(name); // 두번째 출력
}

console.log(name); // 첫번째 출력 > 지역변수로 접근X
showName(); // 첫번째 출력 이후 실행
console.log(name); // 세번째 출력 > 지역변수로 접근X

// 정코딩
// 박해커
// 정코딩

block scope와 function scope

• block scope(블록 스코프) : 중괄호로 둘러싼 범위
• function scope(함수 스코프) : function 키워드가 등장하는 함수 선언식 또는 함수 표현식으로 만든 스코프
  • 화살표 함수는 블록 스코프로 취급

전역 스코프와 지역 스코프

let greeting = 'Hello';
// 여기서 부터 
function greetSomeone() {
	let firstName = 'Josh';
	return greeting + ' ' + firstName;
} // 여기까지 지역(안쪽) 스코프

// 지역 스코프를 제외한 바깥쪽 스코프는 전역 스코프
console.log(greetSomeone()); //'Hello Josh'
console.log(firstName); // ReferenceError

• 전역 스코프(Global Scope)에서 선언한 변수는 지역 스코프(Local Scope)에서 사용 가능
• 지역 스코프(Local Scope)에 선언한 변수는 전역 스코프(Global Scope)에서 사용 불가능

let/ const/ var

• let
  • 재선언을 방지 → 버그 제한
  • 블록 스코프 및 함수 스코프에 유효
• const
  • 값이 변하지 않는 상수(constant)를 정의
  • 재할당이 불가능 → 의도하지 않는 값의 변경 불가
  • 블록 스코프 및 함수 스코프에 유효
• var
  • 함수 스코프만 유효
  • 재선언이 가능 → 버그 유발

for ( let i = 0; i < 5; i++) {
 console.log(i); //다섯번 반복
}

console.log('final i:', i); //ReferenceError
// 블록 범위를 벗어나는 즉시 변수(i)를 사용할 수X

for ( var i = 0; i < 5; i++) {
 console.log(i); //다섯번 반복
}

console.log('final i:', i); //5
// var 키워드는 for 문이 만들어낸 블록 스코프를 무시하고 함수 스코프만 따른다

변수 선언에서 주의할 점

• var로 선언된 전역 변수 및 전역 함수는 window 객체에 속한다
• window는 브라우저에 있는 브라우저 창을 대표하는 객체
• 브라우저 창과 관계없이 전역 항목도 담고 있다
• 함수 선언식으로 함수를 선언하거나, var로 전역 변수를 만들면 window 객체에서도 동일한 값을 찾을 수 있다
• 전역 변수는 어디서든 접근이 가능하여 편리한 만큼 다른 함수 또는 로직에 의해 의도치않게 변경되는 문제가 생길 수 있으므로 너무 많은 변수를 선언 하지 않는 것이 좋다
• 선언 없이 변수를 할당할 경우 var로 선언한 전역 변수로 취급되니 선언 없는 변수X
• 실수를 방지하기 위해 Strict Mode 를 사용 ( 선언 없는 변수 할당과 같은 경우도 error로 판단)
  • js 파일 상단에 'use strict' 입력

+)

• 각각 다른 지역 변수에서 선언된 변수는 이름이 같아도 같은 변수X
• 함수를 정의할 때 적어준 매개변수

스코프 : 선언되지 않은 변수를 찾을 때 안에서 바깥으로 순차적으로 찾아가는 것

함수명(); // === 함수를 실행해라 // ()은 실행 연산자

클로저

• 함수와 함수가 선언된 어휘적 환경의 조합

• 실행이 종료된 외부 함수의 변수에 계속해서 접근할 수 있는 내부 함수

• 자신을 내포하는 함수의 컨텍스트에 접근할 수 있는 함수

• 함수 안에 함수가 있는데 안쪽 함수가 실행 된 이후 바깥 함수의 매개변수에 리턴되는 것 (스코프 함수의 경우 전역 함수에서 선언한 변수는 지역 함수에 사용할 수 있지만 지역 함수에서 선언한 함수는 전역 함수에서 사용X)

• 모듈화에 적합

• 재사용상을 높여서 코드의 양을 줄임

• 이해 예시

  • 시드니 === 외부함수(외부 스코프)
  • 화장실 === 내부함수
  • 오페라 === 외부함수의 (지역)변수
  • 시드니에 있던 화장실을 남극으로 철수했는데도 계속 오페라 하우스가 보인다???
    • 유리에 오펠 하우스 벽지를 붙여버렸다.
    • 화장실 스크린에 비친 잔영이 철거했는데도 따라온다

let seenYet = function() {
	//archive (안에서 리턴받음!!!)
	let archive = {name: "kimcoding", age: 29):
	
	return function(val) {
		if(archive[val]) { // archive (외부로 리턴함!!!)
			return true;
		};
		archive[val] = true; // archive (외부로 리턴함!!!)
		return false;
	};
};