[JavaScript/개념] 자바스크립트 자주 사용하는 배열 메서드

728x90

1. join()

join() 메서드는 배열의 모든 요소를 연결하여 하나의 문자열로 만든다. 이때 원본 배열은 변경되지 않는다.

구분자(separator): 요소 사이에 삽입할 문자열이다. 생략하면 기본값인 쉼표 , 가 사용된다. 구분자는 문자열(String)로 전달해야 하며, 그렇지 않으면 SyntaxError가 발생한다.

array.join("구분자");

let names = ["aaa", "bbb", "ccc"];

// 1. 구분자가 없는 경우 (기본 구분자 , 사용)
console.log(names.join());  
// 결과: "aaa,bbb,ccc"

// 2. 구분자가 있는 경우
console.log(names.join(","));  
// 결과: "aaa,bbb,ccc"

console.log(names.join("/"));  
// 결과: "aaa/bbb/ccc"

console.log(names.join(", and "));  
// 결과: "aaa, and bbb, and ccc"

// 구분자로 올바르지 않은 값을 전달할 경우
console.log(names.join(/));  
// 결과: Uncaught SyntaxError: Unexpected token '/'

2. split()

split() 메서드는 문자열을 특정 구분자를 기준으로 나누어 배열로 변환한다. 이때 원본 문자열은 변경되지 않는다.

구분자(seperator): 문자열을 나누는 기준이다. 구분자를 전달하지 않으면 문자열 전체가 배열의 한 요소로 들어간다. 구분자는 반드시 전달해야 의미 있는 결과를 얻을 수 있다.

str.split(구분자);

let str1 = "abcdefg";

// 구분자로 빈 문자열을 전달한 경우 (각 문자를 배열의 요소로 나눔)
console.log(str1.split(""));  
// 결과: ["a", "b", "c", "d", "e", "f", "g"]

// 구분자를 전달하지 않은 경우
console.log(str1.split());  
// 결과: ["abcdefg"]  (문자열 전체가 하나의 배열 요소가 됨)

console.log(str1.split(","));  
// 결과: ["abcdefg"]  (쉼표가 없으므로 전체 문자열이 하나의 요소로 들어감)


let str2 = "a,b,c,d,e,f,g";

// 구분자로 쉼표(,)를 전달한 경우
console.log(str2.split(","));  
// 결과: ["a", "b", "c", "d", "e", "f", "g"]

3. reverse()

reverse() 메서드는 배열의 순서를 뒤집은 새로운 배열을 반환하며, 이 때 원본 배열도 변경된다.

arr.reverse();

const arr = [1, 2, 3, 4, 5];
arr.reverse();
console.log(arr);
// 결과: [5, 4, 3, 2, 1]

4. splice()

splice() 메서드는 배열의 특정 인덱스에서 시작하여 지정된 개수만큼 요소를 삭제한다. 삭제된 요소들은 배열로 반환되며, 원본 배열도 변경된다.

array.splice(startIndex, deleteCount);

startIndex: 배열에서 삭제를 시작할 인덱스. 음수 값을 사용할 경우, 배열의 끝에서부터의 인덱스를 지정할 수 있다.
deleteCount: 삭제할 요소의 개수. 이 값이 0인 경우, 요소를 삭제하지 않고, 지정한 인덱스에서 요소를 추가할 수 있다.

let arr = [1, 2, 3, 4, 5, 6];
let deletedElements = arr.splice(0, 2); // 0번째 인덱스에서 2개 요소 삭제
console.log(deletedElements); // 결과: [1, 2]
console.log(arr); // 결과: [3, 4, 5, 6]

5. slice()

배열의 특정 부분을 반환하는 메서드로 원하는 부분만 가지고 와서 새로운 배열을 만들 수 있다. 이 때 splice()와는 다르게 원본 배열을 변경하지는 않는다.

slice(startIndex, endIndex);

startIndex: 추출을 시작할 인덱스.
endIndex: 추출을 종료할 인덱스. 이때 endIndex는 exclusive하므로, 지정한 끝 인덱스의 요소는 포함되지 않고 그 전 인덱스까지 반환된다.

let arr = [10, 20, 30, 40, 50];
let slicedArr = arr.slice(1, 4);
console.log(slicedArr);  // 출력: [20, 30, 40]

6. find()

find() 메서드는 배열의 요소 중에서 콜백 함수의 조건을 처음으로 만족하는 첫 번째 요소를 반환하며, 조건을 충족하는 요소가 없으면 undefined를 반환한다.

