27장 배열(2)
8. 배열 메서드
배열 메서드에는 두가지 패턴을 가지고 있다.
1. 원본배열을 직접 변경하는 메서드
- 외부 상태를 직접 변경하는 부수효과를 있어 사용에 주의해야 한다.
push,pop,unshift,shift,splice
- 원본배열을 직접 변경하지 않고 새로운 배열을 생성하여 반환하는 메서드
가급적 원본 배열을 직접 변경하니 않는 메서드를 사용하는 편을 권장한다.
1. Array.isArray
전달된 인수가 배열이면
true, 배열이 아니면 false를 반환한다.
//true
Array.isArray([]);
Array.isArray([1,2]);
Array.isArray(new Array());
//false
Array.isArray();
Array.isArray({});
Array.isArray({0:1, length : 1});2. Array.protptype.indexOf
원본 배열에서 인수로 전달된 요소를 검색하여
인덱스를 반환한다.
- 원본 배열에 인수로 전달한 요소와 중복되는 요소가 여러개 있다면 첫번째로 검색된 요소의 인덱스를 반환한다.
- 원본 배열에 인수로 전달한 요소가 존재하지 않으면 -1을 반환한다.
const arr = [1,2,3,4];
//배열 arr에서 요소 2를 검색하여 첫번째로 검색된 요소의 인덱스를 반환
arr.indexOf(2); //1
//배열 arr에 요소 4가 없으므로 -1을 반환
arr.indexOf(4); //-1
//두 번째 인수는 검색을 시작할 인덱스이다. 두번번째 인수를 생략하면 처음부터 검색한다.
arr.index(2,2); //인덱스 2부터 검색하여 2을 찾는다. -> 2- 배열에 특정 요소가 존재하는지 확인할 떄 유용하다.
const foods = ['apple','banana', 'orange'];
//food 배열에는 'orange'요소가 존재하는지 확인한다.
if(foods.indexOf('orange') === -1){
foods.push('orange');
}
console.log(foods); //['apple','banana', 'orange'];- indexOf메서드는 NaN을 찾을 수 없다.
[NaN].indexOf(NaN); //false3. Array.prototpye.push
인수로 전달받은 모든 값을 원본 배열의
마지막 요소로추가하며
변경된 length프로퍼티 값을 반환한다.
특징
- 원본 배열을 직접 변경한다.
const arr = [1,2];
//인수로 전달 받은 모든 값을 원본 배열 arr의 마지막 요소로 추가하고, 변경된 length의 값을 반환한다.
let result = arr.push(3,4);
console.log(result); //4
//push는 원본 배열을 변경한다.
console.log(arr); //[1,2,3,4]- push 메서드는 성능이 좋지 않다.
- 요소를 추가할 요소가 하나뿐이라면 length프로퍼티를 사용해 배열의 마지막 요소를 직접 추가하는 방법도 있다. (이게 push보다 빠르게 동작한다.)
const arr = [1,2];
//arr.push(3)과 동일한 처리를 하고 값을 넣어준다.
arr[arr.lenght] = 3;
console.log(arr); //[1,2,3]- push 메서드는 원본 배열을 직접 변경하는 부수효과가 있다.
- ES6의
스프레드 문법(...arr)으로 대체하면 부수효과 없이 배열의 마지막에 요소를 추가할 수 있다.
- ES6의
const arr = [1,2];
//ES6스프로드 문법
const newArr = [...arr,3];
console.log(arr); //[1,2,3]4. Array.prototpye.pop
원본 배열에
마지막 요소를제거하고제거한 요소를 반환한다.
특징
- 원본 배열이 빈 배열이면
undefined를 반환한다. - pop메서드는 원본 배열을 직접 변경한다.
const arr = [1,2];
//원보 배열에 마지막 요소를 제거하고 제거한 요소를 반환한다.
let result = arr.pop();
console.log(result); //2
//pop메서드는 배열을 직접 변경한다.
console.log(arr); //[1]5. Array.prototpye.unshift
인수로 전달받은 모든 값을 원본 배열의
선두에 요소로 추가하고,변경된 length프로퍼티 값을 반환한다.
특징
- 원본 배열을 변경한다.
- 부수효과가 있어, ES6의
스프레드 문법을 사용하는 편을 권장한다.
const arr = [1,2];
let result = arr.unshift(3,4);
console.log(result); //4
console.log(arr); //[3,4,1,2]
//스프레드 문법 예제
const arr1 = [1,2];
const newArr = [3, ...arr];
console.log(newArr); //[3,1,2];6. Array.prototpye.shift
원본 배열에 첫 번째 요소를 제거하고 제거한 요소를 반환한다.
특징
- 원본 배열이 빈 배열인 경우
undefined을 반환한다. - 원본 배열을 직접 변경한다.
const arr = [1,2];
let result = arr.shift();
console.log(result); //1
console.log(arr); //[2]7. Array.prototpye.concat
인수로 전달된 값들(배열 or 원시값)을 원본 배열의 마지막 요소로 추가한 새로운 배열을 반환한다.
특징
- 원본 배열은 변경되지 않는다.
- 인수로 전달한 값이 배열인 경우 배열을 해체하여 새로운 요소로 추가한다.
const arr1 = [1,2];
const arr2 = [3,4];
//배열 arr2를 배열 arr1의 마지막 요소로 추가하여 새로운 배열을 반환
//인수로 전달한 값이 배열인 경우 배열을 해체하여 새로운 요소로 추가한다.
let result = arr1.concat(arr2);
console.log(result); //[1,2,3,4]
//숫자를 원본 배열 arr1의 마지막 요소로 추가
result = arr1.concat(3);
console.log(arr1); //[1,2,3]
//배열 arr2와 숫자를 원본 배열 arr1에 추가
result = arr1.concat(arr2, 5);
console.log(result); //[1,2,3,4,5]
//원본 배열을 변경되지 않는다.
console.log(arr1); //[1,2]-
push메서드와unshift메서드를 대체할 수 있다.- push와 unshift는 원본 배열을 반드시 변수에 저장해야 한다.
- concat 메서드는 반환값을 반드시 변수에 할당해야 한다.
///////////////////unshift와 push메서드 const arr1 = [3,4]; arr1.unshift(1,2); console.log(arr1); //[1,2,3,4] arr1.push(5,6); console.log(arr1); //[1,2,3,4,5,6] /////////////////concat메서드 const arr2 = [3,4]; let result = [1,2].concat(arr2); console.log(result); //[1,2,3,4] result = result.concat(5,6); console.log(result); //[1,2,3,4,5,6]- unshift와 push는 배열을 그대로 원본 배열 요소로 추가하지만, concat 메서드는 인수로 전달받은 배열을 해체하여 새로운 배열의 마지막 요소로 추가한다.
const arr = [3,4]; ////////unshift와 push arr.unshift([1,2]); arr.push([5,6]); console.log(arr); //[[1,2], 3, 4, [5,6]] ////////concat let result = [1,2].concat([3,4]); result = result.concat([5,6]); console.log(result); //[1,2,3,4,5,6] -
ES6
스프레드 문법으로 대체할 수 있다.
let result = [1,2].concat([3,4]);
result = [...[1,2], ...[3,4]];
//결과적으로 둘다 [1,2,3,4]8. Array.prototype.splice
원본 배열의 중간에 요소를 추가하거나 중간에 있는 요소를 제거하는 경우 사용하며, 제거한 요소가 배열로 반환된다.
특징
- 3개의 매개변수가 있다.
- start : 원본 배열의 요소를 제거하기 시작할 인덱스
- start만 지정하면 원본 배열의 start부터 모든 요소를 제거한다.
- start가 음수인 경우 : 배열의 끝에서의 인덱스를 나타낸다.
- deleteCount : 원본 배열의 요소를 제거하기 시작할 인덱스인 start부터 제거할 요소의 개수
- deleteCount가 0인 경우 : 아무런 요소도 제거되지 않는다.(옵션)
- deleteCount를 생략한 경우 : 첫 번째 인수로 전달된 시작 인덱스부터 모든 요소를 제거한다.
- items : 제거한 위치에 삽입할 요소들의 목록
- 생략할 경우 : 원본 배열에서 요소들을 제거만 한다(옵션)
const arr = [1,2,3,4];
const result = arr.splice(1,2,20,30);
//인덱스 1부터, 2개 제거, 그 자리에 20, 30을 넣는다.
console.log(result);
//[2,3]
console.log(arr);
//[1,20,30,4]
/////////두번째 인수 생략할 경우
const result = arr.splice(1);
console.log(arr); //[1]
console.log(result); //[20,30,4]- 원본 배열을 직접 변경한다.
9. Array.prototype.slice
인수로 전달된 범위의 요소들을 복사하여 배열로 반환한다.
특징
- 원본 배열은 변경되지 않는다.
- 2개의 매개변수를 갖는다.
- start : 복사를 시작할 인덱스
- 음수인 경우 : 배열의 끝에서의 인덱스를 나타낸다.
- end : 복사를 종료할 인덱스
- 인덱스에 해당하는 요소는 복사되지 않는다.
- 생략이 가능 (첫번째 인수로 전달받은 인덱스부터 모든 요소를 복사)
- 기본값은 length프로퍼티와 같다.
const arr = [1,2,3];
arr.slice(0,1); //[1]
arr.slice(1,2); //[2]
arr.slice(1); //[2,3]
arr.slice(-1); //[3] 끝에서 첫번째부터
arr.slice(-2); //[2,3] 끝에서 두번째부터
console.log(arr); //[1,2,3]- slice메서드로 생성된 복사본은 얕은 복사를 통해 생성된다.
aguments,HTMLCollecton,NodeList같은 유사배열 객체를 배열로 복사해 변환 할 수 있다.
10. Array.prototype.join
원본 배열의 모든 요소를 문자열로 변환 후, 인수로 전달받은 문자열(구분자로 연결한 문자열)을 반환한다.
특징
- 구분자는 생략 가능하다.
- 구분자의 기본값은 콤마(',')이다.
const arr = [1,2,3,4];
//기본 구분자는 콤마이다.
arr.join(); //'1,2,3,4';
//빈문자열로 연결한 문자열을 반환
arr.join(''); //'1234'
//':'로 연결한 문자열을 반환
arr.join(':'); //'1:2:3:4'11. Array.prototype.reverse
원본 배열의 순서를 반대로 뒤집는다. 변경된 배열이 반환된다.
특징
- 원본 배열이 변경된다.
const arr = [1,2,3];
const result = arr.reverse();
console.log(result); //[3,2,1]
console.log(arr); //[3,2,1]12. Array.prototype.fill
인수로 전달받은 값을 배열의 처음부터 끝까지 요소로 채운다.
특징
- 원본의 배열이 변경된다.
- 3개의 매개변수를 갖는다.
- 첫번째 인수 : 채울 요소
const arr = [1,2,3];
//인수로 전달 받은 값을 끝까지 요소로 채운다.
arr.fill(0); //[0,0,0]- 두번째 인수 : 요소 채우기 시작할 인덱스를 전달
const arr = [1,2,3];
//인덱스 1부터 0을 채운다.
arr.fill(0,1); //[1,0,0]- 세번째 인수 : 요소 채우기를 멈출 인덱스를 전달
const arr = [1,2,3,4,5];
//1부터 3까지(인텍스 3은 미포함)의 인덱스를 0으로 채운다.
arr.fill(0,1,3); //[1,0,0,4,5];
- fill메서드를 이용해 배열을 생성하면서 특정 값으로 요소를 채울 수 있다.
const arr = new Array(3);
console.log(arr); //[empty *3]
//인수로 전달 받은 값 1을 배열의 처음부터 끝까지 요소로 채운다.
const result = arr.fill(1);
console.log(arr); //[1,1,1]
console.log(result); //[1,1,1]- fill메서드 요소를 채울 경우 모든 요소를 하나의 값만 채울 수 밖에 없는 단점이 있음
Array.from을 사용해 콜백 함수를 통해 요소값을 만들어 배열을 채울 수 있다.
13. Array.prototype.includes
배열 내에 특정 요소가 포함되어 있는지 확인하고 true,false를 반환한다.
const arr = [1,2,3];
//배열 요소가 2가 포함되어 있는지 확인
arr.includes(2); //true
//배열에 요소 100이 포함되어 있는지 확인
arr.includes(100); //false특징
- 첫번째 인수로 검색할 대상을 찾는다.
- 두번째 인수 :시작할 인덱스를 전달 할 수 있다.
- 기본값이 0으로 설정되어 있다.
- 음수 : (length + index) 검색 시작 인덱스를 설정한다.
const arr = [1,2,3];
//배열에 1이 있는지 인덱스 1번부터 찾아주세요.
arr.includes(1,1); //false
//배열에 3이 인덱스 2(arr.lenght -1)부터 찾아주세요.
arr.includes(3,-1); //true14. Array.prototype.flat
인수로 전달한 깊이만큼 재귀적으로 배열을 평탄화한다.
- 중첩 배열을 평탄화할 깊이를 인수로 전달 할 수 있다.
- 생략할 경우 : 1
- 인수로 Infinity 전달 : 중첩 배열 모두 평탄화가 된다.
[1,[2,3,4,5]].flat(); //[1,2,3,4,5] [1,[2,[3,[4]]]].flat(); = [1,[2,[3,[4]]]].flat(1); //[1,2[3,[4]]] [1,[2,[3,[4]]]].flat(2); = [1,[2,[3,[4]]]].flat().flat(); //[1,2,3,[4]] [1,[2,[3,[4]]]].flat(Infinity); //[1,2,3,4]
기록하며 발전하는 삶