[JavaScript] - 배열 내장함수

Lee Jeong Min·2021년 7월 20일
0
post-thumbnail

📌 22. 배열 내장함수 - forEach

배열내장함수 --> 배열을 다룰 때 알고있으면 유용함

superheroes안의 값들을 가져오는 방법이 엄청 다양함. for문을 통해 가져오는 방법도 있고 forEach를 통해 function이나 화살표 함수와 같이 사용하여 가져올 수 있음.


📌 23. 배열 내장함수 - map

map
배열이 있을 때 그 안의 내용을 가지고 전체적으로 변환을 하고 싶을 때 사용하는 함수

이것을 통해 array의 원소값들을 제곱하여 squared라는 배열에 담음

객체 배열중에 텍스트로만 이루어진 배열을 만들고 싶을 때, 위와 같이 map함수를 이용하여 만듦

indexOf

const superheroes = ["아이언맨", "캡틴 아메리카", "토르", "닥터 스트레인지"];
const index = superheroes.indexOf("토르");
console.log(index);

배열 내의 원소의 위치를 알고 싶을 때 사용하는 함수
배열내에 일치하는 게 없을 경우 -1 반환
중복이 있을 경우 처음으로 만족하는 값을 가져옴

findIndex

const todos = [
  {
    id: 1,
    text: "자바스크립트 입문",
    done: true
  },
  {
    id: 2,
    text: "함수 배우기",
    done: true
  },
  {
    id: 3,
    text: "객체와 배열 배우기",
    done: true
  },
  {
    id: 4,
    text: "배열 내장함수 배우기",
    done: false
  }
];

const index = todos.findIndex((todo) => todo.id === 3);
console.log(index);

배열 안의 값들이 객체이거나 특정 조건을 확인해야 하는 경우 findIndex함수를 사용하는 것이 좋다.
반환 값으로 그 조건에 만족하는 위치의 값을 알려줌
파라미터 값으로 함수를 사용하며 배열 원소 중 중복이 있을 경우 처음으로 만족하는 값을 가져옴

find

const todos = [
  {
    id: 1,
    text: "자바스크립트 입문",
    done: true
  },
  {
    id: 2,
    text: "함수 배우기",
    done: true
  },
  {
    id: 3,
    text: "객체와 배열 배우기",
    done: true
  },
  {
    id: 4,
    text: "배열 내장함수 배우기",
    done: false
  }
];

const todo = todos.find((todo) => todo.id === 3);
console.log(todo);

find의 경우 findIndex와 마찬가지로 함수를 파라미터로 받고 원소의 위치 대신 객체 그 자체를 반환 한다.(객체 중 id가 3인 객체 반환)


📌 24. 배열 내장함수 - filter

특정 조건을 만족하는 원소들을 찾아서 그 원소들을 가지고 새로운 배열을 만드는 것

const todos = [
  {
    id: 1,
    text: "자바스크립트 입문",
    done: true
  },
  {
    id: 2,
    text: "함수 배우기",
    done: true
  },
  {
    id: 3,
    text: "객체와 배열 배우기",
    done: true
  },
  {
    id: 4,
    text: "배열 내장함수 배우기",
    done: false
  }
];

const taskNotDone = todos.filter((todo) => !todo.done);
console.log(taskNotDone);

📌 25. 배열 내장함수 - splice와 slice

splice
배열에서 특정 항목을 제거할 때 사용
제거를 하는 과정에서 해당 원소가 몇 번째인지 명시를 해주어야 함

const numbers = [10, 20, 30, 40];
const index = numbers.indexOf(30);
const spliced = numbers.splice(index, 1);
console.log(spliced);
console.log(numbers);

const spliced라는 변수에 잘라낸 값을 저장을 할 수 있고 splice(index, n)의 경우 index로 부터 n개를 잘라내겠다 라는 의미를 가지고 있음
기존 배열에 변화를 줌

slice
splice와 마찬가지로 배열에서 원소를 잘라낼때 사용하는데 다른점은 기존의 배열을 건드리지 않고 파라미터에 넣게 되는 값도 다르다.

const numbers = [10, 20, 30, 40];

const sliced = numbers.slice(0, 2);
console.log(sliced);
console.log(numbers);

