[JS] 자바스크립트 배열 메소드 정리

push()

배열의 끝에 n개의 요소를 넣는다.

const numArr = [1, 2, 3, 4, 5];
numArr.push(6, 7, 8);
console.log(numArr); // [1, 2, 3, 4, 5, 6, 7, 8]

 

pop()

배열의 마지막 요소를 제거하고 해당 요소를 리턴한다.

const numArr = [1, 2, 3, 4, 5];
const popped = numArr.pop();
console.log(popped);		//5
console.log(numArr);		//[1, 2, 3, 4]

 

unshift()

배열의 앞에 n개의 요소를 넣는다.

const numArr = [2, 3, 4];
numArr.unshift(0, 1);
console.log(numArr); // [0, 1, 2, 3, 4]

 

shift()

배열의 첫 번째 요소를 제거하고 해당 요소를 리턴한다.

const numArr = [1, 2, 3, 4, 5];
const removed = numArr.shift();
console.log(removed); // 1
console.log(numArr); // [2, 3, 4, 5]

 

concat()

두 개 혹은 여러 개의 배열들을 합친다.

원래 있던 배열을 바꾸지 않고 새로운 배열을 생성한다.

const numArr = [1, 2, 3, 4, 5];
const numArr2 = [6, 7, 8];
const numArr3 = numArr.concat(numArr2);

console.log(numArr3); // [1, 2, 3, 4, 5, 6, 7, 8]

 

reverse()

배열 요소의 순서를 반대로 변경한다.

이때 원본 배열 자체가 변경된다.

const numArr = [1, 2, 3, 4, 5];
numArr.reverse();
console.log(numArr); // [5, 4, 3, 2, 1]

 

join()

배열을 문자열로 반환한다.

인자로는 배열의 각 요소들 사이에 들어갈 구분자를 넣으며, 공백 없이 요소들을 이어주고 싶다면 ''를 넣는다.

아무것도 안넣어주면 자동으로 ,를 함께 출력한다.

const strArr = ['hello', 'my', 'name', 'is'];
console.log(strArr.join(''));	//hellomynameis
console.log(strArr.join());	//hello,my,name,is

 

splice()

배열의 원래 요소를 다른 요소로 대체하거나 다른 요소를 배열에 삽입한다.

첫 번째 인자로는 시작 배열 인덱스, 두 번째 인자로는 지울 요소의 갯수, 세 번째 인자로는 새롭게 삽입할 n개의 요소이다.

const aniList = ['rabbit', 'cow', 'pig', 'dog', 'cat', 'human', 'monkey'];
aniList.splice(2, 0, 'fish'); // ['rabbit', 'cow', 'pig', 'fish', 'dog', 'cat', 'human', 'monkey']
aniList.splice(1, 3, 'frog'); // ['rabbit', 'frog', 'dog', 'cat', 'human', 'monkey']
aniList.splice(0, 0, '1', '2'); // ['1', '2', 'rabbit', 'frog', 'dog', 'cat', 'human', 'monkey']

 

slice()

원하는 요소를 새 배열로 추출한다. 원본 배열을 수정하지 않고 새로운 배열을 반환한다. (얕은 복사)

인자로는 시작 인덱스와 마지막 인덱스 (포함되지 않음)을 넣어준다.

마지막 인덱스 인자가 없다면, 시작 인덱스부터 끝까지 추출한다.

const aniList = ['rabbit', 'cow', 'pig', 'dog', 'cat', 'human', 'monkey'];
console.log(aniList.slice(3));	//['dog', 'cat', 'human', 'monkey']
console.log(aniList.slice(2, 5));	//['pig', 'dog', 'cat']

 

find()

인자로 조건 함수를 받으며 배열 내에서 조건 함수를 만족하는 첫 번째 값을 리턴한다.

const animal = [
    {
        id : 0,
        diverse : 'cat',
        isIt : true
    },
    {
        id : 2,
        diverse : 'carrot',
        isIt : false
    },
    {
        id : 2,
        diverse : 'dog',
        isIt : true
    }
]

const aniArr1 = animal.find(animals => (animals.id === 2));
console.log(aniArr1); // {id: 2, diverse: "carrot", isIt: false}

 

findIndex()

인자로 조건 함수를 받으며 배열 내에서 조건 함수를 만족하는 첫 번째 요소의 인덱스 값을 리턴한다.

const animal = [
    {
        id : 0,
        diverse : 'cat',
        isIt : true
    },
    {
        id : 2,
        diverse : 'carrot',
        isIt : false
    },
    {
        id : 2,
        diverse : 'dog',
        isIt : true
    }
]

