new 연산자에서의 this?

• 아래의 코드에서 에러가 발생하는 이유는 Cat 함수 실행 시 this는 window를 가리키게 되고 const cat에서 name은 undefined가 발생하게 된다.

function Cat(name, age) {
  this.name = name;
  this.age = age;
}

const cat = Cat('gugu', 9);
console.log(cat.name) // error!

• new를 붙여주면 this는 window가 아닌 새로 생긴 객체를 가리킴

function Cat(name, age) {
  this.name = name;
  this.age = age;
}

const cat = new Cat('gugu', 9);
console.log(cat.name) // gugu 출력

new 키워드의 동작 순서

1. 빈 객체를 만들어 this에 할당
2. 함수 본문을 실행하며 this에 새로운 프로퍼티를 추가해 this를 수정
3. this를 반환

function Person(name) {
	// this = {}; 빈 객체를 임시로 만듬
	this.name = name; // 새로운 프로퍼티를 this에 추가
	// return this; this가 암시적으로 반환
}

let person = new Person('Gugu');
// 즉 위의 new Person 코드는 아래와 같다.
let person = {
	name: 'Gugu',
};

arrow function의 this

• 화살표 함수는 일반 함수와 달리 고유한 this를 가지지 않음
• 화살표 함수에서 this는 외부 함수의 this를 말함

let person = {
  title: "구구구",
  students: ["치킨", "회", "피자"],

  showLikes() {
    this.students.forEach(
			// forEacth에서 화살표 함수를 사용했으므로 화살표 함수 본문의 this.title은
			// 함수 밖같의 showLikes가 가리키는 대상과 동일해 짐 this.title = person.title
      student => console.log(this.title + '의 최애 음식' + student)
    );
  }
};

person.showLikes();

즉시 실행 함수(IIFE)

• IIFE를 사용하지 않고 여러개의 JS파일을 모듈화 한다면 서로 다른 JS 파일에서 동일한 이름을 가진 변수나 함수가 오염될 수 있음 ⇒ IIFE를 사용하여 전역 오염을 최소화 시킬 수 있음
• 활용 방법

const counter = (function() {
  // 외부에서는 count 변수에 직접적으로 접근할 수 없음 => private 효과
  let count = 0;
  function log(message) {
    console.log(message);
    count += 1;
  }
  function getCount() {
    return count;
  }
  return {
    log: log,
    getCount: getCount
  }
})()

console.log(counter.getCount()); // 2
console.log(counter.count); // undefined

명령형(imperative) 프로그래밍

• 컴퓨터가 수행할 명령들을 순서대로 써 놓은 것
• “어떻게 구현하는가?”(How)에 관점을 둠

선언형(declarative) 프로그래밍

• 프로그램이 어떤 방법으로 해야 하는지를 나타내기보다 ”무엇과 같은지”(What)를 설명하는 경우
• 목표를 명시하고 알고리즘을 명시하지 않는 것 ⇒ HTML이 대표적인 선언형 프로그래밍 언어
• 코드가 간결하고 확정성도 좋아져서 명령형보다는 선언형 사용을 지향함

명령형과 선언형의 차이

// 명령형
function imperativeDouble(arr) {
  let results = [];
  for (let i = 0; i < arr.length; i++) {
    results.push(arr[i] * 2);
  }
  return results;
}

// 선언형
function declarativeDouble(arr) {
  return arr.map((num) => num * 2);
}

파일의 마지막에 공백을 추가??

• 줄바꿈을 하므로서 개행 문자를 추가함
• 파일 마지막 줄 바꿈은 유닉스에서 관용적으로 사용되던 것
• 줄 바꿈이 없으면 파일을 올바르게 처리하지 못하는 프로그램들이 존재함 ⇒ GitHub에서는 마지막 줄바꿈이 추가되지 않으면 경고 메시지를 띄워줌
• 손상된 파일을 쉽게 찾을 수 있음
• JS, HTML, CSS 파일에는 줄 바꿈을 하지 않아도 문제가 발생하지는 않음 ⇒ 그래도 만약을 위해 사용하자