[JavaScript] 필수 배열 함수 정리

언제 무엇을 써야하는지 너무 헷갈려서 공부할 겸 정리해보았다.

 

---

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];
numArr.pop();
const popped = numArr.pop();
console.log(popped);		//5
console.log(numArr);		//[1, 2, 3, 4]

---

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()

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

인자로는 배열의 각 요소들 사이에 들어갈 separator(각 요소들을 구분해주는 문자)를 넣는다. 
공백 없이 요소들을 이어주고 싶다면 ''를 넣는다.
아무것도 안 적으면 자동으로 ,를 함께 출력한다.

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

---

split()

문자열을 원하는 기준에 다라 자른다.

인자로 seperator와 limit(몇개까지 자를 것 인지)가 들어간다.
limit를 지정하지 않으면 seperator기준대로 전부 잘라진다.

const stringEx = '032-0000-1111';
const splitedNum = stringEx.split('-');
console.log(splitedNum[0]);	//032

 

이런식으로 지역 번호 추출에 이용되기도 한다.

---

splice()

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

인자가 총 3개가 들어간다.
splice(splice 시작 배열 인덱스, 지울 요소 갯수, 새롭게 삽입할 요소(여러개 가능) )

 

예시를 조금 들테니 이해를 잘 했는지 테스트해보시길.

 

//<1번 예시> 
splice(2, 0, 'fish');
//해석: 2번 인덱스 전에 fish라는 스트링요소를 삽입한다.(원래의 2번 인덱스는 3이 되고, 'fish'가 2번이 된다.)
//<2번 예시>
splice(1, 3, 'frog');
//해석: 1번 인덱스부터 3개의 요소를 지우고 frog라는 요소를 삽입한다.
//<3번 예시>
splice(0, 0, '1', '2', '3');
//해석: 0번 인덱스 전(처음)부터 1, 2, 3 요소를 순서대로 삽입한다.

결과는 아래와 같다.

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

console.log(aniList1);		//['rabbit', 'cow', 'pig', 'fish', 'dog', 'cat', 'human', 'monkey']
console.log(aniList2);		//['rabbit', 'frog', 'cat', 'human', 'monkey']
console.log(aniList3);		//['1', '2', '3', 'rabbit', 'cow', 'pig', '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()

배열 내 특정 조건에 만족하는 값을 리턴한다.

배열을 리턴하지 않고 인자값을 리턴한다.
인자로는 조건 함수가 들어간다.
arrow function과 함께 쓰인다.
객체에서 많이 쓰인다.

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));

// animal.find(function animals(){
//     return animals.id === 2;
// })   arrow function 없을 시절 이렇게 썼다.

console.log(aniArr1);		//{id: 2, diverse: "carrot", isIt: false}

그러나, 여기서 의문이 들 수 있다.

"그 다음 객체도 id가 2인데 왜 리턴이 안됐지?"

 

이는, find가 처음 원하는 요소를 찾으면 바로 해당 함수에서 빠져나가기 때문이다.
모든 요소를 찾기 위해서는 다음에 나올 filter()을 이용하면 된다.

---

filter()

find의 좀 더 광범위한 버전(?) 이다.
좀 전의 find가 처음 true가 나온 요소만 반환한다면,
filter는 반복문처럼 전체 배열 요소를 돌아 true가 나오는 요소를 모두 반환한다.

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);		//0: {id: 2, diverse: "carrot", isIt: false}
			1: {id: 2, diverse: "dog", isIt: true}

id가 2인 모든 객체 반환된 모습을 볼 수 있다.

---

map()

원 배열을 수정하지 않으면서, 

조건에 맞게 짝지어진 새로운 배열을 만들어낸다.

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

이 뿐만 아니라, 함수 내에 조건문을 이용하여 해당 조건에 맞는 값만 반환할 수도 있다.
for안에 if를 써서 복잡했던 함수를 짧게 줄일 수 있는 방법이다.

