내 머리속 JS - Scope(스코프)

JAEN·2020년 1월 20일
0

내머리속 JS 🙈

목록 보기
8/14

Scope :: 스코프

1. 스코프 란?

함수의 범위, 변수의 유효 범위
= 변수가 영향을 끼칠 수 있는 범위 (전역변수, 지역변수)

2. 스코프 종류

  • 전역변수 스코프 : 전체적인 범위에서 유효함.
    ex) 브라우저 (window), nodeJS(global)

    전역변수 지양 : 다른 외부 라이브러리 사용시 변수가 섞일 위험 있음

  • 지역변수 스코프
    함수, 메소드, 조건절 등 범위 내에만 유효함.

3. 스코프체인 (전역변수, 지역변수 관계) ⭐️⭐️⭐️

내부함수는 외부함수 변수 접근 가능 ⭕️, 반대는 불가능 ❌
= 변수 검색 매커니즘(선언한 변수 위치 인지 가능),
= 프로토타입 체이닝 (비슷한 동작 방식) :: 객체 프로퍼티 검색 메커니즘

변수를 찾을 때,
지역 스코프 > 전역 스코프로 범위를 넓히면서 찾음
자기 자신의 스코프, 가까운 스코프를 찾음

  • 변수가 어디에서 선언되었는지 정확히 알 수 있음

  • C코드 vs Javascript
    - C코드: {} 안에 선언된 변수는 블록이 끝나는 순간 사라짐
    - Javascript: for, if 구문 유효범위 X > 오직 함수만이 유효범위 한 단위

  • 함수만이 유효범위의 한 단위 (if절, for문은 X)

  • 함수 속성 [[scope]] :: 함수 객체만이 소유하는 내부 프로퍼티 = 함수 객체가 실행되는 환경
    - 유효범위를 나타내는 스코프가 [[scope]] 프로퍼티로 각 객체 내에서 연결리스트 형식으로 관리
    - 각각 함수는 [[scope]] 프로퍼티로 자신이 생성된 실행 컨텍스트의 스코프 체인을 참조한다.
    - 함수가 실행되는 순간 실행 컨텍스트가 만들어지고 이 실행된 함수의 [[scope]] 프로퍼티를 기반으로 새로운 스코프체인을 만든다.
    - 스코프체인은 실행된 함수의 [[scope]]프로퍼티를 그대로 복사한 후,
    현재 생성된 변수객체를 복사한 스코프체인의 맨 앞에 추가
    ex. parentFunc["scopeChain"] = ["Global Obj"]
    childFunc["scopeChain"] = ["Activation Obj", "Global Obj"]

∴ Scope Chain = 현재 실행 컨텍스트의 변수 객체 [AO] + 상위 컨텍스트의 스코프체인 [AO(s), GO]

4. 렉시컬 스코프 (lexical scoping) :: 정적스코프

내부의 변수는 자기 스코프로부터 가장 가까운 곳(상위 범위에서)에 있는 변수를 계속 참조

스코프는 함수를 호출할 때가 아닌 선언할 때 생김 !!!

함수를 처음 선언한 순간,

함수 내부의 변수는 자기 스코프부터 가장 가까운곳(상위범위)에 있는 변수를 계속 참조한다.

부모함수의 scope가 자식 함수의 스코프 체인에 포함된다.

ex) 함수 실행 중 변수를 만날 경우
1. 변수를 우선 현재 Scope :: 첫번째 SC 리스트가 가리키는 AO에 접근하여 검색
2. 검색 실패했을 경우 다음 리스트가 가리키는 AO에 접근

5. Function scope VS Block scope

# 함수 레벨 스코프(Function-level scope)

함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다.

# 블록 레벨 스코프(Block-level scope)

모든 코드 블록(함수, if 문, for 문, while 문, try/catch 문 등) 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다.
ES6는 블록 레벨 스코프를 따르는 변수를 선언하기 위해 let 키워드를 제공

profile
Do myself first! 🧐

0개의 댓글