공부/JavaScript

[JS] 다양한 메서드 알아보기 🔍

y_flm 2025. 4. 28. 10:15
반응형

 

하루에 한 문제씩은 꼭 코딩 테스트를 풀고 있는 요즘 .. 메서드의 중요성을 크게 깨닫고 있다 ㅎㅎ ..

그래서 준비해본 자바스크립트에서의 다양한 메서드 알아보기 ! 🧐

 

문자열 관련 메서드

 

1. chatAt(index): 문자열 특정 인덱스의 문자 반환

const str = "Hello";
console.log(str.charAt(1));  // "e"

 

2. split(separator): 문자열을 특정 구분자로 나누어 배열로 반환

const str = "apple,banana,orange";
str.split(",");  // ["apple", "banana", "orange"]

 

3. replace(searchValue, newValue): 문자열에서 특정 패턴을 찾아 다른 값으로 교체

const str = "Hello, world!";
str.replace("world", "everyone");  // "Hello, everyone!"

 

4. toUpperCase(): 문자열을 대문자로 변환

  + toLowerCase(): 문자열을 소문자로 변환

const str = "Hello";
str.toUpperCase();  // "HELLO"
str.toLowerCase();  // "hello"

 

5. trim(): 문자열 양옆의 공백 제거

const str = "   Hello, World!   ";
str.trim();  // "Hello, World!"

 

6. repeat(count): 문자열을 지정한 횟수만큼 반복

const str = "abc";
str.repeat(3);  // "abcabcabc"
배열 메서드

 

1. push(element): 배열의 끝에 요소 추가

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

 

2. pop(): 배열의 마지막 요소 제거

const arr = [1, 2, 3];
arr.pop();  // [1, 2]

 

3. unshift(element): 배열의 첫 번째에 요소 추가

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

 

4. shift(): 배열의 첫 번째 요소 제거

const arr = [1, 2, 3];
arr.shift();  // [2, 3]

 

5. join(separator): 배열의 모든 요소를 연결하여 하나의 문자열로 반환

const array = [1, 2, 3];
array.join("");  // "123"

 

6. forEach(callback): 각 요소에 대해 콜백 함수 실행

// 배열
const arr = [1, 2, 3];
arr.forEach(num => console.log(num));

 

7. map(callback): 배열의 각 요소에 함수를 적용하여 새로운 배열 반환

const arr = [1, 2, 3];
arr.map(num => num * 2);  // [2, 4, 6]

 

8. filter(callback): 배열에서 조건을 만족하는 요소만 필터링하여 새로운 배열 반환

const arr = [1, 2, 3, 4, 5];
arr.filter(num => num % 2 === 0);  // [2, 4]

 

9. reduce(callback, initialValue): 배열을 하나의 값으로 축소

const arr = [1, 2, 3, 4];
arr.reduce((acc, num) => acc + num, 0);  // 10

 

10. sort(compareFunction): 배열을 정렬

const arr = [3, 1, 2];
arr.sort((a, b) => a - b);  // [1, 2, 3]
문자열과 배열 모두 사용할 수 있는 메서드

 

1. includes(searchValue): 특정 값이 포함되어 있는지 확인

const str = "Hello, world!";
const array = [1, 2, 3];

console.log(str.includes("world"));  // true
console.log(str.includes("Hi"));     // false

console.log(array.includes(2));      // true
console.log(array.includes(5));      // false

 

2. indexOf(searchValue):  특정 값의 첫 번째 위치를 반환

  + lastIndexOf(searchValue): 특정 값의 마지막 위치를 반환

const str = "Hello, world!";
const array = [1, 2, 1, 3];

str.indexOf("o");      // 4
str.lastIndexOf("l");  // 10

array.indexOf(1);      // 0
array.indexOf(1);      // 2

 

3. slice(startIndex, endIndex): 특정 부분을 잘라내어 반환

     * endIndex는 포함되지 않음.

const str = "Hello, world!";
const array = [1, 2, 3, 4];

str.slice(0, 5);  // "Hello"
array.slice(0, 2);  // [1, 2]

 

4. concat(value1, value2, ...): 여러 문자열이나 배열 결합

const str1 = "Hello";
const str2 = "World";
str1.concat(" ", str2);  // "Hello World"

const arr1 = [1, 2];
const arr2 = [3, 4];
arr1.concat(arr2)  // [1, 2, 3, 4]
문자열 메서드 의미 배열 메서드 의미 배열 메서드 의미
chatAt() 특정 인덱스의 문자 반환 push() 마지막 요소 추가 forEach() 각 요소에 대해 콜백 함수 실행
split() 특정 구분자로 나누어 배열로 반환 pop() 마지막 요소 제거 map() 각 요소에 함수를 적용하여
새로운 배열 반환
replace() 특정 값을 다른 값으로 교체 unshift() 첫 번째 요소 추가 filter() 조건을 만족하는 요소만
필터링하여 새로운 배열 반환
toUpperCase()
toLowerCase()		 대문자로 변환
소문자로 변환		 shift() 첫 번째 요소 제거 reduce()  배열을 하나의 값으로 축소
trim() 양옆의 공백 제거 join() 모든 요소를 연결하여 하나의 문자열로 반환 sort() 배열 정렬
repeat() 지정한 횟수만큼 반복  
문자열 + 배열 공통 메서드 의미
includes() 특정 값이 포함되어 있는지 확인
indexOf()
lastIndexOf()		 특정 값의 첫 번째 위치를 반환
특정 값의 마지막 위치를 반환
slice(startIndex, endIndex) 특정 부분을 잘라내어 반환
concat(value1, value2, ...) 여러 문자열이나 배열 결합
객체 관련 메서드

 

