TIL 67 | 배열2(배열 메서드1)

배열 메서드(배열 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]