Javascript 메서드 정리

slice()

slice() 함수는 배열로부터 특정 범위를 복사한 값들을 담고 있는 새로운 배열을 만든다. 

arr.slice(begin, end)

• begin : 추출 시작점에 대한 index를 의미한다. 음수 index는 배열의 끝에서부터의 길이를 나타낸다.
  • slice(-2)는 배열의 마지막 두 개 요소를 추출한다.
  • begin이 0이거나 아무 값을 넣지 않는 경우 배열 전체를 복사한다. 
  • begin 이 배열의 길이보다 큰 경우, 빈 배열을 반환한다.
• end : 추출을 종료할 기준 index입니다. slice는 end번째 index를 제외하고 추출합니다.
  
  • slice(1,4)는 index 1부터 index 4를 포함하지 않는 index까지 즉 index1~3까지 추출한다.
  • 인자로 begin을 넣고 end를 넣지 않으면 begin이 가리키는 값부터 배열의 마지막 값까지 모두 복사한다.

const arr = [1,2,3,4,5]

arr.slice() // [1,2,3,4,5]
arr.slice(1,4) // [2,3,4]
arr.slice(2,-1) // [3,4]
arr.slice(-1) // [5]
arr.slice(5) // []

splice()

splice() 메서드는 배열의 기존 요소를 삭제, 교체하거나 새 요소를 추가하여 원본 배열의 내용을 변경합니다.

array.splice(start [, deleteCount [, item1 [, item2 [,...]]]])

• start : 배열의 변경을 시작할 index입니다. 배열의 길이보다 큰 값이라면 실제 시작 index는 배열의 길이로 설정됩니다.
• deleteCount: 배열에서 제거할 요소의 수입니다. 
  • deleteCount를 생략하거나 값이 array.length-strart 보다 크다면 start부터 모든 요소를 제거합니다.
  • deleteCount 가 0 이하라면 어떤 요소도 제거하지 않습니다.  
• item, item2 : 배열에 추가할 요소입니다. 아무 요소도 지정하지 않으면 splice()는 요소를 제거하기만 하면 됩니다.

const arr = [1,2,3,4,5]

// index 1부터 index 2번째를 제외한 요소들 제거 
arr.splice(1,2) // [2,3] 

const animal =['강아지','고양이','너구리']

// index 1번째에 '앵무새' 추가
arr.splice(1,0,'앵무새') // ["강아지", "앵무새", "고양이", "너구리"]

 

splice와 slice의 가장 큰 차이점은 원본배열의 불변성 유지 차이입니다. splice는 원본배열에 변경이 가해지는 반면 slice는 새로운 배열을 반환하기 때문에 만약 불변성을 지켜야 하는 작업이라면 꼭 slice를 사용해야겠습니다.

reduce()

함수를 실행하고 하나의 결괏값을 반환하는 메서드입니다.

let value = arr.reduce(function(accumulator, item, index, array) {
  // ...
}, [initial]);

• accumulator : 이전 함수 호출의 결과입니다. initial은 함수 최초 호출 시 사용되는 초깃값입니다(옵션)
• item : 현재 배열의 요소
• index : 요소의 위치
• array : 배열

accumulator는 앞서 호출했던 함수들의 결과가 누적되어 저장되는 '누산기'라고 생각하면 편합니다. 마지막 함수까지 호출되면 이 값은 reduce의 반환 값이 됩니다.

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

const result = arr.reduce((sum, current) => sum + current, 0);

console.log(result) => // 15

 

indexOf(), lastIndexOf(), includes()

arr.indexOf(item, from) : from부터 시작 item을 탐색 item을 발견하면 해당 index를 반환. 발견하지 못했다면 -1 반환
arr.lastIndexOf(item, from) : indexOf와 동작은 동일 하지만 탐색을 끝에서부터 시작
arr.includes(item, from) : index from부터 시작해 item이 있는지 탐색 item이 있다면 true 아니라면 false 반환

 

