[JavaScript] Array APIs

join()

배열의 모든 요소를 연결하여 지정하는 구분자를 통해 하나의 문자열로 반환

구문 : arr.join([separator])
	separator : 배열의 각 요소를 구분할 문자열을 지정

let arr = [["T","r","Y"],["H","e","L","l","O"],["W","o","R","l","D"]]
let b = arr.join('') -> ["TrY","HeLlO","WoRlD"]
b.join(' ') -> "TrY HeLlO WoRlD"

join() : ','로 이어줌
join('') : 다 붙임

split()

주어진 문자열을 separator마다 끊어 여러개의 문자열을 배열로 반환

구문 : str.split([separator[, limit]])
	separator : 원본 문자열을 끊어야 할 부분을 나타내는 문자열
	limit (Optional) : 배열의 사이즈 지정 해줌

let a = "try hello world"
let b = a.split(' ') -> [ 'try', 'hello', 'world' ]
b.split('') -> ['t', 'r', 'y', ' ','h', 'e', 'l', 'l', 'o', ' ', 'w', 'o','r', 'l', 'd']   

split(" ") : 단어별로
split("") : 글자별로

reverse()

배열의 순서를 반전시켜 배열로 반환
즉, 첫 번째 요소는 마지막 요소가 되며 마지막 요소는 첫 번째 요소가 됨

let arr = [1,2,3,4,5]
arr.reverse() -> [ '5', '4', '3', '2', '1' ]

substring()

string 객체의 시작 인덱스로 부터 종료 인덱스 전 까지(-1) 문자열의 부분 문자열을 반환
인자에 음수(-)가 들어갈 경우, 해당 값은 ’0‘으로 치환
종료위치에 음수(-) or 0이 들어갈 경우, 두개의 인수가 뒤바뀜

구문 : str.substring(indexStart[, indexEnd])
	indexStart : 시작 index
	indexEnd (Optional) : 종료 index (포함하지 않음.)

  		0  1  2  3  4  5
        자 바 스 크 립 트
  ex) substring(2, -1) = substring(0, 2)

splice()

배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경
즉, 어디서부터 몇개나 지울건지, 삭제할건지
기존의 배열 값 변경 : 배열 자체를 수정
return 값에는 삭제된 요소들

구문 : array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
	start : 배열의 변경을 시작할 인덱스
	deleteCount (Optional) : 배열에서 제거할 요소의 수

let arr = [1,2,3,4,5]
let result = a.splice(0, 2) 
console.log(arr) -> [3, 4, 5]
console.log(result) -> [1, 2]

slice()

어떤 배열의 시작 index부터 end까지(end 미포함)에 대한 특정 부분을 새로운 배열 객체로 반환
원본 배열은 바뀌지 않고, 마지막 부분은 포함되지 않음

구문 : arr.slice([begin[, end]])
	begin (Optional) : 시작 index
	end (Optional) : 종료 index,  slice는 end 인덱스를 제외하고 추출

let arr = [1,2,3,4,5]
let result = a.slice(2, 5) 
console.log(arr) -> [1,2,3,4,5]
console.log(result) -> [3,4,5]

➕ splice() vs slice()

splice()는 기존의 배열이 변경이 되고
slice()는 기존의 배열은 변경이 되지 않는다.

➕ substring() vs slice()

substring()와 slice()는 사용법과 문법이 동일
다른점은 slice()는 음수(-)를 자유롭게 사용할 수 있어서 뒤에서부터 문자열을 자를 때 유용하게 사용 가능

  		0  1  2  3  4  5
        자 바 스 크 립 트
        -6 -5 -4 -3 -2 -1
  ex) slice(-4, 5) -> ‘스크립‘   slice(-4) -> ’스크립트’

reduce()

배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환
콜백함수는 배열 안에 들어있는 모든 요소들마다 호출되며 콜백함수에서 리턴되는 값들을 누적하여 누적된 결과값으로 retrun

구문 : arr.reduce(callback[, initialValue])
	callback : 배열의 각 값에 대해 실행할 함수
        accumulator - callback함수의 반환값을 누적
        currentValue - 배열의 현재 요소

-> 배열 하나하나를 돌면서 무언가 값을 누적할 때 사용

map()

배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환
즉, 배열 안에 들어있는 모든 요소들을 우리가 전달해준 콜백함수를 호출하면서 콜백함수에서 가공되어진 값들로 새로운 배열로 리턴

구문 : arr.map(callback(currentValue[, index[, array]])[, thisArg])
	callback : 배열의 각 값에 대해 실행할 함수
		element : 콜백함수에서 처리할 현재 요소
		index (Optional) : 콜백함수에서 처리할 현재 요소의 인덱스

const array_num = [0, 1, 2, 3, 4, 5];
const new_array = array_num.map((array_item) => { return array_item +1;})
new_array = [1, 2, 3, 4, 5, 6]
array_num = [0, 1, 2, 3, 4, 5]

-> 배열안에 요소들을 우리가 원하는 함수를 이용해서 다른 방식의 데이터를 만들고 싶을때 유용

find()

주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환. 그런 요소가 없다면 undefined를 반환

구문 : arr.find(callback[, thisArg])
	callback : 배열의 각 값에 대해 실행할 함수
		element : 콜백함수에서 처리할 현재 요소
		index (Optional) : 콜백함수에서 처리할 현재 요소의 인덱스

const array1 = [5, 12, 8, 130, 44];
const found = array1.find(element => element > 10);
console.log(found); -> 12

filter()

주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환

구문 : arr.filter(callback(element[, index[, array]])[, thisArg])
	callback :각 요소를 시험할 함수. true를 반환하면 요소를 유지하고, false를 반환하면 버림
		element : 처리할 현재 요소
		index (Optional) : 처리할 현재 요소의 인덱스

ex) const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
     const result = words.filter(word => word.length > 6);
     console.log(result) -> ["exuberant", "destruction", "present"]

some()

배열 안의 어떤 요소라도 주어진 판별 함수를 통과하는지 테스트
Boolean 값을 반환

const array = [1, 2, 3, 4, 5];
const even = (element) => element % 2 === 0;
console.log(array.some(even)); -> true

every()

배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트
Boolean 값을 반환

const isBelowThreshold = (currentValue) => currentValue < 40;
const array1 = [1, 30, 39, 29, 10, 13];
console.log(array1.every(isBelowThreshold)); -> true

➕ some() vs every()

some()은 배열에서 하나라도 조건의 만족되는게 있다면 true
every()은 배열에 들어있는 모든 요소들이 조건을 충족해야지만 true

sort()

배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환
매개변수에 아무것도 안넣으면 문자열로 변환하고 유니코드포인트 순서로 문자열을 비교하여 정렬
다만 숫자만 조심해야함 숫자는 다르다

(숫자 정렬할때)
a,b 두 요소를 전달하고 a - b로 크기를 비교해서 양수인지, 음수인지, 0인지 봐준다.
a > b : 양수  ------------> b를 앞으로 내보냄
a = b : 0   --------------> 그대로 있음
a < ｂ : 음수 -----------> a를 앞으로 내보냄

Number() vs parseInt()

Number()는 인자로 문자열을 받으면 숫자형으로 변환시킴
parseInt()는 인자로 문자열을 받으면 정수로 변환시킴
그렇지만 인자로 받은 값에 숫자가 아닌 문자가 들어갈 경우에는
Number()은 NaN을 리턴
parseInt()은 숫자로 시작해서 숫자가 끝날때 까지만 형변환해주고 리턴

Number('123가나다'); -> NaN
parseInt('123가나다'); -> 123
parseInt() 예외,  parseInt('가나다123'); -> NaN