✅ study keyword

배열의 메서드 5가지와 사용방법을 알아보자!

배열의 method

• 자바스크립트는 배열을 다룰 때 유용한 다양한 빌트인 메서드를 제공한다.
• Array 생성자 함수는 정적 메서드를, 배열 객체의 프로토 타입인 Array.prototype은 프로토타입 메서드를 제공한다.

결과물을 반환하는 두 가지 패턴
1> 원본 배열을 직접 변경하는 메서드
2> 원본 배열을 직접 변경하지 않고 새로운 배열을 생성하여 반환하는 메서드

1. slice()

slice 메서드 인수로 전달된 범위의 요소들을 복사하여 배열로 반환한다. 이때 원본 배열은 변경하지 않는다.

slice(start[, end])

parameter

start
복사를 시작할 인덱스.
end
복사를 종료할 인덱스. 이때, end index의 직전까지의 요소만 추출된다.

사용 방법

<script>
const arr = [1, 2, 3]
// arr[0]부터 arr[1] 직전까지 복사하여 반환 
arr.slice(0, 1) // [1]
// arr[1]부터 arr[2] 직전까지 복사하여 반환 
arr.slice(1, 2) // [2]
// 원본은 변경되지 않음
console.log(arr); // [1, 2, 3]
</script>

첫 번째 인수(start)로 전달 받은 인덱스부터 두 번째 인수(end)로 전달 받은 인덱스 직전까지 요소들을 복사해 배열로 반환한다.

<script>
const arr = [1, 2, 3]
// arr[1] 부터 이후의 모든 요소를 복사하여 반환 
arr.slice(1) // [2, 3]
</script>

두 번째 인수를 생략하면 첫 번째 인수로 전달받은 인덱스부터 모든 요소를 복사하여 배열로 반환한다.

<script>
const arr = [1, 2, 3]
// 배열의 끝에서 부터 모든 요소를 한개 복사하여 반환 
arr.slice(-1) // [3]
// 배열의 끝에서부터 모든 요소를 두개 복사하여 반환
arr.slice(-2) // [2, 3]
</script>

첫 번째 인수가 음수인 경우 배열의 끝에서 부터 요소를 복사하여 배열로 반환한다.

<script>
const arr = [1, 2, 3]
// 인수를 모두 생략하면 원본 배열의 복사본 생성 후 반환
const copy = arr.slice()
console.log(copy); // [1, 2, 3]
console.log(copy === arr); // false
</script>

인수를 모두 생략하면 원본 배열의 복사본을 생성하여 반환한다.

2. splice()

원본 배열의 중간에 요소를 추가하거나 중간에 있는 요소를 제거해 원본 배열을 직접 변경하고 제거한 요소를 배열로 반환한다.
splice(start[, deleteCount[,item1[, item2[, ...]]]])

parameter

start
원본 배열의 요소를 제거하기 시작할 인덱스로 start만 지정하면 원본 배열의 모든 요소를 제거하고 음수인 경우 배열의 끝에서의 인덱스를 의미한다.
deleteCount(option)
원본 배열의 요소를 제거하기 시작할 인덱스인 start부터 제거할 요소의 개수로 0인 경우 아무런 요소도 제거되지 않는다.
items(option)
제거한 위치에 삽입할 요소의 목록으로 생략할 경우 원본 배열에서 요소들을 제거하기만 한다.

사용 방법

<script>
const arr = [1, 2, 3, 4]
// 원본 배열의 인덱스 1부터, 2개의 요소 삭제 후, 그 자리에 새로운 요소 20, 30 삽입한다.
const result = arr.splice(1, 2, 20, 30)
// 제거한 요소가 배열로 반환
console.log(result); // 2, 3
// splice 메소드 역시 원본 배열을 직접 변경
console.log(arr); // [1, 2, 20, 30 ]
</script>

splice 메서드에 3개의 인수 모두 전달하면 시작 인덱스부터 두번째, 제거할 요소의 개수만큼 원본 배열에서 제거 후 셋째, 제거한 위치에서 삽입할 요소들을 원본 배열에 삽입한다.

<script>
const arr = [1, 2, 3]
// 배열의 끝에서부터 요소를 두 개 복사하여 반환한다
arr.splice(-2) // [2, 3]
console.log(arr) // [1]  
</script>

첫 번째 인수가 음수면 원본 배열에 배열 끝에서부터 요소가 삭제되고 삭제된 요소를 복사하여 배열로 반환한다.

<script>
const arr = [1, 2, 3, 4]
// 원본 배열의 인덱스 1부터, 0개의 요소 삭제 후, 그 자리에 새로운 요소 100 삽입
const result = arr.splice(1, 0, 100)
// 제거한 요소가 배열로 반환
console.log(result); // []
// splice 메소드 역시 원본 배열을 직접 변경
console.log(arr); // [1, 100, 2, 3, 4 ]
</script>

두 번째 인수, 제거할 요수 개수를 0으로 지정하면 원본 배열에 새로운 요소들만 삽입하고 빈 배열을 반환한다.

<script>
const arr = [1, 2, 3, 4]
// 원본 배열의 인덱스 1부터, 2개의 요소 삭제 
const result = arr.splice(1, 2)
// 제거한 요소가 배열로 반환
console.log(result); // [2, 3]
// splice 메소드 역시 원본 배열을 직접 변경
console.log(arr); // [1, 4 ]
</script>

세 번째 인수, 제거한 위치에 추가할 요소의 목록을 전달하지 않으면 원본 배열에서 지정된 요소를 삭제하고 삭제된 요소를 반환한다.

