221130_TIL

스프레드 문법

... << 으로 표현.

스프레드 문법은 배열을 합칠 때도 활용할 수 있다.

let arr = [3, 5, 1];
let arr2 = [8, 9, 15];

let merged = [0, ...arr, 2, ...arr2];

alert(merged); // 0,3,5,1,2,8,9,15 (0, arr, 2, arr2 순서로 합쳐집니다.)

---

호이스팅

환경레코드에 선언문이 다 담기는 것

• 매개변수 식별자(== 변수명), 함수 자체, var 선언된 변수 식별자들이 환경레코드에 담긴다.

  let, const는 tdz에 의해 되지 않음. 참고문서 TOAST UI

• Heap은 객체(참조)메모리 저장소다. (객체의 value값 저장소.)

  ---

옵셔널 체이닝 (?.)

?. << 으로 표현.

• 옵셔널 체이닝을 사용하면, 프로퍼티가 없는 객체에 에러없이 안전하게 접근 가능하다.

---

.map()

map()은 배열 메소드다.

---

this

1. 함수로써의 호출
2. 메소드로써의 호출

• case 1. 함수로 호출된 this는 기준이 없음.
  그래서 최상위 객체인 window 객체를 반환할 수 밖에 없다.
  (함수 이름은 내가 무엇을 가리켜야 하는지 모르기 때문)

• case 2. this를 메소드로 호출한다면?
  binding의 개념이 이 때 중요하게 결정된다.
  메소드 안에서 this를 사용하게 되면, 내가 기준으로 잡을 수 있는 것은 window 객체가 아닌, 해당 메소드를 기준으로 잡을 수 있기 때문이다.
  bind = v. 묶다; 라는 의미

• 콜백 함수도 함수이기 때문에 기본적으로 this가 전역객체(window)를 참조함.

• 함수와 메서드가 호출될 때, this는 각각 다르게 할당된다.

• this는 실행 컨텍스트가 생성될 때 결정(this binding) === this는 함수를 호출할 때 결정

• 메서드로서 호출할 때, 그 메서드 내부에서의 this

- 기준 : 독립성
- 함수 : 그 자체로 독립적인 기능을 수행
- 메서드 : 자신을 호출한 대상 객체에 관한 동작을 수행. 

• 함수로서의 호출과 메서드로서의 호출 구분 기준

  . || []

// 메서드 내부에서의 this

var obj = {
  methodA: function () { console.log(this) },
  inner: {
    methodB: function() { console.log(this) },
  }
};

obj.methodA();
obj['methodA']();
// this === obj
// this === obj
obj.inner.methodB();
obj.inner['methodB']();
obj['inner'].methodB();
obj['inner']['methodB'](); // this === obj.inne

• 함수로서 호출할 때 그 함수 내부에서의 this는 호출의 주체를 명시할 수 없다.
  즉, 함수로서 '독립적으로' 호출할 때는 this는 전역객체다.

• 메서드 내부함수에서의 this
  메서드의 내부라고 해도, 함수로서 호출한다면 this는 전역객체.

⭐️ this 바인딩에 관해서는 함수를 실행하는 당시의 주변 환경(메서드 내부, 함수 내부)은 중요하지 않고, 오직 해당 함수를 호출하는 구문 앞에 점 또는 대괄호 표기가 있는지가 관건이다. ⭐️

• 메서드 내부 함수에서의 this 우회 방법

1. 변수 활용
   • ex ) var self = this
     
2. 화살표 함수
   • 실행 컨텍스트를 생성할 때, this 바인딩 과정 자체가 없음. 따라서 this는 이전의 값(상위값)이 유지된다.

• 명시적 this 바인딩(자동으로 부여되는 상황별 this의 규칙을 ㅂ깨고, this에 별도의 값을 저장하는 방법)

1. call 메서드
   호출 주체인 함수를 즉시 실행하는 명령어
2. apply 메서드
   call 메서드와 완전 동일하지만, 두 번째 인자가 배열인 부분만 다르다.
3. bind 메서드
   call과 비슷하지만, 즉시 호출하지는 않고 넘겨받은 this 또는 인수들을 바탕으로 새로운 함수를 반환한다.
   (** call은 즉시 호출)
   
   - name 프로퍼티 : bind 메서드를 적용해서 새로 만든 함수는 name 프로퍼티에 'bound'라는 접두어가 붙음. 따라서 추적하기가 쉽다.

• call, apply 메서드 활용
  ⭐️ 유사배열객체 (array-like-object)에 배열 메서드를 적용.

  ⭐️ 유사 배열의 조건

  1. 반드시 length가 필요. 이 조건은 필수다. 없으면 유사배열이라고 인식하지 않음.
  2. index 번호가 0번부터 시작해서 1씩 증가해야함.

slice() 함수

slice()함수는 배열로부터 특정 범위를 복사한 값들을 담고있는 새로운 배열을 만드는데 사용된다.
첫 번째 인자로 시작 인덱스(index), 두 번째 인자로 종료인덱스를 받음.
따로 인자를 넣어주지 않으면, 시작부터 끝까지 인덱스를 가지고온다.

• 상위 컨텍스트의 this를 내부함수나 콜백 함수에 전달하기

1. 내부함수
   1. 메서드의 내부함수에서 메서드의 this를 그대로 사용하기 위한 방법
   2. self등의 변수를 활용한 우회법보다 call, apply, bind를 사용하면 깔끔하게 처리 가능.
2. 콜백함수
   1. 콜백함수도 함수이기 때문에, 함수가 인자로 전달될 때는 함수 자체로 전달된다. (this가 유실된다. -> 전역 객체 window를 잡아버림)
   2. bind메서드를 이용하여 this를 입맛에 맞게 변경 가능.

- 화살표 함수의 예외사항
1. 화살표 함수는 실행 컨텍스트 생성 시, this를 바인딩하는 과정이 제외.
2. 화살표 함수 내부에는 this가 아에 없으며, 접근코자 하면 스코프체인상 가장 가까운 this에 접근하게 된다.
3. this 우회, call,apply,bind보다 편리한 방법임.
-> 화살표 함수를 쓰면, this를 binding하는 과정을 스킵할 수 있음.

• 별도의 인자로 this를 받는 경우(콜백 함수 내에서의 this)

1. 콜백 함수를 인자로 받는 메서드 중, 일부는 추가로 this로 지정할 객체를 인자로 지정할 수 있다.
2. 배열과 관련된 메서드에 많이 존재하며 set(), map()등의 메서드에도 일부 존재함.