Javascript16(응용JS_spread & rest) feat.velopert

min seung moon·2021년 3월 6일
0

Javascript

목록 보기
19/23
post-custom-banner

spread & rest

  • ... 을 이용
  • spread(펼치다 퍼트리다),
  • 기존에 있는 객체에 있는 내용을 참고(복사)로 새로운 객체를 만들 때 사용
  • rest는 객체, 배열, 함수의 파라메터에서 사용, 모으는 역할을 함

01. 객체 spread

const slime = {
	name : '슬라임'
}

const cuteSlime = {
	//name : '슬라임',
	...slime, // slime의 정보를 가져 온다
	attribute : 'cute'
}

// 이렇게 사용하면 최상위 slime부터 purpleCuteSlime까지 동일한 값을 가지게 된다
const cuteSlime = slime;
cuteSlime.attribute = 'cute';

const purpleCuteSlime = {
	//name : '슬라임',
	//attribute : 'cute',
	...cuteSlime,
	color : 'purple'
}

const greenCuteSlime = {
	...purpleCuteSlime,
	//오버라이딩
	color : 'green'
}

// 이렇게 사용하면 최상위 slime부터 purpleCuteSlime까지 동일한 값을 가지게 된다
const purpleCuteSlime = cuteSlime;
purpleCuteSlime.color = 'purple';

console.log(slime);
console.log(cuteSlime);
console.log(purpleCuteSlime);

console.log(slime == purpleCuteSlime)

02. 배열 spread

const animals = ['개', '고양이', '참새'];
// const anitherAnimals = animals.concat('비둘기')
const anitherAnimals = [...animals, '비둘기'];

const.log(animals);
const.log(anitherAnimals);

const numbers = [1,2,3,4,5];
const spreadNumbers = [...numbers, 1000, ...numbers];
console.log(spreadNumbers);

03. 객체 rest

const purpleCuteSlime = {
	name : '슬라임',
	attribute : 'cute',
	color : 'purple'
};

const { color, ...rest } =purpleCuteSlime;
//rest의 이름은 아무거나 사용해된다
const { color, ...cuteSlime } =purpleCuteSlime;
console.log(color);
// color를 제외한 name과 attribute가 들어가 있다
console.log(rest);
const { attribute, ...slime } = cuteSlime;
console.log(slime);

04. 배열 rest

const numbers = [0,1,2,3,4,5,6];

//rest는 마지막에 와야 한다
const [one, tow, ...rest] = numbers;

console.log(one);
console.log(two);
console.log(rest);

05. 함수파라메터 rest

function sum(a, b, c, d, e, f, g) {
	return a + b + c + d + e + f + g;
}

//한개라도 파라메터가 없으면 실행이 안됨
console.log(sum(1,2,3,4,5,6));

function sum(a, b, c, d, e, f, g) {
	let result = 0;
	if (a) result += a;
	if (b) result += b;
	if (c) result += c;
	if (d) result += d;
	if (e) result += e;
	if (f) result += f;
	if (g) result += g;
	return result;
}

function sum(...rest) {
	return rest.reduce((acc, current) => acc + current, 0);
}

06. 함수 인자에서의 spread

// 파라메터는 함수에서 받아오는 것
// x,y 는 파라메터
function subtrackt(x, y){
	return x - y;
}

// 인자는 함수를 사용할 때 넣어주는 값
//1,2s는 인자
const result = subtract(1, 2);

const numbers = [1,2];
//const result = subtract(numbers[0], numbers[1]);
const result = subtract(...numbers);

console.log(result);
profile
아직까지는 코린이!
post-custom-banner

0개의 댓글