11월 넷째 주 TWIL

Immersive Course

Immersive Course(이하 IM)는 프로그래밍 교육기관 코드 스테이츠의 웹 개발 심화 코스이다. 나는 IM 16기로 2019년 11월부터 2020년 2월까지 다른 수강생들과 함께 공부한다. 해당 기간에 TWIL에 정리하는 내용은 IM에서 배우고, 내가 찾아보고, 다른 수강생들이 전해 준 지식이다.

---

setTimeout() 메서드에 첫 번째 인자로 함수 실행 값을 넣었을 때

setTimeout()은 첫 번째 매개변수로 함수를, 두 번째 매개변수로 시간(ms)을 받는 메서드다. 매개변수로 받은 시간이 지나간 후 함수를 실행시킨다. 이때 함수 자리에 함수의 실행 값(함수 뒤에 괄호'()'를 붙인 것)을 넘기면, 타이머가 작동하지 않고 메서드 역시 작동하지 않아 함수의 실행 값이 바로 평가된다. 함수가 아닌 함수의 실행 값을 적어넣지 않도록 주의해야 한다.

const huchu = {
  name: "후추",
  introduce: function() {
    alert(this.name + "는 고양이입니다.");
  }
};

setTimeout(huchu.introduce(), 1000);
// 인자로 함수가 아닌 함수의 실행값을 넣으면?
// 1초 뒤가 아닌 즉시 '후추는 고양이입니다.'라는 alert창이 뜬다.

return 시 삼항 연산자 사용하기

const eitherOne = (f, g, x) => x % 2 === 0 ? f(x) : g(x);
// x가 짝수라면 함수 f에 대입한 값을 리턴하고, 홀수라면 함수 g에 대입한 값을 리턴한다.

const result = eitherOne(x => x + 5, x => x - 5, 15);
// 10

참조 타입 변수가 선언될 때, 변수 혹은 함수의 반환 값을 요소로 가지고 있다면

전역 영역에 선언된 함수나 변수의 값을 이용해 배열 혹은 객체가 지닌 값들을 정할 수 있다. 이때 요소들은 가장 왼쪽에 위치한 요소부터 평가되어 값이 결정된다.

let x = 10;

const f = () => {
  x = x + 1;
  return x;
}

const result = [x, f(), x];
// 배열 result는 변수와 함수의 실행값을 요소로 가지고 있다.

console.log(result); // [10, 11, 11]

const obj = {
  a: f(),
  b: x,
};
// 객체 obj는 변수와 함수의 실행값을 요소로 가지고 있다.

console.log(obj.a); // 12

console.log(obj.b); // 12

위 코드에서 result가 할당받는 배열 안 요소들은 왼쪽부터 차례대로 평가된다. 0번 인덱스 요소 x는 가장 윗줄에 선언된 변수 x의 값을 받아 10, 1번 인덱스 요소 f()는 함수 f를 실행하여 받은 반환 값인 11이다. 이 시점에서 변수 x는 값이 11로 변경되었기 때문에, 2번 인덱스 요소는 11이 된다.

obj가 할당받는 객체 역시 배열과 마찬가지다. obj.a는 함수 f를 실행하여 받은 리턴값인 12이며, 이때 변수 x의 값도 12가 되기 때문에 obj.b는 12가 된다.

생성자 함수 상속 구현하기

1. Psuedoclassical 스타일 생성자 함수의 상속 구현하기

생성자 함수 Cat이 가진 속성과 함수를 생성자 함수 Dog가 사용하기(상속 받기) 위해서는, 여러 절차가 필요하다.

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

Cat.prototype.sayHi = function() {
  return '야옹';
}


// Cat을 상속받는 생성자 함수 Dog를 만들기
const Dog = function(name, color, age) {
  Cat.apply(this, arguments) // 1번
  this.age = age;
}

Dog.prototype = Object.create(Cat.prototype); // 2번
Dog.prototype.constructor = Dog; // 3번


Dog.prototype.sayHi = function() {
  const meow = Cat.prototype.sayHi.call(this); // 4번
  return `${this.age}살 ${this.color} ${this.name}가 '${meow}'하고.. 아니, '멍멍!' 하고 인사했다.`;
}

const dog = new Dog('바둑이', '검정색', 5);

dog.sayHi();
// "검정색 바둑이가 '야옹'하고.. 아니, '멍멍!' 하고 인사했다."

• 1번 - 함수 Dog에서 받는 인자들을 함수 Cat으로 넘겨 실행한다. apply()를 이용하여 this를 Dog로 설정한다.
• 2번 - Cat의 prototype을 참조하는 객체를 Dog의 prototype에 할당한다.
• 3번 - 2번까지 진행하고 확인해보면, Dog의 constructor는 Cat이다. 이를 Dog로 바꿔준다.
• 4번 - 기능이 다르지만 이름이 같은 부모 객체의 메서드를 자식 객체로 가져와 사용하고 싶다면, call()이나 apply()를 이용한다.

2. ES6 class 문법으로 상속 구현하기

위의 Psuedoclassical 코드를 class 문법으로 작성했다.

class Cat {
  constructor(name, color) {
    this.name = name;
    this.color = color;
  }

  sayHi() {
    return '야옹';
  }
}

// 1번
class Dog extends Cat {
  constructor(name, color, age) {
    // 2번
    super(name, color);
    this.age = age;
  }

  sayHi() {
    // 3번
    const meow = super.sayHi();
    return `${this.age}살 ${this.color} ${this.name}가 '${meow}'하고.. 아니, '멍멍!' 하고 인사했다.`;
  }
}

const dog = new Dog('바둑이', '검정색', 5);
dog.sayHi();
// "5살 검정색 바둑이가 '야옹'하고.. 아니, '멍멍!' 하고 인사했다."

• 1번 - extends 키워드를 사용하여 Dog를 선언하면 prototype 을 연결해줄 필요가 없다. 더불어 constructo도 Dog로 설정된다.
• 2번 - apply()를 이용하여 this를 Dog로 설정하고 인자를 Cat으로 넘기던 부분을, super키워드로 간결하게 해결할 수 있다.
• 3번 - 2번과 마찬가지로 super키워드를 이용하여 부모 객체의 함수를 호출할 수 있다.

구조 분해 할당

[ 구조 분해 할당 | MDN ]
구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다.

배열로 할당하기

아래 코드에서 rest 속성은 구조 분해 패턴으로 걸러지지 않은 열거형 속성의 키를 가진 나머지 항목들을 모은다.

let [a, b] = [10, 20];

console.log(a); // 10
console.log(b); // 20

let rest;

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest);
// [30, 40, 50]

객체로 할당하기 - 선언 없는 할당

'... 참고: 할당 문을 둘러싼 ( )는 선언 없이 객체 리터럴(object literal) 비구조화 할당을 사용할 때 필요한 구문입니다. {a, b} = {a:1, b:2}는 유효한 독립 구문이 아닙니다. 좌변의 {a, b}이 객체 리터럴이 아닌 블록으로 간주되기 때문입니다.

let a, b, rest;

// 괄호로 감싸야 한다.
({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20

({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}

이미 생성한 배열을 이용해 요소를 할당하기

const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log(y); // 1
console.log(z); // 2

두 변수의 값 교환하기

let a = 1;
let b = 3;

[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

함수가 반환한 값을 분해해 할당하기

function f() {
  return [1, 2];
}

let a, b;
[a, b] = f();
console.log(a); // 1
console.log(b); // 2