자바스크립트 메소드(Method) 정리

1. 배열(Array) 메소드
2. 문자열(String) 메소드
3. 숫자/수학(Number/Math) 메소드
4. 객체(Object) 메소드
5. Set과 Map
6. 팁

---

1. 배열(Array) 메서드

배열 추가/삭제

push() - 배열 끝에 요소 추가

let arr = [1, 2, 3];
arr.push(4);
console.log(arr);  // [1, 2, 3, 4]

pop() - 배열 끝 요소 제거 및 반환

let arr = [1, 2, 3];
let last = arr.pop();
console.log(last);  // 3
console.log(arr);   // [1, 2]

unshift() - 배열 앞에 요소 추가

let arr = [2, 3];
arr.unshift(1);
console.log(arr);  // [1, 2, 3]

shift() - 배열 앞 요소 제거 및 반환

let arr = [1, 2, 3];
let first = arr.shift();
console.log(first);  // 1
console.log(arr);    // [2, 3]

---

배열 변환/가공

map() - 배열 각 요소를 변환

let arr = [1, 2, 3];
let doubled = arr.map(x => x * 2);
console.log(doubled);  // [2, 4, 6]

// 객체 배열에서 특정 속성만 추출
let users = [{name: "Alice", age: 20}, {name: "Bob", age: 25}];
let names = users.map(user => user.name);
console.log(names);  // ["Alice", "Bob"]

filter() - 조건에 맞는 요소만 필터링

let arr = [1, 2, 3, 4, 5];
let even = arr.filter(x => x % 2 === 0);
console.log(even);  // [2, 4]

// 특정 조건 만족하는 객체만 추출
let users = [{name: "Alice", age: 20}, {name: "Bob", age: 17}];
let adults = users.filter(user => user.age >= 18);
console.log(adults);  // [{name: "Alice", age: 20}]

reduce() - 배열을 하나의 값으로 누적

let arr = [1, 2, 3, 4];
let sum = arr.reduce((acc, cur) => acc + cur, 0);
console.log(sum);  // 10

// 최댓값 구하기
let arr = [3, 1, 4, 1, 5];
let max = arr.reduce((acc, cur) => Math.max(acc, cur), -Infinity);
console.log(max);  // 5

// 객체로 그룹화
let fruits = ["apple", "banana", "apple", "orange", "banana"];
let count = fruits.reduce((acc, fruit) => {
  acc[fruit] = (acc[fruit] || 0) + 1;
  return acc;
}, {});
console.log(count);  // {apple: 2, banana: 2, orange: 1}

forEach() - 각 요소에 함수 실행 (반환값 없음)

let arr = [1, 2, 3];
arr.forEach(x => console.log(x * 2));
// 출력: 2, 4, 6

---

배열 검색

find() - 조건에 맞는 첫 번째 요소 반환

let arr = [1, 2, 3, 4];
let found = arr.find(x => x > 2);
console.log(found);  // 3

findIndex() - 조건에 맞는 첫 번째 요소의 인덱스 반환

let arr = [1, 2, 3, 4];
let idx = arr.findIndex(x => x > 2);
console.log(idx);  // 2

indexOf() - 특정 요소의 첫 인덱스 반환

let arr = [1, 2, 3, 2];
console.log(arr.indexOf(2));      // 1
console.log(arr.indexOf(5));      // -1 (없으면 -1)

includes() - 특정 요소 포함 여부 확인

let arr = [1, 2, 3];
console.log(arr.includes(2));  // true
console.log(arr.includes(5));  // false

some() - 조건에 맞는 요소가 하나라도 있으면 true

let arr = [1, 2, 3];
console.log(arr.some(x => x > 2));  // true

every() - 모든 요소가 조건에 맞아야 true

let arr = [1, 2, 3];
console.log(arr.every(x => x > 0));   // true
console.log(arr.every(x => x > 2));   // false

---

배열 정렬/순서

sort() - 배열 정렬 (원본 변경)

// 숫자 오름차순
let arr = [3, 1, 4, 2];
arr.sort((a, b) => a - b);
console.log(arr);  // [1, 2, 3, 4]

// 숫자 내림차순
arr.sort((a, b) => b - a);
console.log(arr);  // [4, 3, 2, 1]

// 문자열 정렬
let fruits = ["banana", "apple", "cherry"];
fruits.sort();
console.log(fruits);  // ["apple", "banana", "cherry"]

