배열 메서드

배열 메서드는 결과물을 반환하는 패턴이 두 가지 이다. 원본배열을 직접 변경하는 메서드와, 원본 배열을 직접 변경하지 않고 새로운 배열을 생성하여 반환하는 메서드가 있다.

 

1. Array.isArray

Array.isArray는 전달된 인수가 배열이면 true, 배열이 아니면 false를 반환한다.

 

 

2. Array.prototype.indexOf

Array.prototype.index 는 원본 배열에서 인수로 전달된 요소를 검색하여 인덱스를 반환한다.

 

- 원본 배열에 인수로 전달한 요소와 중복되는 요소가 여러 개 있다면, 첫 번째로 검색된 요소의 인덱스를 반환한다.- 원본 배열에 인수로 전달한 요소가 존재하지 않으면 -1을 반환한다.

const arr=[1,2,2,3];

arr.indexOf(2); //1
arr.indexOf(4); //-1
<두 번째 인수는 검색을 시작할 인덱스>
arr.indexOf(2,2) //2

const foods=['apple', 'banana', 'orange'];

if(foods.indexOf('orange')===-1){
	foods.push('orange');
    }

 

3. Array.prototype.push

Array.prototype.push는 인수로 전달받은 모든 값을 원본 배열의 마지막 요소로 추가하고 변경된 length 프로퍼티 값을 반환한다. push메서드는 원본 배열을 직접 변경한다.

const arr=[1,2];

let result=arr.push(3,4);

console.log(result); //4
console.log(arr); //[1,2,3,4]

 

4. Array.prototype.pop

Array.prototype.pop은 원본 배열에서 마지막 요소를 제거하고 제거한 요소를 반환한다. 원본 배열이 빈 배열이면 undefined를 반환한다. pop 메서드는 원본 배열을 직접 변경한다.

const arr=[1,2];
let result=arr.pop();

console.log(result); //2
console.log(arr); //[1]

 

5. Array.prototype.unshift

Array.protototype.unshift는 인수로 전달 받은 모든 값을 원본 배열의 선두에 요소로 추가하고 변경된 length 프로퍼티값을 반환한다. unshift는 원본 배열을 직접 변경한다.

const arr=[1,2];
let result=arr.unshift(3,4);

console.log(result); //4
console.log(arr); //[3,4,1,2]

 

6. Array.prototype.shift

Array.prototype.shift는 원본 배열에서 첫 번째 요소를 제거하고, 제거한 요소를 반환한다. 원본 배열이 빈 배열이면 undefined를 반환한다. shift메서드는 원본 배열을 직접 변경한다.

const arr=[1,2];
let result=arr.shift();

console.log(result); //1
console.log(arr); //2

 

7. Array.prototype.concat

Array.prototype.concat은 인수로 전달된 값들(배열 또는 원시값) 을 원본 배열의 마지막 요소로 추가한 새로운 배열을 반환한다. 인수로 전달한 값이 배열인 경우 배열을 해체하여 새로운 배열의 요소로 추가한다. 원본 배열은 변경되지 않는다.

const arrOne=[1,2];
const arrTwo=[3.4];

let result=arrOne.concat(carr2);
console.log(result); //[1,2,3,4]

result=arrOne.concat(3);
console.log(result); //[1,2,3]

result=arrOne.concat(arrTwo,5);
console.log(result); //[1,2,3,4,5]

console.log(arrOne); //[1,2]

 

8. Array.prototype.spilce

Array.prototype.spilce는 원본 배열의 중간에 요소를 추가하거나 중간에 있는 요소를 제거한다. splice 메서드는 3개의 매개변수가 있으며, 원본 배열을 직접 변경한다. splice 메서드에 3개의 인수를 빠짐없이 전달하면 첫 번째 인수는 제거를 시작할 인덱스, 두 번째 인수는 제거할 요소의 개수, 세 번째 인수는 제거한 위치에 삽입할 요소들이다.

const arr=[1,2,3,4];

const result=arr.splice(1,2,20,30);

console.log(result); //[2,3]
console.log(arr); //[1,20,30,4]

const arrTwo=[1,2,3,4];

const resultTwo=arrTwo.splice(0,1);

console.log(resultTwo); //[3,4]

 

9. Array.prototype.slice

