🔴 요소 추가·제거 메서드
- arr.push(...items) – 맨 끝에 요소 추가
- arr.pop() – 맨 끝 요소 제거
- arr.shift() – 맨 앞 요소 제거
- arr.unshift(...items) – 맨 앞에 요소 추가
배열 맨 끝, 맨 앞의 요소를 추가, 제거하는 연산은 위의 메서드를 통해 할 수 있습니다.
splice
splice 메서드를 사용하면 요소 추가, 삭제, 교체를 모두 할 수 있습니다.
arr.splice(index[, deleteCount, elem1, ..., elemN])- index: 조작할 첫 번째 요소의 인덱스
- 음수 인덱스를 넣으면 배열의 끝 부터 시작
- deleteCount: 제거할 요소의 개수
- 0으로 설정하면 요소를 제거하지 않음
- elemN: 제거 후 그 자리에 추가할 요소
- 반환값: 삭제된 요소로 구성된 배열
사용 예시는 다음과 같습니다.
let arr = ["I", "study", "JavaScript", "right", "now"];
// 처음(0) 세 개(3)의 요소를 지우고, 이 자리를 다른 요소로 대체
arr.splice(0, 3, "Let's", "dance");
alert( arr ) // now ["Let's", "dance", "right", "now"]slice
slice 메서드는 매개변수로 받은 인덱스 범위 사이 요소를 복사한 새로운 배열을 반환합니다. (서브 배열 반환 메서드)
arr.slice([start], [end])- start: 시작 인덱스
- 없으면 맨 처음 요소
- end: 종료 인덱스
- 없으면 맨 끝 요소
매개변수를 주지 않으면 배열 전체를 복사합니다.
사용 예시는 다음과 같습니다.
let arr = ["t", "e", "s", "t"];
alert( arr.slice(1, 3) );
// e,s (인덱스가 1인 요소부터 인덱스가 3인 요소까지를 복사(인덱스가 3인 요소 제외))
alert( arr.slice(-2) );
// s,t (인덱스가 -2인 요소부터 제일 끝 요소까지를 복사)인덱스 3인 요소는 왜 제외하지❓
싶을 수 있습니다. 이건 배열의 인덱스가 매겨지는 방식을 이해해야 합니다.
배열의 인덱스는 다음과 같이 이뤄져있습니다.
이 네모 칸 하나하나가 배열 요소라고 하면, 배열의 인덱스는 네모칸의
맨 앞에 매겨집니다.
따라서 인덱스 0-1 까지라고 하면 0번 인덱스 요소 하나를 가리킵니다.
concat
concat 메서드는 기존 배열에 요소를 추가할 때 주로 사용합니다.
arr.concat(arg1, arg2...)- arg: arr 에 추가하려는 배열 or 값
- 반환값: arr 에 arg 을 추가한 배열
객체를 추가할 수 있을까❓
concat 메서드의 매개변수로 객체를 넘기면 객체가 통으로 복사됩니다.
let arr = [1, 2];
let arrayLike = {
0: "something",
length: 1
};
alert( arr.concat(arrayLike) ); // 1,2,[object Object]위처럼...
그러나, 객체에 Symbol.isConcatSpreadable 프로퍼티를 true 로 설정해주면 concat 메서드가 객체를 배열처럼 취급해줍니다.
let arr = [1, 2];
let arrayLike = {
0: "something",
1: "else",
[Symbol.isConcatSpreadable]: true,
length: 2
};
alert( arr.concat(arrayLike) ); // 1,2,something,else의도대로 동작하는 모습을 확인할 수 있습니다.
🔔 forEach 로 반복작업
arr.forEach 로 배열 요소 각각에 콜백 함수를 실행할 수 있습니다.
arr.forEach(function(item, index, array) {
// 주어진 콜백함수에 매개변수를 넘겨 요소 각각에 함수 내용 실행
});- item: 현재 배열 요소
- index: 현재 요소의 인덱스
- array: forEach 를 호출한 배열
- 반환값:
undefined
forEach 는 기존 배열을 바꾸지 않지만, 콜백 함수가 바꿀 수는 있습니다.
또한, undefined 를 반환하므로 메서드 체인 중간에 사용할 수 없습니다.
🚩 배열 탐색 메서드
arr.includes(item, [from]): 배열이item을 가지면true, 아니면false반환from인덱스부터 요소 탐색 시작- 요소를 찾을 때
===연산자를 사용하여 탐색 NaN의 유무도 알 수 있음
includes 메서드를 이용하여 요소의 유무를 확인할 수 있습니다.
find
find 메서드를 사용하면 좀 더 상세한 조건에 부합하는 요소를 찾을 수 있습니다.
객체로 이루어진 배열처럼 상세한 탐색이 필요한 경우에 사용합니다.
let result = arr.find(function(item, index, array) {
// true가 반환되면 반복이 멈추고 해당 요소를 반환
// 조건에 해당하는 요소가 없으면 undefined를 반환
});- item: 현재 배열 요소
- index: 현재 요소의 인덱스
- array: find 를 호출한 배열
- 반환값: 조건에 맞는 요소 반환
조건에 맞는 요소가 아닌 인덱스를 반환하게 하고 싶다면 arr.findIndex 를 사용합니다.
filter
find 메서드는 조건을 충족하는 요소를 만나는 순간 바로 반환합니다.
만약, 조건에 맞는 요소가 여러 개이며 그 요소들로 구성된 배열을 반환하고 싶다면 filter 메서드를 사용합니다.
let results = arr.filter(function(item, index, array) {
// 반환값이 true 인 경우 results 에 item 을 더함
// 반환값이 false 인 경우 요소를 버림
// 조건을 충족하는 요소가 하나도 없으면 빈 배열 반환
});- item: 현재 배열 요소
- index: 현재 요소의 인덱스
- array: find 를 호출한 배열
- 반환값: 조건에 맞는 요소 전체를 담은 배열 반환
- 호출되는 배열을 변형하지 않음
✨ 배열을 변형하는 메서드
배열에 조작을 가하는 메서드에 대해 알아봅시다.
map
map 은 forEach 와 비슷하지만, forEach 는 undefined 를 반환하고 map 은 요소를 조작한 결과로 이루어진 새 배열을 반환한다는 점에서 차이가 있습니다.
let result = arr.map(function(item, index, array) {
// 기존 요소를 조작한 값을 반환
});- 반환값: 각 요소에 콜백함수를 실행한 결과를 모은 새 배열
map은 호출한 배열(기존 배열) 의 값을 변형하지 않음- 콜백함수에 의해 변형될 수는 있음
sort
sort 는 배열 요소를 정렬하기 위해 사용하며, 배열 자체를 변경합니다.
arr.sort([compareFunction])- 반환값: 정렬된 배열
- compareFunction : 비교를 위한 정렬 기준이 되는 콜백함수
- 없다면, 요소를 문자열로 취급하여 유니코드 순서로 재정렬
([1, 2, 15] => [1, 15, 2])
- 없다면, 요소를 문자열로 취급하여 유니코드 순서로 재정렬
- 호출한 배열(기존 배열) 을 변환, 정렬함 (복사본을 만드는게 아님)
compareFunction 은 다음과 같은 기준으로 만듭니다.
function compareFunction(a, b){
// 인자를 두 개씩 받아서 서로 비교
// 비교 기준과 리턴값을 설정
}반환값 < 0: a가 b보다 앞에 위치반환값 == 0: a와 b의 위치를 서로에 대해 변경 ❌반환값 > 0: b가 a보다 앞에 위치
반환하는 값의 범위에 따라 두 인자의 순서가 정해집니다.
숫자순으로 정렬하기 위한 compareFunction 의 예시입니다.
function compareNumbers(a, b) {
return a - b;
}숫자 a 가 b 보다 크면 반환값이 양수가 되어 b 가 앞에 위치하게 됩니다.
반대로 a 가 더 작으면 반환값이 음수가 되어 a 가 더 앞에 위치합니다.
역순으로 정렬하고 싶다면 arr.reverse() 를 사용합니다.
split 과 join
str.split(delim) 과 arr.join(glue) 는 문자열을 구분자로 쪼개어 배열을 만들고, 배열을 합쳐 문자열로 만드는 기능을 합니다.
str.split()
str.split(separator)- separator : 구분자. 이를 기준으로 문자열을 분리함
- 반환값: 구분자를 기준으로 문자열을 쪼개 하나의 요소로 하여 만든 배열
arr.join([separator])- separator : 배열의 각 요소를 연결할 때 사이에 넣을 문자열
- "" 을 넘기면 문자열을 단어 단위로 분리함
- 반환값: 배열의 모든 요소를 연결한 문자열
문자열을 split 으로 나누어 배열로 만들고, 이 배열을 다시 join 으로 연결하여 문자열로 만듭니다.
사용 예시는 다음과 같습니다.
let names = 'Bilbo, Gandalf, Nazgul';
let arr = names.split(', ');
// ["Bilbo", "Gandalf", "Nazgul"]
let str = arr.join(';'); // 배열 요소 모두를 ;를 사용해 하나의 문자열로 합침
alert( str ); // Bilbo;Gandalf;Nazgulreduce
reduce 메서드는 다른 메서드처럼 모든 배열 요소에 연산을 수행합니다.
특이한 점은 이전의 연산 결과를 다음 연산에서 사용하며, 최종적으로 하나의 반환값을 도출한다는 것입니다.
let value = arr.reduce(function(accumulator, item, index, array) {
// ...
}, [initial]); // 콜백 함수와 accumulator 의 초깃값을 넘김- accumulator : 이전 함수 호출의 결과
- item : 현재 배열 요소
- index : 요소의 위치
- array : 호출한 배열
- initial : 함수 최초 호출 시 사용되는 초깃값
(없으면 배열의 첫 요소를 사용하고 두 번째 요소부터 함수 호출)
이전 함수의 호출 결과가 다음 함수 호출시 첫 인수로 사용됩니다.
앞서 실행한 함수의 결과가 누적되어 저장되며, 최종적으로 누적 결과를 반환합니다.
초깃값은 항상 명시해주는 게 권장됩니다.
사용 예시는 다음과 같습니다.
let arr = [1, 2, 3, 4, 5];
let result = arr.reduce((sum, current) => sum + current, 0);
alert(result); // 15함수 최초 호출 시 초깃값 0이 sum 에 할당됩니다.
🔻 Array.isArray 로 배열 판별
배열은 독립된 자료형이 아닌, 객체형에 속하는 자료구조입니다.
따라서 typeof 로 객체와 배열을 구분할 수 없습니다.
그러나 Array.isArray(value) 를 사용하면 value 가 배열일 때 true 를 반환합니다.
alert(Array.isArray({})); // false
alert(Array.isArray([])); // true🔻 thisArg 로 this 설정
배열 메서드 find, filter, map 등에 thisArg 라는 매개변수를 옵션으로 받을 수 있습니다.
thisArg 는 콜백 함수의 this 를 설정하는 데 사용합니다.
콜백함수로 객체의 메서드를 사용할 때, thisArg 로 객체를 넘겨주지 않으면 객체의 메서드를 단독 함수 취급하여 this 가 undefined 혹은 window 가 되어버립니다.
