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

스코프를 이해하기 위한 문제

// 아래 코드에서 var로 선언된 모든 i는 같은 스코프를 공유합니다.
// for문이 종료된 후에 setTimeout이 실행되므로 i는 이미 5입니다.
var i = 10;
for (var i = 0; i < 5; i++) {
  console.log(i, '번째 for 문이 먼저 실행됩니다');
  setTimeout(function count() { 
    console.log(i)
    }, 100);
}
console.log(var)

// 즉시 실행 함수
// 아래처럼 실행해도 결국 i가 5로 변한 뒤 setTimeout이 실행되므로 결과는 같습니다.
for (var i = 0; i < 5; i++) {
	console.log(i, '번째 for 문이 먼저 실행됩니다');
  (function() { setTimeout(function count() { 
    console.log(i)
    }, 100);})();
}

// 즉시 실행 함수
// 변화하는 i를 스냅샷을 찍듯 즉시 실행 함수로 생성된 스코프로 가져오면 아래처럼 동작합니다.
for (var i = 0; i < 5; i++) {
  console.log(i, '번째 for 문이 먼저 실행됩니다');
  (function() { 
    var j = i;
    setTimeout(function count() { 
      console.log(j)
      }, 100);})();
}

// i를 인수로, j를 매개변수로 하는 위와 같이 동작하는 코드입니다.
for (var i = 0; i < 5; i++) {
  (function(j) { 
    setTimeout(function count() { 
      console.log(j)
      }, 100);})(i);
}

// 사실 var를 let으로 대체하면 이 스코프 문제가 쉽게 해결됩니다.
// let i = 0인 스코프, let i = 1인 스코프 ... 가 각각 생성되어 의도대로 동작합니다.
for (let i = 0; i < 5; i++) {
  setTimeout(function count() { 
    console.log(i)
    }, 100);
}

---

상위 스코프를 기억해야하는 이유?

식별자 결정을 위해

변수를 선언한다는 것은 식별자의 존재를 자바스크립트 엔진에게 알리는 것인데, 식별자가 있는지 없는지 알아야 되기 때문에, 이 선언에 의해서 알려주는 것임.

---

객체란?

속성들의 나열을 의미함. 이 객체의 속성을 정의하는 것이 추상화임.

Object라고도 하며, Subject가 인식할 수 있는 모든 것을 의미함. 여기서 주체는 개발자라고 생각하면 좋음.

• property : 속성 → 자산, 재산 등에 가까운 의미
• attribute : 속성 → 이 단어가 속성이라는 의미에 더 가깝다

---

프로퍼티 어트리뷰트

프로퍼티도 데이터를 가지고 있다는 의미. 즉, 프로퍼티 어트리뷰트는 객체라고 이야기 할 수 있음.

• value : 프로퍼티 값
• writable : 재할당 할 수 있는가? false이면, 재할당 불가. Read only!
• configurable : 프로퍼티 어트리뷰트 들을 재정의 할 수 있는가?
• enumerable : 열거 가능한가?

---

arguments

유사 배열 객체이며,

1. length 프로퍼티가 존재해야 함
2. 프로퍼티 키가 0, 1, 2, 3, 4 처럼 숫자처럼 보이지만, 인덱스처럼 생긴 ‘문자열'임

객체가 실제로 가지고 있는 프로퍼티와 callee, length, symbol 등등은 enumerable이 false이기 때문에 색깔이 다르고, 상속받은 속성들은 [[Prototype]]에 담겨 있음.

---

순회 vs 열거

• 순회 : 순서가 중요함 배열 [1, 2, 3]을 for문으로 도는 경우
  
• 열거 : 순서가 의미 없음 객체의 경우 순서가 의미 없기 때문에 열거라고 표현 함. 객체는 이름에 의미가 있고, 배열에는 이름이 없음. 배열은 인덱스이며, 객체는 이름이 의미가 있는 프로퍼티 키를 가짐. 열거가 되는 속성들은 enumerabledl true인 것들인데, false인 callee, length 같은 것들은 나오지 않음.
  

---

유사 배열 객체

