[JS] destructuring 응용 예제 코드

유사배열 배열로 바꾸기

유사배열 (array-like)은 forEach를 사용할 수 없기 때문에 Array.from() 을 사용해야 한다.

const buttons = document.getElementsByClassName('btn');

// for(let i=0; i<buttons.length; i++) {
//   buttons[i].addEventListener('click', () => console.log('clicked!!!'));
// }

Array.from(buttons).forEach(button => {
  button.addEventListener('click', () => console.log('clicked!~!'));
});

일반 for 문은 사용 가능하다.

 

 

object destructuring

const obj = {
  color: { 
    theme: 'dark',
    font: 'white'
  },
  fruit: 'banana',
  name: 'sherlock'
};

const { color: {theme=false} = {} } = obj;
console.log(theme); //dark

 

array destructuring

const days = ['Mon', 'Tue', 'Wed'];

const [mon, tue, wed] = days;
console.log(mon, tue, wed); // Mon Tue Wed

 

rename

const settings = {
  color: {
    chosen_color: 'dark'
  }
};

let chosenColor = 'blue';
console.log(chosenColor); // blue

({ color: {chosen_color: chosenColor = 'light'} } = settings);
console.log(chosenColor); // dark

 

 

함수 디스트럭쳐링 function destructuring

function save( {info: {address=false} = {} } ) {
  console.log(address);
}

save({
  name: 'sherlock',
  score: 'A',
  hobby: 'reading',
  info: {
    address: 'seoul',
    job: 'dev'
  }
}); 

// seoul

 

 

swapping

let mon = 'sat';
let sat = 'mon';

[mon, sat] = [sat, mon];

console.log(mon, sat); //mon sat

 

skkiping

const arr = ['A', 'B', 'C', 'D', 'E'];

[ , , ,val] = arr;
console.log(val); // D

 

 

오브젝트-객체도 전개 연산자를 이용할 수 있다.

const obj1 = {
	name: 'sherlock',
	job: 'dev'
};

const obj2 = {
	score: 'A',
	address: 'seoul'
};

const obj3 = { ...obj1, ...obj2 };
console.log(obj3);
//{ name: 'sherlock', job: 'dev', score: 'A', address: 'seoul' }

 

응용

const name = 'sherlock';

const obj = {
	score: 'A',
	address: 'SEOUL',
	...{ name }
};

console.log(obj);
// { score: 'A', address: 'SEOUL', name: 'sherlock' }

const name = '';

const obj = {
	score: 'A',
	address: 'SEOUL',
	...(name !== '' && { name })
};

console.log(obj);
// { score: 'A', address: 'SEOUL' }

 

 

rest

function test(...args) {
	console.log(args);
}

test('a', 1, 2, ['x', 'y'], { m: 'm' }, 5, 'd');
//[ 'a', 1, 2, [ 'x', 'y' ], { m: 'm' }, 5, 'd' ]

 

const user = {
	name: 'sherlock',
	address: 'seoul',
	password: '1234'
};

const deletePassword = ({ password, ...rest }) => rest;

console.log(deletePassword(user));
// { name: 'sherlock', address: 'seoul' }

 

const user = {
	name: 'sherlock',
	address: 'seoul',
	password: '1234'
};

const setCountry = ({ country = 'KOREA', ...rest }) => {
	return { country, ...rest };
};

console.log(setCountry(user));

// { country: 'KOREA',
//   name: 'sherlock',
//   address: 'seoul',
//   password: '1234' }

위와 동일

const user = {
	name: 'sherlock',
	address: 'seoul',
	password: '1234'
};

const setCountry = ({ country = 'KOREA', ...rest }) => ({ country, ...rest });

console.log(setCountry(user));

 

오브젝트 키(이름) 바꾸기

const user = {
	NAME: 'sherlock',
	address: 'seoul',
	password: '1234'
};

const modiUser = ({ NAME: name, ...rest }) => ({ name, ...rest });

console.log(modiUser(user));
//{ name: 'sherlock', address: 'seoul', password: '1234' }

 

for of 주의 (object 는 for in 문을 사용한다)

const users = {
	NAME: 'sherlock',
	address: 'seoul',
	password: '1234'
};

const friends = ['sherlock', 'lily', 'mina', 'rose'];

for (let user of users) {
	console.log(user);
}

// TypeError: users is not iterable
// object(객체) 는 iterable 이 아니네.