JS Array 배열 메서드 1/2

✔ Array.of

es6에서 도입된 Array.of 메서드는 전달된 인수를 요소로 갖는 배열을 생성합니다. Array.of는 Array 생성자 함수와 다르게 전달된 인수가 1개이고 숫자이더라도 인수를 요소로 갖는 배열을 생성합니다.

Array.of(1) // [1]

Array.of(1,2,3) // [1,2,3]

Array.of("string") // ["string"]

✔ Array.from
es6에서 도입된 Array.from 메서드는 유사 배열 객체 또는 이터러블 객체를 인수로 전달받아 배열로 변환하여 반환합니다.

Array.from({length: 2, 0: "a", 1: "b"}) // ["a","b"]

Array.from("Hello") // ["H","e","l","l","o"]

두 번째 인수로 전달한 콜백 함수를 통해 값을 만드련서 요소를 채울 수 있습니다. Array.from 메서드는 두 번째 인수로 전달한 콜백 함수에 첫 번째 인수에 의해 생성된 배열의 요소값과 인덱스를 순차적으로 전달하면서 호출하고, 콜백 함수의 반환값으로 구성된 배열을 반환합니다.

Array.from({lengrth: 3}) // [undefined, undefined, undefined]

Array.from({length:3}, (_, i ) => i ) // [0, 1, 2]

✔ Array.isArray
Array 생성자 함수의 정적 메서드입니다.전달된 인수가 배열이면 true, 배열이 아니면 false를 반환합니다.

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

//false
Array.isArray()
Array.isArray({})
Array.isArray(null)
Array.isArray(undefined)
Array.isArray(1)
Array.isArray("Array")

✔ Array.prototype.indexOf
원본 배열에서 인수로 전달된 요소를 검색하여 인덱스를 반환합니다.

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

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

arr.indexOf(2) // 1
arr.indexOf(4) // -1
arr.indexOf(2,2) // 2

indexOf 메서드는 배열에 특정 요소가 존재하는지 확인할 때 유용합니다.

const foods = ['apple', 'banana' , 'orange']

if(foods.indexOf("banana") === -1){
foods.push("banana")
}

console.log(foods) // ['apple', 'banana' , 'orange']

🎉indexOf 메서드 보다 es7에서 도입된 Array,prototype.includes 메서드를 사용하면 가독성이 더 좋습니다.

const foods = ['apple', 'banana' , 'orange']

if(!foods.includes("banana")){
foods.push("banana")
}

console.log(foods) // ['apple', 'banana' , 'orange']

✔ Array.prototype.push
push 메서드는 인수로 전달받은 모든 값을 원본 배열의 마지막 요소로 추가하고 변경된 length 프로퍼티 값을 반환합니다. push 메서드는 원본 배열을 직접 변경합니다.

const arr = [1,2]

let result = arr.push(3,4)
console.log(result) // 4

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

push 메서드는 성능 면에서는 좋지 않습니다. 마지막 요소를 추가할 요소가 하나뿐이라면 push 메서드를 사용하지 않고 length 프로퍼티를 사용해 직접 추가합니다. push 메서드 보다 빠릅니다.

const arr = [1,2]

arr[arr.length] = 3
console.log(arr) // [1,2,3]

push 메서드는 원본 배열을 직접 변경하는 부수 효과가 있습니다. 따라서 push 메서드 보다는 es6 스프레드 문법을 사용하는 편이 좋습니다. 스프레드 문법을 사용한다면 마지막 요소를 추가하면서 부수 효과도 없습니다.

const arr = [1,2]

const newArr = [...arr, 3]
console.log(newArr) // [1,2,3]

✔ Array.prototype.pop
pop 메서드는 원본 배열에서 마지막 요소를 제거하고 제거한 요소를 반환합니다. 원본 배열이 빈 배열이면 undefined를 반환합니다. pop 메서드는 원본 배열을 직접 변경합니다.

const arr = [1,2]

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

console.log(arr) // [1]