// 객체 정렬
let users = [{name: "Bob", age: 25}, {name: "Alice", age: 20}];
users.sort((a, b) => a.age - b.age);
console.log(users);  // [{name: "Alice", age: 20}, {name: "Bob", age: 25}]

reverse() - 배열 순서 뒤집기 (원본 변경)

let arr = [1, 2, 3];
arr.reverse();
console.log(arr);  // [3, 2, 1]

---

배열 분할/결합

slice(start, end) - 배열 일부 추출 (원본 유지)

let arr = [1, 2, 3, 4, 5];
console.log(arr.slice(1, 3));   // [2, 3]
console.log(arr.slice(2));      // [3, 4, 5]
console.log(arr.slice(-2));     // [4, 5]

splice(start, deleteCount, ...items) - 요소 삭제/추가 (원본 변경)

let arr = [1, 2, 3, 4];
arr.splice(1, 2);           // [1, 4] - 인덱스 1부터 2개 제거
arr.splice(1, 0, 'a', 'b'); // [1, 'a', 'b', 4] - 인덱스 1에 추가
arr.splice(1, 2, 'x');      // [1, 'x', 4] - 인덱스 1부터 2개 제거하고 'x' 추가

concat() - 배열 합치기

let arr1 = [1, 2];
let arr2 = [3, 4];
let result = arr1.concat(arr2);
console.log(result);  // [1, 2, 3, 4]

// 스프레드 연산자로도 가능
let result2 = [...arr1, ...arr2];
console.log(result2);  // [1, 2, 3, 4]

join(separator) - 배열을 문자열로 합침

let arr = ['Hello', 'World'];
console.log(arr.join(' '));   // "Hello World"
console.log(arr.join(''));    // "HelloWorld"
console.log(arr.join('-'));   // "Hello-World"

---

기타 유용한 배열 메서드

fill(value, start, end) - 배열을 특정 값으로 채움

let arr = new Array(5).fill(0);
console.log(arr);  // [0, 0, 0, 0, 0]

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

 

flat(depth) - 중첩 배열 평탄화

let arr = [1, [2, [3, 4]]];
console.log(arr.flat());     // [1, 2, [3, 4]]
console.log(arr.flat(2));    // [1, 2, 3, 4]
console.log(arr.flat(Infinity));  // [1, 2, 3, 4]

from() - 유사 배열/반복 가능 객체를 배열로 변환

// 문자열을 배열로
let str = "hello";
let arr = Array.from(str);
console.log(arr);  // ["h", "e", "l", "l", "o"]

// 길이가 n인 배열 생성 + 초기화
let arr2 = Array.from({length: 5}, (_, i) => i);
console.log(arr2);  // [0, 1, 2, 3, 4]

---

2. 문자열(String) 메서드

문자열 검색/확인

indexOf(searchValue) - 문자열에서 특정 문자열의 첫 위치 반환

let str = "Hello World";
console.log(str.indexOf("World"));  // 6
console.log(str.indexOf("x"));      // -1 (없으면 -1)

includes(searchString) - 문자열 포함 여부 확인

let str = "Hello World";
console.log(str.includes("World"));  // true
console.log(str.includes("x"));      // false

startsWith(searchString) - 특정 문자열로 시작하는지 확인

console.log("Hello".startsWith("He"));   // true
console.log("Hello".startsWith("lo"));   // false

endsWith(searchString) - 특정 문자열로 끝나는지 확인

console.log("Hello".endsWith("lo"));   // true
console.log("Hello".endsWith("He"));   // false

---

문자열 추출

charAt(index) - 특정 인덱스의 문자 반환

console.log("Hello".charAt(1));  // "e"
console.log("Hello"[1]);         // "e" (동일)

slice(start, end) - 문자열 일부 추출

let str = "Hello World";
console.log(str.slice(0, 5));   // "Hello"
console.log(str.slice(6));      // "World"
console.log(str.slice(-5));     // "World"

substring(start, end) - 문자열 일부 추출 (음수 불가)

let str = "Hello World";
console.log(str.substring(0, 5));  // "Hello"
console.log(str.substring(6));     // "World"

slice와 substring 차이

• slice(): 음수 인덱스 지원 (뒤에서부터 계산)
• substring(): 음수를 0으로 처리, 시작 부분이 끝 부분보다 크면(start > end이면) 자동으로 바꿈

---

문자열 변환

split(separator) - 문자열을 배열로 분할

