[엘리스 sw 엔지니어 트랙] 14일차 자바스크립트 심화

오경찬·2022년 4월 30일

JavaScript 부산 엘리스 코딩캠프

엘리스 SW 엔지니어 트랙 2기

목록 보기

15/57

수업 14일차

엘리스 플랫폼에서 수업을 들으면서 문제가 제일 어렵다고 생각한 날이다. 실행 컨텍스트, this, 화살표 함수, 클로저, Rest,Spread operator등 어려운것들이 하루만에 한꺼번에 배우는 날이라 더 머리 속이 복잡했다.

이론

자바스크립트 엔진은 코드가 없어도 실행환경(실행 컨텍스트)을 초기화한다.
스코프는 코드가 현재 실행되는 환경, 맥락(context)을 의미한다.
this포인터, 스코프에 저장된 변수들, 스코프 체인 등이 환경에 포함된다.
this포인터의 경우, 글로벌 스코프에서는 window를 가르킨다.
객체 메서드의 경우, 메서드 환경의 this는 해당 객체를 가르키게 된다.
하지만 this가 가리키는 것은 환경에 따라 변할수 있다.
실행 컨텍스트 : 자바 스크립트 코드가 실행되는 환경, 전역에서 시작해 함수가 호출될 때 스택에 쌓이게 된다.
일급객체 : 다른 변수처럼 대상을 다룰 수 있는 것, 함수 = 일급 객체(변수처럼 다룸)
클로저 : 함수와 함수가 사용하는 변수들을 저장한 공간
Rest Operator : 함수의 인자, 배열, 객체 중 나머지 값을 묶어 사용
Spread Operator : 묶인 배열 혹은 객체를 각각의 필드로 변환

실행 컨텍스트 (Execution Context)

실행할 코드에 제공할 환경 정보를 모아놓은 객체

실행 컨텍스트가 형성 되는 경우

전역 코드 -> 전역 실행 컨텍스트
eval() 함수로 실행되는 코드
함수 안의 코드를 실행할 경우

현재 실행되는 컨텍스트에서 이 컨텍스트와 관련 없는 실행 코드가 실행되면, 새로운 컨텍스트가 생성되어 스택에 들어가고 제어권이 그 컨텍스트로 이동한다.

console.log("1");

function func1(){
  console.log("2");
}

function func2(){
  console.log("3");
}
func2();

실행 컨텍스트 생성 과정

활성 객체(변수객체)
스코프 체인

실행 컨텍스트가 생성되면 자바스크립트 엔진은 해당 컨텍스트에서 실행에 필요한 여러 가지 정보를 담을 객체를 생성한다. -> 변수, 매개변수, 객체 ...

변수생성

호출된 함수 인자는 각가긔 프로퍼티가 만들어지고 값이 할당된다.
(없을 경우에는 undefined이 할당)
실행 컨텍스트 안에 정의된 변수와 함수가 생성된다. 단, 이 과정에서 변수나 내부 함수를 단지 메모리에 생성만하고, 초기화는 표현식이 실행되기전까지는 이루어지지 않는다.
this binding(object), 없을 경우에는 전역 객체를 참조

화살표 함수

화살표 함수는 익숙해지면 더욱 빠르고 편리하게 함수를 만들 수 있다!
본문이 한 줄인 함수를 작성할 때 유용하고,
여러 줄인 경우 다른 방법으로 화살표 함수를 작성한다.

인수가 하나밖에 없다면 인수를 감싸는 괄호 생략 가능
인수가 없을 땐 빈 괄호(생략 불가능)

let func = function(arg1, arg2, ...argN) {
  return expression;
};

// 함수 func는 화살표(=>) 우측의 표현식(expression)을 평가하고, 평가 결과를 반환
let func = (arg1, arg2, ...argN) => expression 

//본문이 여러 줄인 경우 -> 중괄호 사용
(...args) => { body } // 중괄호와 return 지시자를 사용해 반환 값을 명기

Rest Operator(나머지 매개변수)

Rest Operator(나머지 매개변수)는 나머지 후속 매개변수들을 묶어 하나의 배열에 저장해서 사용하는 것이다. 묶어줄 매개변수 앞에 ...을 붙여서 작성하면 된다.
즉, Rest Operator는 배열과 함수의 인자 중 나머지를 가리키며, 객체의 나머지 필드를 가리킨다.

// args에 1,2,3,4,5가 한꺼번에 배열로 담겨 인자로 넘겨진다.
function func1(...args) {
	console.log(`args: [${args}]`)
  // args: [1,2,3,4,5]
}
func1(1,2,3,4,5);

// arg1에는 1, arg2에는 2, arg3에는 나머지 3,4,5가 배열로 담겨 인자로 넘겨진다.
function func2(arg1, arg2, ...arg3) {
  	console.log(`arg1: ${arg1}, arg2: ${arg2}, arg3: [${arg3}]`)
  // arg1: 1, arg2: 2, arg3: [3,4,5]
}
func2(1,2,3,4,5);

func(인자1, 인자2, ...인자들)로 넘겨주게 되면 인자1, 인자2처럼 지정된 인자는 앞에서부터 각각의 값을 넣어주고 그 뒤의 나머지 후속 인자들을 배열에 인자들로 묶어서 보내주는 것이다.

Rest Operator는 함수 정의에는 하나의 ...만 존재할 수 있으며, 반드시 마지막 매개변수여야 한다.

func(...wrong, arg2, arg3) 
// 틀린 예. ...wrong이 마지막으로 와야 한

Spread Operator(전개 구문)

Spread Operator(전개 구문)는 묶인 배열 혹은 객체를 개별적인 요소로 분리한다. 즉, Rest와 반대 개념이라고 생각하면 되고, 마찬가지로 전개할 매개변수 앞에 ...을 붙여서 작성하면 된다.
따라서, 배열과 함수에선 또 다른 배열과 함수의 인자로의 전개를, 객체에선 또 다른 객체로의 전개를 한다.

let arr = [1, 2, 3, 4, 5]; 
console.log(...arr);
// 1 2 3 4 5

var str = 'javascript'; 
console.log(...str);
// "j" "a" "v" "a" "s" "c" "r" "i" "p" "t"

Spread Operator도 Rest Operator와 마찬가지로 ...의 작성 순서에 주의해야 한다. 등장 순서에 따라, 덮어씌워 질 수 있기 때문이다.

var obj = { name: '짱구', species: 'human'};
obj = { ...obj, age: 5}; 

console.log(obj)
// {name: "짱구", species: "human", age: 5}

obj = { ...obj, name: '짱아', age: 1};

console.log(obj);
// {name: "짱아", species: "human", age: 11}