TIL(6) 배열메서드 Array.map(forEach), filter, concat, from

Array.map()

배열의 각 요소들에 대해 연산을 하여 원본 배열을 유지하고 새로운 배열로 반환 한다.

const original_array = [1, 2, 3, 4, 5]

const map_array = original_array.map(a => a+1)


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

원본 배열은 유지된다.
새로운 배열 반환.

Array.map vs Array.forEach

 

두 메서드 전부 배열의 각 요소들을 순회한다는 공통점이 있지만,

 

map 메서드는 원본 배열을 유지하고 새로운 배열로 반환시키고,

 

forEach 는 원본 배열이 바뀐다. 새로운 배열은 undefined 를 출력한다는 차이점이 있다.

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

const forEachArray = original_array.forEach((item, index) => {
  original_array[index] = item + 1
});

console.log(original_array); // [2, 3, 4, 5, 6]
console.log(forEachArray); // undefined

원본 배열이 바뀌었다.
새로운 배열은 undefined로 반환 값을 가지지 않는다.

 

Array.filter()

함수호출 문 안에서의 조건에 맞는 내용만 원본 배열을 유지하고 새로운 배열로 반환한다.

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

const forEachArray = original_array.filter((a) => {
  return a > 3
});

console.log(original_array); // [1, 2, 3, 4, 5]
console.log(forEachArray); // [4, 5]

원본 배열 유지된다.
새로운 배열 반환한다.

 

Array.concat()

배열을 합칠 때 사용하며, 원본 배열을 유지하고 새로운 배열을 반환합니다.

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

const add_array = [6, 7, 8]

const newArray = original_array.concat(add_array)


console.log("concat 전", original_array) 

//concat 전 (5) [1, 2, 3, 4, 5]

console.log("concat 후", newArray)


// concat 후 (8) [1, 2, 3, 4, 5, 6, 7, 8]

원본배열 유지, 새로운 배열 반환

 

Array.From()

유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운 배열을 만듭니다.

 

유사배열객체(array-like-object)
배열의 모습을 갖췄지만 배열이 아닌 것을 이야기합니다.

Array.isArray() 로 배열인지 아닌지 판별을 해봅니다.
유사배열은 배열과 유사하지만 배열이 아닌 것이기 때문에 false 를 출력합니다.

-> yoosaAry : false

그렇다고 isArray가 false 라고 다 유사배열이냐 아닙니다.

유사배열의 조건

1. 객체형태로 key 값이 0, 1, 2, 3 처럼 indexing이 가능해야 합니다.
2. 마지막엔 항상 length 값이 들어가야합니다.

유사배열과 기본배열의 큰 차이점은

**유사배열은 배열의 기본메서드를 사용하지 못한다는 점입니다.**

const Ary = [1, 2, 3, 4, 5]

const yoosaAry = {
  0 : "나는",
  1 : "유사",
  2 : "배열",
  3 : "입니다.",
  length:4
}

console.log(yoosaAry.length) //4

const newArray = Array.from('from') //["f", "r", "o", "m"]
console.log(newArray)

const newArray2 = Array.from([1,2,3], x => x * x) // [1, 4, 9]
console.log(newArray2)

const yoosa = Array.from(yoosaAry) // ["나는", "유사", "배열", "입니다."]
console.log(yoosa)  

console.log(Array.isArray(yoosaAry)) // false
console.log(Array.isArray(Ary)) // true
console.log(Array.isArray(yoosa)) // true