✔ Array.prototype.unshift
인수로 전달받은 모든 값을 원본 배열의 선두에 요소로 추가하고 변경된 length 프로퍼티값을 반환합니다. unshift 메서드는 원본 배열을 직접 변경합니다.

const arr = [1,2]

let result = arr.unshift(3,4)
console.log(result) // 4

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

unshift 메서드도 원본 배열을 직접 변경하기 때문에 push와 같이 부수 효과가 필요 없다면 스프레드 문법을 사용합니다.

const arr = [1,2]

const newArr = [3, ...arr]
console.log(newArr) // [3,1,2]

✔ Array.prototype.shift
원본 배열에서 첫 번째 요소를 제거하고 제거한 요소를 반환합니다. 원본 배열이 빈 배열이면 undefined를 반환합니다. shift 메서드는 원본 배열을 직접 변경합니다.

const arr = [1,2]

let result = arr.shift();
console.log(result) // 1

console.log(arr) // [2]

✔ Array.prototype.concat
인수로 전달된 값들(배열 또는 원시값)을 원본 배열의 마지막 요소로 추가한 새로운 배열을 반환합니다. 인수로 전달한 값이 배열인 경우 배열을 해체하여 새로운 배열의 요소로 추가합니다. 원본 배열은 변경되지 않습니다.

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

result = arr1.concat(3)
console.log(result) // [1,2,3]

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

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

push, unshift 메서드는 concat으로 대체할수 있습니다. 유사하지만 미묘한 차이가 있습니다.

• push와 unshift 메서드는 원본 배열을 직접 변경하지만 concat 메서드는 원본 배열을 변경하지 않고 새로운 배열을 반환합니다.

const arr1 = [3,4]

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

arr.push(5,6)
console.log(arr1) // [1,2,3,4,5,6]


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

// arr1.push(5,6)를 다음과 같이 대체할 수 있습니다.
result = result.concat(5,6)
console.log(result) // [1,2,3,4,5,6]

인수로 전달받은 값인 경우 pushmunshift 메서드는 배열을 그대로 원본 배열의 마지막/첫 번째 요소로 추가하지만 concat 메서드는 인수를 전달받은 배열을 해체하여 새로운 배열의 마지막 요소에 추가합니다.

const arr = [3,4];

arr.unshift([1,2])
arr.push([5,6])
console.log(arr) // [[1,2],3,4,[5,6]]

let result = [1,2].concat([3,4])
result = result.concat([5,6])

console.log(result) // [1,2,3,4,5,6]

concat은 스프레드 문법으로 대체할수 있습니다

let result = [1,2].concat([3,4])
console.log(result) // [1,2,3,4]

result = [...[1,2], ...[3,4]]
console.log(result) // [1,2,3,4]

✔ Array.prototype.splice
push, pop, unshift, shift 메서드는 모드 원본 배열을 직접 변경하는 메서드이며 원본 배열의 처음이나 마지막에 요소를 추가/제거 합니다. 원본 배열의 중간에 요소를 추가하거나 중간에 있는 요소를 제거하는 경우 splice 메서드를 사용합니다.
3개의 매개변수가 있으며 원본 배열을 직접 변경합니다.

• start: 원본 배열의 요소를 제거하기 시작할 인덱스 입니다. start만 지정하면 원본 배열의 start 부터 모든 요소를 제거합니다. start가 음수인 경우 배열의 끝에서의 인덱스를 나타냅니다. 만약 start가 -1이라면 마지막 요소를 가르키고 -n 이면 마지막에서 n번째 요소를 가르킵니다.
• deleteCount : 원본 배열의 요소를 제거하기 시작할 인덱스인 start 부터 제거할 요소의 개수입니다. deleteCount가 0인 경우 무런 요소도 제거되지 않습니다. (옵션)
• items: 제거한 위치에 삽입할 요소의 목록입니다. 생략할 경우 원본 배열에서 요소들을 제거하기만 합니다. (옵션)

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

const result = arr.splice(1,2,20,30)

console.log(result) // [2,3]
console.log(arr) // [1,20,30,4]

