.png)
배열 메서드(배열 API)란 무엇이며, Array 생성자 함수의 정적 메서드와 원본을 변경하지 않는 배열 메서드에 대해 적어본다
배열 메서드란❓
배열 메서드(배열 API)
- JS는 배열을 다룰 때 유용한 다양한 빌트인 메서드를 제공한다
- Array 생성자 함수는 정적 메서드를 제공하며, 배열 객체의 프로토타입인 Array.prototype은 프로토타입 메서드를 제공한다.
- 배열 메서드는 결과물을 반환하는 패턴이 두 가지이다
- 원본 배열을 직접 변경하는 메서드
- 원본 배열을 직접 변경하지 않고 새로운 배열을 생성하여 반환하는 메서드
Array 생성자 함수의 정적 메서드❗
Array.isArray
Array.isArray()메서드는 전달된 인수가 배열이면 true, 배열이 아니면 false를 반환한다
- true를 반환하는 CASE-
const a = Array.isArray([]);
console.log(a) // true
const b = Array.isArray([1,2]);
console.log(b); // true
const c = Array.isArray(new Array());
console.log(c); // true
- false를 반환하는 CASE-
const d = Array.isArray();
console.log(d); // false
const e = Array.isArray({});
console.log(e); // false
const f = Array.isArray(null);
console.log(f); // false
const g = Array.isArray(undefined);
console.log(g); // false
const h = Array.isArray(1);
console.log(h); // false
const i = Array.isArray('Array');
console.log(i); // false
const j = Array.isArray(true);
console.log(j); // false
const k = Array.isArray(false);
console.log(k); // false
const l = Array.isArray({0:1, length:1});
console.log(l); // false
Array.of
- 배열1에서 살펴보았다.
Array.of()는 Array 생성자 함수의 정적 메서드였다
Array.from
- 배열1에서 살펴보았다.
Array.from()는 Array 생성자 함수의 정적 메서드였다
원본 배열에 영향을 끼치지 않는 메서드❗
Array.prototype.indexOf
- indexOf 메서드는 원본 배열에서 인수로 전달된 요소를 검색하여 인덱스를 반환
- 원본 배열에 인수로 전달한 요소와 중복되는 요소가 여러 개 있으면 첫 번째로 검색된 요소의 인덱스를 반환한다
- 원본 배열에 인수로 전달한 요소가 존재하지 않으면 -1을 반환한다
- 인수가 두 개가 오면 두 번째 인수는 검색을 시작할 인덱스를 가르킨다.(예시2)
- 원본 배열에 영향을 끼치지 않는다(예시3)
- Array.prototype.indexOf의 의미 : 배열 데이터를 대괄호[ ]로 표현하여 손쉽게 만드는 리터럴 방식의 데이터 부분 뒤에 indexOf라는 속성을 붙여서 사용이 가능하다는 뜻([1,2].indexOf()로 사용이 가능함)
const arrr = [1, 2, 2, 3]
- 예시1-
arrr.indexOf(2); // 1
arrr.indexOf(4); // -1
- 예시2-
arrr.indexOf(2, 2); // -1
- 예시3-
console.log(arrr); // [1, 2, 2, 3]
- indexOf 메서드 활용 : 배열에 특정 요소가 존재하는지 확인할 때 유용하다
const foods = ['apple', 'banana', 'orange']
if(foods.indexOf('mango') == -1) {
foods.push('mango');
}
console.log(foods); // ["apple", "banana", "orange", "mango"]
- indexOf 메서드 대신 ES7에서 도입된 Array.prototype.includes 메서드를 사용할 수도 있다
Array.prototype.concat
- .concat() : 두 개의 배열 데이터를 병합해서 새로운 배열을 만드는 메소드이다
- 인수로 전달된 값들을 원본 배열의 마지막 요소로 추가한 새로운 배열을 반환한다
- concat의 인수로 숫자가 오면 concat에 붙어있는 배열에 숫자가 더해진 값을 반환한다(예시2)
- concat에 인수가 두 개가 오면, 두 번째 인수는 병합된 배열에 추가할 요소의 값이 된다(예시3)
- 인수로 전달받은 값이 배열인 경우 concat 메서드는 인수로 전달받은 배열을 해체하여 새로운 배열의 마지막 요소로 추가한다. push와 unshift와는 다르다(예시4)
- 원본의 배열 데이터가 변하지 않는다
const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banna', 'Cherry']
let result6 = numbers.concat(fruits)
console.log(reult6); // [1, 2, 3, 4, "Apple", "Banna", "Cherry"]
console.log(numbers.concat(fruits)) // [1, 2, 3, 4, "Apple", "Banna", "Cherry"]
- 원본 배열은 변경되지 않는다-
console.log(numbers) // [1, 2, 3, 4]
console.log(fruits) // ['Apple', 'Banna', 'Cherry']
-예시2-
let result7 = numbers.concat(5)
console.log(result7) // [1, 2, 3, 4, 5]
-예시3-
let result8 = numbers.concat(fruits,5)
console.log(result8) // [1, 2, 3, 4, "Apple", "Banna", "Cherry", 5]
-예시4-
const ahaha = [3, 4]
ahaha.unshift([1,2])
ahaha.push([5,6])
console.log(ahaha) // [[1, 2], 3, 4, [5, 6]]
let result10 = [1,2].concat([3,4])
console.log(result10) // [1, 2, 3, 4]
result10 = result10.concat([5,6])
console.log(result10) // [1, 2, 3, 4, 5, 6]
Array.prototype.slice
- slice 메서드는 인수로 전달된 범위의 요소들을 복사해서 배열로 반환한다
- slice는 두 개의 매개변수를 갖는다. slice(start, end)
- start : 복사를 시작할 인덱스이다.(예시1) 음수인 경우 배열의 끝에서의 인덱스를 나타낸다. 예를 들어, slice(-2)는 배열의 마지막 두 개의 요소를 복사하여 배열로 반환한다(예시2)
- end : 복사를 종료할 인덱스이다. 이 인덱스에 해당하는 요소는 복사되지 않는다. end는 생략 가능하며 생략하면 start로 전달받은 인덱스부터 모든 요소를 복사하여 배열로 반환한다(예시2)
- slice 메서드의 인수를 모두 생략하면 원본 배열의 복사본을 생성하여 반환(예시3)
- 원본 배열은 변경되지 않는다
-예시1-
const mahaha = [1, 2, 3]
let result222 = mahaha.slice(0, 1)
console.log(result222) // [1]
console.log(mahaha) // [1, 2, 3]
-예시2-
let result223 = mahaha.slice(-2)
console.log(result223) // [2, 3]
console.log(mahaha) // [1, 2, 3]
-예시3-
let result224 = mahaha.slice()
console.log(result224) // [1, 2, 3]
console.log(mahaha) // [1, 2, 3]Array.prototype.join
- join 메서드는 원본 배열의 모든 요소를 문자열로 변환한 후, 구분자로 연결한 문자열을 반환한다
- 구분자는 생략이 가능하며 기본 구분자는 콤마(',')이다
- join 메서드의 인수를 통해 구분자를 없애거나(예시2), 구분자를 없애고 공백을 삽입하거나(예시3), 콤마를 다른 구분자로 변경하는 것도 가능하다(예시4)
- 원본 배열은 변경되지 않는다
const mahaha = [1, 2, 3]
let result = mahaha.join() // "1, 2, 3"
console.log(mahaha) // [1, 2, 3]
-예시2-
let result1 = mahaha.join('')
console.log(result1) // "123"
console.log(mahaha) // [1, 2, 3]
-예시3-
let result2 = mahaha.join(' ')
console.log(result2) // "1 2 3"
console.log(mahaha) // [1, 2, 3]
-예시4-
let result3 = mahaha.join(':')
console.log(result3) // "1:2:3"
console.log(mahaha) // [1, 2, 3]
Array.prototype.include
- includes() 메서드는 붙어있는 배열데이터의 인수로 사용된 특정한 데이터가 포함이 되어 있는지 확인하여, true/false 형태로 판별 값을 반환한다
- includes()에는 인수를 두 개 사용할 수 있다. 두 번째 인수로 검색을 시작할 인덱스를 지정할 수 있다(옵션, 예시2)
- 원본 배열에 영향을 주지 않는다
const vha = [1, 2, 3, 4, 5]
let result777 = vha.includes(2)
console.log(result777) // true
console.log(vha) // [1, 2, 3, 4, 5]
-예시2-
const vha = [1, 2, 3, 4, 5]
let result778 = vha.includes(2, 3) // 배열 요소에 2가 포함되어 있는지 index 3부터 검사를 시작한다
console.log(result778) // false
console.log(vha) // [1, 2, 3, 4, 5]
Array.prototype.flat
- flat 메서드는 인수로 전달한 깊이만큼 재귀적으로 배열을 평탄화한다. 변경된 배열을 반환한다
- flat의 인수
- 인수의 기본값은 1이다. 인수를 생략할 경우 기본값 1로 인식한다(예시2)
- 중첩 배열의 평탄화할 깊이를 인수로 전달할 수 있다. 인수가 2이면 2단계 깊이까지 평타화된다는 뜻이다. 대괄호를 2개 없앤다고 생각하면 편하다(예시3)
- 인수로 Infinity를 전달하면 중첩배열 모두를 평탄화한다
- 원본 배열에는 영향을 주지 않는다
-예시1-
const p = [1, 2, [3, 4, 5]]
let result = p.flat()
console.log(result) // [1, 2, 3, 4, 5]
-예시2-
const p1 = [1, 2, [3, 4, 5]]
let result1 = p1.flat(1)
console.log(result1) // [1, 2, 3, 4, 5]
-예시3-
const p2 = [1, [2, [3, [4, [5]]]]]
let result1 = p2.flat(2)
console.log(result1) // [1, 2, 3, [4, [5]]]
console.log(p2) // [1, [2, [3, [4, [5]]]]]
let result2 = p2.flat(3)
console.log(result2) // [1, 2, 3, 4, [5]]
let result3 = p2.flat(4)
console.log(result3) // [1, 2, 3, 4, 5]
-예시3-
const a = [1, [2, [3, [4, [5]]]]].flat(Infinity)
console.log(a) // [1, 2, 3, 4, 5]
♪(^∇^*) 워-후!!（＾∀＾*）ﾉｼ