[JS] 배열, 객체

🗣️ 배열과 객체의 기본 개념을 이해하고 활용할 수 있나요?

• 의도: 지원자가 배열과 객체의 기본적인 구조와 메서드를 이해하고 있는지 평가

• 팁
  • 배열과 객체의 선언 및 기본 메서드 사용 예제를 떠올려본다.
  • 배열과 객체의 차이점을 명확히 설명한다.

• 모범 답안

  배열과 객체는 자바스크립트에서 데이터를 구조적으로 다루기 위한 기본 자료형입니다.

  배열은 순서가 있는 데이터의 집합으로, 각 요소는 인덱스를 통해 접근할 수 있습니다.
  주로 여러 개의 값을 하나의 변수로 묶어서 관리할 때 사용합니다.
  배열에서 자주 쓰이는 메서드로는 요소를 추가하거나 제거하는 push, pop, shift, unshift,
  그리고 데이터를 가공하는 map, filter, reduce 등이 있습니다.

  반면 객체는 키와 값으로 이루어진 데이터 구조로, 각 속성 이름을 통해 데이터에 접근합니다.
  객체의 주요 메서드로는 Object.keys, Object.values, Object.entries 같은 속성 조회 메서드와,
  특정 키의 존재 여부를 확인하는 hasOwnProperty가 있습니다.

  실제 개발에서는 배열과 객체를 함께 사용하는 경우가 많고,
  배열은 데이터의 집합을, 객체는 그 구조와 의미를 표현할 때 적합합니다.
  따라서 상황에 맞게 두 자료형을 구분해 활용하는 것이 중요합니다.

---

📝 개념 정리

🌟 배열 (Array)

• 기본 개념
  • 순서가 있는 데이터의 집합
  • 각 요소는 0부터 시작하는 인덱스(index)로 접근함
  • 여러 개의 데이터를 하나의 변수에 저장할 수 있어, 반복문과 함께 자주 사용됨

    const fruits = ["apple", "banana", "cherry"];
    console.log(fruits[0]); // apple

• 특징
  • 배열의 길이는 length 속성으로 확인할 수 있음
  • 요소는 숫자 인덱스로만 접근할 수 있음
  • 다른 자료형과 달리 순서가 중요하며, 순회(iteration)에 최적화되어 있음

    console.log(fruits.length); // 3

• 활용 포인트
  • 데이터를 반복적으로 처리할 때 유용함 (for, forEach, map 등)
  • 서버에서 받은 리스트형 데이터(예: 게시글 목록, 사용자 목록)를 다룰 때 주로 사용함

---

🌟 배열 관련 메서드

• 요소 추가 및 제거

  메서드	설명	예시
  push()	배열 끝에 요소 추가	arr.push(4)
  pop()	배열 끝 요소 제거	arr.pop()
  unshift()	배열 앞에 요소 추가	arr.unshift(0)
  shift()	배열 앞 요소 제거	arr.shift()

  const arr = [1, 2, 3];
  arr.push(4); // [1, 2, 3, 4]
  arr.shift(); // [2, 3, 4]
  arr.unshift(0); // [0, 2, 3, 4]
  arr.pop(); // [0, 2, 3]

• 배열 순회 및 변환

  메서드	설명	특징
  forEach()	각 요소를 순회하며 함수 실행	반환값 없음
  map()	각 요소를 변환해 새 배열 생성	원본 불변
  filter()	조건에 맞는 요소만 추출하여 새 배열 생성	원본 불변
  reduce()	누적 계산 수행	합계, 평균 등에 활용

  const numbers = [1, 2, 3, 4, 5];
  const tripled = numbers.map(num => num * 2);
  console.log(tripled); // [3, 6, 9, 12, 15]
  const even = numbers.filter(num => num % 2 === 0);
  console.log(even); // [2, 4]
  const sum = numbers.reduce((acc, cur) => acc + cur, 0); // 15

---

🌟 map() 메서드

• 개념
  • 배열의 모든 요소를 순회하며, 각 요소에 대해 지정한 콜백 함수의 반환값을 모아 새로운 배열을 반환함
  • 원본 배열은 변경되지 않음 (불변성 유지)

• 문법

  arr.map((element, index, array) => {
    // 반환되는 값이 새로운 배열의 각 요소가 됨
  });

  • element: 현재 요소
  • index: 현재 인덱스
  • array: 원본 배열

• 동작 방식
  • 배열의 첫 번째 요소부터 마지막 요소까지 순차적으로 함수를 실행함
  • 각 함수의 리턴값이 새로운 배열의 요소로 저장됨
  • 원본 배열은 그대로 유지됨

• 예시

  const numbers = [1, 2, 3, 4];
  const doubled = numbers.map(num => num * 2);
  console.log(doubled); // [2, 4, 6, 8]
  console.log(numbers); // [1, 2, 3, 4] (원본 유지)

• 주의사항
  • 반드시 return 문이 필요함

    numbers.map(num => { num * 2 }); // ❌ undefined 배열 생성됨
    numbers.map(num => { return num * 2 }); // ✅
    numbers.map(num => num * 2); // ✅

  • 새로운 배열을 리턴하지만, 원본 배열은 변하지 않음

---

🌟 filter() 메서드

• 개념
  • 배열을 순회하며 조건식이 true인 요소만 남기는 메서드
  • 조건을 만족하지 않는 요소는 자동으로 제거됨

