객체와 배열을 다루는 방법

1. 단축 속성명(shorthand property names)

• 속성 이름과 속성값을 가지고 있는 변수 이름이 동일한 경우
  ➡️ 속성 이름을 생략
• 속성 이름과 함수(메서드) 이름이 동일한 경우
  ➡️ function 키워드와 함께 속성 이름을 생략

<script>
  let name = "John";
  const obj = {
    age: 21,
    name: name,
    getName: function getName() {
      return this.name;
    }
  }
  console.log(obj); // {age: 21, name: 'John', getName: ƒ}
  console.log(obj.getName()); // John

  const obj2 = {
    age: 21,
    name,
    getName() {
      return this.name;
    }
  }
  console.log(obj2); // {age: 21, name: 'John', getName: ƒ}
  console.log(obj2.getName()); // John
</script>

• 예시 1: 매개 변수를 객체로 반환하는 함수를 정의하는 경우

  <script>
    function returnObject(age, name) {
      return { age: age, name: name };
    }
    console.log(returnObject(20, "홍길동"));  // {age: 20, name: '홍길동'}

    function returnObject2(age, name) {
      return { age, name };
    }
    console.log(returnObject2(20, "홍길동"));  // {age: 20, name: '홍길동'}
  </script>

• 예시 2: 로그를 출력할 때

<script>
  const age = 20;
  const name = "홍길동";
  
  // 변수가 가지고 있는 값을 로그로 출력
  // 변수 이름과 함께 출력되어야 내용 파악에 용이
  console.log("age", age);  // age 20
  console.log("name", name);  // name 홍길동

  console.log(`age = ${age}, name = ${name}`);  // age = 20, name = 홍길동

  console.log({age, name});  // {age: 20, name: '홍길동'}
</script>

---

2. 계산된 속성명(computed property names)

• 변수를 이용해서 객체 속성의 키를 만드는 방법
• 예시 1: 속성 이름(key)과 속성 값(value)을 전달받아 객체를 반환하는 함수 정의

<script>
  function returnObject(key, value) {
    /*const obj = {}; // 빈 객체 정의
    obj[key] = value;
    return obj;*/
    return { [key]: value };
  }
  console.log(returnObject("name", "John"));  // {name: 'John'}
</script>

• 예시 2: 속성 이름이 일련번호 형태를 가지는 객체를 반환하는 함수

<script>
  function returnObject2(key, value, no) {
    return { [key+no]: value };
  }
  console.log(returnObject2("name", "John", 1));  // {name1: 'John'}
  console.log(returnObject2("name", "Jane", 2));  // {name2: 'Jane'}
</script>

---

3. 전개 연산자(spread operator)

• 배열이 가지고 있는 값들을 풀어서 나열

<script>
  console.log(Math.max(10, 20, 1, 30, 3, 2)); // 30
  console.log(Math.max([10, 20, 1, 30, 3, 2])); // NaN

  const numbers = [10, 20, 1, 30, 3, 2];
  console.log(Math.max(numbers)); // NaN
  console.log(Math.max(numbers[0], numbers[1], numbers[2], numbers[3], numbers[4], numbers[5]));  // 30

  //  전개연산자 사용
  console.log(Math.max(...numbers));  // 30
  
  console.log(...numbers);  // 10 20 1 30 3 2
</script>

• 예시 1: 배열의 값 복사

<script>
  let a = 10;
  let b = 1;
  console.log(a);         // 10
  console.log(b);         // 1

  let arr1 = [1, 2, 3];
  let arr2 = arr1;
  console.log(arr1);      // [1, 2, 3]
  console.log(arr2);      // [1, 2, 3]


  a = 20;
  console.log(a);         // 20
  console.log(b);         // 1

  arr1[0] = 10;
  console.log(arr1);      // [10, 2, 3]
  console.log(arr2);      // [10, 2, 3]
</script>

위의 코드는 객체와 배열을 복사할 때 참조를 복사하는 문제가 생긴다.
주소가 아닌 값을 복사하는 것이 필요하다.

<script>	// 값 복사
  let arr3 = [1, 2, 3];
  let arr4 = [];
  for (let i = 0; i < arr3.length; i++) {
    arr4[i] = arr3[i];
  }
  console.log(arr3);  // [1, 2, 3]
  console.log(arr4);  // [1, 2, 3]
  arr3[0] = 10;
  console.log(arr3);  // [10, 2, 3]
  console.log(arr4);  // [1, 2, 3]
</script>

<script>	// 전개 연산자 사용
  let arr5 = [1, 2, 3];
  let arr6 = [...arr5];
  console.log(arr5);      // [1, 2, 3]
  console.log(arr6);      // [1, 2, 3]
  arr5[0] = 10;
  console.log(arr5);      // [10, 2, 3]
  console.log(arr6);      // [1, 2, 3]
