JavaScript의 배열에 관련된 메서드들입니다.
이들 메서드는 배열의 원소를 추가, 제거, 변경, 정렬, 조회 등의 작업을 수행할 수 있습니다.
배열에 요소를 추가
push()
배열의 끝에 요소를 추가합니다
const array = [1, 2, 3];
array.push(4);
// 결과 [1, 2, 3, 4]
unshift()
배열의 시작 부분에 요소를 추가합니다
const array = [1, 2, 3];
array.unshift(0);
// 결과 [0, 1, 2, 3, 4]
*push()와 unshift()는 배열의 길이를 반환합니다.
const array = [1, 2, 3];
// Push
const newLength = array.push(4);
// 현재의 배열 = [1, 2, 3, 4]
// newLength는 4
// Unshift
const newLength = array.unshift(0);
// 현재의 배열 = [0, 1, 2, 3, 4]
// newLength는 5
push()와 unshift()가 배열을 수정하게되면 원래의 내용이 변경되어 손실되기 때문에,
push()나 unshift()를 사용하기 전에 배열의 복사본을 만들어서 수정하는 것이 좋습니다
다음 코드는 배열의 복사본을 생성하는 방법입니다.
var numbers = [1, 2, 3, 4];
var fruits = ["banana", "orange", "grape"];
// 배열의 복사본을 생성
var numbersCopy = numbers.slice();
var fruitsCopy = fruits.slice();
// 배열의 복사본에 값을 추가
numbersCopy.push(5);
fruitsCopy.unshift("apple");
배열에 요소를 제거
pop()
배열의 마지막 요소를 제거하고 그 요소를 반환합니다
let myArray = [1, 2, 3];
let lastElement = myArray.pop();
// 현재의 배열 = [1, 2]
// lastElement는 3
shift()
배열의 첫 번째 요소를 제거하고 그 요소를 반환합니다
let myArray = [1, 2, 3];
let firstElement = myArray.shift();
// 현재의 배열 = [2, 3]
// firstElement는 1
만약 제거할 요소가 없을 경우 pop()과 shift() 모두 undefined를 반환합니다.
배열에 순서를 변경
sort()
배열 요소를 오름차순 또는 내림차순으로 정렬하는 데 사용할 수 있습니다
let numbers = [4, 2, 5, 1, 3];
numbers.sort();
// numbers = [1, 2, 3, 4, 5]
let words = ["dog", "wolf", "by", "family", "eaten"];
words.sort();
// words = ["by", "dog", "eaten", "family", "wolf"]
reverse()
배열의 요소 순서를 반대로 하는 데 사용할 수 있습니다
let numbers = [1, 2, 3, 4, 5];
numbers.reverse();
// numbers = [5, 4, 3, 2, 1]
splice()
배열에서 요소를 제거하고 해당 위치에 새 요소를 추가하는 데 사용할 수 있습니다
let array = [1, 2, 3, 4, 5];
// (인덱스는 0부터니까) 3번째부터 2개를 제거
array.splice(2, 2);
// narray = [1, 2, 5]
const numbers = [1, 2, 3, 4, 5];
// 2를 제거하고 그 위치에 '삼'이라는 문자를 추가
numbers.splice(2, 1, "삼");
// numbers = [1, 2, "삼", 4, 5]
배열의 요소를 변경
map()
배열의 각 요소에 함수를 적용한 결과를 모은 새로운 배열을 만듭니다
let numbers = [1, 2, 3, 4, 5];
let doubledNumbers = numbers.map(function(number) {
return number * 2;
});
// doubledNumbers = [2, 4, 6, 8, 10]
filter()
배열에서 조건에 맞는 요소만 모아 새로운 배열을 만듭니다
let words = ["spray", "limit", "elite", "exuberant", "destruction", "present"];
let longWords = words.filter(function(word) {
return word.length > 6; // 길이가 6 초과인 단어만
});
// longWords = ["exuberant", "destruction", "present"]
reduce()
배열의 각 요소에 순차적으로 함수를 적용(누적)하여 하나의 값을 얻습니다.
let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce(function(accumulator, currentValue) {
return accumulator + currentValue;
}, 0);
// sum = 15accumulator는 누적된 값이 반환되고, currentValue는 현재의 값(배열)이 할당됩니다.
배열의 요소를 확인
includes()
배열에 특정 값이 있는지 확인하는 메서드
const numbers = [1, 2, 3, 4, 5];
console.log(numbers.includes(5)); // true
// 배열에 5가 있는지 확인하고 결과값을 반환
some()
배열의 요소중 하나라도 주어진 판별 함수를 통과하는지 확인하는 메서드
const numbers = [1, 2, 3, 4, 5];
console.log(numbers.some(x => x % 2 === 0)); // true
// 배열을 순회하며 짝수가 있는지를 확인
every()
배열의 모든 요소가 주어진 판별 함수를 통과하는지 확인하는 메서드
const numbers = [2, 4, 6, 7, 10];
console.log(numbers.every(x => x % 2 === 0)); // false
// numbers 배열의 모든 요소가 짝수인지 확인
배열의 요소를 검색 및 조회
indexOf()
문자열에서 특정 문자열이 처음으로 등장하는 위치를 반환합니다
let str = 'The quick brown fox jumps over the lazy dog';
let index = str.indexOf('fox');
// index = 16이 됩니다.
lastIndexOf()
문자열에서 특정 문자열이 마지막으로 등장하는 위치를 반환
let str = 'The quick brown fox jumps over the lazy dog';
let lastIndex = str.lastIndexOf('the');
// lastIndex = 31
*indexOf()와 lastIndexOf()는 배열에서도 사용할 수 있습니다.
이 경우에는 배열의 원소 중에서 특정 값이 처음으로 등장하는 인덱스나 마지막으로 등장하는 인덱스를 반환합니다.
find(), findIndex()
find() 메소드와 findIndex() 메소드는 배열에서 특정 조건을 만족하는 첫 번째 원소를 찾을 때 사용합니다.
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// find() 메소드를 사용하여 배열에서 3보다 큰 첫 번째 원소를 찾습니다.
let firstElement = arr.find(element => element > 3);
// firstElement = 4
// findIndex() 메소드를 사용하여 배열에서 3보다 큰 첫 번째 원소의 인덱스를 찾습니다.
let firstIndex = arr.findIndex(element => element > 3);
// firstIndex = 3만약 조건을 만족하는 원소가 없으면, find() 메소드는 undefined를 반환하고 findIndex() 메소드는 -1을 반환합니다.
배열의 병합, 복사
join()
배열의 모든 요소를 연결하여 하나의 문자열로 만듭니다.
var words = ["Hello", "world"];
var sentence = words.join(" ");
// words 배열의 요소를 모두 연결하여 하나의 문자열로 만들기
console.log(sentence);
// 출력: "Hello world"join() 메서드에 인자로 전달하는 문자열은 연결할 요소의 사이에 삽입되는 문자열을 의미합니다.
위의 예제에서는 공백 문자(" ")가 삽입되었지만, 하이픈("-")등 원하는 문자열을 삽입할 수 있습니다.
concat()
둘 이상의 배열을 단일 배열로 병합하는 데 사용됩니다.
배열의 복사본을 만들고, 그 복사본에 주어진 배열 또는 값들을 추가한 다음 새로운 배열을 반환합니다.
원본 배열은 변경되지 않습니다.
var arr1 = ['a', 'b', 'c'];
var arr2 = ['d', 'e', 'f'];
var newArray = arr1.concat(arr2);
// newArray = ['a', 'b', 'c', 'd', 'e', 'f']
slice()
배열의 일부를 추출하여 새로운 배열을 만듭니다.
이 메서드는 원본 배열을 수정하지 않고, 추출한 요소들을 포함하는 새로운 배열을 반환합니다.
var arr = ['a', 'b', 'c', 'd', 'e'];
var newArray = arr.slice(1, 3);
// newArray = ['b', 'c']
slice() 메서드는 두 개의 인자를 받습니다. 첫 번째 인자는 추출을 시작할 인덱스이며, 두 번째 인자는 추출을 종료할 인덱스입니다.
두 번째 인자가 생략되면 배열의 끝까지 추출됩니다.
인자를 생략해서 얕은 복사본(shallow copy)를 반환할 수 있습니다.