[FE - ConnecTo] DAY29 TIL👩🏻‍💻

22.08.19 수업을 통해 공부한 내용들을 정리하였습니다 😊
피드백은 언제나 환영입니다! 🍊

this?

식별자 없이 프로퍼티 키로만 값을 가져올 수는 없다.

const circle = {
	radius: 5,
	getDiameter() {
		return 2 * circle.radius;
	}
}

console.log(circle.getDiameter());

그래서 circle.radius 라고 쓰는 것.

getDiameter 함수가 circle에 fix되어 있기 때문에, 그냥 종속되는 것임

프로퍼티의 값 : 자바 스크립트에서 값으로 인정되는 모든 값을 의미

함수가 객체에 묶여있지 않다고 생각하기 위해서, this를 써야하는 것임

자바스크립트에서 this는 동적으로 값을 생성함.

---

함수 및 스코프

렉시컬 스코프

→ 상위 스코프를 결정하는 방법. 호출을 어디서 했느냐가 중요한 것이 아니고, 어디서 정했느냐가 중요한 것임

const foo = function() {
	console.dir(this);
}

// 무슨 함수냐? -> 그냥 함수. 정의하는 것은 어불성설임.
// ES6부터는 함수를 구별하기 시작함!

어떤 함수로 호출되었는지는 아직 모르기 때문에 그냥 함수인 것.

화살표 함수? non-constructor

코드를 사용하면서, 함정에 빠지지 않으려면 쓰든 안쓰든 알아야됨!!!

---

굳이 중첩함수는 왜 만들까???

foo() {
	function bar() {
		console.log("bar's this: ", this);
	}
}

여러 번 호출하기 위해, 그리고 foo 함수 내에서만 쓰려고!

---

this의 불일치 문제를 일치시킬 수 있는 방법?

• this를 일치하도록 that으로 대피시킨다
• bind를 사용한다
• 화살표 함수를 사용해서 일치시킨다!

---

함수를 본다는 의미가 무엇인가?

스코프에 올리냐 안올리느냐의 차이

---

함수 객체

함수 객체는 호출할 수 있는 객체일 뿐, 호출 할 때 내부 프로세스는 아무 관계가 없음

함수 객체를 만드는 것은 함수 정의의 평가임

---

함수 호출이란?

함수 객체 안에 있는 내부 메소드의 콜을 호출하는 것 → 그 때 함수 코드 내부를 그 때가서 평가하는 것임

함수 객체가 생성된다! → 함수 내부의 문자열도 갖고 있다.

const f = function (){};
// 함수 객체만 만들어짐

function add (a, b) { 
	return a + b; // 이 문이 실행되었을 때, a + b를 함
} // 이 문이 실행되었을 때 함수 객체가 만들어지는 게

// 문 : 실행의 최소 단위

함수 호출과 정의의 평가를 구분해서 생각해야 하는데,

평가단계에 들어간다는 것은 스코프를 만든다는 것임!

---

call vs apply

Math.max(1, 2, 3)에서 ,는 연산자입니까? 놉!

const arr = [1, 2, 3];
// undefined;

Math.max.apply(null, arr);
// null? 

call method의 본질은 뭔가요? 함수는 원칙상 하나의 일만 해야함!

1. . 앞의 것을 호출하는 것이 본질

2. this를 갈아끼우는 것이 본질

근데 왜 null인가? 이 친구를 안쓴다는 것을 담기 위해서!

call으로 바꾸면 배열이 들어가는 거랑 똑같음. 풀어줘야 함!

Math.max.call(null, ...arr);

요즘은

Math.max(…arr);

하면 됨!

const arr = [1, 2, 3]; 얕은 복사 하고 싶어!
[… arr] 하면 됨!

slice

식빵을 자른다는 개념으로 여기서부터 여기까지 자르겠다는 것과 비슷함

결국 복사와 비슷한 개념임!

arr.slice() === arr

arr.slice()[0] === arr[0]
// 원시값은 같다. 객체가 다른 것임!

유사배열 객체를 배열로 만든다?

const arrayLike = {0: 1, 1: 2, length: 2};
Array.prototype.slice.call(arrayLike);

배열은 진짜 배열이 아니다 → 나중에 배열 파트에서 다시 이야기!

[…arrayLike]이렇게 쓰면 안되는데, 왜냐? 요 안에 값이 이터러블이 와야하기 때문임

그래서 Array.from(arrayLike) 이렇게 써야함.

---

실행 컨텍스트

타입은 값이 가지고 있다.

일단 전역코드 함수코드를 신경쓰면 된다

var a = 1; // → 프로퍼티야 전역변수야..?
window.a // → 가능함.

ES5 에서는 전역 객체가 전역 스코프 역할을 했음

전역 스코프 역할을 하는 스페이스가 2개가 있음

• 전역 코드 : 전역 객체와도 연결이 되어야 함
• 함수 코드 : 지역 스코프, arguments, 매개변수도 가지고 있어야 함

var a = 1;
var a // 전역 코드의 평가 단계에서 (런타임 이전에서~)
a = 1; // 전역 코드의 실행 단계에서