유사 배열 객체는 배열처럼 순회하는 것.

객체가 배열보다 나은 점 하나가 있는데, 그게 바로, 메서드를 자유 자재로 넣을 수 있다는 것임.

화살표 함수에는 유사 배열 객체인 arguments 객체가 없음.

가변 인자 함수를 Rest 파라미터를 써서 화살표 함수에서 만들 수 있기 때문임.

//안쓰는 옛날방법. 변수도 많이써야되고 가독성 떨어짐

const sum = function () {
	let res = 0;
	for (let i = 0; i < arguments.length; i++) {
		res += arguments[i];
	}
	return res;
}

// ES6 이후 방법. 변수도 안 쓰꼬 가독성도 좋음!
const sum = function (...args) {
	return args.reduce((p, c) => p + c, 0);
}

---

생성자 함수를 쓰는 이유?

생성자 함수는 프로퍼티 구조가 동일한 객체를 여러 개 생성할 때 유리함.

다만, this에 할당은 못함.

---

할당 vs 바인딩

식별자와 값을 이어주는 것으로 거의 두 개가 비슷한 개념임.

---

상속을 왜 하는가..?

재사용을 위해서!

누가 하는가? 인스턴스들의 부모, 즉, 프로토타입이 하는 것임

---

this 암기사항 3가지

1. 일반 함수로 호출되면 전역 객체를 의미
2. 생성자 함수로 호출되면 생성자 함수가 생성할 인스턴스를 의미
3. 메서드로 호출하면 앞에 나온 호출자를 의미

---

프로토타입은 왜 있는가?

생성자 함수의 내용을 프로토타입으로 옮기고, 그 옮긴 내용을 인스턴스에게 상속해주려고.

프로퍼티는 대부분 인스턴스마다 가지고 있는게 맞음.

메서드는 행위이기 때문에 인스턴스가 다 가지고 있는 것이 아니고, 사람 이름이나 나이 같은 것은 인스턴스가 직접 메모리에 가지고 있는 것임.

function Person(name) {
  this.name = name;

  Person.prototype.sayHi = function () {
    console.log(`Hi! my name is ${this.name}.`);
    // 이러면 new 할때마다 이 메서드가 계속 생긴다.
  };
}

Person.prototype.sayHi = function () {
  console.log(`Hi! my name is ${this.name}.`);
  // 이렇게 해야 하나만 생성됨.
  // 그런데 가독성의 측면에서 생성자 함수랑 같이 있어야 됨.
  // 지금은 바로 밑에 있지만 이거랑 위에 생성자함수 사이에 1000줄 코드 있으면?
  // 가독성 엄청나쁨.
  // 그래서 이 두 개가 딱 묶여있으면 좋겠음.

  // 즉시 실행 함수로 감싸면 묶을 수 있음.
};

const Person2 = (function () {
  function Person2(name) {
    this.name = name;
  }
  Person2.prototype.sayHi = function () {
    console.log(`Hi! my name is ${this.name}.`);
  };

  return Person2;
})();

const me = new Person2('Lee');
// 이렇게 하면 캡슐화가 됨. 그래도 아쉬움이 있음.
// 그래서 나온 개념이 클래스!

인스턴스가 프로토타입의 메서드를 어디에서 찾는가?

스코프 체인의 경우 식별자 참조가 시작되는 곳에서부터 찾기 시작함.

인스턴스가 메서드를 찾을 때도 자기 자신에서 먼저 찾고, 그 때 없으면 상위 프로토타입으로 올라가서 찾게됨.

메서드 이름은 식별자가 아니며, 만약 식별자라면 스코프체인에서 찾아야 함.

그렇지만, 프로토타입은 체인 상에서 찾음.

그래서 프로퍼티(메서드)는 프로토타입 체인에서 찾는 것이고, 식별자는 스코프체인에서 찾음.

me.sayHi();

에서는 식별자인 me는 식별자이기 때문에 네이밍 규칙을 지켜야 함.

그런데 메서드는 프로퍼티이기 때문에 네이밍 규칙을 지키지 않아도 됨!