slice(0,2의 의미는 배열 0번째 원소부터 2번째 원소 전 까지 잘라내겠다. --> 0~1까지 원소 잘라내어 10과 20을 자름.
console.log(numbers)를 통해 기존의 배열이 달라지지 않았음을 확인할 수 있음


📌 26. 배열 내장함수 - shift, pop, unshift, push

shift
shift는 첫 번째 원소를 배열에서 추출해줌

const numbers = [10, 20, 30, 40];

const value = numbers.shift();
console.log(value); // 10
console.log(numbers); // [20, 30, 40]

첫 번째 원소를 배열에서 추출하고 이는 기존 배열에 영향을 미침

pop
배열의 마지막 요소를 추출함

const numbers = [10, 20, 30, 40];

const value = numbers.pop();
console.log(value);
console.log(numbers);

맨 마지막의 원소를 추출하고 shift와 마찬가지로 기존 배열에 영향을 미침

unshift
배열의 맨 앞 부분에 원소를 추가해줌

const numbers = [10, 20, 30, 40];

numbers.unshift(5);
console.log(numbers); // [5, 10, 20, 30, 40]

push와 다른점은 push는 배열의 맨 뒤에 원소를 추가하지만 unshift는 배열의 맨 처음에 추가! 마찬가지로 기존 배열에 영향을 미침

push
배열의 맨 뒤 부분에 원소를 추가해줌

const numbers = [10, 20, 30, 40];

numbers.push(50);
console.log(numbers); // [10, 20, 30, 40, 50]

배열의 맨 뒤 부분에 원소 추가

push & pop, shift & unshift <-- 이렇게 한쌍으로 묶을 수 있음

concat
여러개의 배열을 하나로 합쳐주는 함수.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

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

기존의 배열을 건드리지 않음

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

기존 배열을 건드리지 않음


📌 27. 배열 내장함수 - reduce

잘 사용하면 유용한 함수
배열이 주어졌을 때, 배열안에 있는 모든 값들을 사용하여 어떠한 값을 연산해야할 때 사용함.

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

const sum = numbers.reduce((n, c, index, array) => {
  if (index === array.length - 1) {
    return (n + c) / array.length;
  }
  return n + c;
}, 0);
console.log(sum); // 3

reduce()함수의 첫 번째 인자로 함수가 왔고 두 번째 인자로 0이 왔다. 우선 두 번째 인자의 경우 첫 번째 n의 초기 값으로 들어가고 n은 0부터 시작하여 c는 현재의 값을 가리키고 index는 원소의 위치, array는 배열을 가리킨다.
위의 함수는 평균을 구하는 로직을 reduce함수를 이용하여 구현한 코드이다.


📌 28. 배열 내장함수 - reduce 다른 예시

const alphabets = ["a", "a", "a", "b", "c", "c", "d", "e"];

const counts = alphabets.reduce((acc, current) => {
  if (acc[current]) {
    acc[current] += 1;
  } else {
    acc[current] = 1;
  }
  return acc;
}, {});

console.log(counts);

acc의 처음 초기값을 {}(빈 객체)로 설정을 해두고 값이 있으면 1을 더해주고 없으면 current를 키값하고 value가 1인 요소를 넣어줌. 그래서 alphabets라는 배열에 원하는 요소가 얼만큼 있는 지 세주는 로직을 만듦.


📌 29. 배열 내장함수 - 복습과 퀴즈

복습겸 3가지로 풀어보았다.

for문

function countBiggerThanTen(numbers) {
  let count = 0;
  for (let i = 0; i<numbers.length; i++)
  {
    if (numbers[i] > 10) {
      count++;
    }
  }
  return count;
}

forEach

function countBiggerThanTen(numbers) {
  let count = 0;
  numbers.forEach((n) => {
    if (n > 10) {
      count++;
    }
  });
  return count;
}

reduce

function countBiggerThanTen(numbers) {
  const result = numbers.reduce((count, current) => {
    if(current > 10) {
      count += 1;
    }
    return count; // return 헷갈렸는데 reduce안의 함수는 함상 return을 해줘야 그 값이 다시 들어가 반복문 수행됨(보통은 accumulator, 여기선 count)
  }, 0)
  return result;
}

filter함수로도 간단하게 풀 수 있었다.

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

profile
It is possible for ordinary people to choose to be extraordinary.

0개의 댓글