01. 배열메서드
(요소, 인덱스)를 사용하는 주요 배열 메서드
-
forEach- 배열의 각 요소에 대해 주어진 콜백 함수를 실행합니다. 반환 값이 없고, 단순히 배열을 순회할 때 사용됩니다.
- 사용법:
const numbers = [10, 20, 30]; numbers.forEach(function (number, index) { console.log(`값: ${number}, 인덱스: ${index}`); }); // 출력: 값: 10, 인덱스: 0 // 값: 20, 인덱스: 1 // 값: 30, 인덱스: 2
-
filter- 조건을 만족하는 요소만 걸러내어 새로운 배열로 반환합니다.
- 사용법:
const numbers = [5, 10, 15, 20]; const greaterThanTen = numbers.filter(function (number, index) { return number > 10; }); console.log(greaterThanTen); // 출력: [15, 20]
-
reduce- 배열을 하나의 값으로 줄이기 위해 누적 값을 계산합니다.
(요소, 인덱스)외에도 누적 값(accumulator)을 함께 사용합니다. - 사용법:
const numbers = [1, 2, 3, 4]; const sum = numbers.reduce(function (accumulator, number, index) { return accumulator + number; }, 0); console.log(sum); // 출력: 10
- 배열을 하나의 값으로 줄이기 위해 누적 값을 계산합니다.
-
some- 배열의 요소 중 하나라도 조건을 만족하면
true를 반환합니다. - 사용법:
const numbers = [1, 2, 3, 4]; const hasEven = numbers.some(function (number, index) { return number % 2 === 0; }); console.log(hasEven); // 출력: true
- 배열의 요소 중 하나라도 조건을 만족하면
-
every- 배열의 모든 요소가 조건을 만족해야
true를 반환합니다. - 사용법:
const numbers = [2, 4, 6]; const allEven = numbers.every(function (number, index) { return number % 2 === 0; }); console.log(allEven); // 출력: true
- 배열의 모든 요소가 조건을 만족해야
-
find- 조건을 만족하는 첫 번째 요소를 반환합니다. 없으면
undefined를 반환합니다. - 사용법:
const fruits = ["사과", "바나나", "체리"]; const foundFruit = fruits.find(function (fruit, index) { return fruit === "바나나"; }); console.log(foundFruit); // 출력: 바나나
- 조건을 만족하는 첫 번째 요소를 반환합니다. 없으면
-
findIndex- 조건을 만족하는 첫 번째 요소의 인덱스를 반환합니다. 없으면
-1을 반환합니다. - 사용법:
const fruits = ["사과", "바나나", "체리"]; const fruitIndex = fruits.findIndex(function (fruit, index) { return fruit === "체리"; }); console.log(fruitIndex); // 출력: 2
- 조건을 만족하는 첫 번째 요소의 인덱스를 반환합니다. 없으면
(요소, 인덱스)를 사용하지 않는 주요 배열 메서드
-
push- 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환합니다.
- 사용법:
const arr = [1, 2, 3]; arr.push(4); // arr은 [1, 2, 3, 4]가 됩니다.
-
pop- 배열의 마지막 요소를 제거하고, 그 요소를 반환합니다.
- 사용법:
const arr = [1, 2, 3]; const last = arr.pop(); // arr은 [1, 2]가 되고, last는 3입니다.
-
shift- 배열의 첫 번째 요소를 제거하고, 그 요소를 반환합니다.
- 사용법:
const arr = [1, 2, 3]; const first = arr.shift(); // arr은 [2, 3]이 되고, first는 1입니다.
-
unshift- 배열의 시작 부분에 하나 이상의 요소를 추가하고, 새로운 배열의 길이를 반환합니다.
- 사용법:
const arr = [2, 3]; arr.unshift(1); // arr은 [1, 2, 3]이 됩니다.
-
concat- 두 개 이상의 배열을 합쳐 새로운 배열을 반환합니다. 원래 배열은 변경되지 않습니다.
- 사용법:
const arr1 = [1, 2]; const arr2 = [3, 4]; const combined = arr1.concat(arr2); // combined는 [1, 2, 3, 4]입니다.
-
slice- 배열의 일부를 잘라서 새로운 배열을 반환합니다. 원래 배열은 변경되지 않습니다.
- 사용법:
const arr = [1, 2, 3, 4]; const sliced = arr.slice(1, 3); // sliced는 [2, 3]입니다.
-
splice- 배열의 요소를 추가, 제거, 또는 교체하며, 변경된 요소를 반환합니다.
- 사용법:
const arr = [1, 2, 3, 4]; arr.splice(1, 2); // arr은 [1, 4]가 되고, 제거된 [2, 3]을 반환합니다.
-
join- 배열의 모든 요소를 문자열로 결합하여 하나의 문자열로 반환합니다.
- 사용법:
const arr = ["Hello", "world"]; const result = arr.join(" "); // result는 "Hello world"입니다.
-
reverse- 배열의 요소를 뒤집어 순서를 반전시킵니다. 원래 배열이 변경됩니다.
- 사용법:
const arr = [1, 2, 3]; arr.reverse(); // arr은 [3, 2, 1]이 됩니다.
-
sort- 배열의 요소를 정렬합니다. 기본적으로 문자열 유니코드 순서로 정렬합니다.
- 사용법:
const arr = [3, 1, 2]; arr.sort(); // arr은 [1, 2, 3]이 됩니다.
요약
- 위의 메서드들은
(요소, 인덱스)를 사용하는 대신 다른 인자를 받거나, 배열을 직접 조작하는 용도로 사용됩니다. push,pop,shift,unshift는 배열의 크기를 조작하는 메서드입니다.concat,slice,splice는 배열의 부분을 조작하거나 결합하여 새로운 배열을 반환합니다.join,reverse,sort는 배열을 다루거나 변형하는 데 사용됩니다.
02. 일반메서드
네, 배열 메서드 외에도 다양한 일반 메서드들이 JavaScript에서 제공됩니다. 이러한 메서드들은 배열뿐만 아니라 문자열, 객체, 숫자 등을 다룰 때 사용됩니다. 각각의 자료형에 맞는 메서드들이 있으며, 특정 자료형과 관련된 다양한 작업을 수행할 수 있도록 도와줍니다.
일반 메서드의 종류와 예시
-
문자열 메서드 (String Methods)
-
문자열을 다루는 다양한 메서드들이 있습니다.
-
toUpperCase(): 문자열을 대문자로 변환합니다.const text = "hello"; console.log(text.toUpperCase()); // "HELLO" -
slice(): 문자열의 일부를 추출하여 새로운 문자열로 반환합니다.const text = "Hello, world!"; console.log(text.slice(0, 5)); // "Hello" -
replace(): 문자열의 일부를 다른 문자열로 바꿉니다.const text = "Hello, world!"; console.log(text.replace("world", "JavaScript")); // "Hello, JavaScript!" -
trim(): 문자열 양쪽의 공백을 제거합니다.const text = " Hello "; console.log(text.trim()); // "Hello"
-
-
숫자 메서드 (Number Methods)
-
숫자를 다루는 메서드들이 있으며, 정밀한 수치 계산 등에 유용합니다.
-
toFixed(): 숫자를 고정 소수점 형식으로 표시합니다.const num = 3.14159; console.log(num.toFixed(2)); // "3.14" -
parseInt(): 문자열을 정수로 변환합니다.const str = "42"; console.log(parseInt(str, 10)); // 42 -
Math.round(): 숫자를 반올림합니다.const num = 4.7; console.log(Math.round(num)); // 5
-
-
객체 메서드 (Object Methods)
-
객체를 다루기 위한 메서드들이 있으며, 속성 접근이나 조작에 사용됩니다.
-
Object.keys(): 객체의 모든 키(속성 이름)를 배열로 반환합니다.const obj = { name: "John", age: 30 }; console.log(Object.keys(obj)); // ["name", "age"] -
Object.values(): 객체의 모든 값을 배열로 반환합니다.const obj = { name: "John", age: 30 }; console.log(Object.values(obj)); // ["John", 30] -
Object.entries(): 객체의 키-값 쌍을 배열의 배열로 반환합니다.const obj = { name: "John", age: 30 }; console.log(Object.entries(obj)); // [["name", "John"], ["age", 30]]
-
-
날짜 메서드 (Date Methods)
-
날짜와 시간을 다룰 때 사용하는 메서드들입니다.
-
Date.now(): 현재 시간을 밀리초 단위로 반환합니다.console.log(Date.now()); // 현재 시간의 타임스탬프 출력 -
getFullYear(): 날짜 객체에서 연도를 반환합니다.const date = new Date(); console.log(date.getFullYear()); // 현재 연도 -
toLocaleDateString(): 날짜를 현지 시간대의 문자열로 반환합니다.const date = new Date(); console.log(date.toLocaleDateString()); // "2024-08-26" 같은 형식
-
-
정규 표현식 메서드 (RegExp Methods)
-
문자열에서 패턴 매칭을 위해 사용하는 메서드들입니다.
-
test(): 정규 표현식이 문자열에 일치하는지 검사합니다.const regex = /hello/; console.log(regex.test("hello world")); // true -
exec(): 정규 표현식을 사용해 문자열에서 일치하는 부분을 찾습니다.const regex = /(\d+)/; // 정규 표현식 생성: 숫자(연속된 숫자)를 찾기 위한 패턴 const result = regex.exec("There are 42 apples"); console.log(result[0]); // "42"/(\d+)/: 정규 표현식 리터럴입니다. \d: 숫자(digit)를 의미합니다. +: 하나 이상의 숫자가 연속적으로 나타나는 것을 찾습니다. (): 그룹을 만들어, 해당 부분을 추출할 수 있게 합니다.
-
김마리의 개발.로그