Scope

지나·2022년 12월 6일

block

{
  console.log('안녕하세요!');
}

블록문은 0개 이상의 구문 statement 들을 묶은 단위이다.
한쌍의 중괄호 {} 로 구성하여 제어문, 함수 등에 사용되고, 새로운 스코프 scope 를 생성한다.

scope

스코프 (scope) 는 '범위, 영역' 을 의미하는 단어로 javascript 에서는 변수에 접근할 수 있는 범위이자, 식별자 (변수, 함수 등) 를 찾아내기 위한 규칙을 의미한다.

프로그래밍은 변수를 선언하고, 값을 할당하고, 이 변수를 참조하는 기본적인 기능을 제공하며 이를 통해 프로그램의 상태를 관리할 수 있다. 변수는 전역 또는 코드 블록, 함수 내에 선언하고 이러한 코드 블록과 함수는 중첩될 수 있다. 여기서 식별자 (변수, 함수 등) 는 자신이 어디에서 선언됐는지에 의해, 다른 코드가 자신을 참조할 수 있는 유효 범위를 갖는다. 이 유효 범위가 바로 스코프 scope 이다.

스코프는 계층적인 구조를 가지기 때문에 하위 스코프가 상위 스코프에 접근하는 것만 가능하다. (상위 스코프가 하위 스코프에 접근하는 것은 불가)

전역스코프 (Global scope)
지역스코프 (Local scope)

전역 (global) 변수/상수

메모리 관점에서 보았을 때, 데이터 data 영역에 위치
코드 어느 곳에서든 접근이 가능
프로그램 종료 시 소멸 (계속 쌓임)
메모리 절약을 위해 전역변수 남발은 자제하자! (최소화 하자!)

지역 (Local) 변수/상수

메모리 관점에서 보았을 때, 스택 stack 영역에 위치
해당 블록 안에서만 접근 가능
블록 실행 종료 시 소멸 (쌓이지 않음, 1회성)
메모리 절약을 위해 변수나 상수는 가능한 사용할 블록 내에서 선언하자!

Global scope : 전역 변수/상수가 가지는 유효 범위

const x = 1;
const y = 2;

console.log(x+y) // 3 출력

전역 스코프 Global scope 는 전역에 선언된 전역 변수가 가지는 유효 범위이다.
전역 변수는 어디서든지 참조될 수 있는 전역 스코프를 가진다.

Local scope : 지역 변수/상수가 가지는 유효 범위

지역 스코프 Local scope 는 지역 내에서 (블록문, 함수 등) 선언된 지역 변수가 가지는 유효 범위이다.
지역 변수는 지역 내에서만 참조될 수 있는 지역 스코프를 가진다. 전역 변수를 참조할 수 있다.

{
  const x = 1;
  const y = 2;
  console.log(x+y) // 3 출력
}

console.log(x); // 오류
console.log(y); // 오류
// 블록 안에서 선언된 지역 변수는 전역에서 사용 불가

블록 안에서 선언된 지역 변수는 전역에서 사용 불가

let x = 'Hello'

{
  let y = 'World!'
  console.log(x,y) // Hello, Wolrd! 출력
  // 블록 바깥의 전역 변수는 블록 내에서 사용 가능
}

블록 바깥의 전역 변수는 블록 내에서 사용 가능

cosnt x = 0;
let y = 'Hello!';

console.log(x,y); // 0,Hello! 출력

{
  cosnt x = 1;
  let y = 'World!';
  
  console.log(x,y); // 1,World! 출력
}

console.log(x,y); // 0,Hello! 출력

{
  x = 2;
  y = 'World!'
  // 변수 선언 표현식을 사용하지 않을 시, 바깥의 전역 변수 값 변경시킴
  // 지역변수 y의 값을 재할당함
}

console.log(x); // 상수는 값의 변경 불가
console.log(y); // 기존 지역변수 값 Hello 가 아닌, 재할당값 World! 를 출력