</script>

• 예시 2: 객체의 값 복사

<script>
  let obj1 = { age: 23, name: '홍길동' };
  let obj2 = obj1;
  console.log(obj1);  // { age: 23, name: '홍길동' }
  console.log(obj2);  // { age: 23, name: '홍길동' }
  obj1.age = 200;
  console.log(obj1);  // { age: 200, name: '홍길동' }
  console.log(obj2);  // { age: 200, name: '홍길동' }
</script>

<script>	// 전개 연산자 사용
  let obj3 = { age: 23, name: '홍길동' };
  let obj4 = { ...obj3 };
  console.log(obj3);  // { age: 23, name: '홍길동' }
  console.log(obj4);  // { age: 23, name: '홍길동' }
  obj3.age = 200;
  console.log(obj3);  // { age: 200, name: '홍길동' }
  console.log(obj4);  // { age: 23, name: '홍길동' }
</script>

• 예시 3: 객체를 복사하는 과정에서 새로운 속성을 추가하거나 속성의 값을 변경하는 경우

<script>
  let obj1 = { age: 23, name: '홍길동' };
  obj1.age = 40;                          // 객체의 속성값을 변경
  obj1.colors = ['red', 'blue', 'green']; // 객체에 새로운 속성을 추가
  console.log(obj1);  // { age: 40, name: '홍길동', colors: [ 'red', 'blue', 'green' ] }

  // obj1과 동일한 속성을 가지는 obj2를 정의하고, name 속성의 값을 고길동으로 변경
  /*
  let obj2 = { ...obj1 };
  obj2.name = '고길동';  
  */
  // 전개 연산자로 복사한 name 속성의 값을 덮어씀
  let obj2 = { ...obj1, name: '고길동' };
  console.log(obj2);  // { age: 40, name: '고길동', colors: [ 'red', 'blue', 'green' ] }

  // obj1과 동일한 속성을 가지는 obj3를 정의하고, email 속성을 추가
  // 전개 연산자로 복사한 객체에 email 속성을 추가
  let obj3 = { ...obj1, email: "go@test.com" };
  console.log(obj3);  // { age: 40, name: '홍길동', colors: [ 'red', 'blue', 'green' ], email: 'go@test.com' }
</script>

• 예시 4: 배열 또는 객체를 결합할 때

<script>
  // 두 배열을 결합
  // 배열은 index가 존재하므로 순서가 중요하다.
  const arr1 = [1, 2, 3];
  const arr2 = [3, 4, 5];
  const arr3 = [...arr1, ...arr2];
  console.log(arr3);        // [ 1, 2, 3, 3, 4, 5 ]
  const arr4 = [...arr2, ...arr1];
  console.log(arr4);        // [ 3, 4, 5, 1, 2, 3 ]

  // 두 객체를 결합
  // 객체는 key로 접근하기 때문에 값을 덮어쓰므로 주의해야 한다.
  const obj1 = { a: 1, b: 2, c: 3 };
  const obj2 = { c: 33, d: 4, e: 5 };
  const obj3 = { ...obj1, ...obj2 };
  console.log(obj3);        // { a: 1, b: 2, c: 33, d: 4, e: 5 }
  const obj4 = { ...obj2, ...obj1 };
  console.log(obj4);        // { c: 3, d: 4, e: 5, a: 1, b: 2 }
</script>

• 예시 5: 배열 요소를 함수의 개별 인수로 전달하라 때

<script>
  function sum(a, b, c) {
    return a + b + c;                 // 60
  }

  const numbers = [10, 20, 30];
  console.log(sum(...numbers));       // 30

  console.log(Math.max(10, 20, 30));
  console.log(Math.max(...numbers));  // 30
</script>

---

4. Rest Parameters

• 함수의 인수를 배열로 수집하는 방법
• 함수가 전달받은 가변 인수를 처리할 때 사용한다.

<script>
    /*// 고정된 개수의 인자 외에는 무시시
    function sum(a, b) {
        const result = a + b;
        console.log(result);
    }
    sum(10, 20);          // 30
    sum(10, 20, 30);      // 30
    sum(10, 20, 30, 40);  // 30
    */
    function sum(...args) {
      console.log(args);
      let result = 0;
      for (let i = 0; i < args.length; i++) {
        result += args[i];
      }
      console.log(result);
    }

    sum(10, 20);            // 30
    sum(10, 20, 30);        // 60
    sum(10, 20, 30, 40);    // 100
</script>

---

5. 배열 비구조화(array destructuring)

• 배열 데이터(요소)를 변수에 나눠서 할당