Array.prototype.slice는 인수로 전달된 범위의 요소들을 복사하여 배열로 반환한다. 원본 배열은 변경되지 않는다. slice는 두 개의 매개변수를 갖는다. 첫 번째 매개변수는 복사를 시작할 인덱스, 두 번째 매개변수는 복사를 종료할 인덱스. 이 인덱스에 해당하는 요소는 복사되지 않는다. 두번째 매개변수는 생략 가능하며, 생략 시 기본값은 length 프로퍼티 값이다. slice의 매개변수를 모두 생략하면, 원본배열을 얕은 복사로 복사한다.

const arr=[1,2,3];

arr.slice(0,1); //[1]
arr.slice(1,2); /[2]

console.log(arr); //[1,2,3]

 

10. Array.prototype.join

Array.prorotype.join은 원본 배열의 모든 요소를 문자열로 반환한 후, 인수로 전달받은 문자열, 즉 구분자로 연결한 문자열을 반환한다. 구분자는 생략 가능하며 기본 구분자는 콤마(',')이다.

const arr=[1,2,3,4];

arr.join(); //'1,2,3,4'
arr.join(''); //'1234'
arr.join(':')' //'1:2:3:4'

const arrTwo=[{name:'Dan',gender:'female'},2,3,4,5];

console.log(arrTwo.join()); //'[Object Objcet],2,3,4,5'

 

11. Array.prototype.reverse

Array.prototype.reverse는 원본 배열의 순서를 반대로 뒤집는다. 이때 원본 배열이 변경된다. 반환값은 변경된 배열이다.

const arr=[1,2,3];
const result=arr.reverse();

console.log(arr); //[3,2,1]
console.log(result); //[3,2,1]

 

12. Array.prototype.fill

Array.prototype.fill은 인수로 전달받은 값을 배열의 처음부터 끝까지 요소로 채운다. 이때 원본 배열이 변경된다.

const arr=[1,2,3];

arr.fill(0);

console.log(arr); //[0,0,0]

const arrTwo=[1,2,3,4,5]

arrTwo.fill(0,1);

console.log(arrTwo); //[1,0,0,0,0]

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

arrThree.fill(0,0,1);

console.log(arrThree); //[0,1,3,4,5]

 

13. Array.prototype.includes

Array.prototype.includes는 배열 내에 특정 요소가 포함되어 있는지 확인하여 ture또는 false를 반환하다. 첫 번재 인수는 검색할 대상을 지정한다. 두 번째 인수로 검색을 시작할 인덱스를 전달한다. 두 번째 인수를 생략할 경우, 기본값 0이 설정된다. 만약 두 번째 인수에 음수를 전달하면 length 프로퍼티 값과 음수 인덱스를 합산하여 (length+index)검색 시작 인덱스를 설정한다.

const arr=[1,2,3];

arr.includes(1,1); //false

arr.includes(3,-1); //true

 

14. Array.prototype.flat

Array.prototype.flat은 인수로 전달한 깊이만큼 재귀적으로 배열을 평탄화 한다. 중첩 배열을 평탄화할 깊이를 인수로 전달할 수 있따. 인수를 생략할 경우 기본값은 1이다. 인수로 Infinity를 전달하면 중첩 배열 모두를 평탄화한다.

[1,[2,[3,[4]]]].flat(); // [1,2,[3,[4]]]
[1,[2,[3,[4]]]].flat(1); // `[1,2,[3,[4]]]`
[1,[2,[3,[4]]]].flat(3); // [1,2,3,4]

 

15. Array.prototype.sort

Array.prototype.sort는 원본 배열을 직접 변경하며 정렬된 배열을 반환한다. sort메서드는 기본적으로 오름차순으로 요소를 정렬한다. 또한 sort메서드는 배열의 요소를 일시적으로 문자열로 변환한 후 정렬하므로, 숫자요소를 정렬할때는 정렬 순서를 정의하는 비교 함수를 인수로 전달해야 한다. 비교 함수는 양수나 음수 또는 0을 반환해야 한다.

 

○ 반환값이 0보다 크면 두 번째 인수를 우선 정렬한다.

○ 반환값이 0이면 정렬하지 않는다.

○반환값이 0보다 작으면 첫 번째 인수를 우선하여 정렬한다.

const fruits=['Banana','Orange','Apple'];

console.log(fruits.sort()); //['Apple','Banana','Orange']
console.log(fruits.sort().reverse()); //['Orange','Banana','Apple']

const countOne=[5,3,20,15,40,25];
const countTwo=[5,3,20,15,40,25];

const countUp=countOne.sort((a,b)=>a-b);
const countDown=countTwo.sort((a,b)=>b-a);
console.log(countUp); //[3,5,15,20,25,40]
console.log(countDown); //[40,25,20,15,5,3]

