[TIL]231110_배열과 객체

👩🏻‍💻 Today Learn

• 베이직반 수업 및 과제
• React 숙련 강의

---

🤦🏻‍♀️ 고민한 부분

문제

const 사람들 = [
  {
    이름: "김철수",
    나이: 18,
    성별: "남",
  },
  {
    이름: "김길동",
    나이: 19,
    성별: "남",
  },
  {
    이름: "김유리",
    나이: 22,
    성별: "여",
  },
  {
    이름: "김맹구",
    나이: 23,
    성별: "남",
  },
];

// 여기에 코드를 작성해주세요.
const 나이10살더먹은사람들 = 사람들.?

console.log(나이10살더먹은사람들);
// 결과
/*
[
  { '이름': '김철수', '나이': 28, '성별': '남' },
  { '이름': '김길동', '나이': 29, '성별': '남' },
  { '이름': '김유리', '나이': 32, '성별': '여' },
  { '이름': '김맹구', '나이': 33, '성별': '남' }
]
*/

풀이

// 처음풀이
 const 나이10살더먹은사람들 = 사람들.map((plusTen) => {
   return {
     이름: plusTen.이름,
     나이: plusTen.나이 + 10,
     성별: plusTen.성별,
   };
 });

// Spread Operator(...) 사용
const 나이10살더먹은사람들 = 사람들.map((plusTen) => {
  return { ...plusTen, 나이: `${plusTen.나이 + 10}` };
});

console.log(나이10살더먹은사람들);

해당 문제를 map() 메소드를 활용하여 풀어봤다.
처음에는 객체에 들어가는 요소를 하나하나 다 넣어서 리턴했었다. 지금은 객체에 이름, 나이, 성별 세가지만 있어서 큰 문제는 없었지만 들어가는 요소가 길어질 경우 이런 코드는 매우 비효율적인 방법이다.

그래서 효율적인 방법을 고민하다가 수정한것은 Spread Operator(...)를 사용하는 것이었다.

Spread Operator(...)란?

• spread의 뜻인 '펼치다'의 의미 그대로 배열이나 문자열 등을 풀어서 요소 하나 하나로 전개 시킬 수 있다.
• 이 spread 연산자를 사용하면 기존 배열이나 객체의 전체 또는 일부를 다른 배열이나 객체로 빠르게 복사할 수 있다.

사용하는 이유는?

• 객체타입의 특이한 복사방식 때문에 사용한다.
• 객체타입(ex. 배열, 객체) <-> 원시타입(ex.문자열, 숫자, 불리언 등)

예시

let a = [10, 20, 30]
let b = a

a[0] = 100

console.log(a) //[100, 20, 30]
console.log(b) //[100, 20, 30]

---------

let a = [1, 2, 3]
let b = [...a] // Spread Operator사용

a[0] = 100;
console.log(a) // [100, 20, 30]
console.log(b) // [10, 20, 30] 

---

💡 알게된 내용

기본적인 것이지만 확실하게 알고 넘어가야하는 내용!

Array(배열)

• [ ]_대괄호 사용
• 대괄호 사이에 데이터를 넣음
• 사용하는 이유는 여러개의 데이터를 한번에 저장하여 효율적으로 관리하기 위해

예시

// Array
let fruits = ["banana", "orange", "kiwi"];
// 변수명[인덱스] 로 사용가능한데 인덱스는 0부터 시작함
fruits[0] // "banana"
fruits[1] // "orange"
fruits[2] // "kiwi"

// 데이터 수정 예시 확인하기
fruits[0] = "apple";
console.log(fruits); // ["apple", "orange", "kiwi"]

Object(객체)

• { }_중괄호 사용
• 중괄호 사이에 key, value 형식의 데이터를 넣음
• 사용하는 이유는 관련된 데이터를 한번에 효율적으로 관리하기 위해

예시

// object
let myIntro = { name: "yeji", color: "green", age: 50 };
// 변수명.key 로 사용가능
myIntro.name // "yeji"
myIntro.color // "green"
myIntro.age // 50

// 데이터 수정 예시 확인하기
myIntro.name = "yewon";
console.log(myIntro.name); // yewon

배열과 객체의 차이점

Object(객체)

• 순서를 가지고 있지 않다.
• 인덱스로 접근이 불가능하고 key로 접근이 가능하다.

Array(배열)

• 순서를 가지고 있다.
• 인덱스로 접근이 가능하다.

---

배열메소드

find

• 배열에서 조건에 만족하는 것 중에 가장 먼저 발견된 것 하나만 찾는다.
• return 필수

예시

const 사람들 = [
  {
    이름: "김철수",
    나이: 18,
    성별: "남",
  },
  {
    이름: "김길동",
    나이: 19,
    성별: "남",
  },
  {
    이름: "김유리",
    나이: 22,
    성별: "여",
  },
  {
    이름: "김맹구",
    나이: 23,
    성별: "남",
  },
];

const 나이20살이상한명 = 사람들.find((one) => {
  return one.나이 >= 20;
});
console.log(나이20살이상한명);
// 결과
// { '이름': '김유리', '나이': 22, '성별': '여' }

filter

• 배열에서 조건에 만족하는 요소들만 필터링 해준다.
• 기존 배열은 그대로 두고 새로운 배열을 만들어준다.
• return 필수

예시

const 사람들 = [
  {
    이름: "김철수",
    나이: 18,
    성별: "남",
  },
  {
    이름: "김길동",
    나이: 19,
    성별: "남",
  },
  {
    이름: "김유리",
    나이: 22,
    성별: "여",
  },
  {
    이름: "김맹구",
    나이: 23,
    성별: "남",
  },
];

const 나이20살이상사람들 = 사람들.filter((people) => {
  return people.나이 >= 20;
});

console.log(나이20살이상사람들);
// 결과
/*
[
  { '이름': '김유리', '나이': 22, '성별': '여' },
  { '이름': '김맹구', '나이': 23, '성별': '남' }
]
*/

map

• 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.
• for문이나 forEach처럼 배열 내 요소들을 반복하는 반복문의 한 종류 이지만 새로운 배열을 만들어주는 것이 차이점이다.
• 변수에 담는 것이 가능하다.
• return 필수

예시

// 위에서 다룬 Spread Operator와 함께 사용한 예시

const 투두 = [
  {
    id: 1,
    할일: "8시기상",
    완료여부: false,
  },
];

const newTodo = 투두.map((a) => {
  return { ...a, 완료여부: true };
});

console.log(투두);
console.log(newTodo);
/*
id: 1,
할일: "8시기상",
완료여부: true,
*/

---

✍🏻 회고

자바스크립트의 기본 메소드들중 일부에 대해 조금 더 확실하게 다지는 시간이었다.
지금 수업에서는 리액트에 대해 배우고 있는데 '나는 왜 계속 따라가지 못하고 뒤쳐지는 걸까...' 에 대해 수없이 많이 생각했었다.
하지만 뱁새가 황새 따라가다 가랑이가 찢어진다는 말처럼 어영부영 쫓아가다가 이도저도 안되는것보다 느리더라도 더 착실하게 다지면서 내 스스로를 성장시켜 나가는 방향을 선택해야겠다.