Destructuring & Arrow Functions

Destructuring Assigment

MDN

• 배열의 원소나 객체의 프로퍼티를 추출해서 변수에 저장할 수 있도록 해주는 것
• 데이터 뭉치 (그룹화)를 쉽게 만들 수 있다.

  const fruits = ['🍌','🍓','🍏','🍆']
  const banana = fruits[0];  // 🍌
  const strawberry = fruits[1]; // 🍓
  const apple = fruits[2]; // 🍏
  const eggplant = fruits[3]; // 🍆

  너무 비효율적 😖

  간단하게 만들어보자!! 😁

const fruits = ['🍌','🍓','🍏','🍆'];
const [ banana, strawberry, ...others] = fruits;
console.log(banana) // 🍌
console.log(others) // [ '🍏','🍆' ];

좀 더 의미 있게 만들어보자 !

function createEmoji() {
  return ['apple', '🍎'];
}
const [title, emoji] = createEmoji();
console.log(title); // apple
console.log(emoji); // 🍎

const huisu= { name: 'huisu', age: 10, job: '백수' };
function display({ name, age, job }) {
  console.log('이름', name); // 이름 huisu
  console.log('나이', age); // 나이 10 
  console.log('직업', job); // 직업 백수
}
display(huisu);

const { name, age, job: occupation, pet = '햄스터' } = huisu;
console.log(name); // huisu
console.log(age); // 31 
console.log(occupation); // 백수
console.log(pet); // 햄스터

Arrow Functions

• 일반적인 함수 구문
• function myFun () { ... }
• 화살표 함수 구문 (Arrow Function)
• const myFun = () => { ... }
• 키워드 function 을 생략했기 때문에 일반적인 함수보다 짧다
• 표현만 간단한 것이 아니라, 내부 동작 또한 간략화 되어있다.
• 또한 자바스크립트에 있던 키워드 this 로 인해 생겼던 많은 문제들을 해결해주는 장점을 갖고 있습니다. (this 가 전역 객체를 가리키는 문제를 해결함)
• 한 개의 매개변수를 가질 시 () 소괄호를 생략 할 수 있다. ( 매개변수가 없을 시에는 생략X)
• 함수 몸체가 하나의 문으로 구성시, {} 중괄호를 생략할 수 있다.
• 예시
• const sum = (num) => { return num + 2 } console.log(num(4)); // 6

// 더 짧게 줄일 수 있다.
const sum = num => num + 2;
cosole.log(num(4)); // 6

- 결과는 같다!