모던 자바스크립트) 오답 노트 3

아래는 JavaScript 배열과 객체의 특성과 자주 사용되는 메서드 및 문법을 정리한 내용입니다. 이를 이해하고 자주 연습하면 문제 풀이에 큰 도움이 됩니다.

---

1. forEach() — 목록의 각 항목에 작업하기

실생활 예시: 쇼핑몰에서 사용자가 장바구니에 담은 상품의 이름과 가격을 출력

const cart = [
  { name: 'Laptop', price: 1500 },
  { name: 'Phone', price: 800 },
  { name: 'Headphones', price: 150 }
];

cart.forEach(item => {
  console.log(`Product: ${item.name}, Price: $${item.price}`);
});

출력

Product: Laptop, Price: $1500
Product: Phone, Price: $800
Product: Headphones, Price: $150

사용 이유

• 각 상품을 출력하는 단순한 작업을 수행할 때 forEach()를 사용합니다.

---

2. map() — 데이터 변환

실생활 예시: 모든 가격에 세금을 추가하여 새로운 가격 목록을 생성

const prices = [1500, 800, 150];
const taxRate = 0.1;
const pricesWithTax = prices.map(price => price + price * taxRate);
console.log(pricesWithTax);

출력

[1650, 880, 165]

사용 이유

• map()을 사용하여 기존 데이터를 변환(세금 추가)한 새로운 배열을 생성합니다.

---

3. filter() — 조건에 맞는 항목만 추출

실생활 예시: 500달러 이상인 상품만 필터링

const expensiveItems = cart.filter(item => item.price >= 500);
console.log(expensiveItems);

출력

[
  { name: 'Laptop', price: 1500 },
  { name: 'Phone', price: 800 }
]

사용 이유

• filter()를 사용하여 특정 조건을 만족하는 항목만 반환합니다.

---

4. reduce() — 총합 계산

실생활 예시: 장바구니의 총합 계산

const totalPrice = cart.reduce((total, item) => total + item.price, 0);
console.log(`Total Price: $${totalPrice}`);

출력

Total Price: $2450

사용 이유

• reduce()를 사용하여 배열의 모든 가격을 하나의 총합으로 축소합니다.

---

5. 객체의 동적 속성 업데이트

실생활 예시: 각 사용자가 본 웹 페이지 방문 횟수 카운팅

const pageVisits = {};

function visitPage(user) {
  pageVisits[user] = (pageVisits[user] || 0) + 1;
}

visitPage('Alice');
visitPage('Bob');
visitPage('Alice');
console.log(pageVisits);

출력

{ Alice: 2, Bob: 1 }

사용 이유

• 객체에 동적으로 속성을 추가하고, 기존 속성을 업데이트하며 기본값을 설정할 때 사용합니다.

---

6. Object.keys()와 Object.entries() — 데이터 요약

실생활 예시: 쇼핑몰에서 사용자가 본 상품별 클릭 수 표시

const clicks = { Laptop: 5, Phone: 3, Headphones: 1 };

Object.keys(clicks).forEach(product => {
  console.log(`${product}: ${clicks[product]} clicks`);
});

출력

Laptop: 5 clicks
Phone: 3 clicks
Headphones: 1 clicks

사용 이유

• 객체의 키 목록을 가져와 각 키의 값을 출력합니다.

---

정리된 실생활 패턴

실생활 상황 메서드 예시