const todos=[
{id:4, content:'JavaScript'},
{id:1, content:'HTML'},
{id:2, content:'CSS'}
];

function compare(key){
return (a,b)=>(a[key] > b[key] ? 1 : (a[key] < b[key] ? -1 : 0));
}

todos.sort(compare('id'));
console.log(todos); //[
			{id:1, content:'HTML'},
			{id:2, content:'CSS'},
			{id:4, content:'JavaScripts}
			]

 

16. Array.prototype.forEach

forEach 메서드는 콜백함수를 인수로 받는다. 콜백함수의 인수는 순서대로 현재 순회하고있는 요소, 요소의 인덱스, 참조하고 있는 배열 자체다. Array.prototype.map과 비슷하지만, 따로 return값이 없다는 것이 차이점이다. forEach의 반환값은 언제나 undefined다. forEach의 콜백함수는 일반 함수로 호출되므로, 콜백 함수 내부의 this는 전역객체이다.

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

arr.forEach((a,b)=>{arr[b]=a*a});

console.log(arr)//[1,4,9,16,25];

 

17. Array.prototype.map

map 메서드는 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다. 그리고 콜백 함수의 반환값들로 구성된 새로운 배열을 반환한다. 이때, 원본 배열은 변경되지 않는다. 만약 map메서드의 콜백함수의 반환값이 true가 아니라면 undefined를 반환한다. map메서드의 콜백함수의 첫 번째 인수는 현재 순회하고 있는 요소, 두 번째 인수는 현재 순회하고 있는 요소의 인덱스다. map메서드가 생성하여 반환하는 새로운 배열의 length 프로퍼티 값은 map메서드를 호출한 배열의 length 프로퍼티 값과 반드시 일치한다(1대1매핑).

const arr=[1,2,3,4,5];
const arrMap=arr.map((a)=>{return a*a});

console.log(arrMap) //[1,4,9,16,25]

const arrTwo=[1,2,3,4,5];
const arrTwoMap=arrTwo.map(a=>{if(a%2===0){return a}});

console.log(arrTwoMap); //[undefined,2,undefined,4,undefined]

class Prefixer{
    constructor(prefix){
        this.prefix=prefix;
    }
    add(arr){
    	return arr.map(item=>this.prefix+item);
    },this
}
 
const prefixer=new Prefixer('-webkit-');
 
console.log(prefixer.add(['transition','uesr-select']));
//['-webkit-transition','-webkit-uesr-select']

 

18. Array.prototype.filter

filter메서드는 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다. 그리고 콜백 함수의 반환값이 true인 요소로만 구성된 새로운 배열을 반환한다. 이때 원본 배열은 변경되지 않는다. 콜백함수의 첫 번째 인수는 현재 순회 하고 있는 요소, 두 번째 인수는 현재 순회 하고 있는 요소의 인덱스다.

const arr=[1,2,3,4,5,6,7];
const arrFilter=arr.filter((a)=>a%2===0);

console.log(arrFilter); //[2,4,6]

class User{
	constructor(){
    this.users=[
    	{id:1,name:'Lee'},
        {id:2,name:'Kim'},
        ];
    }
    
findbyId(id){
	return this.users.filter(user=>user.id===id);
    }

remove(id){
	this.users=this.users.filter(user=>user.id!==id);
    }
}

const users=new Users();
let user=users.findById(1);

console.log(user); //[{id:1,name:'Lee'}]

users.remove(1);
user=users.findById(1);

console.log(user); //[]

 

19. Array.prototype.reduce

reduce 메서드는 자신을 호출한 배열의 모든 요소를 순회하며 인수로 전달받은 콜백 함수를 반복 호출한다. 그리고 콜백 함수의 반환값을 다음 순회 시에 콜백 함수의 첫 번재 인수로 전달하면서 콜백 함수를 호출하여 하나의 결과값을 만들어 반환한다. 이때 원본 배열은 변경되지 않는다. reduce메서드의 첫 번째 인수는 콜백함수, 두번째 인수는 초깃값을 전달받는다. reduce 메서드의 콜백 함수의 첫 번째 인수는 현재 누적값, 두 번째 인수는 현재 순회하고 있는 요소, 세 번째 인수는 현재 순회하고 있는 요소의 인덱스, 네 번째 인수는 현재 순회하고 있는 배열 자체(this)다.

const sum=[1,2,3,4];
const sumReduce=sum.reduce((a,b,c,d)=>a+b,0);

console.log(sumReduce); //10