console.log("Hello World".split(" "));    // ["Hello", "World"]
console.log("a,b,c".split(","));          // ["a", "b", "c"]
console.log("Hello".split(""));           // ["H", "e", "l", "l", "o"]

replace(searchValue, newValue) - 문자열 치환 (첫 번째만 적용)

let str = "Hello World World";
console.log(str.replace("World", "JS"));  // "Hello JS World"

replaceAll(searchValue, newValue) -일치하는 모든 문자열 치환

let str = "Hello World World";
console.log(str.replaceAll("World", "JS"));  // "Hello JS JS"

toUpperCase() - 대문자로 변환

console.log("hello".toUpperCase());  // "HELLO"

toLowerCase() - 소문자로 변환

console.log("HELLO".toLowerCase());  // "hello"

trim() - 앞뒤 공백 제거

console.log("  hello  ".trim());      // "hello"
console.log("  hello  ".trimStart()); // "hello  "
console.log("  hello  ".trimEnd());   // "  hello"

padStart(targetLength, padString) - 문자열 앞을 채움

console.log("5".padStart(3, "0"));   // "005"
console.log("day".padStart(6, "to")); // "tododay"

padEnd(targetLength, padString) - 문자열 뒤를 채움

console.log("5".padEnd(3, "0"));   // "500"

---

문자열 반복

repeat(count) - 문자열 반복

console.log("Ha".repeat(3));  // "HaHaHa"
console.log("*".repeat(5));   // "*****"

---

기타

length - 문자열 길이

console.log("Hello".length);  // 5

---

3. 숫자/수학(Number/Math) 메서드

숫자 변환

parseInt(string, radix) - 문자열을 정수로 변환

console.log(parseInt("123"));       // 123
console.log(parseInt("3.14"));      // 3
console.log(parseInt("1010", 2));   // 10 (2진수)
console.log(parseInt("FF", 16));    // 255 (16진수)

parseFloat(string) - 문자열을 실수로 변환

console.log(parseFloat("3.14"));    // 3.14
console.log(parseFloat("3.14abc")); // 3.14

Number(value) - 값을 숫자로 변환

console.log(Number("123"));   // 123
console.log(Number("3.14"));  // 3.14
console.log(Number("abc"));   // NaN

toString(radix) - 숫자를 문자열로 변환

console.log((10).toString());    // "10"
console.log((10).toString(2));   // "1010" (2진수)
console.log((255).toString(16)); // "ff" (16진수)

toFixed(digits) - 소수점 자릿수 고정

console.log((3.14159).toFixed(2));  // "3.14"
console.log((3).toFixed(2));        // "3.00"

---

Math 객체

Math.max(...values) - 최댓값 반환

console.log(Math.max(1, 2, 3));       // 3
console.log(Math.max(...[1, 2, 3]));  // 3

Math.min(...values) - 최솟값 반환

console.log(Math.min(1, 2, 3));       // 1
console.log(Math.min(...[1, 2, 3]));  // 1

Math.abs(x) - 절댓값

console.log(Math.abs(-5));   // 5
console.log(Math.abs(5));    // 5

Math.floor(x) - 내림

console.log(Math.floor(3.7));   // 3
console.log(Math.floor(-3.7));  // -4

Math.ceil(x) - 올림

console.log(Math.ceil(3.2));   // 4
console.log(Math.ceil(-3.2));  // -3

Math.round(x) - 반올림

console.log(Math.round(3.5));   // 4
console.log(Math.round(3.4));   // 3

Math.pow(base, exponent) - 거듭제곱

console.log(Math.pow(2, 3));  // 8
console.log(2 ** 3);          // 8 (동일)

Math.sqrt(x) - 제곱근

console.log(Math.sqrt(16));  // 4
console.log(Math.sqrt(2));   // 1.414...

Math.random() - 0~1 사이 난수

console.log(Math.random());  // 0.xxxxx

// 1~10 사이 랜덤 정수
let random = Math.floor(Math.random() * 10) + 1;

---

4. 객체(Object) 메서드

Object.keys(obj) - 객체의 키를 배열로 반환

let obj = {a: 1, b: 2, c: 3};
console.log(Object.keys(obj));  // ["a", "b", "c"]

Object.values(obj) - 객체의 값을 배열로 반환

let obj = {a: 1, b: 2, c: 3};
console.log(Object.values(obj));  // [1, 2, 3]

Object.entries(obj) - [키, 값]으로 배열 반환

let obj = {a: 1, b: 2};
console.log(Object.entries(obj));  // [["a", 1], ["b", 2]]

