✔️Array method

---

• 배열에 원본 배열(배열 메서드를 호출한 배열, 즉 배열 메서드의 구현체 내부에서 this 가 가리키는 객채)을 직접 변경하는 메서드(mutator method) 와 원본 배열을 직접 변경하지 않고 새로운 배열을 생성하여 반환하는 메서드(accessor method) 가 있다.
• ES5부터 도입된 배열 메서드는 대부분 원본 배열을 직접 변경하지 않지만 초창기 배열 메서드는 원본 배열을 직접 변경하는 경우가 많다.
• 원본 배열을 직접 변경하는 메서드는 외부 상태를 직접 변경하는 부수 효과가 있으므로 사용할 때 주의해야 한다.

• 가급적 원본 배열을 직접 변경하지 않는 메서드(accessor method)를 사용하는 편이 좋다.

📌1. Array.isArray

• Array.isArray(arg:any) : boolean , ES5문법
• 정적 메서드 Array.isArray는 주어진 인수가 배열이면 true, 배열이 아니면 false를 반환한다.

//true
Array.isArray([]);
Array.isArray([1, 2]);

//false
Array.isArray();
Array.isArray(1);

📌2. Array.from

• ES6문법
• 유사 배열 객체(array-like object) 또는 이터러블 객체(iterable object)를 변환하여 새로운 배열을 생성한다.

//이터러블
const arr1 = Array.from('SHORRY');
console.log(arr1);  // ['S', 'H', 'O', 'R', 'R', 'Y']

// 유사 배열 객체
const arr2 = Array.from({ length: 2, 0: 'a', 1: 'b'});
console.log(arr2);  // ['a', 'b']

📌3. Array.of

• ES6문법
• 전달된 인수를 요소로 갖는 배열을 생성한다.
• Array 생성자 함수와는 다르게 전달된 인수가 1개이고 숫자이더라도 인수를 요소로 갖는 배열을 생성한다.

const arr1 = Array.of(1);
console.log(arr1);  // [1]
const arr2 = Array.of(1, 2, 3);
console.log(arr2);  // [1, 2, 3]

📌4. Array.prototype.indexOf

• Array.prototype.indexOf(searchElement: T, fromIndex?: number): number, ES5문법
• 원본 배열에서 인수로 전달된 요소를 검색하여 인덱스를 반환한다.
  • 중복된 요소가 있을 경우 : 첫번째 인덱스 반환
  • 해당 요소가 없는 경우 : -1 반환
• this(원본배열) 을 변경하지 않는다.

const arr1 = [1, 2, 2, 3];
arr.indexOf(2);     // 1
arr.indexOf(4);     // -1
// 두번째 인수는 검색을 시작할 인덱스를 설정한다.
arr.indexOf(2, 2);  // 2

// indexOf 메소드는 배열에 요소가 존재하는지 여부를 확인할 때 유용하다.
// ES7에 새롭게 도입된 Array.prototype.includes 메소드를 사용하면,
// indexOf 보다 가독성이 높다.
if(arr.indexOf(4) === -1) {
  arr.push(4);
}
console.log(arr1);  // [1, 2, 2, 3, 4]

📌5. Array.prototype.includes

• ES7문법

// 위의 Array.prototype.indexOf 메소드를 사용한 방법과 서로 비교해보자.
// cf) arr.indexOf(4) === -1     VS     !arr.includes(4)
const arr1 = [1, 2, 2, 3];

if(!arr.includes(4)) {
  arr.push(4);
}
console.log(arr1);  // [1, 2, 2, 3, 4]

📌6. Array.prototype.concat

• Array.prototype.concat(…items: Array<T[] | T>): T[], ES3문법
• 인수로 전달된 값들(배열 또는 값)을 원본 배열의 마지막 요소로 추가한 새로운 배열을 반환한다.
• this(원본배열) 을 변경하지 않는다.

const arr1 = [1, 2];
const arr2 = [3, 4];

let newArr1 = arr1.concat(arr2);
console.log(newArr1);  // [1, 2, 3, 4]