블록 안의 지역 내에서는 바깥의 전역 변수를 재선언할 수 있다.
같은 이름으로 다른 값을 가지고, 바깥에서는 지역 변수의 존재에 영향을 받지 않는다.
각각 별개의 값으로 생각하면 됨
변수 선언 표현식 (let) 을 사용하지 않고 재선언시 바깥의 전역 변수 값을 바꾼다.
상수 선언 표현식 (const) 는 값의 변경이 되지 않기 때문에 오류 발생

Scope chain : 스코프 체인

스코프 체인 Scope chain 은 객체의 체인, 일종의 리스트이다.

자바스크립트에서 전역 변수는 전역 객체의 프로퍼티이다. 지역 변수는 이러한 규정이 없지만, 각 함수 호출과 연관된 객체의 프로퍼티로 생각할 수는 있다. 그렇다면 자바스크립트의 모든 코드는 객체의 프로퍼티로서 존재하고, 이 프로퍼티들은 스코프 체인을 갖는다. 자바스크립트가 변수 값을 얻을 때 스코프 체인에서 변수를 찾게 되고, 스코프 체인은 객체의 리스트이므로 첫번째 객체에서 해당 변수를 찾고, 없으면 다음 객체에서 찾는 식인 것이다.

실행 컨텍스트 (Execution Context)

자바스크립트에서 실행 컨텍스트란, 실행 가능한 코드가 실행되는 해당 환경 또는 실행되기 위해 필요한 환경을 의미한다. C언어에서 함수 호출 시 기존 함수의 호출 정보 위에 스택처럼 쌓이는데, 스택은 선입후출로 코드를 실행하여 전체 코드의 환경과 순서를 보장하는 특징을 가지고 있다. 자바스크립트 또한 이처럼 실행중인 코드가 실행 컨텍스트에 스택 stack 처럼 쌓이는 실행 환경을 가지게 된다.

전역 컨텍스트

와 이 부분은 너무 공부하는 데에 오래 걸릴 것 같은 개념이므로 ...

일단 실행 컨텍스트는 선입후출 LIFO (last in, first out) 구조의 스택이고
실행 컨텍스트는 글로벌 실행 컨텍스트와 함수 실행 컨텍스트로 나뉜다.
실행 컨텍스트가 실행되면 스코프 체인을 통해서 렉시컬 스코프 (어휘적 유효범위, 정적스코프) 를 파악한다.
동적 스코프(함수를 어디서 호출하였는지에 따라 상위 스코프를 결정하는 것) 와 정적 스코프(함수를 어디서 선언하였는지에 따라 상위 스코프를 결정하는것) 가 있는데 자바스크립트는 정적 스코프를 따른다.
함수가 중첩 상태일 때는 하위 함수 내에서 스코프 체인을 통해, 상위 함수의 스코프와 전역 스코프까지 참조하여 탐색한다.

가장 나중에 호출 된 함수가 변수를 찾기 시작하고, 가장 하위 함수 내에서부서 상위 함수까지 변수를 찾을 수 없다면 마지막으로 전역 객체까지 탐색하여 변수를 찾아내는 이 과정 !!!!!!
이 구조 !!!! 를 스코프 체인이라고 한다.

자신과 가장 가까운 변수 객체의 스코프부터 가장 먼 전역 객체의 스코프까지 !!!! 스코프 체인이라고 부르며 선입후출 구조를 갖는당

변수은닉화 varialble shadowing : 여러 스코프에서 동일한 변수를 선언한 경우에는 스코프 체인 상에서, 가장 먼저 발견된 (가장 가까운) 식별자에게만 접근 가능

클로저 : 반환된 내부 함수가 자신이 선언되었을 때의 환경인 렉시컬 스코프를 기억하고, 선언되었을 때의 환경 밖에서 호출 되어도 그 환경에 접근 할 수 있는 함수를 말한다. 그니까 자기가 만들어졌을 때의 환경을 기억하는 함수를 클로저 라고 부른다는 것

세가지의 스코프 체인을 가진다.