Javascript 새로운 배열을 반환하는 배열 내장함수

console.log('hihi');

배열의 내장함수를 사용하다가 간혹 햇갈린다

이 놈이 원래 배열에 영향을 끼쳤나? 원래 배열을 바꾸지 않고 기능을 하는 함수인가?

뭐가 더 많을지 모르겠다.

원래 배열에 영향을 끼치지 않는 함수가 더 많으면

영향을 주는 놈들만 외우면 될텐데..

일단은 영향을 주지 않는 놈들만 정리해보자 한다.

즉 이 놈들은 출력 값이 새로운 배열이고
따로 이 출력 값을 저장을 해놓지 않으면 쓰기 불편하게 될 것이다.

! 거의 모든 내용은 MDN 을 참고로 한다 !

1. concat();  -> 이 놈은 arr1.concat(arr2); 이런식으로 해서 arr1, arr2에 영향을 주지 않고 새로운 배열을 내 뱉는다

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

 

2. filter(); -> 요 놈은 주어진 함수의 테스트를 통과한 값들로 새로운 배열을 만들어준다.

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
let resultArr = arr.filter(number => number % 2 === 0);
console.log(resultArr); // [2, 4, 6, 8, 0]

 

3. map(); -> 이 놈은 위의 filter와 거의 동일하게 사용하는데,  주어진 함수의 결과값들을 모아서 새로운 배열을 만든다.

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
let resultArr = arr.map(number => number + 2);
console.log(resultArr); // [3, 4, 5, 6, 7, 8, 9, 10, 11, 2]

 

4. slice(); -> 이 놈은 배열에서 시작과 끝을 정하고 그 부분을 뽑아낸 새로운 배열을 만든다.
얘가 좀 골때리고 햇갈리는게 있다.
만약 arr = [ 'a', 'b', 'c', 'd', 'e', 'f', 'g'] 여기서 arr.slice(3, 5); 라고 한다면
앞의 3은 인덱스인 'd'를 의미하는거고,  뒤에 5는 처음에서부터 5번째 인 'e'를 의미한다.
즉 arr.slice(3,4); 라고하면 결과가 ['d'] 이렇게 하나가 나오게 된다. slice( *컴퓨터가 세는 법* , *사람이 세는 법* ); 이런 느낌?

let arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
let resultArr = arr.slice(3, 5);
console.log(resultArr); // ['d', 'e']

---

위에는 각 함수를 func() 라고 칭한다면 Array.prototype.func() 에 해당하고 아래는 그냥 Array.func() 이다.

---

5. from(); -> 이것은 '유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운 Array 객체를 만듭니다.'
라고 MDN에 나와있다. 배열같이 생겼는데 배열은 아닌 것들과 반복 가능한 객체...
javascript에서 배열은 객체이기 때문에 반복 가능한 객체에 해당한다. 맞겠지? ?!

console.log(Array.from('efilrups'));
//["e", "f", "i", "l", "r", "u", "p", "s"]

console.log(Array.from([1, 2, 3], x => x * 5));
//[5, 10, 15]

뭐지.. 분명 이 아래 주소 MDN 에서 왼쪽 Methods 항목을 하나씩 눌러보면서 찾았는데

새로운 '배열'을 반환하는 함수는 이렇게 5개 밖에 없다. 

제발 5개가 끝이길 빈다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

감사합니다. MDN!

글을 다 쓰고나니 페퍼로니 피자에 시워언한 맥주가 생각난다.

 

console.log('See YA! World~');