[Javascript] 배열 총정리 ② | 배열의 요소 확인 및 기존 배열 변경 메서드

1. 원본 배열의 변경 여부

자바스크립트에서는 배열의 메서드를 사용할 때 기존의 배열을 변경하는 메서드와, 변경을 하지 않고 새로운 배열로 반환하는 메서드로 구분됩니다. 간략하게만 정리하자면 다음과 같은데요.

1. 기존의 배열 변경 메서드

• push(): 배열 끝에 요소를 추가합니다.
• pop(): 배열 끝의 요소를 제거합니다.
• shift(): 배열 앞의 요소를 제거합니다.
• unshift(): 배열 앞에 요소를 추가합니다.
• splice(): 배열의 특정 위치에서 요소를 추가 또는 제거합니다.
• reverse(): 배열의 순서를 뒤집습니다.
• sort(): 배열을 정렬합니다.
• fill(): 배열의 특정 요소를 채웁니다.

2. 새로운 배열로 반환하는 메서드

• concat(): 두 개 이상의 배열을 합쳐서 새로운 배열을 생성합니다.
• slice(): 배열의 일부를 추출하여 새로운 배열을 반환합니다.
• filter(): 주어진 함수의 조건을 만족하는 요소로 이루어진 새로운 배열을 반환합니다.
• map(): 배열의 각 요소에 대해 주어진 함수를 실행한 결과로 이루어진 새로운 배열을 반환합니다.
• reduce(): 배열의 각 요소에 대해 주어진 함수를 실행하여 하나의 값으로 축소시킵니다.
• join(): 배열의 모든 요소를 문자열로 결합하여 반환합니다.
• indexOf(): 배열에서 특정 요소의 인덱스를 반환합니다.

그리고 위의 메서드들 중에서 콜백 함수를 호출하여 배열의 요소들을 정제할 수 있는 고차 함수들은 각각 sort(), filter(), reduce(), map() 메서드가 존재합니다.

2. 확인 여부 메서드

다음 메서드들은 배열의 특정 요소의 여부를 확인하기 위한 메서드들입니다.

1. isArray() : 해당 배열이 타입 상 Array 생성자 함수의 인스턴스인지를 판단하여 그 결과를 boolean 값으로 반환하는 메서드 입니다. 인스턴스에서 사용되는 것이 아닌 메서드로 Array 빌트인 객체에서 호출 되는 메서드 입니다. (Array.isArray())

이때 해당 메서드의 경우 가장 처음의 매개변수 하나에 대해서만 참 거짓 여부를 판단하기 때문에 그 뒤의 매개변수는 무시를 하고 가장 첫번째 매개변수가 배열인지 아닌지의 여부를 판단하여 그 결과값을 반환합니다.

또한 배열 안에 숫자가 아니라 문자나 기호가 있을 경우, 유니코드 표준 번호를 기준으로 정렬을 합니다.

let arr1 = [];
let arr2 = 'this Array?'
console.log(Array.isArray(arr1, arr2)); // arr1만 대상으로 하여 true 반환
console.log(Array.isArray(arr2, arr1)); // arr2만 대상으로 하여 false를 반환

2. indexOf() : 배열 안의 값에 대한 인덱스를 반환하는 메서드 입니다. 이때 매개변수를 정확히 지정해 주어야 하며, 만약 배열에 없는 인덱스에 대한 값을 매개변수로 전달할 경우 -1을 반환합니다.

또한 해당 배열에 동일한 값이 존재할 경우, 최초로 발견된 값에 대한 인덱스를 반환하며, 매개변수를 두 개로 받을시 첫번째 매개변수는 배열에서 검색을 시작할 위치의 인덱스가 되고, 두번째 매개변수는 찾고자 하는 값의 인덱스를 의미하게 됩니다.

let arr1 = [1,1,2,3,4,5];
console.log(arr1.indexOf(1)) // arr1의 배열 중 첫번째 1인 값의 인덱스의 번호 0을 반환합니다.
console.log(arr1.indexOf(6)) // arr1 배열에 6이라는 값은 존재하지 않으므로 -1을 반환합니다. 
console.log(arr1.indexOf(1,1)) // arr1 배열에서 인덱스 1부터 1을 검색하므로 두번째 1의 인덱스 1을 반환합니다.