1. Object.keys(): 객체의 key를 배열로 반환

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

 

2. Object.values(): 객체의 value를 배열로 반환

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

 

3. Object.entries(): 객체의 key-value 쌍을 배열로 반환

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

 

4. Object.assign(): 객체를 다른 객체로 복사하거나 병합

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const merged = Object.assign({}, obj1, obj2);
console.log(merged);  // { a: 1, b: 2 }

 

5. Object.freeze(): 객체를 동결하여 수정 불가하게 만들기

const obj = { a: 1 };
Object.freeze(obj);
obj.a = 2;  // 수정 불가
console.log(obj.a);  // 1

 

6. Object.seal(): 객체를 봉인하여 프로퍼티 삭제 불가하게 만들기 (수정은 가능)

const obj = { a: 1 };
Object.seal(obj);
obj.a = 2;  // 수정 가능
delete obj.a;  // 삭제 불가
console.log(obj.a);  // 2

 

7. Object.hasOwnProperty(searchValue): 객체에 특정 속성이 존재하는지 확인

const obj = { a: 1, b: 2 };
console.log(obj.hasOwnProperty("a"));  // true
console.log(obj.hasOwnProperty("c"));  // false

 

8. Object.fromEntries(): 배열이나 Map을 객체로 변환

const arr = [["a", 1], ["b", 2]];
const obj = Object.fromEntries(arr);
console.log(obj);  // { a: 1, b: 2 }
Map 관련 메서드

 

1. set(key, value): key-value 쌍을 Map에 추가

const map = new Map();
map.set("a", 1);
map.set("b", 2);
console.log(map);  // Map(2) { 'a' => 1, 'b' => 2 }

 

2. get(key): Map에서 특정 key 값을 가져옴

const map = new Map([["a", 1], ["b", 2]]);
console.log(map.get("a"));  // 1
console.log(map.get("c"));  // undefined

 

3. has(key): Map에 특정 key가 존재하는지 확인

const map = new Map([["a", 1], ["b", 2]]);
console.log(map.has("a"));  // true
console.log(map.has("c"));  // false

 

4. delete(key): Map에서 특정 key-value 쌍을 삭제

const map = new Map([["a", 1], ["b", 2]]);
map.delete("a");
console.log(map);  // Map(1) { 'b' => 2 }

 

5. clear(): Map의 모든 요소 삭제

const map = new Map([["a", 1], ["b", 2]]);
map.clear();
console.log(map);  // Map(0) {}

 

6. size(): Map의 요소 개수 확인

const map = new Map([["a", 1], ["b", 2]]);
console.log(map.size);  // 2

 

7. keys(): Map의 key들을 iterator 형태로 반환

const map = new Map([["a", 1], ["b", 2]]);
const keys = [...map.keys()];
console.log(keys);  // ["a", "b"]

 

8. values(): Map의 value들을 iterator 형태로 반환

const map = new Map([["a", 1], ["b", 2]]);
const values = [...map.values()];
console.log(values);  // [1, 2]

 

9. entries(): Map의 key-value 쌍들을 iterator 형태로 반환

const map = new Map([["a", 1], ["b", 2]]);
const entries = [...map.entries()];
console.log(entries);  // [["a", 1], ["b", 2]]
객체와 Map에 공통적인 메서드

 

1. forEach(): Map의 각 요소에 대해 콜백 함수 실행

// 객체
const obj = { a: 1, b: 2 };
Object.entries(obj).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});

// Map
const map = new Map([["a", 1], ["b", 2]]);
map.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});
[객체와 Map의 차이점 💡]
1) 객체는 주로 문자열을 key로 사용하고, 순서가 보장되지 않음.
    (비록 ES6 이후 객체는 키의 순서를 어느 정도 보장하지만 Map보다는 덜 신뢰할 수 있음)
2) Map은 임의의 자료형을 key로 사용 가능하고, 항상 순서를 보장하며, 성능이 더 뛰어날 때가 많음.
객체 메서드 의미 Map 메서드 의미
Object.keys() key를 배열로 반환 set(key, value) key-value 쌍을 Map에 추가
Object.values() value를 배열로 반환 get(key) 특정 key 값을 가져옴
Object.entries() key-value 쌍을 배열로 반환 has(key) 특정 key가 존재하는지 확인
Object.assign() 다른 객체로 복사하거나 병합 delete(key) 특정 key-value 쌍을 삭제
Object.freeze() 동결하여 수정 불가하게 만들기 clear() 모든 요소 삭제
Object.seal() 봉인하여 프로퍼티 삭제 불가하게 만들기 (수정은 가능) size() 요소 개수 확인
Object.hasOwnProperty() 특정 속성이 존재하는지 확인 keys() key들을 iterator 형태로 반환
Object.fromEntries() 배열이나 Map을 객체로 변환 values() value들을 iterator 형태로 반환
    entries()

 key-value 쌍들을 iterator 형태로 반환
객체 + Map 공통적인 메서드 의미
forEach() Map의 각 요소에 대해 콜백 함수 실행

 

반응형