TIL 20221002 - 102번(JS Array function)

리액트 강의가 시작 됐고 그 전에 배운 js는 TIL에 정리했다.
이후 모던 javascript 홈페이지에서 처음부터 다시 공부할 예정인데 그 정리는 새로운 태그를 만들엇 진행할 예정
이번 10월 최소 늦어도 11월 안까지 진행할 공부는

• react기초 강의 끝내기
• JS 다시 공부하기
• TS 공부

TS는 그렇게 큰 공부가 많이 없어 집어 넣었다. 아는 것보다 쓰는 것이 중요하다 생각되는 부분이라 일단 react기초가 끝나면 프로젝트를 구해 진행할 생각이고 그 때 계속 사용해보며 응용을 늘려갈 예정이다.
화이팅 하자.

JS Array functions

간단하게 정리

많은 React 개념이 배열 작업에 의존하기 때문에 간단하게라도 알아두는 편이 좋다.

• map()
  https://velog.io/@lee_moi/TIL-20221001-101%EB%B2%88-jh1wre0b
  101번째 TIL에 정리해 두었다.
• find()
  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find
  테스트 기능을 충족하는 제공된 배열의 첫번째 요소를 반환, 없으면 undefined반환

const array = [5, 12, 8, 130, 44]

const found = array.found(element => element > 10);

console.log(found) // 12

• findIndex()
  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex
  테스트 기능을 충족하는 배열의 첫 번째 요소 인덱스를 반환, 없으면 -1이 반환

const array = [5, 12, 8, 130, 44]

const isLargeNumber = (element) => element > 13;

console.log(array.findIndex(isLargeNumber)) // 3

• filter()
  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
  제공된 함수로 구현된 테스트를 통과하는 지정된 배열의 요소를 필터링 해서 배열의 일부에 대한 복사본을 만듬

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
//Array ["exuberant", "destruction", "present"]

• reduce()
  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce?v=b
  위 링크는 다른 메서드 정리에 같이 있는 mdn web docs 페이지고
  https://velog.io/@lee_moi/TIL-20220812-82%EB%B2%88-reducetoFixed
  위 링크는 앞선 til에서 정리했던 글이다.

• concat()
  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat?v=b
  둘 이상의 배열을 병합하는 데 사용. 이 메서드는 기존배열을 변경하지 않고 새 배열을 반환

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// Array ["a", "b", "c", "d", "e", "f"]

• slice()
  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
  배열로부터 특정 범위를 복사한 값들을 담고있는 새로운 배열을 만드는데 사용
  첫번째 인자로 시작 인덱스, 두번째 인자로 종료 인덱스를 받으며, 시작 인덱스부터 종료 인덱스까지 값을 복사하여 반환

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
//Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
//Array ["camel", "duck"]

console.log(animals.slice(1, 5));
//Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));
//Array ["duck", "elephant"]

console.log(animals.slice(2, -1));
//Array ["camel", "duck"]

console.log(animals.slice());
//Array ["ant", "bison", "camel", "duck", "elephant"]

• splice()
  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
  기존 요소를 제거하거나 교체하고 새 요소를 그 자리에 추가하여 배열의 내용을 번경.

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
//  Array ["Jan", "Feb", "March", "April", "June"]
// 1번째 인덱스에서 0 아무것도 삭제하지 않고 'Feb'를 추가

months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// Array ["Jan", "Feb", "March", "April", "May"]
// 위 'Feb'가 추가된 배열 이후이니 4번째 배열에 1개 삭제(June) 이후 May 추가

splice(start)
splice(start, deleteCount)
splice(start, deleteCount, item1)
splice(start, deleteCount, item1, item2, itemN)

start = 배열 변경을 싲가할 인덱스
deleteCount(선택) = 제거할 배열의 요소 수를 나타내는 정수 (몇개의 값을 삭제할지)
이후 인자 = 추가할 값을 가변 인자로 넘길 수 있다.