let newArr2 = arr1.concat(3);
console.log(newArr2);  // [1, 2, 3]

let newArr3 = arr1.concat(arr2, 5);
console.log(newArr3);  // [1, 2, 3, 4, 5]

📌7. Array.prototype.join

• Array.prototype.join(separator?: string): string, ES1문법
• 원본 배열의 모든 요소를 문자열로 변환한 후, 인수로 전달받은 값, 즉 구분자(separator)로 연결한 문자열을 반환한다.
• 구분자는 생략이 가능하며 기본 구분자는 ,이다.
• this(원본배열) 을 변경하지 않는다.

const arr = [1, 2, 3, 4];

const newArr1 = arr.join();
console.log(newArr1);  // '1,2,3,4'

const newArr1 = arr.join('');  // ''사이 공백 x
console.log(newArr1);  // '1234'

📌8. Array.prototype.push

• Array.prototype.push(…items: T[]): number, ES3문법
• 인수로 전달받은 모든 값을 원본 배열의 마지막 요소로 추가하고 변경된 length 값을 반환한다.
• this(원본배열) 을 변경한다.

const arr1 = [1, 2];

const newPush = arr1.push(3,4);
console.log(newPush);  // 4

// 원본 배열을 직접 변경한다.
console.log(arr1);  // [1, 2, 3, 4]

push vs concat

• 원본 배열을 변경하지 않는 concat 메서드와 비교해보자.

const arr2 = [1, 2];

const newConcat = arr2.concat(3, 4);
console.log(newConcat);  // [1, 2, 3, 4]

// 원본 배열 변경 x
console.log(arr2);  // [1, 2]

• 인수로 전달받은 값이 배열인 경우, push 메서드는 배열을 그대로 원본 배열의 마지막 요소로 추가하지만, concat 메서드는 배열을 해체하여 새로운 배열의 마지막 요소에 추가한다.

// push
const arr1 = [1, 2];
arr1.push([3, 4]);

console.log(arr1);  // [1, 2, [3, 4]]

// concat
const arr2 = [1, 2];
const newConcat = arr2.concat([3, 4]);

console.log(newConcat);  // [1, 2, 3, 4]

more about push method

• push 메서드는 성능면에서 좋지 않아서, length 프로퍼티를 사용하여 직접 요소를 추가하는 것이 더 빠르다.
• push 메서드를 이용해서 원본 배열을 직접 변경하기보단, ES6의 spread 문법을 사용하는 편이 좋다.

//length property
const arr1 = [1, 2];
// arr.push(3)와 동일한 처리. but push 메서드 보다 빠르다.
arr[arr.length] = 3;

// ES6 spread 문법
const arr2 = [1, 2];
const newArr = [...arr2, 3];

📌9. Array.prototype.pop

• Array.prototype.pop(): T | undefined, ES3문법
• 원본 배열에서 마지막 요소를 제거하고 제거한 요소를 반환한다.
  • 원본 배열이 빈 배열일 경우 : undefined반환
• this(원본배열) 을 변경한다.

const arr = [1, 2];

let result = arr.pop();
console.log(result);  // 2

// 원본 배열을 직접 변경한다.
console.log(arr);  // 1

Stack(스택)

• 스택은 데이터를 마지막에 밀어넣고push, 마지막에 넣은 데이터를 먼저 꺼내는pop '후입 선출(LIFO - Last In First Out) 방식의 자료 구조' 이다.

📌10. Array.prototype.reverse

• Array.prototype.reverse(): this, ES1문법
• 배열 요소의 순서를 반대로 변경한다.
  (원본 배열이 변경되므로 반환값과 원본배열 둘 다 반대로 변경된 배열이 된다.)
• this(원본배열) 을 변경한다.

const arr1 = [1, 2, 3];
const arrR = arr1.reverse();

// 원본 배열이 변경된다.
console.log(arr1);  // [3, 2, 1]
console.log(arrR);  // [3, 2, 1]

📌11. Array.prototype.shift

