Chapter1

데이터의 타입이 나누어지는 이유는 값을 저장하는 방식의 차이이다.

값은 메모리에 저장하고 참조할 수 있어야 한다. 메모리에 값을 저장하려면 먼저 확보해야 할 메모리 공간의 크기를 결정해야 한다.

리액트에서 동등 비교

objectIs를 기반으로 동등 비교를 하는 shallowEqual이라는 함수를 만들어서 사용
리액트에서는 객체간의 첫 번째 깊이에 존재하는 값만 비교하는데 그 이유는 props만 일차적으로 비교하면 되기 때문이다.

함수 (p.36)

자바스크립트 엔진이 코드의 문맥에 따라 동일한 함수를 문이 아닌 표현식으로 해석하는 경우가 있기 때문이다.

값

값은 식이 평가되어 생성된 결과를 말한다.

10 + 20

리터럴

리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법을 말한다.

표현식

표현식은 값으로 평가될 수 있는 문이다. 즉, 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조한다.

var score = 100;

문

문은 프로그램을 구성하는 기본 단위이자 최소 실행 단위다.
문은 여러 토큰으로 구성된다. 토큰이란 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소를 의미한다.

표현식인 문과 표현식이 아닌 문

변수 선언문은 값으로 평가될 수 없으므로 표현식이 아니다.

var x;

표현식이면서 완전한 문

x = 1 + 2;

표현식인 문과 표현식이 아닌 문을 구별하느 가장 간단하고 명료한 방법은 변수에 할당해 보는 것이다.

var foo = var x;

일급 객체

무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다.
변수나 자료구조(객체, 배열)에 저장할 수 있다.
함수의 매개변수에 전달할 수 있다.
함수의 반환값으로 사용할 수 있다.

함수 표현식과 선언식의 차이 -> 호이스팅

자바스크립트는 모든 것을 호이스팅한다.

함수 표현식은 변수에 할당되는 값이 함수 리터럴인 문이다. 따라서 함수 표현식은 변수 선언문과 변수 할당문을 한 번에 기술한 축약 표현과 동일하게 동작한다. 변수 선언은 런타임 이전에 실행되어 undefined로 초기화되지만 변수 할당문의 값은 할당문이 실행되는 시점, 즉 런타임에 평가되므로 함수 표현식의 함수 리터털도 할당문이 실행되는 시점에 평가되어 함수 객체가 된다. 따라서, 함수 표현식으로 함수를 정의하면 함수 호이스팅이 발생하는 것이 아니라 변수 호이스팅이 발생한다.

무슨말이냐면 var a; var a = 10; 과 같이 변수 선언과 할당문이 있다.
변수 호이스팅에 의하면 런타임전에 undefined를 할당하고 런타임에 10을 준다
함수 표현식도 마찬가지로

var a = a (x,y){
  console.log(xy)
}

a 에 undefined를 할당하고 런타임에 함수 객체를 할당하기 때문.

화살표 함수

prototype 프로퍼티가 없고 프로토타입도 생성하지 않는다.

prototype 프로퍼티는 함수 객체만이 소유하는 생성자 함수가 생성할 인스턴스의 프로토 타입을 가리킨다.
중복된 매개변수 이름을 선언할 수 없다.

function test(a, a) {
  return a + a;
}
 
const test = (a, a) => a + a; // error

this 바인딩

this란 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다.

호출 방식??

동일한 함수도 다양한 방식을 호출할 수 있다.

일반 함수 호출 -> 전역 바인딩
메서드 호출 -> 메서드를 호출 객체에 바인딩
생성자 함수 호출 -> 미래에 생성할 인스턴스가 바인딩 된다.
Function.prototype.apply/call/bind 메서드에 의한 간접 호출

화살표 함수는 함수 자체의 this 바인딩을 갖지 않는다. 따라서 화살표 함수 내부에서 this를 참조하면서 상위 스코프의 this를 그대로 참조한다.
화살표 함수를 제외한 모든 함수에는 this 바인딩이 반드시 존재한다.

즉시 실행 함수

한 번 선언하고 호출된 이후부터는 더 이상 재호출이 불가능하다 -> 글로벌 스코프를 오염시키지 않는 독릭접인 함수 스코프를 운용할 수 있다는 장점을 얻을 수 있다.

// 48쪽 부터 읽으면 될 듯.

클로저

책 예제(p.59) 코드를 보면 클로저는 "함수와 함수가 선언된 어휘적 환경의 조합" -> 변수가 코드 내부에서 어디서 선언됐는지,

var x = 1;
 
function foo() {
  var x = 10;
  bar();
}
 
function bar() {
  console.log(x);
}
 
foo(); // ?
bar(); // ?

렉시컬 스코프

렉시컬 스코프는 함수를 어디서 호출하는지가 아니라 어디에 선언하였는지에 따라 결정된다. 자바스크립트는 렉시컬 스코프를 따르므로 함수를 선언한 시점에 상위 스코프가 결정된다.
함수를 어디에서 호출하였는지는 스코프 결정에 아무런 의미를 주지 않는다. 위 예제의 함수 bar는 전역에 선언되었다. 따라서 함수 bar의 상위 스코프는 전역 스코프이고 위 예제는 전역 변수 x의 값 1을 두번 출력한다.

이벤트 루프

마이크로 태스크 큐를 실행한뒤에 렌더링이 일어나고 태스크 큐를 실행한다.

객체 전개 구문

결과가 다르다.

const obj = {
  a: 1,
  b: 2,
  c: 3,
  d: 4,
  e: 5,
};
// 1,2,10,4,5
const aObj = {
  ...obj,
  c: 10,
};
1, 2, 3, 4, 5;
const bObj = {
  c: 10,
  ...obj,
};

reduce, filter,map

Reconciliation About