const aniArr1 = animal.findIndex(animals => (animals.id === 2));
console.log(aniArr1); // 1

 

 

 

filter()

인자로 조건 함수를 받으며 배열의 모든 요소를 탐색하며 조건 함수를 만족하는 요소를 모두 반환한다.

const animal = [
    {
        id : 0,
        diverse : 'cat',
        isIt : true
    },
    {
        id : 2,
        diverse : 'carrot',
        isIt : false
    },
    {
        id : 2,
        diverse : 'dog',
        isIt : true
    }
]

const aniArr1 = animal.filter(animals => (animals.id === 2));
console.log(aniArr1); // id가 2인 두 개의 객체가 담긴 배열이 출력된다.

 

forEach()

인자로 함수를 받으며 배열의 모든 요소에 대하여 해당 함수를 실행한다.

const arr = [1, 2, 3];
arr.forEach((it) => {
	console.log(it);
})

// 1
// 2
// 3

 

map()

인자로 콜백함수를 받으며 배열의 모든 요소에 대하여 해당 함수를 실행한 결과로 구성된 새로운 배열을 반환한다.

const addArr = [1, 2, 3];
let result = addArr.map((num)=>{
	return num + 5;
});
console.log(result); // [6, 7, 8]

 

some()

인자로 조건 함수를 받으며 배열 요소 중 하나라도 이 조건에 대해 true이면 true를 리턴한다.

const arr1 = [1, 2, 3, 4, 5];
const arr2 = [1, 2, 3, 4, 11];
console.log(arr1.some(isIt => isIt > 10)); // false
console.log(arr2.some(isIt => isIt > 10)); // true

 

every()

인자로 조건 함수를 받으며 모든 배열 요소가 해당 조건을 만족할 때만 true를 리턴한다.

const arr1 = [1, 2, 3, 4, 5];
const arr2 = [2, 4, 6, 8, 10];
console.log(arr1.every(isIt => isIt % 2 === 0)); // false
console.log(arr2.every(isIt => isIt % 2 === 0)); // true

 

reduce()

인자로 콜백함수와 initValue를 받으며 initValue를 전달하지 않으면 1로 자동 할당한다.

해당 배열의 모든 요소를 하나의 값으로 줄이기 위해 콜백 함수를 실행한다. (첫 번째 요소부터)

reduceRight 메소드는 배열의 마지막 요소부터 누적시킨다.

const arrList = [1, 2, 3, 4, 5 ];
const result = arrList.reduce((prev, curr, index, arr) => (prev + curr), 0);
console.log(result); // 15

 

fill()

시작 인덱스부터 종료 인덱스 바로 앞까지의 모든 배열 요소를 특정 값으로 교체한다.

인자를 하나만 넣어주면 배열의 처음부터 끝까지 모든 요소를 해당 값으로 교체한다.

const array = [1, 2, 3, 4];
array.fill(0); // [0, 0, 0, 0]
array.fill(1, 1, 3); // [0, 1, 1, 0]

 

sort()

인자로 compareFunction을 받으며 해당 함수의 규칙에 따라 정렬된 배열을 반환한다.

인자가 생략되면 배열의 요소들은 기본적으로 문자열로 취급되어, 유니코드 값 순서대로 정렬된다.

원본 배열 자체가 수정되며, 리턴하는 배열 또한 원본 배열을 가리키게 되어 둘 중 하나의 내용을 변경하면 나머지 배열의 내용도 변경된다.

 

※ compareFunction

• 두 개의 요소를 파라미터로 입력받음
• a, b 두 개의 요소를 파라미터로 입력받는 경우, 함수의 리턴 값이 0보다 작은 경우 a가 b보다 앞에 오도록 정렬하고, 0보다 클 경우, b가 a보다 앞에 오도록 정렬한다. 0을 리턴하면, a와 b의 순서를 변경하지 않는다.

const arr = [1, 10, 2, 3, 20, 30, 5];
arr.sort(); // 비교 함수가 없다면 문자열로 정렬
console.log(arr); // [1, 10, 2, 20, 3, 30, 5]

const arr = [1, 10, 2, 3, 20, 30, 5];

// 오름차순 정렬 코드
const compare = (a, b) => {
  if (a < b) {
    return -1;
  }

  if (a > b) {
    return 1;
  }

  return 0;
};

arr.sort(compare);
console.log(arr); // [1, 2, 3, 5, 10, 20, 30]

---