<script>
const arr = [1, 2, 3, 4]
// 원본 배열의 인덱스 1부터, 2개의 요소 삭제 
const result = arr.splice(1)
// 제거한 요소가 배열로 반환
console.log(result); // [2, 3, 4]
// splice 메소드 역시 원본 배열을 직접 변경
console.log(arr); // [1]
</script>

두 번째 인수, 제거한 요소의 개수를 생략하면 첫 번째 인수로 전달된 시작 인덱스부터 원본 배열에 모든 요소를 제거하고 제거한 요소를 반환한다.

3. filter()

주어진 함수의 조건을 충족하는 모든 요소를 모아 새로운 배열로 반환합니다.

filter(callback(element[, index[, array]])[, thisArg])

parameter

callback
각 요소를 시험할 함수. true를 반환하면 요소를 유지하고, false를 반환하면 버립니다. 다음 세 가지 매개변수를 받습니다.

• element
  처리할 현재 요소.
• index(option)
  처리할 현재 요소의 인덱스.
• array(option)
  filter를 호출한 배열.

thisArg
callback을 실행할 때 this로 사용하는 값.

사용 방법

<script>
//배열에서 값이 10미만인 조건에 맞는 요소를 추출하려고함.
//1. filter() 인자에서 바로 함수를 써주는 방법
const array = [3,5,11,0,9];
const result = array.filter((value) => value < 10)
// filter를 거쳐 조건에 맞는 요소들로 이루어진 새로운 배열 출력
console.log(result); //[3, 5, 0, 9]
---------------------------------------
//2. 밖에서 함수를 선언하고 filter()의 인자에서 callback 하는 법
const array = = [3,5,11,0,9];
function lessThanTen() {
	return value < 10
}
const result = array.filter(lessThanTen);
// 역시 filter를 거쳐 조건에 맞는 요소들로 이루어진 새로운 배열 출력
console.log(result); //[3, 5, 0, 9]
</script>

배열 내용 검색하기

<script>
const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
function filterItems() {
  return fruits.filter((value) => value.includes('ap'))
}
console.log(filterItems('ap')); // ['apple', 'grapes']
</script>

includes 메서드를 함께 사용해서 배열 내용을 조건에 따라 검색할 수 있다.

4. concat()

인수로 주어진 배열이나 값을 기존 배열로 추가해 '새로운' 배열로 반환하고 원본 배열은 변경하지 않는다.

concat([value1[, value2[, ...[, valueN]]]])

parameter

• 배열 또는 값
• 만약 value1 ~ valueN 인자를 생략하면 기존배열의 얕은 복사본을 반환.

사용 방법

<script>
const arr1 = [1, 2]
const arr2 = [3, 4]
// arr2를 원본 배열 arr1의 마지막 요소로 추가한 새로운 배열 반환
let result = arr1.concat(arr2);
console.log(result); // [1, 2, 3, 4]
// 숫자를 원본 배열 arr1의 마지막 요소로 추가한 새로운 배열 반환
let result = arr1.concat(3);
console.log(result); // [1, 2, 3]
// 배열 arr2와 숫자를 원본 배열 arr1의 마지막 요소로 추가한 새로운 배열 반환
let result = arr1.concat(arr2, 5);
console.log(result); // [1, 2, 3, 4, 5]
console.log(arr1); // [1, 2], 원본 배열 변경되지 않음
</script>

인수로 전달한 값이 배열이면 해체하여 새로운 배열의 요소로 추가한다.

5. indexOf()

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

indexOf(searchElement[, fromIndex])

Parameter

searchElement
배열에서 찾을 요소.
fromIndex(Option)
검색을 시작할 색인.

사용 방법

<script>
let a = ['justcode','study','javascript','js']
  // index   0       1         2         3
console.log(a.indexOf('study'))   //  1
console.log(a.indexOf('java'))    // -1
</script>

<script>
let a = ['justcode', 'js', 'study','javascript','js']
  // index   0       1      2         3         4
console.log(a.indexOf('js'))      //  1
</script>

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

6.includes()

배열 내에 특정 요소가 포함되어 있는지 확인하여 boolean을 반환한다.

includes(valueToFind[, fromIndex])

parameter

valueToFind
탐색할 요소.

fromIndex (option)
이 배열에서 searchElement 검색을 시작할 위치입니다. 기본값은 0입니다.

사용 방법

<script>
// 인수로 전달받은 정수만틈 요소를 생성하고 0부터 1식 증가하면서 요소를 채운다.
const arr = [1, 2, 3];
arr.includes(2); true
arr.includes(100); false
</script>

첫 번째 인수로 검색할 대상을 지정한다.

<script>
// 인수로 전달받은 정수만틈 요소를 생성하고 0부터 1식 증가하면서 요소를 채운다.
const arr = [1, 2, 3];
arr.includes(1, 1); false
arr.includes(3, -1); true
</script>

두 번째 인수로 검색을 시작할 인덱스를 전달할 수 있고 생략시 기본 값이 0이 설정되고 인수에 음수를 전달하면 length 프로퍼티 값과 음수 인덱스를 합산하여 검색 시작 인덱스를 전달한다.

<script>
var arr = ['a', 'b', 'c'];
arr.includes('c', 3);   // false
arr.includes('c', 100); // false
</script>

fromIndex 가 배열의 길이보다 같거나 크다면, false 를 반환한다. 배열은 검색되지 않는다.