3. includes() : 해당 배열 안에 요소의 값이 존재하는지를 확인할 때 사용하는 메서드입니다. 확인이 될 경우 true를, 아닐 경우 false를 반환합니다. 주로 배열을 순회하며 특정 값이 있는지의 여부를 판단할 때 사용됩니다.

let arr1 = [1,1,2,3,4,5];
console.log(arr1.includes(1)); // 1의 값을 포함하고 있으므로 true를 반환
console.log(arr1.includes(6)); // 6의 값을 포함하고 있지 않으므로 false를 반환

3. 기존 배열 제어 메서드

위의 섹션 1에서도 말씀을 드렸듯이, 배열 메서드는 크게 기존 배열을 변경하는 메서드(부수 효과를 일으키는 메서드들이라고도 합니다.) 와 기존 배열을 복사하여 복사본 배열의 요소들에 대한 정제 작업을 마친 후 해당 작업이 끝난 복사본 배열을 반환하는 메서드로 나뉘는데요.

이번 섹션에서는 기존의 배열을 제어하는 메서드들에 대해서 알아보도록 하겠습니다.

4. push()

기존 배열의 맨 뒷쪽에 데이터를 추가한 후 변경 된 메서드의 길이를 반환하는 메서드 입니다. 보통 기존의 배열의 뒷쪽에 데이터를 추가하는 용도로 사용되며, 변경된 배열의 길이에 대해서는 해당 길이를 이용하여 특별한 작업을 할 상황이 아닌 이상 굳이 반환을 받지 않아도 됩니다.

let arr1 = [1,2,3,4,5];
console.log(arr1.push(6)) // 기존 배열에 6을 추가 후 반환되는 길이를 출력
console.log(arr1); // 배열에 6이 추가된 것을 확인.

5. pop()

기존 배열의 맨 뒷쪽의 요소를 추출하여 반환하는 메서드 입니다. 이때 push와 마찬가지로 반환값은 굳이 받지 않아도 되며, 특별히 이 메서드는 매개변수를 따로 받지 않습니다.

let arr1 = [1,2,3,4,5,6];
console.log(arr1.pop()); // 꺼내어진 값 6을 출력
console.log(arr1); // 6을 제외한 기존의 배열의 값들을 출력

6. unshift()

push 메서드와 동일하며 단지 전달받은 매개변수들을 배열의 앞쪽에 추가한다는 특징이 있습니다.

let arr1 = [1,2,3,4,5];
console.log(arr1.unshift(0)); // arr1의 배열 맨 앞에 0을 추가 후 길이를 반환
console.log(arr1); // arr1의 최종 상태인 [0,1,2,3,4,5]를 출력

7. shift()

pop 메서드와 동일하며 단지 배열의 앞 값 하나를 추출하여 반환합니다.

let arr1 = [1,2,3,4,5];
console.log(arr1.shift()); // arr1의 배열 맨 앞의 1을 반환
console.log(arr1); // arr1의 최종 상태인 [2,3,4,5]를 출력

⭐ push와 pop 메서드를 이용해 LIFO(Last in First Out | 스택 알고리즘)을 구현할 수 있고, push와 shift 메서드를 이용해 FIFO(First in First Out | 큐 알고리즘)을 구현하는 것 또한 가능하다고 합니다.

그래서 해당 메서드들을 이용해 코딩테스트의 스택/큐 알고리즘을 이용하여 문제를 풀기도 합니다.

8. splice()

시작 인덱스(첫번째 매개변수)부터 개수(두번째 매개변수)를 지정하여 삭제하고, 그 자리에 세번째 부터의 매개변수들을 채우는 메서드 입니다.

이때 추출된 요소들 또한 반환 받은 후 사용할 용도가 아니라면 굳이 반환을 받을 필요는 없습니다.

