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 

• 결과는 같다.

추가 필요한 학습

• this