자바스크립트 유용한 함수 모음

map

• 정의
  • 배열의 모든 요소를 순회하는 함수
  • 모든 요소에 접근하며 내부 콜백함수에 맞춰 요소를 수정
  • 모든 요소들에 접근/수정이 끝나면 변경된 요소들을 담은 새로운 배열을 반환
  • 원본 배열 수정 x
• 사용법
  • Array.map(callback(element, index, source)) // source는 순회하는 대상인 Array
  • let arr = [1,3,5,7,9]
  • let arr2 = arr.map((e) => e+1) // arr2 = [2,4,6,8,10]

filter

• 정의
  • 배열의 모든 요소를 순회하는 함수
  • 모든 요소에 접근하며 내부 콜백함수를 통해 true를 반환하는 요소를 기준으로 새로운 배열을 만들어 반환
  • 원본 배열 수정 x
• 사용법
  • Array.filter(callback(element, index, source))
  • let arr = [1,3,5,8,10]
  • let arr2 = arr.filter((e) => e%2 === 0) // arr2 = [8,10]

reduce

• 정의
  • 배열의 모든 요소를 순회하며, 요소들을 이용한 연산 처리를 위해 사용
  • reduce를 활용하면, map, filter 등의 기능까지 다룰 수 있다
  • 누적값(acc) : 콜백함수의 반환값을 누적하며, 초깃값에 해당
  • 현잿값(cur) : 처리할 현재 요소
  • 초깃값(init) : 콜백함수 최초 호출에서 첫번째 인수에 제공하는 값으로 선언이 안되어 있을 경우 배열의 첫번째 요소를 사용
  • 원본 배열 수정 x
• 사용법
  • Array.reduce((누적값, 현잿값, 인덱스, Array) => { return 결과 }, 초깃값);
  • let arr = [1,2,3,4,5]
  • let answer = arr.reduce((acc,cur) => acc+cur) // 15

split

• 정의
  • 문자열을 주어진 조건에 맞춘 배열로 변환하는 함수
  • limit은 생성될 배열의 length
  • 원본 문자열 수정 x
• 사용법
  • string.split(separator, limit)
  • let str = "apple banana"
  • let arr = str.split("") // arr = ["a","p","p","l","e"," ","b","a","n","a","n","a"]
  • let arr = str.split() // arr = ["apple banana"]
  • let arr = str.split(" ") // arr = ["apple", "banana"]

slice

• 정의
  • 배열 내부에서 정해진 범위내의 요소들만 담은 새로운 배열을 반환하는 함수
  • 원본 배열 수정 x
  • 매개변수로 음수값이 들어가면, index 0부터 시작이 아니라, 배열 끝부터 시작된 값
• 사용법 :
  • Array.slice(start, end)
  • let arr = [0, 1, 2]
  • arr.slice(0,1) // [0]
  • arr.slice(1,2) // [1]
  • arr.slice(-2) // [1,2]

splice

• 정의
  • 배열 내부에서 정해진 범위내에 요소들을 추가 또는 삭제 또는 추가와 삭제를 같이 하는 함수
  • 원본 배열 수정 o
  • splice 호출 이후 반환값은 삭제된 요소들
• 사용법 :
  • splice(start, deleted count, item1, item2, ...)
  • let arr = [1,2,3,4,5]
  • arr.splice(1,1) // arr = [1,3,4,5]
  • arr.splice(2,0,7) // arr = [1,2,7,3,4,5]

join

• 정의
  • 배열의 모든 요소들을 연결해 하나의 문자열로 만들어 반환하는 함수
  • 원본 배열 수정 x
• 사용법
  • arr.join([separator])
  • let arr = ["안녕", "hi", "hello"];
  • let arrStr1 = arr.join(); // 안녕,hi,hello
  • let arrStr2 = arr.join(","); // 안녕,hi,hello
  • let arrStr3 = arr.join("-"); // 안녕-hi-hello

sort

• 정의
  • 내부 콜백함수에 맞춰 배열을 정렬하는 함수
  • 원본 배열 수정 o
• 사용법
  • Array.sort(callback function)
  • let arr = [4,2,3,1,5]
  • arr.sort((a,b) => a-b) // [1,2,3,4,5]
  • arr.sort((a,b) => b-a) // [5,4,3,2,1]

concat

• 정의
  • 2개의 문자열 또는 배열을 하나로 합쳐 새로운 배열을 반환하는 함수
  • 원본 배열 수정 x
• 사용법
  • Array/String.concat(Array/String)
  • let arr = [1,2,3]
  • let newArr = arr.concat("a", ["b","c"]) // newArr = [1,2,3,"a",["b","c"]]

spread operator

• 정의
  • 전개 연산자라고도 하며, 배열에서 spread operator는 배열의 원소들을 분해해서 개별 요소로 만들어준다
  • 객체나 배열의 값을 하나 하나 넘기는 용도로 사용
  • 직관적이고, 어느 위치에나 사용 가능
  • 원본 배열 수정을 피하고 싶어 배열,객체 복사에도 사용
• 사용법
  • let arr = [1,3,5]
  • let arr2 = [2,4,6]
  • let newArr = [...arr, ...arr2] // newArr = [1,3,5,2,4,6]

toString

• 정의
  • 정수를 수의 진법에 맞는 정수 문자열로 변환하는 함수
  • 원본 정수 수정 x
• 사용법
  • number.toString(radix)
  • let num1 = 11;
  • let strNum1 = num1.toString(); // "11"
  • let strNum2 = num1.toString(2); // "1011"
  • let strNum3 = num1.toString(8); // "13"

parseInt

• 정의
  • 문자열을 수의 진법에 맞는 정수로 변환하는 함수
  • 문자열의 첫 글자를 정수로 변경할 수 없으면 NaN(Not a Number) 반환
  • 문자열의 첫 글자를 제외하고 정수 문자열 외의 요소들이 있다면 해당 요소부터는 생략 처리
  • 원본 문자열 수정 x
• 사용법
  • parseInt(string, radix)
  • let str = "a10";
  • let str2 = "10a53";
  • let str3 = "73b";
  • let str4 = "11";
  • let case1 = parseInt(str); // NaN
  • let case2 = parseInt(str2); // 10
  • let case3 = parseInt(str3); // 73
  • let case4 = parseInt(str4); // 3