array.find(callback(currentValue, index, array));

currentValue: 현재 처리 중인 요소.
index: 현재 요소의 인덱스(선택적).
array: find()가 호출된 배열(선택적).

이때 callback 함수는 boolean 값을 반환해야 한다.

let numbers = [10, 25, 30, 45, 50];

// 배열에서 첫 번째로 30보다 큰 숫자를 찾는 예시
let result = numbers.find(function(value) {
    return value > 30;
});

console.log(result);  // 출력: 45

7. filter()

filter() 메서드는 주어진 조건을 충족하는(즉, 반환값이 true인) 요소들만 모아 새로운 배열로 반환한다. 이때 원본 배열은 변경되지 않는다.

arr.filter(callback(value, index, array))

currentValue: 현재 처리 중인 요소.
index: 현재 요소의 인덱스(선택적).
array: filter()가 호출된 배열(선택적).

let numbers = [10, 25, 30, 45, 50];

let result = numbers.filter(function(value) {
    return value % 10 === 0;
});

console.log(result);  // 출력: [10, 30, 50]
console.log(numbers);  // 출력: [10, 25, 30, 45, 50]

8. map()

map() 메서드는 배열의 각 요소에 대해 제공된 콜백 함수를 실행한 결과를 새로운 배열로 반환한다. 이때 원본 배열은 변경되지 않는다.

arr.map(function callback(currentValue, index, array) {
  // 콜백 함수 내용
})

arr.map((currentValue, index, array) => {
  // 콜백 함수 내용
})

currentValue: 배열의 현재 요소 값입니다.
index (선택적): 현재 요소의 인덱스입니다.
array (선택적): map() 메서드를 호출한 배열 자체입니다.

let numbers = [10, 25, 30, 45, 50];

// 배열의 각 요소를 5로 나눈 값을 새로운 배열로 반환
let numbersAvg = numbers.map(value => value / 5);

console.log(numbersAvg);  // 출력: [2, 5, 6, 9, 10]
console.log(numbers);     // 출력: [10, 25, 30, 45, 50]  (원본 배열은 변경되지 않음)

9. some()

some() 메서드는 배열의 요소 중에서 하나라도 주어진 콜백 함수의 조건을 충족하는 요소가 있는지 검사한다. 이 메서드는 조건을 충족하는 요소가 하나라도 있으면 true를, 없으면 false를 반환한다.

array.some(callback(currentValue, index, array));

currentValue: 배열의 현재 요소 값.
index (선택적): 현재 요소의 인덱스.
array (선택적): some() 메서드를 호출한 배열.

const numbers = [10, 20, 30, 40, 50];

// 배열에 40이 넘는 숫자가 있는지 검사
let result = numbers.some(value => value > 40);
console.log(result); // 출력: true

10. every()

every() 메서드는 배열의 모든 요소가 주어진 콜백 함수의 조건을 충족하는지 검사한다. 이 메서드는 모든 요소가 조건을 만족하면 true를, 하나라도 만족하지 않으면 false를 반환한다.

array.every(callback(value, index, array));

currentValue: 배열의 현재 요소 값.
index (선택적): 현재 요소의 인덱스.
array (선택적): every() 메서드를 호출한 배열.

const numbers = [10,20,30,40,50,60];

//배열의 모든 요소가 40이 넘는지 검사
let result = numbers.every(value=> value > 40);
console.log(result); // 출력: false

11. reduce()

reduce() 메서드는 배열의 모든 요소에 대해 주어진 콜백 함수를 실행하여 누적된 값을 반환한다. 각 반복에서 현재 값은 다음 반복의 이전 값으로 전달된다. 즉, 배열을 순회하면서 특정 시작점 값에 콜백 함수의 반환 값을 누적해 나간다. 이때 원본 배열은 변경되지 않는다.

array.reduce(callback(previousValue, currentValue, currentIndex, array), initialValue);

previousValue: 이전 호출의 반환값.
currentValue: 현재 처리 중인 요소.
currentIndex (선택적): 현재 요소의 인덱스.
array (선택적): reduce() 메서드를 호출한 배열.
initialValue: 첫 번째 호출에서 사용할 초기값입니다. 초기값을 제공하지 않으면 배열의 첫 번째 요소가 사용.

콜백 함수는 항상 반환 값을 지정해야 하며, 반환값이 없으면 undefined가 반환된다.

const numbers = [1, 2, 3, 4, 5];

// 배열의 모든 요소를 왼쪽에서 오른쪽으로 더한 결과를 반환
let sum = numbers.reduce((previousValue, currentValue) => previousValue + currentValue, 0);