• 문법

  arr.filter((element, index, array) => {
    return 조건식; // true면 요소 유지, false면 제거
  })

  • element: 현재 요소
  • index: 현재 인덱스
  • array: 원본 배열

• 동작 방식
  • 배열의 각 요소를 검사
  • 콜백 함수가 true를 반환한 요소만 새로운 배열에 포함
  • false인 요소는 무시

• 예시

  const numbers = [10, 20, 30, 40, 50];
  const over30 = numbers.filter(num => num > 30);
  console.log(over30); // [40, 50]
  console.log(numbers); // [10, 20, 30, 40, 50] (원본 유지)

• 주의사항
  • 반환값이 배열이므로, 결과가 없으면 [](빈 배열)을 반환함
  • filter()는 조건에 따라 일부 데이터를 추출할 때 매우 자주 사용됨 (예: 재고가 0이 아닌 상품만 표시)

---

🌟 reduce() 메서드

• 개념
  • 배열의 각 요소를 순회하며, 누적된 결과(accumulator)를 이용해 하나의 값으로 축약함
  • 합계, 평균, 통계, 객체 변환 등 다양한 계산 로직에서 활용됨

• 문법

  arr.reduce((accumulator, currentValue, index, array) => {
    // 새로운 누적값 반환
  }, initialValue);

  • accumulator: 누적값 (이전 순회 결과)
  • currentValue: 현재 요소
  • index: 현재 인덱스
  • array: 원본 배열
  • initialValue: 초기값 (생략 시 배열의 첫 번째 요소가 기본적으로 사용됨)

• 동작 방식
  • 첫 번째 순회에서는 initialValue가 accumulator로 들어감
  • 이후 각 요소마다 콜백 함수를 실행하고, 새로운 누적값을 반환함
  • 마지막 순회 후 최종 누적값이 반환됨

• 예시 1: 합계 구하기

  const numbers = [1, 2, 3, 4, 5];
  const sum1 = numbers.reduce((acc, cur) => acc + cur, 0);
  console.log(sum1); // 15
  const sum2 = numbers.reduce((acc, cur) => acc + cur);
  console.log(sum2); // 15

  • sum1에서는 초기값이 0으로 명시되어 있으므로, acc=0, cur=1로 시작함
  • sum2에서는 초기값이 명시되어 있지 않으므로, acc=1, cur=2로 시작함

• 예시 2: 평균 구하기

  const numbers = [1, 2, 3, 4, 5];
  const avg = numbers.reduce((acc, cur, _, arr) => acc + cur / arr.length, 0);
  console.log(avg); // 3

• 예시 3: 객체로 변환

  const fruits = ["apple", "banana", "apple", "cherry", "banana"];
  const count = fruits.reduce((acc, fruit) => {
    acc[fruit] = (acc[fruit] || 0) + 1;
    return acc;
  }, {});
  console.log(count); // { apple: 2, banana: 2, cherry: 1 }

• 주의사항
  • reduce()는 결과값이 무엇이든 될 수 있음 (숫자, 문자열, 배열, 객체 등)
  • initialValue를 생략하면 배열의 첫 번째 요소부터 시작하므로, 비어 있는 배열([])에 사용하면 에러가 발생할 수 있음
  • 항상 초기값을 명시하는 것이 안전함

---

🌟 객체 (Object)

• 기본 개념
  • 키(key)-값(value) 쌍으로 이루어진 데이터 구조
  • 순서보다는 데이터의 이름(키)으로 접근하는 것이 중요함

    const user = {
      name: "Kim",
      age: 25,
      isAdmin: true,
    };
    console.log(user.name); // Kim

• 특징
  • 키는 기본적으로 문자열 또는 심볼(Symbol) 타입
  • 객체 속성에 접근할 때는 두 가지 방법을 사용할 수 있음

    user.name; // 점 표기법
    user["age"]; // 대괄호 표기법

  • 중첩된 객체(객체 안의 객체) 구조도 가능함

• 활용 포인트
  • 하나의 데이터 단위를 표현할 때 적합함 (예: 사용자 정보, 상품 정보 등)
  • React, Vue 같은 프레임워크에서 상태(state) 관리에 핵심적으로 사용됨

    🔍 왜 객체가 상태에 적합할까?

    • 의미 있는 필드 단위로 묶음: user.name, cart.items처럼 "한 엔티티 = 한 객체"로 표현하기 쉬움
    • 확장 용이: 필드가 늘어나도 키를 추가하면 됨
    • 참조(레퍼런스)로 비교·최적화: 새로운 객체를 만들어 교체하면 "바뀌었는지"를 한 번에 판단(얕은 비교)할 수 있음

---

🌟 객체 관련 메서드

메서드	설명	반환값
Object.keys(obj)	객체의 모든 키를 배열로 반환	["name", "age", "isAdmin"]
Object.values(obj)	객체의 모든 값을 배열로 반환	["Kim", 25, true]
Object.entries(obj)	[키, 값] 쌍의 배열을 반환	[["name", "Kim"], ["age", 25], ["isAdmin", true]]
hasOwnProperty(key)	해당 키가 객체에 존재하는지 확인	true 또는 false

const user = { name: "Kim", age: 25 }
console.log(Object.keys(user)); // ["name", "age"]
console.log(Object.values(user)); // ["Kim", 25]
console.log(Object.entries(user)); // [["name", "Kim"], ["age", 25]]
console.log(user.hasOwnProperty("age")); // true