사용자가 선택한 모든 상품을 출력	forEach()	장바구니 상품 출력
상품 가격에 세금 추가	map()	가격 목록에 세금 포함
특정 가격 이상 상품만 필터링	filter()	비싼 상품만 보기
전체 구매 금액 계산	reduce()	총 가격 계산
웹사이트 방문자 수 카운트	객체 동적 업데이트	`(obj[key]
상품 클릭 수 요약	Object.keys()	클릭 횟수 출력

---

이러한 예시는 배열과 객체 메서드를 실생활 문제에 매핑하는 연습입니다. 실습을 반복하면 자연스럽게 어떤 메서드를 사용할지 더 빠르게 선택할 수 있습니다!

---

1. 배열 (Array)의 특성과 자주 사용하는 메서드

특성

• 배열은 순서가 있는 값의 리스트입니다.
• 각 요소는 인덱스를 통해 접근할 수 있으며, 인덱스는 0부터 시작합니다.

자주 사용하는 배열 메서드

메서드 설명 예시

forEach(callback)	배열의 각 요소를 순회하며 작업을 수행	[1, 2, 3].forEach(num => console.log(num));
map(callback)	배열의 각 요소를 변환한 새 배열을 반환	const squares = [1, 2, 3].map(num => num ** 2);
filter(callback)	조건을 만족하는 요소로만 구성된 새 배열을 반환	const evens = [1, 2, 3, 4].filter(num => num % 2 === 0);
reduce(callback, initialValue)	배열을 하나의 값으로 축소	const sum = [1, 2, 3].reduce((total, num) => total + num, 0);
find(callback)	조건을 만족하는 첫 번째 요소를 반환	const found = [5, 12, 8].find(num => num > 10);
some(callback)	배열에 하나라도 조건을 만족하는 요소가 있으면 true 반환	[1, 2, 3].some(num => num > 2);
every(callback)	모든 요소가 조건을 만족하면 true 반환	[1, 2, 3].every(num => num > 0);
sort(compareFunction)	배열을 정렬	[3, 1, 4].sort((a, b) => a - b);
includes(value)	배열에 특정 값이 포함되어 있는지 확인	[1, 2, 3].includes(2);

예제: map()과 filter()의 차이

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);  // [2, 4, 6, 8]
const evens = numbers.filter(num => num % 2 === 0);  // [2, 4]

---

 

 

 

 

2. 객체 (Object)의 특성과 자주 사용하는 메서드

특성

• 객체는 **키-값 쌍 (key-value pairs)**으로 이루어진 데이터 구조입니다.
• 키는 문자열이나 심볼이고, 값은 어떤 데이터 타입이든 가능합니다.

자주 사용하는 객체 메서드

메서드 설명 예시

Object.keys(obj)	객체의 모든 키를 배열로 반환	Object.keys({ a: 1, b: 2 }); // ['a', 'b']
Object.values(obj)	객체의 모든 값을 배열로 반환	Object.values({ a: 1, b: 2 }); // [1, 2]
Object.entries(obj)	키-값 쌍을 배열로 반환	Object.entries({ a: 1, b: 2 }); // [['a', 1], ['b', 2]]
Object.assign(target, source)	객체를 복사하거나 병합	const copy = Object.assign({}, obj);
hasOwnProperty(key)	객체에 특정 키가 있는지 확인	obj.hasOwnProperty('key');
delete obj[key]	객체의 특정 속성을 삭제	delete obj.name;

객체에 동적으로 값 추가

const person = {};
person.name = 'Alice';
person['age'] = 25;
console.log(person);  // { name: 'Alice', age: 25 }

객체의 키-값 쌍 순회

const scores = { player1: 10, player2: 20 };
for (const [player, score] of Object.entries(scores)) {
  console.log(`${player}: ${score}`);
}
// 출력: player1: 10, player2: 20

---

3. 배열과 객체의 비교

• 자바스크립트에서 배열과 객체는 데이터 저장에 사용되지만, 그 주된 차이점은 구조와 용도에 있습니다. 이 둘의 차이점을 아래에서 더 자세히 살펴보겠습니다.

  ---

  1. 배열과 객체의 정의
  • 배열 (Array): 순서가 있는 데이터의 집합으로, 요소들은 **인덱스(숫자)**를 통해 접근합니다.
  • 객체 (Object): **키-값 쌍 (key-value pair)**으로 구성된 데이터 구조입니다. **키(key)**는 고유한 문자열이나 심볼이어야 하며, 값은 다양한 데이터 타입이 가능합니다.

  ---

  2. 차이점 비교구분 배열 (Array) 객체 (Object)

  구분	배열(Array)	객체(Object)
  데이터 접근	인덱스로 접근 (array[0])	키로 접근 (obj.key 또는 obj['key'])
  데이터 순서	순서가 있음	순서가 중요하지 않음
  사용 예시	리스트 형태의 데이터: 이름 목록, 점수 등	특정 속성을 가진 데이터: 사용자 정보 (이름, 나이)
  ⭐기본 메서드	forEach(), map(), filter(), reduce() 등	Object.keys(), Object.values(), Object.entries() 등
  데이터의 타입	요소는 어떤 타입이든 가능	키는 문자열 또는 심볼, 값은 어떤 타입이든 가능
  길이 확인	array.length	Object.keys(obj).length
  사용 패턴	리스트나 컬렉션 관리	속성 기반 정보 관리

  ---

  3. 예제 비교

  const fruits = ['Apple', 'Banana', 'Cherry'];
  console.log(fruits[0]);  // Apple
  

  객체 예제

  ---

  4. 사용 목적
  1. 배열 사용이 적합한 경우
     • 순서가 중요한 데이터 목록
     • 예: 학생들의 성적, 쇼핑 목록 등
     • 데이터를 반복, 정렬, 변환할 필요가 있을 때
  2. 객체 사용이 적합한 경우
     • 서로 관련된 속성 정보를 저장할 때
     • 예: 사용자 프로필, 상품 정보
     • 특정 키로 속성 값을 검색하거나 추가/수정할 때

  ---

  5. 요약
  • 배열은 순서가 중요할 때 사용하며 인덱스 기반 접근이 필요합니다.
  • 객체는 속성-값 쌍으로 데이터를 표현하며, 키-값 접근이 필요할 때 사용합니다.
  이 차이를 이해하면 언제 배열을 사용하고 언제 객체를 사용해야 하는지 명확해지며, 문제를 더 효율적으로 해결할 수 있습니다!
• const user = { name: 'Alice', age: 25, occupation: 'Developer' }; console.log(user.name); // Alice
• 배열 예제

 

---

 

 

 

 

코드 문제 풀이에서 문법 선택 기준

1. 데이터가 순서대로 정렬되었거나 순회해야 하는 경우 → 배열 사용.
2. 이름과 값의 쌍이 필요하거나 특정 값을 키로 접근해야 하는 경우 → 객체 사용.
3. 배열의 각 요소를 새로운 형태로 변환해야 할 때 → map().
4. 배열의 특정 조건에 맞는 요소만 필요할 때 → filter().
5. 배열의 모든 값의 합이나 평균 등 하나의 값으로 줄여야 할 때 → reduce().
6. 객체의 속성 값들을 동적으로 업데이트할 때 → 객체의 기본값 설정 패턴(obj[key] = (obj[key] || 초기값) + 1).

---

이런 패턴을 반복적으로 사용하고 다양한 문제에 적용해 보면 언제 어떤 문법을 사용해야 할지 점점 더 빠르게 판단할 수 있게 됩니다.