[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 9회차 미션 - 26강 배열 내장함수 splice, slice, shift, unshift, pop, concat, join, reduce

배열 내장함수2

splice와 slice

splice(index) : index부터 뒤로 쭉 다 지움. splice(index, num) : index값부터 뒤로 num갯수만큼 지움.

const numbers = [10, 20, 30, 40];
const removeNum = numbers.indexOf(30); //30이 들어있는 index인 2반환
const spliced = numbers.splice(removeNum, 2); //removeNum으로부터 2개 지우겠다, 30,40지움
console.log(spliced); //spliced로 30, 40을 배열에서 지움.
console.log(numbers); //numbers안에는 10,20만 남음.

그 다음으로 slice는 배열을 짤라낼때 사용하는데 기존의 차이점은 배열을 건드리지 않는다는 것이다.
값만 살짝 가져온다. 그래서 기존 배열은 그대로 다른데서 또 쓸 수 있다.

const numbers = [10, 20, 30, 40];
const sliced = numbers.slice(0, 2); //0부터 index 2까지 가져옴
console.log(sliced);//10, 20.
console.log(numbers);//10, 20, 30, 40 그대로 다 있음.

둘의 명백한 차이는 기존 배열을 조작하느냐, 값만 가져오느냐이다. splice는 배열조작, slice는 값만 가져오기.
잊지말고 기억하자.

shift

shift는 맨앞의 원소를 하나씩 밖으로 뺀다. shift를 계속 하면 배열의 원소가 없어질때까지 계속 뺀다.

const numbers = [10, 20, 30, 40];
const value = numbers.shift(); //맨앞의 원소를 하나씩 뺌
console.log(value); //10
console.log(numbers); //[20, 30, 40]

pop

pop은 맨뒤의 원소를 하나씩 밖으로 뺀다. shift를 계속 하면 배열의 원소가 없어질때까지 계속 뺀다.

const numbers = [10, 20, 30, 40];
const value = numbers.pop(); //맨뒤의 원소를 하나씩 뺌
console.log(value); //40
console.log(numbers); //[10, 20, 30]

unshift

unshift는 첫번째 원소 앞에 ()의 값을 추가한다. 비슷한 역할을 하는 push는 제일 뒤에 값을 추가하는데, 굳이 짝을 지어주자면
삭제 | 추가 :—: | :—: shift(앞에 원소 삭제) | unshift(앞에 원소 추가)
pop(뒤에 원소 삭제) | push(뒤에 원소 추가)
이렇게 된다. 이들은 모두 배열을 직접 조작한다.

const numbers = [10, 20, 30, 40];
numbers.unshift(5); //맨 앞에 추가
numbers.push(50); //맨 뒤에 추가
console.log(numbers); //[5, 10, 20, 30, 40, 50]

concat

두개의 배열을 합칠때 쓴다.
굉장히 직관적이고 간결하다.
아래와 같이 쓰면 된다.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const concated = arr1.concat(arr2);
// const concated = [...arr1, ...arr2] 이런것도 있다고 함.
console.log(arr1); //[1,2,3]
console.log(arr2); //[4,5,6]
console.log(concated); //[1,2,3,4,5,6]

concat은 위와 같이 기존의 배열은 건드리지 않는다. 새로운 배열을 만들어서 담을 뿐이다.

join

join은 아래와 같이 배열들을 문자열로 만들어준다.

const array = [1, 2, 3, 4, 5];
console.log(array.join()); //1,2,3,4,5
console.log(array.join(' ')); // 1 2 3 4 5
console.log(array.join('/')); // 1/2/3/4/5

join()안에 파라미터 값으로 문자열을 넣어주면 배열 사이사이에 그 문자열을 삽입해서 문자로 만들어준다.

reduce

먼저 우리는 배열 numbers의 총 합을 구하는 함수를 forEach를 써서 아래와 같이 만들 수 있다.

const numbers = [1, 2, 3, 4, 5];
let sum = 0;
numbers.forEach(n => {
    sum += n;
});
console.log(sum);

이것을 reduce라는 내장함수를 써서 만들면 더 간단히 할 수 있다.

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, current) => accumulator + current, 0);
//0+1 = 1
//1+2 = 3
//3+3 = 6
//6+4 = 10
//10+5 = 15
console.log(sum);