• Array.prototype.shift(): T | undefined, ES3문법
• 배열에서 첫 요소를 제거하고 제거한 요소를 반환한다.
  • 원본 배열이 빈 배열일 경우 : undefined 반환
• this(원본배열) 을 변경한다.

const arr1 = [1, 2, 3];
const arrS = arr1.shift();

// 원본 배열이 변경된다.
console.log(arr1);  // [2, 3]
console.log(arrS);  // 1

QUEUE(큐)

• shift는 push와 함께 배열을 큐(선입선출, FIFO: First In First Out)처럼 동작하게 한다.

📌12. Array.prototype.unshift

• 인수로 전달 받은 모든 값을 원본 배열의 선두에 요소로 추가하고 변경된 length 프로퍼티 값을 반환한다.
• this(원본배열) 을 변경한다.

const arr1 = [1, 2, 3];
let result = arr1.unshift(4, 5);

// 원본 배열이 변경된다.
console.log(result);  // 5
console.log(arr1);    // [4, 5, 1, 2, 3]

📌13. Array.prototype.slice

• Array.prototype.slice(start=0, end=this.length): T[], ES3문법
• 인자로 지정된 배열의 부분을 복사하여 반환한다.
• 첫번째 매개변수 start 부터 매개변수 end에 해당하는 인덱스를 가진 요소 전까지 복사된다.
• this(원본배열) 을 변경하지 않는다.

• 매개변수
  • start
    복사를 시작할 인덱스, 음수인 경우 배열의 끝에서의 인덱스를 나타낸다.
  • end
    옵션이며 기본값은 length 값이다.

const arr = [1, 2, 3, 4, 5];

let resSlice = arr.slice(0, 2);
console.log(resSlice);  // [1, 2]

resSlice = arr.slice(2);
console.log(resSlice);  // [3, 4, 5]

resSlice = arr.slice(-2);
console.log(resSlice);  // [4, 5]

// 원본 배열 arr의 새로운 복사본을 생성한다.
// 이때 원본 배열의 각 요소를 얕은 복사(shallow copy)한다.
resSlice = arr.slice();
console.log(resSlice);  // [1, 2, 3, 4, 5]
console.log(resSlice === arr);  // false (얕은 복사 이므로)

// 원본 배열이 변경되지 않는다.
console.log(arr);  // [1, 2, 3, 4, 5]

📌14. Array.prototype.splice

• Array.prototype.splice(start: number, deleteCount=this.length-start, …items: T[]): T[] , ES3문법
• 기존의 배열의 요소를 제거하고 그 위치에 새로운 요소를 추가한다.
• 배열의 중간에 새로운 요소를 추가할 때도 사용 된다.
• 가장 일반적인 사용은 배열에서 요스를 삭제할 때다.
• this(원본배열) 을 변경한다.

• 매개변수
  • start
    배열에서의 시작 위치.
    start만 지정하면 배열의 start부터 모든 요소를 제거한다.
  • deleteCount (선택)
    시작위치부터 제거할 요소의 수이다.
    0인 경우 아무런 요소도 제거되지 않는다.
  • items (선택)
    삭제한 위치에 추가될 요소들이다.
    아무런 요소도 지정하지 않을 경우, 삭제만 한다.

// 요소 제거
const arr1 = [1, 2, 3, 4];
const res1 = arr.splice(1, 2);
//원본 배열을 변경한다.
console.log(arr1);  // [1, 4]
console.log(res1);  // [2, 3]


// 요소 제거 후 새로운 요소 추가
const arr2 = [1, 2, 3, 4];
const res2 = arr.splice(1, 2, 20, 30);
//원본 배열을 변경한다.
console.log(arr1);  // [1, 20, 30, 4]
console.log(res1);  // [2, 3]


// 새로운 요소 추가
const arr3 = [1, 2, 3, 4];
const res3 = arr.splice(1, 0, 20);
//원본 배열을 변경한다.
console.log(arr1);  // [1, 20, 2, 3, 4]
console.log(res1);  // []

---

Reference

• https://poiemaweb.com/js-array

---

---

Word of the day

Array method BOMB....

End.