Scope
JavaScript에서의 스코프는 "변수의 유효범위"로 사용
변수 접근 규칙
변수에 접근할 수 있는 범위가 존재합니다. 중괄호(블록) 안쪽에 변수가 선언되었는가, 바깥쪽에 변수가 선언되었는가가 중요
코프는 "변수 접근 규칙에 따른 유효 범위"입니다.
- 안쪽 스코프에서 바깥쪽 스코프로는 접급할 수 있지만 반대는 불가능
- 스코프는 중첩이 가능하다. > 가장 바깥쪽 전역 스코프 (Global Scope) 전역이 아닌 다르른 스코프는 전부 지역 스포크 (Local Scope)
- 지역 변수는 전역 변수보다 높은 순위를 가진다.
스코프의 종류
- 블록 스코프 > 중괄호를 기준으로 범위가 구분
- 함수 스코프 > function 키워드가 등장하는 함수 선언식 및 함수표현식은 함수 스코프를 만듬 ⇒ 화살표 함수는 블록스코프로 취급
var , let , const 키워드
var 키워드로 정의한 변수는 블록 스코프를 무시하고, 함수 스코프만 따릅니다. 그러나, 모든 블록 스코프를 무시하는 건 아닙니다. 화살표 함수의 블록 스코프는 무시하지 않습니다.
함수 스코프는 함수의 실행부터 종료까지이고, var 선언은 함수 스코프의 최상단에 선언됩니다. 선언 키워드 없는 선언은 최고 스코프에 선언됩니다.
let 키워드는 재선언을 방지합니다.
const 키워드는 변하지 않는 값, 곧 상수(constant)를 정의할 때에는 const를 이용, 값의 재할당이 불가능합니다.
⇒ let, const와 var의 차이점은 무엇보다 유효범위에 있다
변수 선언 시 주의사항
- 전역 변수는 최소화 > 전역 변수는 어디서든 접근이 가능 , 편리한 대신 다른 함수 로직에 의해 의도되지 않은 변경이 발생할 수 있음 - side effect
- let, const 사용 > var는 블록 스코프 무시, 재선언에도 에러가 없음 , 전역 변수로 vat선언하는 경우 문제가 될 수 있음.
- 선언 없는 변수 할당 금지 > 해당 변수는 var로 선언한 전역변수처럼 취급 > strict mode
Closure
"함수와 함수가 선언된 어휘적(lexical) 환경의 조합을 말한다. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다.”
⇒ 외부 함수의 변수에 접근할 수 있는 내부 함수
클로저 함수 특징
- 클로저 함수는 "함수를 리턴하는 함수" 라는 점입니다. 함수를 리턴하는 함수가 클로저의 형태를 만듭니다.
- 외부 함수와 내부 함수
const adder = function (x) { ← 외부 함수의 변수 x , 외부 함수
retrun function (y) { ← 내부 함수의 변수 y , 내부 함수
retrun x + y;
retrun function (y) { ← 내부 함수의 변수 y , 내부 함수
retrun x + y;
}
}⇒ 내부 함수는 외부 함수에 선언된 변수에 접근 가능하다
클로저의 활용
- 데이터를 보존하는 함수
const adder = function (x) {
retrun function (y) {
retrun x + y;
}
}const add5 = adder ( 5 );← 함수 실행이 끝나도 값은 사용가능
외부 함수의 실행이 끝나더라도, 외부 함수 내 변수(x)를 사용할 수 있다.
- 클로저 모듈 패턴 → 정보의 접근 제한
- 모듈화 → 함수 재사용성을 극대화하여, 함수 하나를 완전히 독립적인 부품 형태로 분리하는 것
Destructuring assignment
구조 분해 할당
구조 분해 할당은 spread 문법을 이용하여 값을 해체한 후, 개별 값을 변수에 새로 할당하는 과정을 말합니다.
분해 후 새 변수에 할당
배열
const [a, b, ...rest] = [10, 20, 30, 40, 50];
// a, b, rest > 10 , 20 , [30, 40, 50]객체
- 객체에서 구조 분해 할당을 사용하는 경우, 선언(
const,let,var)과 함께 사용하지 않으면 에러가 발생할 수 있습니다. - 선언 없이 할당하는 경우, 이 콘텐츠의 하단에 있는 공식 문서 링크를 통해 내용을 확인할 수 있습니다.
const {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}
// a, b, rest > 10 , 20 , {c: 30, d: 40}유용한 예제: 함수에서 객체 분해
function whois({displayName: displayName, fullName: {firstName: name}}){
console.log(displayName + " is " + name);
}
let user = {
id: 42,
displayName: "jdoe",
fullName: {
firstName: "John",
lastName: "Doe"
}
};
whois(user) // jdoe is John