또한 두번째 매개변수를 생략한 채 첫번째 매개변수만을 주게 될 경우 해당 인덱스부터 배열의 끝까지를 추출하겠다는 의미로도 사용이 됩니다.

let arr1 = [1,2,3,4,5,6];
console.log(arr1.splice(2,2,30,40,50)); // arr1 배열의 두번째 인덱스부터 2개를 자르겠다는 것을 의미하며, 세번째 매개변수 부터는 기존의 자리에 할당 될 새로운 값을 의미합니다. 물론 console.log에는 splice 메서드에 의해 추출된 반환값이 출력됩니다.
console.log(arr1); // [1,2,30,40,50,5,6] 기존의 5와 6은 밀려나고 새로운 매개변수들로 채워집니다.

let arr2 = [3,4,5] // 또한 다른 배열을 세번째 매개변수로 지정하는 것이 가능하며, 이 경우 스프레드 연산자를 사용하여야 요소를 의도에 맞게 전달할 수 있습니다. 
arr1.splice(0,2,...arr2); // 스프레드 연산자를 사용하여 전달할 경우 arr1을 출력 했을때 [ 3, 4, 5 , 3, 4, 5, 6 ] 가 출력될 것이고
arr1.splice(0,2,arr2); // 그냥 배열을 전달했을때 [ [ 3, 4, 5 ], 3, 4, 5, 6 ]가 출력될 것입니다.

9. reverse()

원본 배열을 뒤집은 후의 배열을 반환합니다.

let arr1 = [1,2,3,4,5,6];
console.log(arr1.reverse()); // 배열이 뒤집힌 상태인 [6,5,4,3,2,1] 을 반환합니다.
console.log(arr1); // 뒤집혀진 원본 배혈 또한 출력됩니다.

10. fill()

특정 값(첫번쨰 매개변수)을 배열의 시작 인덱스(두번째 매개변수) 부터 특정 인덱스(세번째 매개변수) 까지 채우고 그 결과값을 반환하는 메서드이며, 단독으로 사용시 특정 배열을 해당 값으로 전부 채움을 의미합니다.

이때 세번째 매개변수의 범위는 n-1, 즉 해당 매개변수의 인덱스까지 지정한 값으로 바뀌지 않고 바로 그 전 인덱스까지만 바뀜을 알아두시기 바랍니다.

해당 메서드는 주로 0으로 채운 후 해당 되는 자리에 카운트를 하는 등의 방식으로 활용됩니다.

let arr1 = [1,2,3,4,5,6];
console.log(arr1.fill(1,1,2)); // arr1 배열에 1이라는 정수값을 1번 인덱스부터 2번 인덱스까지 채움을 의미함으로 기존 배열 변경 후 결과값인 [ 1, 1, 3, 4, 5, 6 ] 반환.
console.log(arr1); // [ 1, 1, 3, 4, 5, 6 ] 반환.

11. sort()

배열의 요소들을 정렬할 때 사용되는데, 매개변수를 적지 않고 사용하면 오름차순으로 정렬이 되며, 콜백 함수를 호출하여 첫번째 매개변수와 두번째 매개변수를 연산하여 나온 결과값이 음수일 경우 첫번째 매개변수를, 0일 경우 변화가 없고 양수일 경우 두번째 매개변수를 최우선적으로 변경합니다.

간단히 말하자면 해당 두 매개변수의 연산에 대한 결과값이 음수일 때 자리 스위칭이 발생되며, 오름차순의 경우 a-b(작은 값에서 큰 값)를, 내림차순의 경우 b-a(큰 값에서 작은 값)를

let arr1 = [1,6,4,5,3,2];
console.log(arr1.sort((a,b) => a - b)) // 위 배열에서 1과 6을 빼면 음수가 나오므로 a인 1은 가만히 있고, 다시 6과 4를 빼서 양수이므로 4(b)과 6(a)를 스위칭 하고 다시 6과 5도 마찬가지로, 3,2도 마찬가지로 한 후 다시 배열을 순회하며 자리 바꿈이 일어나지 않을 때까지 반복하며 실행합니다.
console.log(arr1.sort((a,b) => b - a))