JS 배열 필수함수 (Array Function)

글 작성 동기?

최근에 프로그래밍 공부법에 관한 책을 읽고 있는데,,, 그 책에서 무언가를 인출하는 과정이 프로그래밍 학습에서 매우 중요하다고 설명하고 있었습니다.

자바스크립트에는 여러 배열함수가 많고, 막상 눈으로만 보고 인출 과정을 거쳐보지 않았음을 느껴서, 글을 작성하며 공부하였습니다

 

 

 

1. map()

const num = [1, 2, 3, 4];
//num배열을 2배로
const numx2 = num.map((el) => el * 2);
console.log(numx2); //[ 2, 4, 6, 8 ]

원소를 하나하나 꺼내서 재구성

 

 

 

2.filter()

const num = [1, 2, 3, 4];
//num배열을 2이상 값만
const numGrater2 = num.filter((el) => el >= 2);
console.log(numGrater2); // [ 2, 3, 4 ]

특정 조건에 만족하는 것만!! 재구성

 

 

 

3.find()

const num = [1, 2, 3, 4];
//num배열 2보다 큰값 뭔가요?
const numCheck = num.find((el) => el > 2);
console.log(numCheck); //3

특정 조건 만족하는 값 찾기

말그대로 find!

 

 

 

4.findIndex()

const num = [1, 2, 3, 4];
//num배열 2보다 큰값 index?
const numCheck = num.findIndex((el) => el > 2);
console.log(numCheck); //2

find랑 매우 비슷하지만 이건 (특정 만족하는 값의) index

말그대로 findIndex!

 

 

 

5.concat()

const num = [1, 2, 3, 4];
//배열 합치기
const num2 = [5, 6, 7, 8];
const numConcat = num.concat(num2);
console.log(numConcat);
/*
[
  1, 2, 3, 4,
  5, 6, 7, 8
]
*/
const s1 = "123";
const s2 = "456";
console.log(s1.concat(s2)); //123456

배열을 합칠 수 있습니다.

java에 concat이 있는게 기억나서 문자열에도 써봤는데 적용됐습니다~

 

 

6.slice()

const num = [1, 2, 3, 4];
//배열 slice
const numSlice = num.slice(1);

console.log(numSlice); //2, 3, 4

이름그대로 배열을 slice합니다.

인자에 주어진 값을 기준으로 짤라서 그 이후의 값들을 나타냅니다.

 

 

7.splice()

const num = [1, 2, 3, 4];
//배열 splice
const numSplice = num.splice(1, 2);

console.log(numSplice); //2, 3

slice와 아주 유사한데, 몇개 짜를지 지정할 수 있습니다.

 

 

8.reduce()

const num = [1, 2, 3, 4];
//배열 reduce
const numReduce = num.reduce((a, b) => a + b, 0);

console.log(numReduce); //10

const numReduce2 = num.reduce((a, b) => a + b, 5); //5는 초기값

console.log(numReduce2); //15

//배열 최대값 구하기

//const numReduceMax = num.reduce((a, b) => (a > b ? a : b));
const numReduceMax = num.reduce((a, b) => {
  return a > b ? a : b;
});
console.log(numReduceMax); // 4

reduce(callback, 초기값)안에 인자를 넣어주는데,

첫 더하기 예제 같은경우 0+1+2+3+4로 계속 이전값에다가, 다음값을 콜백으로 불러와서 호출합니다.

0, 1

1(0+1), 2

3(1+2), 3

6(3+3), 4 => 10

이런식으로 호출 합니다.