reduce는 위와 같이 한줄로 해결 가능하다. 첫번째 파라미터에는 누적값(accumulator)과 현재값(current)을 받아와주고, 끝에는 누적시킬때의 초기값(0)을 넣어준다.
이 코드가 실행되는 순서를 보면 첫번째로 accumulator에는 초기값인 0이 들어가고 current에는 배열의 첫째값 1이 들어가서 둘이 함수안의 내용을 연산한다. 그리고 그 결과값을 accumulator에 누적시킨다.
다시 accumulator의 값과 current에 들어간 두번째 배열값 2가 들어가서 연산하고 또 누적한다.
이런식으로 모든 배열의 값을 다 거칠때까지 연산을 반복한다.(주석참고) 좀 더 들어가보면 reduce에는 두가지 파라미터값을 더 쓸 수 있다.
바로 index와 array다. index는 각 돌아가고 있는 배열의 index순서를 의미하고 array는 배열 자기 자신을 가리킨다. 결국 이 두가지로 아래와 같이 평균값을 구하는 코드를 만들어 볼 수도 있다.

const numbers = [1, 2, 3, 4, 5];
const avg = numbers.reduce((accumulator, current, index, array) => {
  if(index === array.length -1){//조건 : 마지막으로 실행되는 배열값이라면.
    return(accumulator + current) / array.length; //누적값에 현재값을 더하고 배열갯수만큼 나눠라.
  }
  return accumulator + current; // 조건이 아니라면 그냥 누적값에 현재값을 더해라.
}, 0);
console.log(avg);

아래와 같이 문자열의 갯수를 세는 함수도 만들 수 있다.

const alphabets = ['a', 'b', 'c', 'd', 'e'];
const alphabets = ['a', 'a', 'a', 'b', 'c', 'd', 'e'];
const counts = alphabets.reduce((acc, current) => {
    if(acc[current]){ //a['a']가 존재 한다면
        acc[current] += 1; //a에 1을 더해라
    }else{
        acc[current] = 1; //더 없으면 그냥 1
    }
    return acc;
},{}); // {}비어있는 객체를 초기화로 시작하겠다는 말. acc가 돌면서 객체에 담는다

console.log(counts) //{a:3, b:1, c:1, d:1, e:1}

reduce함수는 정말 많이 쓴다. 그러므로 꼭 기억하고 있기!

복습

앞서 많은 배열을 배웠다. forEach(각원소에 대해 반복적으로 호출), map(모든원소를 다른 원소로 변환할때), indexOf(특정원소의 인덱스값), findexIndex(조건에 만족하는 원소가 몇번짼지 찾을때), find(조건에 만족하는 객체 자체를 반환), filter(특정 조건을 만족하는 것들을 배열로 만들 때), splice(특정 인덱스에서 몇개 지울때 사용), slice(어디부터 어디까지 짤라내겠다. 기존 배열 안건드림), shift(맨 왼쪽에 있는걸 바깥으로 꺼냄, 기존배열 건드림), pop(맨 오른쪽), unshift(왼쪽에 추가), concat(배열을 문자열로), reduce(acc누적값을 통해 총합을 구해주는 함수)

퀴즈

10보다 큰 숫자의 갯수를 반환하는 함수 만들기
나는 forEach로 풀었다.

function countBiggerThenTen(numbers){
  let counts = 0;
  numbers.forEach(n => {
    if(n > 10){
      counts += 1;
    };
  });
  return counts;
}
const count = countBiggerThenTen([1, 2, 3, 4, 5, 10, 20, 30, 40, 50, 60]);
console.log(count);

filter가 훨씬 간단하긴 하네..

function countBiggerThanTen(numbers) {
  return numbers.filter(n => n > 10).length;
}

const count = countBiggerThanTen([1, 2, 3, 5, 10, 20, 30, 40, 50, 60]);
console.log(count); // 5

여기선 굳이 reduce까진 필요없어 보이지만..
정답은 아래와 같당.

function countBiggerThenTen(numbers){
  return numbers.reduce((acc,current) => {
    if(current > 10){
      return acc + 1;
    }else{
      return acc;
    }
  },0);
}
const count = countBiggerThenTen([1, 2, 3, 4, 5, 10, 20, 30, 40, 50, 60]);
console.log(count);

마치면서

다 외울 필요까진 없고 각 내장함수가 어떤 역할을 하는지만 기억해놨다가 vsc의 자동완성 및 설명을 봐가면서 쓸 수 있으면 된다고 한다. 그러니깐 부담이 좀 덜하긴 하는데.. 개인적인 스타일로는 생각나는 코드를 빨리빨리 쓰는 편이라 앵간한건 외워야 직성이 풀려서.. 왠지 reduce나 forEach를 엄청 쓸것 같다. 이상. 시청 영상 26강 26~30까지

프론트엔드 개발 올인원 패키지 with React Online. 👉 https://bit.ly/31Cf1hp