💡 자바스크립트 프로토타입 개념 이해하기

개요 🛫

스코프란 매개 변수의 유효범위이다.

Modern Javascript Deep Dive라는 책을 구매하여 자바스크립트에대해 이해하는 시간을 가지고있다(이미지를 참조했다).

이번 시간에는 스코프(Scope)란 무엇인지 알아보도록 하자.

학습 내용 📖

스코프-유효범위 (Scope)

스코프 : 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)가 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정되는 것

var 키워드로 선언한 변수의 중복 선언

var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언이 허용된다. -> 의도치 않게 변수가 재할당되는 부작용을 초래

Example Code (var 변수 중복 선언) :

Copycopy code to clipboard
function foo() {
  var x = 1;
  var x = 2;

  console.log(x); // 2
}

foo();

let, const 키워드로 선언하는 변수는 중복 선언을 허용하지 않는다.

Example Code (let, const 중복 제어) :

Copycopy code to clipboard
function bar() {
  let x = 1;
  let x = 2; // SyntaxError: Indentifier 'x' has already been declared
}

bar();

스코프 체인 (Scope Chain)

중첩된 함수들이 지역 스코프를 가질 때와 같이 스코프가 계층적으로 연결된 것을 스코프 체인(scope chain)이라고 한다.

Scope Chain :

!(scope)[scope_1.png]

Copycopy code to clipboard
// 전역 스코프
var x = "global x";
var y = "global y";

// 지역 스코프(outer)
function outer() {
  var z = "outer z";

  // 지역 스코프(inner)
  function inner() {
    var x = "inner x";

    console.log(x); // 1)
    console.log(y); // 2)
    console.log(z); // 3)
  }
}

스코프 체인에 의한 자바스크립트 엔진의 동작 (변수 검색)

1. x 변수를 참조하는 코드의 스코프인 inner 함수의 지역 스코프에서 x 변수가 선언되었는지 검색 -> inner 함수에 x 변수 존재함 -> 검색된 변수 참조
2. y 변수를 참조하는 코드의 스코프인 inner 함수의 지역 스코프에서 y 변수가 선언되었는지 검색 -> inner 함수에 y 변수 존재 X -> 상위 스코프인 outer 함수에서 검색 -> outer 함수에 y변수 존재 X -> 상위 스코프인 전역(global)스코프에서 검색 -> 전역 스코프에 y 변수 존재함 -> 검색된 변수 참조
3. z 변수를 참조하는 코드의 스코프인 inner 함수의 지역 스코프에서 z 변수가 선언되었는지 검색 -> inner 함수에 z 변수 존재 X -> 상위 스코프인 outer 함수에서 검색 -> outer 함수에 z변수 존재함 -> 검색된 변수 참조

함수 레벨 스코프

• 블록 레벨 스코프 : if, for, while 등 함수를 포함한 모든 코드 블록이 지역 스코프를 만드는 것 ( C, JAVA ...)
• 함수 레벨 스코프 : 함수의 코드블록(몸체)만을 지역 스코프를 만드는 것

자바스크립트의 var 키워드로 선언된 변수는 함수 레벨 스코프 를 가진다.

-> 함수를 제외한 블록 레벨에서 var 변수를 재선언 시에 전역 변수의 값이 재할당된다.

ES6에서 도입된 let, const 키워드는 블록 레벨 스코프를 지원한다.

렉시컬 스코프 (Lexical Scope)

Example Code (Lexical Scope) :

Copycopy code to clipboard
var x = 1;

function foo() {
  var x = 10;
  bar();
}

function bar() {
  console.log(x);
}

foo(); // 1) ??
bar(); // 2) ??

위의 실행결과는 bar 함수의 상위 스코프가 무엇인지에 따라 결정된다.

1. 함수를 어디서 호출했는지에 따라 함수의 상위 스코프를 결정한다. -> 동적 스코프
2. 함수를 어디서 정의했는지에 따라 함수의 상위 스코프를 결정한다. -> 렉시컬 스코프(정적 스코프)

자바 스크립트는 렉시컬 스코프를 따른다.

• 실행결과
  1. 1
  2. 1

Review 💡

자바 스크립트의 렉시컬 스코프 환경에 대해 이해하고 코드를 작성하면 어플리케이션이 비정상 적으로 동작하는 것을 최소화 할 수 있을 것이다.

사실 이번 공부를 하면서 기존 블록 레벨 스코프를 지원하는 JAVA나 C++ 등의 언어를 사용해왔어서 자바스크립트의 스코프 동작 원리에 대해 의문을 가지게 된 것 같기도 하다.

이런 스코프체인의 개념이 프로토타입체인과 같이 상속되는 요소를 찾는 개념이랑 비슷하기에 자바스크립트에서는 필수적인 개념이라고 생각이 들었다.

References 🙏🏽

• Modern Javascript Deep Dive