[한입챌린지] 5일차 - JS 구조분해할당, Spread, Rest, 배열과 객체 순회

구조분해할당 (Destructuring)

---

(1) 배열의 구조분해할당

- 구조분해할당이란 배열이나 객체에 저장된 여러 개의 값들을 말 그대로 분해해서 각각 다른 변수에 할당하는 문법

- 배열의 요소를 변수에 할당한다고 했을 때, 변수 마다 일일이 배열의 요소를 넣어 주는 것은 상당히 불편하다.

- 이럴 때 구조분해할당을 사용하면 매우 편리하다.

- 배열의 요소를 넘어가는 변수를 구조분해할당으로 선언하면, 배정되는 배열의 요소가 없는 배열들은 초기화 되지 못하고 undefined가 할당된다.

- 배열의 요소가 구조분해할당으로 선언하는 변수의 수 보다 모자랄 상황을 대비해서 구조분해할당 시에 기본값을 설정하는 것도 가능하다.

- 만약 배열의 원소에서 변수로 만들 필요가 없는 경우, let 다음에 나오는 대괄호에서 자리를 비워주면 된다.

// 1. 배열의 구조 분해 할당
let arr = [1,2,3];
// let one = arr[0]; // 일일이 선언하는 방식은 비효율적이다.
// let two = arr[1];
// let three = arr[2];
let [one, two, three, four = 4] = arr; // 구조분해할당 및 초기값 설정
let [first, , third] = arr; // 배열은 인덱스를 기준으로 구조분해할당
let [value] = arr;
console.log(one, two, three, four);
console.log(first, third);
console.log(value);

 

(2) 객체의 구조분해할당

- 객체의 구조분해할당은 중괄호를 사용하며, 각각 객체의 프로퍼티를 key 값을 기준으로 변수에 저장한다.

- 변수 구조분해할당의 경우 인덱스를 기준으로 원하는 변수명을 쓸 수 있었지만, 객체는 key 값으로 기준으로 한다.

- 배열에서와 같이 객체에 존재하지 않는 프로퍼티를 구조분해할당으로 받으려고 하면 undefined가 할당되며, 초기값을 설정하는 것 또한 동일하게 이루어진다.

- 객체의 구조분해할당에서는 특별하게 할당받는 변수의 이름을 변경할 수도 있다. 작성 방법은 변수명 옆에 콜론(:)과 함께 변경하고자 하는 변수명을 써주면 된다.

// 2. 객체의 구조 분해 할당
let person = {
    name: "홍길동",
    age: 27,
    hobby: "테니스",
}

// let name = person.name; // 일일이 선언하는 건 비효율적이다.
// let age = person.age;
// let hobby = person.hobby;
let { name, age, hobby, extra = "hello"} = person; // 초기값 설정
console.log(name, age, hobby, extra);

let { name: myName, hobby: myHobby } = person; // 변수명 변경
console.log(myName, myHobby);

 

(3) 구조분해할당을 이용해서 함수의 매개변수를 받는 방법

- 객체의 구조분해할당은 특별히 함수에 여러 개의 인수를 전달할 때 꽤나 자주 사용한다.

- 구조분해할당을 하면 함수에 전달된 객체의 매개변수의 프로퍼티를 쉽게 접근할 수 있다.

- 주의할 점은 객체를 넘겨줬기 때문에 중괄호와 함께 구조분해할당을 받을 수 있는 것이다. 일반적인 값인 10을 넘겼다면 구조분해할당은 이루어지지 않는다.

// 3.구조분해할당을 이용해서 함수의 매개변수를 받는 방법
const funcForObject = ({ name, age, hobby, extra }) => { // 객체 매개변수의 구조분해할당
    console.log(name, age, hobby, extra);
};
const funcForArray = ([ one, two, three]) => { // 배열 매개변수의 구조분해할당
    console.log(one, two, three);
};

funcForObject(person); // 홍길동 27 테니스 undefined
funcForArray(arr); // 1 2 3

Spread 연산자와 Rest 매개변수

---

Spread 연산자

- Spread : 흩뿌리다, 펼치다

- Spread 연산자는 객체나 배열에 저장된 여러개의 값을 개별로 흩뿌려주는 역할을 한다.

- 만약 두 개의 배열이 있는 하나의 배열 중간에 다른 배열의 원소를 끼워넣고 싶다고 할 때, 배열의 인덱스로 접근해서 일일이 써줄 수 있다. 이런 방식도 가능하지만 각각의 요소를 써주는 것도 번거롭고, 배열의 요소가 나중에 더 추가되거나 특정 요소가 삭제될 수도 있다. 배열은 주로 사용면서 중간중간 값을 바꿔가면서 사용하기 때문에 인덱스로 배열을 펼쳐 놓는 것은 위험한 방법이라고 할 수 있다.

- 배열을 펼쳐야 하는 상황에서 spread 연산자를 사용하면 안전하면서도 편하게 작업할 수 있다.

- spread 연산자는 배열 앞에 점 3개를 연속(...)으로 작성해서 사용한다.

- spread 연산은 피연산자 배열의 아이템 요소들을 풀어헤치라는 의미를 가지고 있다.

- spread 연산자는 배열 뿐만 아니라 객체에도 사용 가능하다. 사용하는 방식은 똑같다.

- 함수의 매개변수에도 spread 연산자를 사용할 수 있는데, 인수로 들어오는 배열이나 객체에 spread 연산자를 붙여서 전달하고 함수에서는 각각의 배열의 요소나 객체의 프로퍼티를 매개변수로 선언해서 사용하면 딘다.

