https://www.notion.so/JavaScript-7a08fd33038b44af8068e0bfbded008c

자바스크립트 핵심

• 기본형과 참조형

  primitive Type - 값을 그대로 할당

  • Number

  • String

  • Boolean

  • null

  • undefined

    

    Reference Type - 값이 저장된 주소값을 할당(참조)

    Object

  • Array

  • Function

  • RegExp

• 실행 콘텍스트

  실행 컨텍스트는 실행될 때 생성된다!!

  

  1. book()함수가 호출되면 엔진 컨트롤이 함수 안으로 이동

  2. point 변수를 선언. ⇒ funtion 키워드를 만나서 Function 오브젝트 생성

  3. ⇒ function show의 [[Scope]](엔진이 설정하는 프로퍼티에 뜻함)에 스코프 설정,

  4. ⇒ show() 함수가 호출되면 엔진컨트롤이 함수 안으로 이동, 이동 하기 전에 실행 콘텍스트 환경 구축

     실행 컨텍스트 (Execution Context)란?

  • 자바스크립트의 코드들이 실행되기 위환 환경이다.

  • 전역 컨텍스트와 함수 컨텍스트 2가지가 존재한다.

  • 전역 컨텍스트 생성 후에 함수가 호출할 때마다 함수 컨텍스트가 생성된다.

  • 컨텍스트 생성 시 변수객체, 스코프 체인, this가 생성된다.

  • 컨텍스트 생성 후 함수에 사용되는 변수들은 변수 객체 안에서 값을 찾고,없다면 스코프 체인을 따라 올라가며 찾는다.

  • 함수 실행이 마무리 되면 해당 컨텍스트는 사라지고, 페이지가 종료되면 전역 컨텍스트 사라진다.

    즉 JS의 코드가 실행되기 위해서는 변수객체, 스코프체인, this 정보들을 담고 있는 곳을 실행컨텍스트라고 한다.

    글로벌 실행 컨텍스트 생성 단계에서 자바스크립트 엔진은

    global object를 생성
    this 변수 object를 생성
    변수와 함수를 위한 메모리공간 확보
    선언식 함수를 메모리에 배치하면서 변수 선언에 기본값 undefined를 할당

• 스코프체인

  스코프 체인

  바로 전역변수와 지역변수의 관계에서 스코프 체인(scope chain)이란 개념이 나옵니다. 내부 함수에서는 외부 함수의 변수에 접근 가능하지만 외부 함수에서는 내부 함수의 변수에 접근할 수 없습니다.

  var name = 'zero';
  function outer() {
    console.log('외부', name);
    function inner() {
      var enemy = 'nero';
      console.log('내부', name);
    }
    inner();
  }
  outer();
  console.log(enemy); // undefined

  이렇게 꼬리를 물고 계속 범위를 넓히면서 찾는 관계를 스코프 체인이라고 부릅니다.

• 렉시컬 스코핑

  많이들 헷갈리는 개념인데 스코프는 함수를 호출할 때가 아니라 선언할 때 생깁니다. 호출이 아니라 선언요

  함수를 처음 선언하는 순간, 함수 내부의 변수는 자기 스코프로부터 가장 가까운 곳(상위 범위에서)에 있는 변수를 계속 참조하게 됩니다.https://www.zerocho.com/category/JavaScript/post/5740531574288ebc5f2ba97e

  let a = 'Hello World!';
  function first() {
    console.log('Inside first function');
    second();
    console.log('Again inside first function');
  }
  function second() {
    console.log('Inside second function');
  }
  first();
  console.log('Inside Global Execution Context');

  https://maeryo88.tistory.com/259

  전역 영역에서는 전역변수만이 참조 가능하고 함수 내 지역 영역에서는 전역과 지역 변수 모두 참조 가능하나 위 예제와 같이 변수명이 중복된 경우, 지역변수를 우선하여 참조한다.

  var x = 10;
  
  function foo() {
    x = 100;
    console.log(x);
  }
  foo();
  console.log(x); // ?
  
  /////
  var x = 10;
  
  function foo(){
    var x = 100;
    console.log(x);
  
    function bar(){   // 내부함수
      x = 1000;
      console.log(x); // ?
    }
  
    bar();
  }
  foo();
  console.log(x); // ?
  
  //호출 후  console.log 인지 
  //호출 전 console.log  인지 확인 하기  그거에 따라 값은 다르다 

• function 오브젝트

  var sports = function(){}
  // 1. 생성한 오브젝트가 sports 변수에 할당된다.
  //오브젝트를 생성하는 시적에는 빈오브젝트
  
  /*
  2. sports 오브젝트에 prototype 오브젝트 첨부 
  3. prototype에 constructor 프로퍼티 첨부
  	prototype.constructor가 sports 오브젝트 참조
  4. prototype에 __proto__오브젝트 첨부
  	es5 스펙에 __proto__가 기술되어 있지 않으며 es6스펙에 rltnf
  	엔진이 사용한다는 뉘앙스로 정의 
  5. prototype 에 __proto__오브젝트 첨부
  
  6. 빌트인 Object,prototype의 메소드로
  	오브젝트 인스턴스를 생성
  	prototype.__proto__에 첨부
  
  7. sports 오브젝트에 __proto__오브젝트 첨부 
  	 sprots.__proto__구조
  8. function.prototype 메소드 sports.__proto_에 첨부 
  
  */

JS는 대부분 정적 바인딩
초기화 단계에서 바인딩
함수 선언문 이름을 바인딩
표현식(변수, 함수) 이름을 바인딩

바인딩 시점이 중요한 이유 - 바인딩할 때 스코프가 결정됨