[ 엘리스 SW 엔지니어 트랙 ] 13일차

📍 13일 차 11.11. 목.(실시간 강의)

오늘은 JS에서 어려운 문법인 scope, this, 실행 컨텍스트, 함수, restParameter에 대해서 배웠다. 이 내용들은 저번에 읽었던 코어 자바스크립트에 나왔던 내용이다. 책을 읽은 지 약 2개월 정도밖에 안됐는데 부분 부분 까먹은 내용들이 있었다. 까먹지 않게 틈틈이 읽어야겠다.

---

❏ 스코프

1. 변수가 작동하는 유효범위
2. 변수에 접근할 수 있는 범위
3. Global: 어느 곳에서든지 해당 변수에 접근할 수 있다. Local: 해당 지역에서만 접근할 수 있다.

❏ 실행 컨텍스트

1. 실행 컨텍스트를 바르게 이해하면 스코프를 기반으로 식별자와 식별자에 바인딩된 값(식별자 바인딩)을 관리하는 방식과 호이 스팅이 발생하는 이유, 클로저의 동작 방식, 그리고 태스크 큐와 함께 동작하는 이벤트 핸들러와 비동기 처리의 동작 방식을 이해할 수 있다.
2. 전역 실행 컨텍스트(GEC: Global Execution Context): JS가 실행될 때 가지고 시작함. JS에서 유일하게 하나만 존재한다. (script코드로 js 파일을 독립적으로 실행해도 전역 변수는 공유된다.)
3. 지역 실행 컨텍스트(FEC, Functional Execution Context): 다수의 FEC가 존재할 수도 있고, 존재하지 않을 수도 있다. FEC는 함수 단위로 실행된다. 함수 호출 시 FEC가 생성된다.
4. 실행 콘텍스트에서 제일 중요한 내용은 렉시컬(lexical) 환경에 변수가 선언되어있지 않다면, 상위 scope에서 해당 값을 찾고, 상위 scope에도 값이 없다면, 전역 객체에 값을 할당한다. 다음의 코드가 이를 반증하는데 다음 a값은 무엇일까? 정답은 3이다. 전역 변수에 a값이 없는데 왜 3이 할당되는지는 scope chain을 따라가면 되는데, outer 내부에 a가 var, let, const로 할당된 것이 아니기 때문에 현재 scope에서는 target이 없다. 따라서 상위 단계의 scope를 탐색하게 되고, 전역 객체까지 나갔을 때도 값이 없다면 전역 객체에 a값을 할당하게 된다.

function outer(){
    a = 3;
}

outer();
console.log(a)  // 3

❏ 실행 컨텍스트의 실행 과정

1. Creation Phase: 실행 컨텍스트의 뼈대가 만들어지는 단계이며, 변수는 선언만(undefined) 이루어지며, 실질적인 할당은 이루어 지지않는다. 함수는 pointer만 생성된다.
2. Execution Phase: 실행 컨텍스트의 실행 단계이며, 변수의 값이 할당되는 단계이다. 함수의 주소도 할당된다.

728x90

❏ 호이스팅

1. 변수 선언 / 함수 선언을 코드의 맨 위로 끌어올려진 것 같은 현상
2. var 변수는 함수 내부에서만 호이스팅이 일어난다.(전역까지는 접근 불가)
3. let, const는 호이스팅에 의해 선언은 이루어지지만 초기화 단계는 해당 코드에 도달했을 때 진행되기 때문에, 이전까지 일시적 사각지대(TDZ)에 빠지게 된다. (선언은 되어있지만 아직 초기화가 되지 않아 변수에 담길 값을 위한 공간이 메모리에 할당되지 않은 상태) 따라서 변수를 마주한 코드부터 접근이 가능하다.

// var
console.log(a)  // undefined
var a = 1;

// let
console.log(b)  // Cannot access 'b' before initialization
let b = 1;

// const
console.log(c)  // Cannot access 'c' before initialization
let c = 1;

❏ 자바스크립트 내장 객체

다음 MDN을 참고하자

// 0 ~ 5사이의 난수 구하기
// random(): 0 <= x < 1
// 내가 원하는 최대값과 random을 곱하고 소수점을 떼면 0~최대값까지 난수가 생성된다.
console.log(Math.floor(Math.random() * 6));

❏ 함수 선언식, 함수 표현식, 화살표 함수

1. 함수 선언식: 평소에 js를 사용할 때 함수 선언하는 방법이다. 함수 이름을 생략할 수 없는 특징이 있다. 함수 선언식은 함수 선언문 이전에 호출할 수 있다.

function add(a, b){
    return a+b;
}

2. 함수 표현식: 함수 이름을 생략할 수 있는데, 이를 익명 함수라고 한다. 만약, 함수 이름을 선언한다면 함수 내부에서만 유효한 식별자이므로 함수 이름으로 함수를 호출할 수 없다. 함수 표현식으로 정의한 함수는 함수 표현식 이전에 호출할 수 없다. 함수의 생성시점이 다르기 때문이다.

const add = function (a, b){
    return a+b;
}

3. 화살표 함수: function키워드 대신 화살표를 사용해 좀 더 간략한 방법으로 함수를 선언할 수 있다. 화살표 함수는 항상 익명 함수로 정의한다.

// 기본 코드
const add = (a, b) => {return a+b};  

// 함수 몸체가 하나의 몸으로 구성된다면 함수 몸체를 감싸는 중괄호를 생략할 수 있다.
const add = (a, b) => a+b;

// 매개변수가 1개인 경우 소괄호를 생략할 수 있다.
const pow = n => n*n;

reference

1. 모던 자바스크립트 딥 다이브