스코프(scope)

Jelkov Ahn·2021년 8월 4일
0
post-thumbnail

Achievement Goals

  • 스코프의 의미와 적용 범위를 이해할 수 있다
  • 스코프의 주요 규칙을 이해할 수 있다
    • 중첩 규칙
    • block scope와 function scope
    • 전역 스코프와 지역 스코프
    • 전역 변수와 지역 변수간의 우선 순위
    • let, const, var 의 차이
    • 전역 객체(window)의 이해

Scope란 무엇인가?

한마디로 하면 '변수에 접근할수 있는 범위' 이다.

Scope의 정의와 규칙

  • (1) 안쪽 스코프에서 바깥쪽 스코프로는 접근할수 있지만 반대는 불가능

    [그림] 이처럼 변수에 접근할 수 있는 범위가 존재합니다. 중괄호(블록) 안쪽에 변수가 선언되었는가, 바깥쪽에 변수가 선언되었는가가 중요합니다. 이 범위를 우리는 스코프라고 부릅니다.


[그림] 변수의 접근 범위가 이번엔 함수에 의해 나뉘어졌습니다.

  • 정리

    • 바깥쪽 스코프에서 선언한 변수안쪽 스코프에서 사용 가능 (O)
    • 안쪽 스코프에서 선언한 변수바깥쪽 스코프에서 사용 불가능 (X)
  • (2) 중첩이 가능합니다

  • (3) 특별히 가장 바깥쪽의 스코프는 전역 스코프(Global Scope)라고 부릅니다.

    • 전역의 반대말은 지역(local)으로 전역이 아닌 다른 스코프는 전부 지역 스코프(local scope)입니다.
  • (4) 스코프 규칙에서 또 하나 기억해야 할 규칙은, 지역 변수는 전역 변수보다 더 높은 우선순위를 가집니다.

  • (4-1) 박해커라고 새로운 변수를 선언했을때
let name = '김코딩';

function showName() {
let name ='박해커';
console.log(name); // 박해커(두번째 출력)
}
console.log(name); // 김코딩(첫번째 출력)

showName();
console.log(name); // 김코딩(세번째 출력)

  • 첫번째 출력은 첫째 줄에서 전역 변수로 선언된 name을 가져옵니다.
    이는, showName 함수 안쪽에 선언된 지역 변수 name은 애초에 스코프 규칙에 의해 접근할 수 없기 때문입니다. 따라서 "김코딩"을 출력합니다.

  • 두번째 출력은 함수 안에서 선언한 name이라는 지역 변수에 접근하고 있습니다.
    변수 이름이 전역 변수와 똑같지만, 지역 변수가 전역 변수보다 우선순위가 높으므로,
    지역 변수 name("박해커")이 출력되는 것입니다.
    동일한 변수 이름으로 인해 바깥쪽 변수가 안쪽 변수에 의해 가려지는(shadow) 이러한 현상을 쉐도잉(variable shadowing)이라고 부릅니다.

  • 세번째 출력은 첫번째 출력과 마찬가지로 전역 변수 name을 출력합니다.
    showName 함수를 실행하고 name이라는 변수를 출력하는 콘솔인데,
    지역 변수에 선언된 name 변수는 안쪽 스코프이므로 접근이 불가능합니다. 따라서 "김코딩"을 출력합니다.

  • (4-2) name이라는 변수에 할당만 했을때
let name = '김코딩';

function showName() {
name ='박해커';
console.log(name); // 박해커 (두번째 출력)
}
console.log(name); // 김코딩 (첫번째 출력)

showName();
console.log(name); // 박해커 (세번째 출력)

  • 첫번재 출력은 showName 함수가 실행되기 전, 처음에는 '김코딩'을 출력합니다.
  • 그 이후에는 함수안에서 혹은 함수가 실행된 후에 전역변수 name의 값이 바뀌기 때문에 두번째 및 세번째 출력에 '박해커'가 출력됩니다.

Scope의 종류

  • (1) 스코프의 두 가지 종류 (블록스코프/함수스코프)

    • (1-1)하나는 블록 스코프(block scope)라고 부르며,중괄호를 기준으로 범위가 구분됩니다.

    • (1-2)함수 스코프(function scope)가 있습니다. function 키워드가 등장하는 함수 선언식 및 함수 표현식은 함수 스코프를 만듭니다.

    • (1-3) 화살표 함수는 같은 함수지만 블록 스코프에 포함된다.

참조: 코드스테이츠

profile
끝까지 ... 가면 된다.

0개의 댓글