// 활용: 객체를 Map으로 변환
let map = new Map(Object.entries(obj));

---

5. Set과 Map

📍 Set (중복 제거)

// 배열 중복 제거
let arr = [1, 2, 2, 3, 3, 3];
let unique = [...new Set(arr)];
console.log(unique);  // [1, 2, 3]

// Set 메서드
let set = new Set([1, 2, 3]);
set.add(4);           // Set {1, 2, 3, 4}
set.delete(2);        // Set {1, 3, 4}
set.has(3);           // true
set.size;             // 3
set.clear();          // Set {}

---

📍 Map (키-값 쌍 저장)

let map = new Map();
map.set('name', 'Alice');
map.set('age', 20);

console.log(map.get('name'));  // "Alice"
console.log(map.has('age'));   // true
console.log(map.size);         // 2

map.delete('age');
console.log(map.size);         // 1

// 순회
for (let [key, value] of map) {
  console.log(`${key}: ${value}`);
}

---

6. 팁

배열 초기화

// 길이 n인 배열, 모두 0으로 초기화
let arr = new Array(5).fill(0);  // [0, 0, 0, 0, 0]

// 0부터 n-1까지 배열
let arr2 = Array.from({length: 5}, (_, i) => i);  // [0, 1, 2, 3, 4]

// 1부터 n까지 배열
let arr3 = Array.from({length: 5}, (_, i) => i + 1);  // [1, 2, 3, 4, 5]

---

2차원 배열 초기화

// n x m 배열 생성
let n = 3, m = 4;
let arr = Array.from({length: n}, () => Array(m).fill(0));
console.log(arr);
// [[0,0,0,0], [0,0,0,0], [0,0,0,0]]

---

배열 복사

// 얕은 복사
let arr = [1, 2, 3];
let copy1 = [...arr];
let copy2 = arr.slice();
let copy3 = Array.from(arr);

// 깊은 복사 (중첩 배열/객체)
let deepCopy = JSON.parse(JSON.stringify(arr));

---

최댓값/최솟값 구하기

let arr = [3, 1, 4, 1, 5];

// Math 사용
let max = Math.max(...arr);  // 5
let min = Math.min(...arr);  // 1

// reduce 사용
let max2 = arr.reduce((a, b) => Math.max(a, b));
let min2 = arr.reduce((a, b) => Math.min(a, b));

---

배열 합계

let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce((acc, cur) => acc + cur, 0);  // 15

---

배열 평탄화

let arr = [[1, 2], [3, 4], [5]];
let flattened = arr.flat();  // [1, 2, 3, 4, 5]

// 또는
let flattened2 = [].concat(...arr);  // [1, 2, 3, 4, 5]

---

문자열, 배열 변환

// 문자열 → 배열
let str = "hello";
let arr = str.split('');     // ["h", "e", "l", "l", "o"]
let arr2 = [...str];         // ["h", "e", "l", "l", "o"]
let arr3 = Array.from(str);  // ["h", "e", "l", "l", "o"]

// 배열 → 문자열
let arr = ["h", "e", "l", "l", "o"];
let str = arr.join('');  // "hello"

---

숫자, 문자열 변환

// 숫자 → 문자열
let num = 123;
let str1 = String(num);      // "123"
let str2 = num.toString();   // "123"
let str3 = num + '';         // "123"

// 문자열 → 숫자
let str = "123";
let num1 = Number(str);      // 123
let num2 = parseInt(str);    // 123
let num3 = +str;             // 123

---

조건부 카운팅

let arr = [1, 2, 3, 4, 5];
let count = arr.filter(x => x > 2).length;  // 3

---

빈도수 세기

let arr = ["apple", "banana", "apple", "orange", "banana"];
let freq = arr.reduce((acc, cur) => {
  acc[cur] = (acc[cur] || 0) + 1;
  return acc;
}, {});
console.log(freq);  // {apple: 2, banana: 2, orange: 1}

---

정리

이 글에서 정리한 메소드들은 자바스크립트에서 자주 사용되는 핵심 메서드들입니다.
각 메서드의 시간 복잡도와 특징을 이해하는 것이 중요합니다.

특히 map, filter, reduce 같은 고차 함수와 slice, splice, sort 같은 배열 조작 메소드는 중요합니다.

 

• 원본을 변경하는 메서드: push, pop, shift, unshift, splice, sort, reverse, fill
• 새 배열/문자열을 반환하는 메서드: map, filter, slice, concat, split, join