---

some()

콜백 함수에 어떠한 조건을 넣고, 

배열 요소가 해당 조건에 대해 true 인지 false인지 불리언 값을 리턴한다.
인자로 콜백함수와 함수의 인자들이 들어간다.

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

이것도 마찬가지로 하나라도 조건에 해당된다면 true를 반환한다.

---

reduce()

반복해서 배열의 값을 반환하는데 이것이 누적된다.
인자로는 콜백함수와 initValue가 오는데 콜백함수만 필수사항이다.

 

콜백함수 안의 인자는 처음값(initialValue), 현재값(currentValue), 현재 인덱스(currentIndex), array 로 총 4개다.
처음값은 reduce함수의 두번째 인자가 전달된다. 없으면 1을 자동 할당한다. 
현재 값에는 리턴된 값이 반복하여 할당이 된다.
처음 값에는 배열의 요소들을 반복하여 할당 받는다.
reduceRight는 배열의 마지막부터 누적시킨다.

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

---

sort()

배열의 순서를 정렬한다. 

해당 배열 자체를 바꾼다.
인자로 비교 인자를 받는다.

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

이해가 잘 간다.

그러나 아래의 코드를 보자.

const numArrStrange = [10, 24, 115, 34, 264];
numArrStrange.sort();
console.log(numArrStrange);	//[10, 115, 24, 264, 34];

원래같으면

[10, 24, 34, 115, 264]가 리턴돼야 할 텐데

이렇게 정렬이 된 이유는
아스키코드 순서이기 때문에 무언가 뒤죽박죽이다.

 

해결하는 방법은, 인자로 a, b를 넣어 a, b를 비교해 
a가 b보다 작으면 -1을 return,
a가 b보다 크면 1을 return,
a와 b가 같으면 0을 return하여 정렬하는 것 이다.

 

이 방법보다 간단하게 쓰이는 방법은
a와 b를 빼서, 음수가 나오면 그대로,
양수가 나오면 다음 수와 자리를 바꾸는 방법이다.

var arrNum = [ 10, 24, 115, 34, 264 ] ;
 
let result = arrNum.sort(function(a, b){
	return a - b ;
}) ;
 
console.log( result ) ;		// [10, 24, 34, 115, 264]

잘 나온다.

 

그러나, 자바스크립트 초보인 나는 이해가 잘 가지 않았다.

찾아본 결과, 가장 이해가 잘 갔던 생활코딩 블로그의 답글을 가져와봤다.

 

우선 [20, 10, 9,8,7,6,5,4,3,2,1]의 배열에서 a-b라는 연산을 모두 한 다음
그 결과값으로 정렬하는 것이 결코 아닙니다.
뭐하러 굳이 뺄셈을 하고 그 값으로 또 정렬하겠습니까?

자바스크립트의 정확한 알고리즘은 아니지만 쉽게 정렬 알고리즘을 설명하면 이렇습니다.
(a,b) 형식으로 지정한 두 인자를 차례로 비교합니다.

우선 배열 numbers[0]과 numbers[1] 즉, 20과 10을 비교해 볼까요?
20-10 = 10 결과값이 10 즉, 양수입니다.
sort함수에 sortNumber(a,b)의 return 값으로 양수 10을 전달합니다.
그럼 sort함수가 양수값을 전달받고 배열의 순서를 바꾸어 버립니다.
(정확하게 말하면 두 배열 안에 든 값을 교체) 그럼 배열이 [10, 20, 9,8,7,6,5,4,3,2,1] 이렇게 바뀝니다.
그 다음 numbers[0]과 numbers[2] 즉 10과 9를 비교합니다.
10 - 9 = 1 >0, 양수입니다.
결과값이 양수이므로 또 10과 9의 순서를 바꿉니다.

