- 배열(Array) 메소드
- 문자열(String) 메소드
- 숫자/수학(Number/Math) 메소드
- 객체(Object) 메소드
- Set과 Map
- 팁
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
