[실전 자바스크립트]객체와 배열의 주요기능 - spread operator 및 몇 가지 편의기능 사용하기

좀 더 간편하게 객체와 배열을 생성하고 수정하기

const name = 'mike';
const obj = {
	age: 21,
  	//단축 속성명을 활용한 name, getName
  	name, 
    //shorthand property names
  	getName() {
    	return this.name; //변수가 가지고 있는 값이 그대로 속성값에 할당이 된다. 
    },
};

//단축속성명을 사용했을 때와 안했을 때의 차이점
function makePerson1(age, name) {
	return { age: age, name: name};
}
//단축속성명을 사용하면 더 편하게 사용이 가능하다
function makePerson2(age, name) {
	return { age,  name};
}

단축 속성명 사용의 이점(shorthand property names)

디버깅 할 때 로그찍는 것이 편해진다

const name = 'mike';
const age = 21;
console.log(name, age); //mike 21 : 단순출력으로 보기가 힘들다.
console.log('name =', name, ', age=', age); //이렇게 직접 작성해 줄 수 있으나, 이렇게하면 작성이 불편하고 힘들다.
console.log({ name, age }); //단축속성명을 활용하면 심플하게 편리하게 표현이 가능하다.

계산된 속성명 (computed property names)

사용하는 이유 계산된 객체의 속성명을 동적으로 결정하기 위해서 나오게 되어진 문법

function makeOjbect1(key, value){
	const obj = {};
  	obj[key] = value;
  	return obj;
}
function makeObject2(key, value){
	return { [key]: value}; //객체를 만들면서, 그와 동시에 속성이름에 대해서 결정이 가능하다
}

객체 배열의 속성값 간단하게 가지고 오기(전개 연산자)

Math.max(1,3,7,9); //이것을
const numbers = [1,3,7,9];
Math.max(...numbers); //전개연산자 ...을 활용하여 이런식으로 표현이 가능합니다.

// '...' : spread operator

전개 연산자를 이용해서 배열이나 객체를 복사하기

중요! : array는 object다! 상기할 것

const arr1 = [1,2,3];
const obj1 = { age: 23, name: 'mike'};
const arr2 = {...arr1}; // arr1을 전개 연산자를 이용하여 복사
const obj2 = {...obj1}; // obj1을 전개 연산자를 이용하여 복사
arr2.push(4); // 당연히 복사된 객체에 대해 작업이 가능하다
obj2.age = 80; // 당연히 복사된 객체에 대해 작업이 가능하다

배열의 경우에는 전개연산자를 이용하게 되면 그 순서가 유지된다.

[1, ...[2,3], 4]; // [1,2,3,4]
new Date(...[2018, 11, 24]); // 순서가 유지된다는 이 점으로 파라미터 값을 전개연산자 + 배열로 관리가 가능하다.

전개연산자를 활용하면 서로 다른 두 배열 객체를 쉽게 합쳐 쓸 수 있다.

const obj1 = { age: 21, name: 'mike'};
const obj2 = { hobby: 'soccer' };
const obj3 = {...obj1, ...obj2 }; //전개 연산자를 두번 사용하여 하나의 객체로 만들 수 있다.
console.log(obj3);

//같은 속성이 두번 사용되어진 경우 맨 마지막 것이 속성값이 된다
const obj1 = { x: 1, x: 2, y: 'a'}; 
const obj2 = { ...obj1, y: 'b'}; //전개 연산자를 활용하여서, 뒤쪽에 있는 y속성의 객체값만을 바꾸어 준 후에 새로운 객체를 만든다. 변수를 수정 불가능하게 활용할 때에 사용이 가능하다
console.log({ obj1, obj2 });