<script>
  // 배열 요소의 값을 변수에 할당
  const arr = [1, 2, 3, 4, 5];

  // 배열 인덱스를 이용해서 개별 변수에 배열이 가지고 있는 값을 할당
  let a = arr[0];
  let b = arr[1];
  // 단축 속성명
  console.log({ a, b });          // { a: 1, b: 2 }

  // c, d, e, f 변수에 arr 배열에 첫번째 인덱스의 값부터 차례로 할당
  let [c, d, e, f] = arr;		  // 배열 비구조화 할당
  console.log({ c, d, e, f });    // { c: 1, d: 2, e: 3, f: 4 }
</script>

• 두 변수의 값 교환

<script>
  let x = 10;
  let y = 20;
  console.log({ x, y });    // {x: 10, y: 20}

  let temp = x;
  x = y;
  y = temp;
  console.log({ x, y });    // {x: 20, y: 10}


  // 배열 비구조화를 이용해서 두 변수의 값 교환
  x = 10
  y = 20
  console.log({ x, y });    // {x: 10, y: 20}

  [x, y] = [y, x];
  // [비구조화] = [배열 선언]
  console.log({ x, y });    // {x: 20, y: 10}
</script>

• 배열의 크기보다 변수의 개수가 많은 경우

<script>
  const arr = [1, 2];
  const [a, b, c] = arr;
  console.log({ a, b, c });    // { a: 1, b: 2, c: undefined }

  // 기본값 설정 가능
  const [d, e = 20, f = 30] = arr;
  console.log({ d, e, f });    // { d: 1, e: 2, f: 30 }
                               // arr에서 할당되므로 e의 값은 2
</script>

• 배열의 일부값을 변수에 할당할 경우
  ✔️ 할당하지 않을 자리는 비워둔다.

<script>
  const arr = [1, 2, 3, 4, 5];
  let [a, b, c, d, e] = arr;
  console.log({ a, b, c, d, e }); // {a: 1, b: 2, c: 3, d: 4, e: 5}

  // 변수 x에 첫 번째 값을, y에 세 번째 값을, z에 5번째 값을 할당
  let [x, , y, , z] = arr;
  console.log({ x, y, z }); // {x: 1, y: 3, z: 5}
</script>

• 배열의 값을 할당하고 남은 나머지를 새로운 배열로 만드는 경우(rest parameter와 비구조화를 같이 사용하는 예시)

<script>
  var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

  // arr 배열의 첫번째 값을 first 변수에 넣고, 나머지 값을 rest 이름의 배열에 추가(배열은 순서가 있음을 유의)
  const [first, ...rest] = arr;
  console.log(first); // 1
  console.log(rest);  // [2, 3, 4, 5, 6, 7, 8, 9, 10]
</script>

---

6. 객체 비구조화(object destructuring)

• 객체 비구조화를 할 때는 객체의 속성명(key)이 중요하다.

<script>
  const obj1 = { age: 21, name: "홍길동" };
  const obj2 = { age: 43, name: "고길동" };

  // obj1의 age와 name 속성의 값을 age와 name 변수에 할당
  /*let age = obj1.age;
  let name = obj1.name;*/
  let { age, name } = obj1; // 객체 비구조화 할당

  // 단축 속성명을 이용해 변수가 가지고 있는 값 출력
  console.log({ age, name }); // {age: 21, name: '홍길동'}
</script>

• obj1 객체가 가지고 있지 않은 이름 사용: undefined

<script>
  let { newAge, newName } = obj1;
  console.log({ newAge, newName }); // {newAge: undefined, newName: undefined}
</script>

• obj1 객체가 가지고 있는 값을 가져와서 새로운 이름으로 사용

  let { age: newAge, name: newName } = obj1;
  console.log({ newAge, newName });   // { newAge: 21, newName: '홍길동' }

• 객체에 존재하지 않는 요소를 변수에 할당: undefined

  let { age: newAge, name: newName, email } = obj1;
  console.log({ newAge, newName, email });  // {newAge: 21, newName: '홍길동', email: undefined}

• 객체에 존재하지 않는 변수의 기본값 설정

  let { age: newAge, name: newName, email = "default" } = obj1;
  console.log({ newAge, newName, email });  // {newAge: 21, newName: '홍길동', email: 'default'}

• obj1 객체의 age 속성의 값을 hongAge 변수에 할당하고, 나머지 값을 rest 이름의 객체에 할당

  const obj1 = { age: 21, name: "홍길동", email: "hong@test.com" };

  const { age: hongAge, ...rest } = obj1;
  console.log(hongAge); // 21
  console.log(rest);    // {name: '홍길동', email: 'hong@test.com'}