1. scope

• 변수에 접근할 수 있는 범위

01. 전역 스코프(Global Scope)

• 말 그대로 전역에 선언되어있어 어느 곳에서든지 해당 변수에 접근할 수 있다는 의미

02. 지역 스코프(Local Scope)

• 해당 지역에서만 접근할 수 있어 지역을 벗어난 곳에선 접근할 수 없다

03. 함수 스코프(function-scoped)

• 자바스크립트에서 함수를 선언하면 함수를 선언할 때마다 새로운 스코프를 생성하게 됩니다. 그러므로 함수 몸체에 선언한 변수는 해당 함수 몸체 안에서만 접근, 함수 스코프가 바로 지역 스코프

04. 블록 스코프(block scoped)

• 블록(block)이란 중괄호로 둘러싸인 부분을 블록, 함수를 선언할 때 중괄호로 함수 본문을 둘러싸게 되는데 이부분을 블록
• 기존 var의 경우 함수 스코프를 가졌기 때문에 함수 내에서만 지역변수가 유지되는 문제가 있었는데요. ES2015(ES6)에서 let / const 키워드가 추가되면서 함수가 아닌 일반 블록에서도 지역변수를 선언할 수 있게 되었습니다.

05. 렉시컬 스코프(Lexical Scope)

• JavaScript는 Lexical Scope(또는 Static Scope)를 따르고 있습니다. Lexical Scope란 함수를 어디서 선언하였는지에 따라 상위 스코프를 결정하는 것, 중요한 점은 함수의 호출 이 아니라 함수의 선언에 따라 결정된다는 점

var number = 1;
function a() {
  var number = 10;
  b();
}
function b() {
  console.log(number);
}
a(); // ?
b(); // ?

? 10 // a() 결과 X
? 1 // b() 결과 X

1 // a() 결과
1 // b() 결과

• 함수의 호출에 따라 상위 스코프가 정해지는 것을 Dynamic Scope라고도 합니다. Perl, Bash Shell 등에서 Dynamic Scope를 따릅니다.

2. this

• this는 기본적으로 최상위 객체인 window를 가리킨다, 하지만 문법에 따라 this가 가리키는 것은 달라진다
• 함수를 어떤 객체의 메소드로 호출하면 this의 값은 그 객체를 사용
• ES2015는 스스로의 this 바인딩을 제공하지 않는 화살표 함수를 추가
• function 키워드는 해당 객체를 바인딩하여 this의 값을 변경
• new 키워드를 통해 객채를 생성하면, this가 해당 객체에 바인딩 되어 해당 값을 읽게 되는 것입니다, es6에 추가된 class를 사용하면 동일하게 작동하는 것을 볼 수 있습니다

01. 실행 컨텍스트(Execution Conetext)

• 자바스크립트 코드가 실행되고 연산되는 범위를 나타내는 추상적인 개념

02. Global Execution Context

• 기본적으로 코드가 실행되는 영역이며 여기서 글로벌 객체인 Window 객체를 생성하며, this를 글로벌 객체(Window 객체)로 설정

03. Functional Execution Context

• 각각의 함수가 가지는 실행 컨텍스트로, 함수가 호출될 때 해당 실행 컨텍스트 생성

04. apply(), call(), bind() ?

• this를 자유자제로 바꿀 수 있도록 해주는 메소드

const Tom = {
  age: 25,
  gender: 'man',
};

function printProfile(name) {
  console.log(name, this.age, this.gender);
}

printProfile.apply(Tom, ['Tom']); // Tom 25 man
printProfile.call(Tom, 'Tom'); // Tom 25 man
printProfile.bind(Tom, 'Tom').call(); // Tom 25 man

• apply : call 함수와 유사하지만, 매개변수는 배열로 받는것에 있어 차이가 있다.

• call : 객채를 바인딩 함과 동시에 호출을 한다.

• bind : 바인딩이된 함수를 반환하며, 한번더 호출시 함수를 실행한다.

• Execution context 가 만들어질 때 this 가 바인딩이 되기 때문이다.

• 바인딩이란 객체와 함수를 묶어주는 현상

3. 클로저(closure)

• 어떤 함수 A에서 선언한 변수 b를 참조하는 내부함수 C를 외부로 전달할 경우
• A의 실행 컨텍스트가 종료된 이후에도 변수 b가 사라지지 않는 현상
• 외부 함수의 변수에 접근할 수 있는 내부 함수 또는 이러한 작동 원리를 일컫는다.
• 함수와 함수가 선언된 어휘적 환경의 조합
• 클로저는 함수와 그 함수가 선언될 당시의 lexical environment의 상호관계에 따른 현상
• 자신을 내포하는 함수의 컨텍스트에 접근할 수 있는 함수
• 함수가 특정 스코프에 접근할 수 있도록 의도적으로 그 스코프에서 정의하는 것
• 함수를 선언할 때 만들어지는 유효범위가 사라진 후에도 호출할 수 있는 함수
• 이미 생명 주기상 끝난 외부 함수의 변수를 참조하는 함수
• 자유변수가 있는 함수와 자유변수를 알 수 있는 환경의 결합

function outerFn() {
let outerVar = 'outer';
console.log(outerVar);

function innerFn() {
let innerVar = 'inner';
console.log(innerVar);
}
return innerFn;
}

let globalVar = 'global';
let innerFn = outerFn();
innerFn();

• 클로저 함수 안에서는 지역 변수(innerVar), 외부 함수의 변수(outerVar), 전역 변수(globalVar)의 접근이 전부 가능하다.

• 클로저 활용 사례

  • 콜백 함수 내부에서 외부 데이터를 사용하고자 할 때
  • 접근 권한 제어(정보 은닉)
  • 부분 적용 함수
  • 커링 함수