이런 식으로 계속 두 인자를 비교해서 결과값이 양수가 나오면 순서를 바꾸고, 음수가 나오면 순서를 그대로 유지하는 겁니다.

배열이 바뀌어가는 순서를 보면 이해하기 쉽습니다.
[(20), (10), 9,8,7,6,5,4,3,2,1] 20-10 = 10, 즉 양수이므로 순서바뀜! ()는 비교되는 인자값.
[(10), 20, (9),8,7,6,5,4,3,2,1] 10 - 9 = 1 또 양수, 순서 바뀜.
[(9), 20, 10, (8),7,6,5,4,3,2,1] 반복... [(8), 20, 10, 9,(7)...] ... [(2). 20, 10...3, (1)] [(1), 20, 10...]

그럼 배열 내에서 가장 작은 값 1이 찾아지겠죠.
[1, 20, 10, 9,8,7,6,5,4,3,2] 1의 순서는 바뀌지 않습니다.
1-2 = -1 즉 결과값이 음수이기 때문이죠.
그 다음은 두번째 배열 차례입니다. 20 - 10 = 10 > 0 이므로 순서를 또 바꿉니다.
[1, (20), (10), 9,8,7,6,5,4,3,2] [1, (10), 20, (9), 8...] [1, (9), 20, 10, (8)...] 이런 식으로 반복하다 보면 두번째로 작은 값 2도 찾게 됩니다.
.... [1, 2, 20, 10, 9,8,7,6,5,4,3] 그럼 다음은 세번째...
이렇게 지루하게 반복하면 결국 정렬이 됩니다.

물론 실제 자바스크립트에서는 비교하는 순서가 다릅니다. 다른 알고리즘을 쓰기 때문이죠.

이렇게 차례차례 비교해 나가면 인간이 이해하기는 쉽지만
연산량이 기하급수적으로 늘어나기 때문에 다른 정렬 알고리즘을 쓰는 것이죠.

실제로는 [20, 10, 9,8,7,6,5,4,3,2,1] 배열의 양쪽 끝부터 비교하고 (20, 1),
그 다음 배열의 가운데 값을 차례로 비교해 나갑니다.

(1,6) 디버깅해 보시면 쉽게 아실 수 있을 겁니다

그래도 이해가 잘 안간다면...

아래 링크를 달아두겠다.

생활코딩 sort()

opentutorials.org/course/50/109

sort - 생활코딩

---

결론

이제까지의 배열 함수들은 익숙해지면 유용하게 쓸 일이 많을 것 같다. 
해당 글을 적고서도 사실 제대로 이용하기엔 무리가 있어 보인다. 

화이팅 하자.... 

 

출처
opentutorials.org/course/50/109
megaton111.cafe24.com/2018/05/24/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%B0%B0%EC%97%B4-%EC%98%A4%EB%A6%84%EC%B0%A8%EC%88%9C-%EB%82%B4%EB%A6%BC%EC%B0%A8%EC%88%9C-%EC%A0%95%EB%A0%AC/
2dubbing.tistory.com/55
www.youtube.com/watch?v=3CUjtKJ7PJg
www.zerocho.com/category/JavaScript/post/5acafb05f24445001b8d796d
humahumahuma.tistory.com/83?category=828966
webisfree.com/2014-01-25/[javascript]-%EB%B3%80%EC%88%98%EC%97%90%EC%84%9C-%ED%8A%B9%EC%A0%95%EB%AC%B8%EC%9E%90-%EA%B8%B0%EC%A4%80-%EC%9E%90%EB%A5%B4%EA%B8%B0(%EB%82%98%EB%88%84%EA%B8%B0)-split()

sort - 생활코딩

자바스크립트 배열 오름차순, 내림차순 정렬

javascript reduce() 함수 파헤치기

(JavaScript) map, reduce 활용하기 - 함수형 프로그래밍

자바스크립트 filter, find 차이

[JavaScript] 변수에서 특정문자 기준 자르기(나누기), split()