실전 리액트 프로그래밍을 읽고 개인적으로 정리한 내용입니다.
ES6+에서 객체, 배열 관련 추가된 문법
- 단축 속성명
- 계산된 속성명
- 전개 연산자
- 비구조화 할당
1. 객체와 배열을 간편하게 생성하고 수정하기
1-1. 단축 속성명(shorthand property names)
객체 리터럴 코드를 간편하게 사용할 목적으로 만들어진 문법
const name = "Mike";
const obj = {
age: 21,
name,
getName() {
return this.name;
},
};-
객체의 속성값 일부가 이미 변수로 존재하면 변수 이름만 적어주면 된다.
-
속성값이 함수이면
function키워드 없이 함수명만 적어도 된다. -
속성명은 변수명, 함수명과 같아진다.
// 단축 속성명 사용하지 않은 코드 function makePerson1(age, name) { return { age: age, name: name }; } // 단축 속성명 사용한 코드 function makePerson2(age, name) { return { age, name }; } -
콘솔 로그 출력시에도 유용하다.
const name = "Mike"; const age = 20; console.log("name =", name, "age=", age); // 단축 속셩명 X console.log({ name, age }); // 단축 속셩명 O
1-2. 계산된 속성명(computed property names)
객체의 속성명을 동적으로 결정하기 위한 문법
-
계산된 속성명 사용 예시
// 계산된 속성명 X function makeObject1(key, value) { const obj = {}; obj[key] = value; return obj; } // 계산된 속성명 O function makeObject2(key, value) { return { [key]: value }; } -
컴포넌트 상태값 변경시에도 유용하다.
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 }); }; }
2. 객체와 배열의 속성값을 간편하게 가져오기
2-1. 전개연산자(spread operator)
-
배열이나 객체의 모든 속성을 풀어놓을 때 사용
-
매개변수가 많은 함수를 호출할 때 유용함
-
예시: 전개 연산자를 이용해서 함수의 매개변수 입력받기
const numbers = [1, 3, 7, 9]; Math.max(...numbers); -
예시: 배열이나 객체 복사하기
const arr1 = [1, 2, 3]; const arr2 = [...arr1]; arr2.push(4); const obj1 = { age: 23, name: "Mike" }; const obj2 = { ...obj1 }; obj2.age = 80;
배열의 경우 전개 연산자를 사용하면 그 순서가 유지된다.
전개 연산자를 사용하면 서로다른 두 배열이나 객체를 쉽게 합칠 수 있다.
const obj1 = { age: 21, name: "mike" };
const obj2 = { hobby: "soccer" };
const obj3 = { ...obj1, ...obj2 };- obj1와 obj2가 같은 속성명을 가지고 있다면, 최종 결과는 마지막 속성명의 값이 된다.
- 중복된 속성명과 전개 연산자를 이용하면 객체의 특정 속성값을 변경할 때 이전 객체에 영향을 주지 않고 새로운 객체를 만들 수 있다.
2-2. 배열 비구조화(array destructuring)
배열의 여러 속성값을 변수로 쉽게 할당할 수 있는 문법
- 예시
const arr = [1, 2]; const [a, b] = arr; console.log(a); //1 - 예시: 배열 비구조화의 기본값
const arr = [1]; const [a = 10, b = 20] = arr; console.log(a); //1 console.log(b); //20 - 예시: 두 변수 값 교환
let a = 1; let b = 2; [a, b] = [b, a]; console.log(a); //2 console.log(b); //1 - 예시: 일부 속성값 건너뛰기
const arr = [1, 2, 3]; const [a, , c] = arr; console.log(a); //1 console.log(c); //3 - 예시: 나머지 값을 별도의 배열로 만들기
const arr = [1, 2, 3]; const [first, ...rest1] = arr; console.log(rest1); //[2,3] const [a, b, c, ...rest2] = arr; console.log(rest2); // [] -> 나머지 속성값이 존재하지 않으면 빈 배열로 만들어진다.
2-3. 객체 비구조화
객체의 여러 속성을 변수로 쉽게 할당할 수 있다.
- 예시
const obj = { age: 21, name: "mike" }; const { age, name } = obj; console.log(age); //21 console.log(name); //mike- 객체 비구조화에서는 순서가 무의미하다. 따라서
name과age의 순서가 바뀌어도 결과는 같다. - 단, 배열 비구조화에서 변수 이름은 임의로 정할 수 있었지만 객체 비구조화에서는 기존 속성명을 그대로 사용해야 한다.
- 존재하지 않는 속성명 사용하면 undefined가 할당된다.
- 객체 비구조화에서는 순서가 무의미하다. 따라서
- 예시: 객체 비구조화에서 별칭 사용하기
const obj = { age: 21, name: "mike" }; const { age: theAge, name } = obj; console.log(age); // 참조 에러 console.log(theAge); // 21 - 예시: 객체 비구조화에서 기본값
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- 속성값이
undefined인 경우 기본값이 들어간다. - 속성값이
null이면 기본값이 들어가지 않는다.
- 속성값이
- 예시: 객체 비구조화에서 나머지 속성들을 별도의 객체로 생성하기
const obj = { age: 21, name: "mike", grade: "A" }; const { age, ...rest } = obj; console.log(rest); // {name: 'mike', grade:'A'} - 예시: for문에서 객체 비구조화 활용
const people = [ { age: 21, name: "mike" }, { age: 24, name: "sara" }, ]; for (const { age, name } of people) { //... }
2-4. 비구조화 심화 학습
비구조화는 객체와 배열이 중첩되어 있을때도 사용가능하다.
- 예시: 중첩된 객체의 비구조화
const obj = { name: "mike", mother: { name: "sara" } }; const { name, mother: { name: motherName }, } = obj; console.log(name); //mike console.log(motherName); //sara console.log(mother); // 참조 에러- 비구조화의 결과로
motherName이라는 변수만 생성된다.
- 비구조화의 결과로
-
예시: 기본값은 패턴단위로 적용된다.
const [{ prop: x } = { prop: 123 }] = []; console.log(x); //123 const [{ prop: x } = { prop: 123 }] = [{}]; console.log(x); //undefined- 첫번째 코드에서는 배열 안에 첫번째 원소가 존재하지 않아서 기본값이 할당된다.
- 두번째 코드에서는 배열 안에 첫번째 원소가 존재하므로 기본값이 할당되지 않는다. 다만 첫번째 원소에 prop이라는 속성이 없어
undefined가 할당된다.
-
예시: 객체 비구조화에서 계산된 속성명 사용하기
const index = 1; const { [`key${index}`]: valueOfTheIndex } = { key1: 123 }; console.log(valueOfTheIndex); //123 -
예시: 별칭에 단순히 변수명만 입력할 수 있는 것은 아니다.
const obj = {}; const arr = [](({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true })); console.log(obj); // {prop:123} console.log(arr); // [true]
