[모던 JavaScript] 5.5 배열과 메서드
splice
- 첫 번째 매개변수는 조작을 가할 첫 번째 요소를 가리키는 인덱스임
- 두 번째 매개변수는 deleteCount로, 제거하고자 하는 요소의 개수를 나타냄
- elem1, ..., elemN은 배열에 추가할 요소를 나타냄
arr.splice(index[, deleteCount, elem1, ..., elemN])
slice
- start 인덱스부터 (end를 제외한) end 인덱스까지의 요소를 복사한 새로운 배열을 반환함
- arr.slice()는 인수를 하나도 넘기지 않고 호출하여 arr의 복사본을 만들 수 있음
arr.slice([start], [end])
concat
- arr.concat은 기존 배열의 요소를 사용해 새로운 배열을 만들거나 기존 배열에 요소를 추가하고자 할 때 사용함
- 메서드를 호출하면 arr에 속한 모든 요소와 arg1, arg2 등에 속한 모든 요소를 한데 모은 새로운 배열이 반환됨
arr.concat(arg1, arg2...)
forEach로 반복작업 하기
- arr.forEach는 주어진 함수를 배열 요소 각각에 대해 실행할 수 있게 해줌
arr.forEach(function(item, index, array) {
// 요소에 무언가를 할 수 있습니다.
});
["Bilbo", "Gandalf", "Nazgul"].forEach((item, index, array) => {
alert(`${item} is at index ${index} in ${array}`);
});
배열 탐색하기 (indexOf, lastIndexOf와 includes)
- arr.indexOf, arr.lastIndexOf, arr.includes는 같은 이름을 가진 문자열 메서드와 문법이 동일함
- 위 메서드들은 요소를 찾을 때 완전 항등 연산자 (===)를 사용함
find와 findIndex
- 특정 조건에 부합하는 객체를 배열 내에서 찾고 싶을 때 arr.find(fn)을 사용함
- item : 함수를 호출할 요소
- index : 요소의 인덱스
- array : 배열 자기 자신
- 함수가 참을 반환하면 탐색은 중단되고 해당 요소가 반환됨
let result = arr.find(function(item, index, array) {
// true가 반환되면 반복이 멈추고 해당 요소를 반환합니다.
// 조건에 해당하는 요소가 없으면 undefined를 반환합니다.
});
- arr.findIndex는 find와 동일한 일을 하나, 조건에 맞는 요소를 반환하는 대신 해당 요소의 인덱스를 반환한다는 점이 다름
filter
- find 메서드는 함수의 반환 값을 true로 만드는 단 하나의 요소를 찾지만 조건을 충족하는 요소가 여러 개라면 arr.filter(fn)을 사용하면 됨
- filter는 조건에 맞는 요소 전체를 담은 배열을 반환함
let results = arr.filter(function(item, index, array) {
// 조건을 충족하는 요소는 results에 순차적으로 더해집니다.
// 조건을 충족하는 요소가 하나도 없으면 빈 배열이 반환됩니다.
});
배열을 변형하는 메서드
map
- 배열 요소 전체를 대상으로 함수를 호출하고, 함수 호출 결과를 배열로 반환해줌
- 작업 결과물을 새로운 배열 형태로 얻을 때 사용
let result = arr.map(function(item, index, array) {
// 요소 대신 새로운 값을 반환합니다.
});
sort(fn)
- 배열의 요소를 정렬해줌, 배열 자체가 변경됨
- 메서드를 호출하면 재정렬 된 배열이 반환되는데, 이미 arr 자체가 수정되었기 때문에 반환 값은 잘 사용되지 않는 편
- 요소는 문자열로 취급되어 재 정렬됨
function compareNumeric(a, b) {
if (a > b) return 1;
if (a == b) return 0;
if (a < b) return -1;
}
let arr = [ 1, 2, 15 ];
arr.sort(compareNumeric);
alert(arr); // 1, 2, 15
reverse
- arr.reverse는 arr의 요소를 역순으로 정렬시켜주는 메서드
split과 join
- str.split(delim)을 이용하면 구분자 delim을 기준으로 문자열을 쪼개줌
- split 메서드는 두 번째 인수로 숫자를 받을 수 있음
- 이 숫자는 배열의 길이를 제한해주므로 길이를 넘어서는 요소를 무시할 수 있음
- split(s)의 s를 빈 문자열로 지정하면 문자열을 글자 단위로 분리할 수 있음
let arr = 'Bilbo, Gandalf, Nazgul, Saruman'.split(', ', 2);
alert(arr); // Bilbo, Gandalf
- arr.join(glue)는 split과 반대 역할을 하는 메서드
- 인수 glue를 접착제처럼 사용해 배열 요소를 모두 합친 후 하나의 문자열을 만들어줌
reduce와 reduceRight
- reduce와 reduceRight는 배열을 기반으로 값 하나를 도출할 때 사용됨
- accumulator : 이전 함수 호출의 결과
- item : 현재 배열 요소
- index : 요소의 위치
- array : 배열
- initial은 함수 최초 호출 시 사용되는 초깃값을 나타냄 (옵션)
let value = arr.reduce(function(accumulator, item, index, array) {
// ...
}, [initial]);
- 이전 함수 호출 결과는 다음 함수를 호출할 때 첫 번째 인수(previousValue)로 사용됨
- 첫 번째 인수는 앞서 호출했던 함수들의 결과가 누적되어 저장되는 '누산기(accumulator)'라고 생각하면 됨
- 마지막 함수까지 호출되면 이 값은 reduce의 반환 값이 됨
let arr = [1, 2, 3, 4, 5];
let result = arr.reduce((sum, current) => sum + current, 0);
alert(result); // 15
위의 코드의 과정을 알아보면,
1. 함수 최초 호출 시,, reduce의 마지막 인수인 0(초깃값)이 sum에 할당됨, current엔 배열의 첫 번째 요소인 1이 할당됨, 따라서 함수의 결과는 1이 됨
2. 두 번째 호출 시, sum = 1 이고 여기에 배열의 두 번째 요소(2)가 더해지므로 결과는 3이 됨
3. 세 번째 호출 시, sum = 3 이고 여기에 배열의 다음 요소가 더해짐, 이 과정이 계속 이어짐
- arr.reduceRight는 reduce와 동일한 기능을 하지만 배열의 오른쪽부터 연산을 수행한다는 점이 다른 메서드임
Array.isArray로 배열 여부 알아내기
- 자바스크립트에서 배열은 독립된 자료형으로 취급되지 않고 객체형에 속해서 typeof로는 일반 객체와 배열 구분 불가
- Array.isArray(value) 는 value가 배열이라면 true, 배열이 아니라면 false 를 반환해줌
배열 메서드와 'thisArg'
- 함수를 호출하는 대부분의 배열 메서드(find, filter, map 등, sort 제외)는 thisArg라는 매개변수를 옵션으로 받을 수 있음
- thisArg는 func의 this가 됨
let army = {
minAge: 18,
maxAge: 27,
canJoin(user) {
return user.age >= this.minAge && user.age < this.maxAge;
}
};
let users = [
{age: 16},
{age: 20},
{age: 23},
{age: 30}
];
// army.canJoin 호출 시 참을 반환해주는 user를 찾음
let soldiers = users.filter(army.canJoin, army);
alert(soldiers.length); // 2
alert(soldiers[0].age); // 20
alert(soldiers[1].age); // 23