const animal = ['강아지', '고양이','토끼','앵무새'];

animal.indexOf('강아지') // 0 '강아지'는 0번째 index에 있기 때문에 0 반환
animal.indexOf('강아지',1) // -1 1번째 index 부터 '강아지'를 탐색하기 때문에 만족하는 결과가 없으므로 -1 반환

animal.lastIndexOf('토끼',0)) // index를 뒤에서부터 탐색하기 때문에 -1 반환

animal.includes('강아지') // true
animal.includes('호랑이') // false

 

find(), findIndex()

const result = arr.find((item,index,array)=>{})
//index 와 array 는 보통 잘 사용되지 않는다

• item : 함수를 호출할 요소
• index : 요소의 인덱스
• array : 배열 자기 자신

const users = [
  {id: 1, name: "John"},
  {id: 2, name: "Pete"},
  {id: 3, name: "Mary"}
];

const findJohn = users.find((user)=>user.name==="John")
console.log(findJohn) // {id:1,name:"John"}

const findIndexJohn = users.findIndex((user)=>user.name==="John")
console.log(findIndexJohn)// 0

 

sort(), reverse()

sort() 는 배열을 정렬, reverse() 는 요소를 역순으로 정렬 시키는 메서드 이 두개의 메서드는 원본 자체를 변경하기 때문에 유의해서 사용해야한다.

const numberArray=[1,6,2]

numberArray.sort((a,b)=>a-b) // 오름차순 정렬 [1,2,6]
numberArray.sort(a,b)=> b-a) // 내림차순 정렬 [6,2,1]

numberArray.reverse() // [2,6,1]

 

reverse() 메서드를 사용했던 로직

리액트 Stompjs,Sockjs 실시간 채팅 구현 - (2)

 

some(), every()

some() 메서드는 배열 안의 어떤 요소라도 콜백 함수를 하나라도 통과하는지 테스트합니다. 하나라도 통과한다면 true 아니라면 false를 반환합니다.

const array =[1,2,3,4,5]

const even = array.some((number) => number & 2 === 0);
console.log(even) // true

 

every() 메서드는 some()의 반대로 모든 요소가 콜백 함수를 통과하는지 테스트 합니다.

const array =[1,2,3,4,5]

const isEven = array.every((number) => number & 2 === 0)
console.log(isEven) // false

 

at()

at() 메서드는 정수를 인자로 받아 해당 index에 있는 항목을 반환합니다. 음의 정수는 배열의 마지막 항목부터 역순으로 셉니다.

const array =[1,2,3,4,5]

array.at(0) // 1 
array.at(-1) // 5
array.at(2) // 3
array.at(array.length -1) // 5

 

flat(), flatMap()

flat() 메서드는 모든 하위 배열 요소가 지정된 깊이까지 재귀적으로 연결된 새 배열을 생성합니다.

인자로 중첩된 배열 구조를 얼마나 깊이 평탄화 할지를 지정합니다. 기본값은 1입니다.

const array =[1,2,3,4,5,[6,7],[8,9]]
array.flat() // [1, 2, 3, 4, 5, 6, 7, 8, 9]

const depthTwoArray = [1,2,[3,[4]]]
depthTwoArray.flat() // [1, 2, 3, Array(1)]
depthTwoArray.flat(2) // [1, 2, 3, 4]

const depthInfinityArray = [1,2,[3,[4,[5,[6,[7,[8,[9,[10]]]]]]]]]
depthInfinityArray.flat(Infinity) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

 

flatMap() 메서드는 배열의 각 요소에 콜백 함수를 적용한다음 그 결과를 평탄화 하여 새로운 배열을 반환합니다.

const array = [[1],[2],[3],[4]]
array.flatMap((number)=>number*2) // [2, 4, 6, 8]

 

참고한곳
https://ko.javascript.info/
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array