- 정리하면 spread 연산자를 사용하면, 배열이나 객체의 값을 매우 간편하고 쉽게 풀어헤칠 수 있다.

// 1. Spread 연산자
// -> Spread : 흩뿌리다, 펼치다 라는 뜻
// -> 객체나 배열에 저장된 여러 개의 값을 개별로 흩뿌려주는 역할

let arr1 = [1, 2, 3];
let arr2 = [4, arr1[0], arr1[1], arr1[2], 5, 6];
let arr3 = [4, ...arr1, 5, 6];
console.log(arr2); // [ 4, 1, 2, 3, 5, 6 ]
console.log(arr3); // [ 4, 1, 2, 3, 5, 6 ]

let obj1 = { a: 1, b: 2, }
let obj2 = { 
    // a: obj1.a,
    // b: obj1.b,
    ...obj1,
    c: 3,
    d: 4,
}

function funcA(p1, p2, p3) {
    console.log(p1, p2, p3);
}

funcA(...arr1); // 1 2 3

 

Rest 매개변수

- Rest : 나머지

- Rest 매개변수는 여러 개의 매개변수를 받아야 할 때 배열 형태로 한 방에 받아올 수 있는 방법이다.

- 함수의 인수로 배열/객체의 spread 연산자 또는 여러 개의 매개변수가 전달 된다고 했을 때, 함수 구현부 매개변수에서 Rest 매개변수를 사용하면 함수를 호출하며 전달된 모든 인수들을 하나의 배열로 묶어서 받아올 수 있다.

- 함수의 매개변수 옆의 점 3개(...)는 매개변수를 정의하는 공간인 소괄호 안에 사용이 되었기 때문에 spread 연산자가 아닌, Rest 매개변수라는 점을 주의해야 한다.

- spread 연산자와 rest 매개변수는 엄연히 다른 것이다.

- Rest 매개변수를 이용하면 매개변수가 아무리 많이 들어온다고 해도 배열에 한 방에 다 저장해 놓을 수 있기 때문에 굉장히 편리하다.

- 만약 첫 번째 매개변수의 경우에는 꼭 다른 이름으로 받고 싶다라면, Rest 매개변수와 쉼표로 구분하고 변수명을 써주면 된다. 주의할 점은 Rest 매개변수 뒤에는 추가적으로 매개변수를 더 선언할 수 없다. (Error 발생) 왜냐하면 Rest 매개변수는 지금부터 나오는 뒤에 모든 인수를 다 배열에 저장하는 기능인데 추가적인 매개변수가 온다는 것은 문법상 맞지 않다. 그래서 반드시 Rest 매개변수가 마지막에 오도록 설정을 해야 한다.

- 추가적으로 Rest 매개변수의 이름은 점 3개(...)를 붙이고 변수명은 자유롭게 지어주면 된다.

// 2. Rest 매개변수
// -> Rest는 나머지, 나머지 매개변수
function funcB(one, two, ...args) {
    console.log(args); // [3]
}

funcB(...arr1);

5일차 과제

---

(1) 영화 리뷰 정보 출력하기 (feat. 오펜하이머)

- 목표: 영화 리뷰 정보가 담긴 객체를 매개변수로 받아 출력하는 함수 printMovieReview를 완성하세요.

- 함수 printMovieReview는 구조 분해 할당을 통해 인수로 전달된 영화 정보 객체의 프로퍼티들을 각각 제공받습니다.

- 매개변수로 제공된 영화 정보들을 다음과 같이 출력합니다.

   - 영화 제목은 "제목 : {제목}" 형태로 출력합니다.

   - 영화 개봉 연도는 "개봉 : {개봉연도}" 형태로 출력합니다.

   - 첫 번째 리뷰어를 "첫 번째 리뷰어 : {이름}" 형태로 출력합니다.

      - 배열의 비 구조화 할당을 이용하세요

function printMovieReview() {
  // 코드를 입력하세요 ...
}

printMovieReview({
  title: "오펜하이머",
  releaseYear: 2023,
  reviewers: ["이정환", "김효빈", "김고은"],
});

// 출력 결과 :
// 제목 : 오펜하이머
// 개봉 : 2023
// 첫 번째 리뷰어 : 이정환

printMovieReview({
  title: "웡카",
  releaseYear: 2024,
  reviewers: [],
});

// 출력 결과 :
// 제목 : 웡카
// 개봉 : 2024
// 첫 번째 리뷰어 : 리뷰어 미정

 

(2) 평균 성적 출력하기

- 목표: 학생들의 평균 성적을 출력합니다.

- 매개변수 students로 객체 형태의 학생 데이터를 제공받습니다.

- 반복문을 활용하여 모든 학생의 개별 성적 평균을 출력합니다.

   - "{이름}: {평균}" 형태로 출력합니다.

function printAvgScore(students) {
  // 여기에 코드를 작성하세요 ...
}

printAvgScore({
  이정환: { hobby: "테니스", scores: [10, 20, 30, 40, 50] },
  김효빈: { hobby: "테니스", scores: [90, 80, 30, 70, 50] },
  홍길동: { hobby: "의적", scores: [100, 100, 20, 20, 50] },
});

// 출력 결과 :
// 이정환: 30
// 김효빈: 64
// 홍길동: 58

 

정답: 내 GitHub 저장소에 올렸음

https://github.com/redcontroller/onebite-react/blob/main/section02/mission-day05.js

onebite-react/section02/mission-day05.js at main · redcontroller/onebite-react

 

출처

---

(강의) 한입 크기로 잘라 먹는 리액트

(코드) GitHub - 강의 노트