코드를 통해 확인하는 ES6 객체와 배열 문법 (전개연산자, 비구조화)

17. 단축 속성명을 사용해서 객체를 생성하기.

const name = 'mike';
const obj = {
	age: 21,
  	name, 
 // 새로 만들려는 객체의 속성값 일부가 이미 변수로 존재하면 간단하게 변수 이름만 적어 준다.
  	getName() { return this.name }, 
  //속성값이 함수이면 function 키워드 없이 함수명만 적어도 된다.
};

18. 단축 속성명을 사용하지 않은 코드와 사용한 코드를 비교하기

function makePerson1 (age, name) {
	return { age:age, name: name };
}
function makePerson2 (age, name) {
	return { age, name }
}

19. 콘솔 로그 출력시 단축 속성명 활용하기

const name = 'mike';
const age = 21;
console.log('name =', name, ', age =', age); // name = mike, age = 21 
console.log({ name, age }); // { name: 'mike', age: 21 }

20. 계산된 속성명을 사용하지 않은 코드와 사용한 코드 비교

function makeObject1(key, value) {
	const obj = {};
  	obj[key] = value;
  	return obj;
}
function makeObject2(key, value){
	return { [key]: value };
}

21 계산된 속성명을 사용해서 컴포넌트 상탯값 변경하기.

class MyComponent extends React.Component {
	state = {
		count1: 0,
      	count2: 0,
      	count3: 0,
};
// ...
onClick = index => {
	const key = `count${index}`;
  	const value = this.state[key];
  	this.setState({ [key]: value + 1 });
	};
}

// 리액트 클래스 문법 공부 시 다시 확인하기.

22. 전개 연산자를 이용해서 함수의 매개변수를 입력하기

Math.max(1, 3, 7, 9); // 동적으로 매개변수 전달 X
const numbers = [1, 3, 7, 9];
Math.max(...numbers); // 동적으로 매개변수 전달 O
// 9 , 일반 배열을  Math.max에 넣으면 NaN이 출력

23. apply 함수를 이용해서 동적으로 함수의 매개변수 입력하기
    (작성하기 번거롭고, 가동성도 떨어진다.)

const numbers = [-1, 5, 11, 3];
Math.max.apply(null, numbers); // 11
//가독성이 떨어지므로, rest파라미터를 사용하는 Math.max(...numbers)를 사용하자.

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

const arr1 = [1, 2, 3];
const obj1 = { age: 23, name: 'mike' };
const arr2 = [...arr1];
const obj2 = { ...obj1 };
arr2.push(4); // [1, 2, 3, 4] 원래 배열 영향 X
obj2.age = 80; // { age; 80, name: 'mike' } 원래 객체 영향X

25. 배열에서 전개 연산자를 사용하면 순서가 유지된다.

[1, ...[2, 3], 4]; // [1, 2, 3, 4]
new Date (...[2020, 6, 24]); // 2020년 6월 24일

26. 전개 연산자를 이용해서 두 객체를 병합하기

const obj1 = { age: 21, name: 'mike'};
const obj2 = { hobby: 'soccer' };
const obj3 = { ...obj1, ...obj2 }
console.log(obj3); // { age: 21, name: 'mike', hobby: 'soccer' }

27. 객체 리터럴에서 중복된 속성명 사용 가능

const obj1 = { x: 1, x: 2, y: 'a' }; // {x: 2, y: 'a'}
const obj2 = { ...obj1, y: 'b' }; // { x: 2, y: 'b'}

28.const 배열 비구조화를 사용한 간단한 코드

const arr = [1, 2];
const [a, b] = arr;
console.log(a); // 1
console.log(b); // 2

29. 배열 비구조화로 이미 존재하는 변수에 값을 할당하기

let a, b;
[a, b] = [1, 2];

30. 배열 비구조화에서의 기본값

const arr= [1];
const [a= 10, b= 20] = arr
console.log(a); // 1
console.log(b); // 20

