🌙 14일차 - [ javascript ] 핵심 개념과 주요 문법 -

오늘 배운 내용은

1. 스코프
2. 클로저

핵심 내용만 정리해 보려고 한다.

---

1. 스코프

• 변수의 유효범위로 사용된다.
• 범위가 중괄호(블록) 또는 함수에 의해 나누어지고, 그 범위를 스코프라고 부른다.

안쪽 스코프, 바깥 스코프 구분

전역 스코프, 지역 스코프

• 가장 바깥 스코프는 전역 스코프로 불림
• 안쪽 스코프, 즉 전역 스코프가 아닌 것은 전부 지역 스코프로 불림

스코프 규칙

• 스코프는 중첩이 가능하다.
• 지역 변수는 전역 변수보다 더 높은 우선순위를 가진다.
• 안쪽 스코프에서 바깥 스코프에 있는 변수에 접근이 가능
• 반대로 바깥 스코프에서는 안쪽 스코프에 있는 변수에 접근이 불가능

스코프 종류

1. 블록 스코프 : 중괄호 기준 범위 (중괄호 안의 범위)

   함수에 fucntion 키워드 없이 사용하면 블록 스코프
   (화살표 함수 포함)

2. 함수 스코프 : 함수로 둘러싼 범위

   함수에 function 키워드를 사용하면 함수 스코프
   (화살표 함수 포함)

🔍 스코프 추가적인 부분

• var 키워드는 블록 스코프를 무시한다.

  for(var i = 0; i < 5; i++){
  }
  console.log( i ) => 블록 스코프 밖에서 실행이 된다.

• 단, 화살표 함수의 블록 스코프는 무시하지 않는다.

• var 키워드로 인한 위험성도 있기 때문에,
  안전하게 사용이 가능한 let , const 를 이용해야 함

---

2. 클로저

• 함수와 함수가 선언된 어휘적(lexical) 환경의 조합
• 외부 함수의 변수에 접근할 수 있는 내부 함수
• 스코프 체인이라고도 불림

클로저의 3가지 스코프 체인

1. 클로저 자신에 대한 접근(자신의 블럭내에 정의된 변수)
2. 외부 함수의 변수에 대한 접근
3. 전역 변수에 대한 접근

🔔 클로버 예시

function outerFn() {
const outerFnVar = 'outer 함수 내의 변수';
const innerFn = function () {
return (
'innerFn은 ' + outerFnVar + '와 ' + globalVar + '에 접근할 수 있습니다.');
};
return innerFn;
}
// innerFn 함수에서는 문자열을 리턴 / 어디로 ? outerFn 함수로
// outerFn 함수에서는 innerFn 함수를 리턴 / 어디로 ? 외부로
const innerFnOnGlobal = outerFn();
// outerFn 함수 실행결과를 innerFnOnGlobal에 지정
const message = innerFnOnGlobal();
// innerFnOnGlobal()에는 innerFn 함수의 주소값이 들어가 있다. 그걸 message에 지정해주면 innerFn 함수의 리턴 값이 들어감
console.log(message);

클로저 구분

---

💬 이해가 완벽하게 되지 않았거나 복습해야 한다고 생각하는 점

1. 위의 예시에만 이해가 된 것 같아서 구글링을 통해서 클로저 예시를 더 많이 보고 딥하게 이해를 해야 할 것 같다.

2. 위의 예시를 볼 때 outerFn 함수에 어떠한 값이 있다면
   함수 외부에서 outerFn() 값이 어떻게 될 지 예상이 안된다.
   아마 1번의 이유인 것 같다.

클로저 참고 문서 링크 :

http://clipsoft.co.kr/wp/blog/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%81%B4%EB%A1%9C%EC%A0%80closure/