splice 메서드의 두 번째 인수, 즉 제거할 요소의 개수를 0으로 지정하면 아무런 요소도 제거하지 않고 새로운 요소를 삽입합니다.

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

const result = arr.splice(1,0,100)

console.log(arr) // [1, 100, 2, 3, 4]
console.log(result) // []

splice 메서드의 두 번째 인수, 즉 제거할 요소의 개수를 생략하면 첫 번째 인수로 전달된 시작 인덱스부터 모든 요소를 제거합니다.

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

const result = arr.splice(1)

console.log(arr) // [1]
console.log(result) // [2,3,4]

배열에서 특정 요소를 제거하려면 indexOf 메서드를 통해 특정 요소의 인덱스를 취득한 다음 splice 메서드를 이용합니다.

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


funcstion remove(arr, item){
 const index = arr.indexOf(item)
 
 if(index !== -1) arr.splice(index, 1);
  
 return arr;
}
  
console.log(remove(arr,2)) // [1,3,1,2]
console.log(remove(arr,19)) // [1,3,1,2]

filter 메서드를 사용해 특정 요소를 제거할 수도 있습니다.
이 방법은 원본 배열을 변경 하지 않습니다.

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

function removeAll(arr, index) {
  return arr.filter((v) => v !== index);
}

console.log(removeAll(arr, 2)); // [ 1, 3, 1 ]
console.log(arr); // [ 1, 2, 3, 1, 2 ]

✔ Array.prototype.spice
인수로 전달된 범위의 요소들을 복사하여 배열로 반환합니다. 원본 배열은 변경되지 않습니다. 이름이 유사한 splice는 원본 배열을 변경하므로 주의하기 바랍니다.
slice는 두개의 매개변수를 받습니다.

• start: 복사를 시작할 인덱스입니다. 음수인 경우 배열의 끝에서의 인덱스를 나타냅니다. 예를 들어. slice(-2)는 배열의 마지막 두 개의 요소를 복사하여 배열로 반환합니다.
• end: 복사를 종료할 인덱스입니다. 이 인덱스에 해당하는 요소는 복사되지 않습니다. end는 생략 가능하며 생략 시 기본값은 length 프로퍼티 값입니다.

const arr = [1, 2, 3];

arr.slice(0, 1); // [1]

arr.slice(1, 2); // [2]

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

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

const arr = [1, 2, 3];

arr.slice(1) // [2,3]

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

const arr = [1, 2, 3];

arr.slice(-1); // [3]

arr.slice(-2); // [2,3]

인수를 모두 생략하면 원본 배열의 복사본을 생성하여 반환합니다.
이때 생성된 복사본은 얕은 복사를 통해 생성됩니다.

const arr = [1, 2, 3];

const copy = arr.slice();
console.log(copy); // [1,2,3]
console.log(copy === arr); // false

이때 생성된 복사본은 얕은 복사를 통해 생성됩니다.
참조값이 다른 별개의 객체

const todos = [
  { id: 1, content: "html", completed: flase },
  { id: 2, content: "js", completed: true },
  { id: 3, content: "css", completed: flase },
];

const _todos = todos.slice();

// 참조값이 다른 별개의 객체입니다.
console.log(_todos === todos); // false

// 배열 요소의 참조갑이 같습니다. 즉, 얕은 복사입니다.
console.log(_todos[0] === todos[0]); // true

✔ Array.prototype.join
원본 베열의 모든 요소를 문자열로 변환한 후, 인수로 전달받은 문자열, 즉 구분자로 연결한 문자열을 반환합니다. 구분자는 생략 가능하며 기본 구분자는 콤마(,)입니다.

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

arr.join() // "1,2,3,4"
arr.join('') // '1234' 
arr.join(":") // "1:2:3:4" 

✔ Array.prototype.reverse
원본 배열의 순서를 반대로 뒤집습니다. 이때 원본 배열이 변경됩니다. 반환값은 변경된 배열입니다.

const arr = [1, 2, 3];
const result = arr.reverse();

console.log(arr); // [3,2,1]
console.log(result); // [3,2,1]