첫번째 변수의 속성값은 존재하기 때문에 속성 값이 그대로 할당
두번째 변수의 속성값은 undefined 이므로 기본값 20이 할당된다.

31.배열 비구조화를 이용해서 두 변수의 값을 교환하기

let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a); // 2
console.log(b); // 1

32.쉼표를 이용해서 일부 속성값을 건너뛰기

const arr = [1, 2, 3];
const [a, , c] = arr;
console.log(a); // 1
console.log(c); // 3

33. 나머지 값을 별도의 배열로 만들기

const arr = [1, 2, 3];
const [first, ...rest1] = arr;
console.log(rest1); // [2, 3]
const [a, b, c, ...rest2] = arr;
console.log(rest2); // []

34. 객체 비구조화의 간단한 예

const obj = { age: 21, name: 'mike' }
const { age, name } = obj;
console.log(age); // 21
console.log(name); // mike

35.객체 비구조화에서는 속성명이 중요하다.

const obj = { age: 21, name: 'mike' }
const { age, name } = obj; 
const { name, age } = obj;
const { a, b } = obj;

객체 비구조화에서 순서는 무의미 하므로 a, b 의 결과값이 같다.

36. 객체 비구조화에서 별칭 사용하기

const obj = { age: 21, name: 'mike' }
const { age: theAge, name } = obj;
console.log(theAge); // 21
console.log(age); // 참조 에러

37. 객체 비구조화에서의 기본값

const obj = { age: undefined, name: null, grade: 'A' }
const { age = 0, name = 'noName', grade = 'F' } = obj;
console.log(age); // 0
console.log(name); // null
console.log(grade); // A

age는 undefined 이므로 기본값이 들어간다.
name의 속성값은 null 이므로 기본값은 들어가지 않는다.

38. 기본값과 별칭 동시에 사용하기

const obj = { age: undefined, name: 'mike' }
const { age: theAge = 0, name } = obj;
console.log(theAge); // 0

39. 함수를 이용한 기본값

function getDefaultAge() {
	console.log('hello');
  	return 0;
}
const obj = { age: 21, grade: 'A' };
const { age= getDefaultAge(), grade } = obj; // hello출력 되지 않음.
console.log(age); // 21 

40.객체 비구조화에서 나머지 속성들을 별도의 객체로 생성하기.

const obj = { age: 21, name: 'mike', grade: 'A' }
const { age, ...rest } = obj;
console.log(rest); // { name: 'mike', grade: 'A' }

41. for문에서 객체 비구조화를 활용한 예

const people = [{ age: 21, name: 'mike' }, { age: 51, name: 'sara'}]
for (const { age, name } of people )
  // ...

42. 중첩된 객체의 비구조화 사용 예

const obj = { name: 'mike', mother: { name: 'sara' } };
const {
	name,
  	mother: { name: motherName },
	} = obj;
console.log(name); // mike
console.log(motherName); // sara
console.log(mother); // 참조 에러

43. 기본값은 변수 단위가 아니라 패턴 단위로 적용된다.

const [{ prop: x } = { prop: 123 } ] = [];
console.log(x); // 123
const [{ prop: x } = { prop: 123 } ] = [{}];
console.log(x); // undefined

첫 번째 코드에서의 { prop : x }는 배열의 첫 번째 원소를 가리키고. { prop : 123}은 기본값을 정의한다. 첫 번째 원소가 존재하지 않아서 기본값을 할당한다.
두 번째 배열의 첫번째 원소가 존재하므로 기본값이 할당되지 않는다. 첫 번째 원소에는 prop이라는 이름의 속성명이 존재하지 않으므로 x에는 undefined가 할당된다.

44. 객체 비구조화에서 계산된 속성명 사용하기

const index = 1;
const { [`key${index}`]: valueOftheIndex } = { key1: 123 };
console.log(valueOftheIndex); // 123

45. 별칭을 이용해서 다른 객체와 배열의 속성값 할당

const obj = {};
const arr = [];
({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true });
console.log(obj); // {prop: 123}
console.log(arr); // [true]