[TIL] Modern JavaScript

화살표 함수

• 일반 함수 표현식

const add = function (x, y) {
  return x + y;
}

• 화살표 함수 표현식

const add = (x, y) => x + y;

화살표 함수의 경우 function을 생략 가능하고, 함수의 내용이 return 1줄인 경우 중괄호도 생략한다.

const getStudentAvg = arr => {
  return arr
    .filter(person => person.job === 'student')
    .reduce((sum, person) => (sum + person.grade), 0);
}

함수의 내용이 return 포함 여러 줄인 경우 중괄호도 생략한다.

Spread/Rest 문법

let arrayToSpread = [1, 2];
add(...arrayToSpread); // 3

let arrayFromSpread = ...arrayToSpread;
console.log(arrayFromSpread); // [1, 2]

• spread syntax: array to individual elements
• rest parameter: individual elements to array

구조 분해 할당 (Destructing)

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 표현식

• 객체 shorthand

var o = {p: 42, q: true};
var {p, q} = o;

console.log(p); // 42
console.log(q); // true

• parameter로 전달된 객체에서 필드 해체

function whois({displayName: displayName, fullName: {firstName: name}}){
  console.log(displayName + " is " + name);
}

let user = {
  id: 42,
  displayName: "jdoe",
  fullName: {
      firstName: "John",
      lastName: "Doe"
  }
};

whois(user); // "jdoe is John"

user라는 object의 속성을 해체하여 displayName, name 등의 변수에 담아 접근한다.

node.js

• require 문법

// script1.js
const module2 = require('./script2.js');
// script2.js
console.log('this is module 2');

require문을 통해 모듈 혹은 스크립트를 불러올 수 있다.

• module.exports & exports

// script1.js
const module2 = require('./script2.js')
console.log(modules2) // 'this is module 2'
// script2.js
module.exports = 'this is module 2'

module.exports를 이용해 다른 스크립트에서 내가 만든 모듈을 불러올 수 있다. 일종의 return문과 유사하게 작동한다.

module.exports.hello = true; // Exported from require of module
exports = { hello: false };  // Not exported, only available in the module

exports는 module.exports를 참조하는 shortcut으로, exports에 직접 다른 객체가 재할당되는 경우 더이상 module.exports를 참조하지 않아 다른 스크립트에서 이용할 수 없다.

classes & instances

class Student {
  constructor(commitment, course, wave, name) {
    this.commitment = commitment;
    this.course = course;
    this.wave = wave;
    this.name = name;
  }
  
  getDisplayName () {
  	return `${this.commitment} ${this.course} ${this.wave} ${this.name}`;
  }
  
  printDisplayName () {
    console.log(this.getDisplayName());
  }
}

let me = new Student('Full', 'IM', '28', '도하영');
me.printDisplayName() // 'Full IM 28 도하영'

• class: 특정한 속성과 메소드를 지닌 객체의 청사진 (Student)
• instance: class라는 청사진을 참고해 만든 개별적 객체 (me)
• prototype: class를 만들 때 쓰는 원형 객체
• constructor: 각각의 새로운 instance를 만들 때 실행하는 생성자 함수
• this: 함수를 실행할 때 고유한 execution context

function methods

• call vs apply
  명시적으로 this를 지정하고 싶을 때 사용하는 호출 메소드. 첫번째 인자가 항상 this값으로 들어간다. 동일하게 작동하나 call()은 인수 목록을, apply()는 인수 배열 하나를 받는다.

• bind
  .call과 유사하게 this 및 인자를 바인딩하나, 당장 실행하는 것이 아닌 바인딩된 함수를 리턴하는 호출 메소드.

Sources
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment