자바스크립트 객체 메서드 완전 정리 (for문·forEach·배열·객체 반복까지 입문자 실전 가이드)

 자바스크립트를 공부하다 보면 가장 많이 등장하는 개념이 바로 자바스크립트 객체 메서드 + 배열 메서드 + 반복문(for문) 입니다.

특히 아래 개념은 반드시 이해해야 합니다.

for
forEach
for...of
for...in
Object.keys()
map()
filter()
reduce()

이번 글에서는 단순 사용법이 아니라

✔ 왜 사용하는지
✔ 언제 사용하는지
✔ 실행하면 어떤 결과가 나오는지
✔ 내부 동작 과정

까지 입문자 기준으로 설명합니다 😊

1️⃣ for문은 내장 메서드가 아니라 문법(statement)입니다

for (let i = 0; i < 3; i++) {
 console.log(i);
}

결과

0
1
2

즉 for문은 반복 실행을 위한 자바스크립트 문법입니다.

2️⃣ forEach()는 배열의 내장 메서드입니다

const numbers = [1, 2, 3];

numbers.forEach(n => console.log(n));

결과

1
2
3

즉 배열에서만 사용 가능한 내장 메서드입니다.

3️⃣ for...of 는 배열 값을 직접 반복하는 문법입니다

const numbers = [10, 20, 30];

for (let num of numbers) {
 console.log(num);
}

10
20
30

index 없이 값 직접 접근 가능합니다.

4️⃣ for...in 은 객체 key 반복 문법입니다

const user = {
 name: "Tom",
 age: 25
};

for (let key in user) {
 console.log(key);
}

name
age

value 출력 방법

for (let key in user) {
 console.log(user[key]);
}

Tom
25

5️⃣ Object.keys() — 객체 길이 구하기 핵심 메서드

const user = {
 name: "Tom",
 age: 25
};

Object.keys(user);

["name", "age"]

객체 길이 구하기

Object.keys(user).length;

2

동작 과정

Object.keys(user)
→ ["name","age"]

["name","age"].length
→ 2

6️⃣ Object.values() — value만 가져오기

Object.values(user);

["Tom",25]

7️⃣ Object.entries() — key + value 동시에 가져오기

Object.entries(user);

[["name","Tom"],["age",25]]

8️⃣ map() — 배열 변환 메서드

const numbers = [1, 2, 3];

numbers.map(n => n * 2);

[2,4,6]

9️⃣ filter() — 조건 만족 데이터만 남기기

numbers.filter(n => n > 1);

[2,3]

🔟 find() — 첫 번째 조건 만족 데이터 찾기

numbers.find(n => n > 1);

2

1️⃣1️⃣ reduce() — 배열을 하나의 값으로 만들기

numbers.reduce((acc, cur) => acc + cur, 0);

6

1️⃣2️⃣ 배열 안 객체(Array of Objects) 실무 패턴

const users = [
 { name: "Tom", age: 25 },
 { name: "Jane", age: 30 }
];

users.map(user => user.name);
["Tom","Jane"]

1️⃣3️⃣ result[key] || 0 패턴 이해하기

const str = "hello";
const result = {};

for (let char of str) {
 result[char] = (result[char] || 0) + 1;
}

console.log(result);

{h:1,e:1,l:2,o:1}

1️⃣4️⃣ || 연산자 이해하기

undefined || 0

0 || 10

0

10

false 판단 값 목록

false
0
null
undefined
NaN
""

1️⃣5️⃣ 반복문 선택 기준 정리 (실무 기준)

 for → 범용 반복문 forEach → 배열 반복 전용 메서드 for...of → 배열 값 반복 for...in → 객체 key 반복 map → 배열 변환 filter → 조건 선택 find → 하나 찾기 reduce → 하나로 축약 

이 정도만 이해하면 대부분의 자바스크립트 객체 메서드 + 반복문 기반 알고리즘 문제는 해결 가능합니다 🚀