console.log(sum); // 출력: 15

const fruits = [
    { name: 'apple', quantity: 2 },
    { name: 'banana', quantity: 5 },
    { name: 'orange', quantity: 3 }
];

// 과일의 이름을 키로 하고, 수량을 값으로 하는 객체를 생성
let fruitQuantities = fruits.reduce((accumulator, fruit) => {
    accumulator[fruit.name] = fruit.quantity; // 객체에 과일 이름과 수량 추가
    return accumulator; // 누적값 반환
}, {}); // 초기값은 빈 객체

console.log(fruitQuantities); 
// 출력: { apple: 2, banana: 5, orange: 3 }

12. reduceRight()

reduceRight() 메서드는 reduce()와 동일하게 값을 누적하지만, 배열을 오른쪽에서 왼쪽(즉, 마지막 요소에서 첫 번째 요소)으로 순회한다. 이때 원본 배열은 변경되지 않는다.

array.reduceRight(callback(previousValue, currentValue, currentIndex, array), initialValue);

const words = ['Hello', 'World', 'from', 'JavaScript'];

// 배열의 요소를 거꾸로 연결하여 하나의 문자열로 생성
let reversedSentence = words.reduceRight((accumulator, currentValue) => {
    return accumulator + ' ' + currentValue; // 현재 단어와 누적된 문자열을 연결
}, ''); // 초기값은 빈 문자열

console.log(reversedSentence.trim()); // 출력: "JavaScript from World Hello"
//trim() 메서드는 문자열의 양쪽 끝에 있는 불필요한 공백(스페이스, 탭, 줄바꿈 등)을 제거하는 데 사용

13. sort()

sort() 메서드는 배열의 요소를 오름차순 또는 내림차순으로 재정렬할 수 있다. 기본적으로 요소는 문자열로 변환된 후 유니코드 순서에 따라 정렬된다.

array.sort((a, b) => {
    // 비교 함수
});

비교 함수: 두 개의 요소 a와 b를 비교하여 정렬 순서를 결정.
- 반환값이 0보다 작으면 a가 b보다 앞에 위치.
- 반환값이 0보다 크면 b가 a보다 앞에 위치.
- 반환값이 0이면 두 요소의 순서는 변경되지 않음.

// 1. 숫자 비교
const numbers = [5, 3, 8, 1, 4];

// 오름차순 정렬
numbers.sort((a, b) => a - b);
console.log(numbers); // 출력: [1, 3, 4, 5, 8]

// 내림차순 정렬
numbers.sort((a, b) => b - a);
console.log(numbers); // 출력: [8, 5, 4, 3, 1]

// 2. 문자열 비교
const fruits = ['banana', 'apple', 'orange', 'grape', 'kiwi'];

// 오름차순 정렬
fruits.sort((a, b) => a.localeCompare(b));
console.log(fruits); // 출력: ['apple', 'banana', 'grape', 'kiwi', 'orange']

// 내림차순 정렬
fruits.sort((a, b) => b.localeCompare(a));
console.log(fruits); // 출력: ['orange', 'kiwi', 'grape', 'banana', 'apple']

//localeCompare() 메서드는 두 문자열을 비교하여 정렬 순서를 결정하는 데 사용

[참고: https://velog.io/@grinding_hannah/JavaScript-%EC%9E%90%EC%A3%BC-%EC%93%B0%EB%8A%94-10%EA%B0%80%EC%A7%80-Array-%ED%95%A8%EC%88%98-%EC%A0%95%EB%A6%AC]

728x90

'Programming Language > JavaScript' 카테고리의 다른 글

[JavaScript/개념] JavaScript 객체 (7)	2024.10.23
[JavaScript/개념] Document 객체와 객체 생성 (2)	2024.10.23

wo__ongii

[JavaScript/개념] 자바스크립트 자주 사용하는 배열 메서드

1. join()

2. split()

3. reverse()

4. splice()

5. slice()

7. filter()

8. map()

9. some()

10. every()

11. reduce()

12. reduceRight()

'Programming Language > JavaScript' 카테고리의 다른 글

티스토리툴바

[JavaScript/개념] 자바스크립트 자주 사용하는 배열 메서드

1. join()

2. split()

3. reverse()

4. splice()

5. slice()

7. filter()

8. map()

9. some()

10. every()

11. reduce()

12. reduceRight()

'Programming Language > JavaScript' 카테고리의 다른 글

관련글

티스토리툴바