요소 추가
arr.push(...items)
배열 맨 끝에 items 추가
arr.unshift(...items)
배열 맨 앞에 items 추가
*arr.concat(arg1 ,arg2...)
기존 배열의 요소를 사용해 새로운 배열을 만들거나 기존 배열에 요소를 추가하고자 할 떄 사용합니다.
arg: 배열이나 값이 올 수 있습니다.
//값
let arr = [1, 2, 3]
arr.concat(4, 5) // arr=[1, 2, 3, 4, 5]
//배열
let arr = [1, 2, 3]
let addArr=[4, 5]
arr.concat(addArr)// arr= [1, 2, 3, 4, 5]요소 제거
arr.pop()
배열 맨 끝 요소 제거
arr.shift()
배열 맨 앞 요소 제거
arr.slice(n-index, m-index)
n-index부터 m-index까지를 복사한 새로운 배열을 반환
(m-index는 포함되지 않습니다)
let arr = [1, 2, 3, 4, 5];
arr.slice(1,4);
console.log(arr) //[2, 3, 4];arr.slice(): arr의 복사본을 만들 수 있습니다. 이를 활용해 기존 배열은 바꾸지 않으면서 새로운 배열을 만들어 조작하고자 할 때 유용하게 쓰일 수 있습니다
요소 추가 ,제거, 교체
arr.splice()
arr.splice(index, 제거할 요소의 개수, x1, x2....)
-배열의 특정 요소 제거
index: 조작하고자 하는 요소의 첫번째 index
Xn: 배열에 추가하고자 하는 요소
let arr = [1, 2, 3, 4, 5]
//arr에서 제거한 요소의 배열 반환
let spliced = arr.splice(1, 3, 6);
//제거된 arr 배열
console.log(arr)//[1, 6 ,5]
console.log(spliced)//[2, 3, 4]제거할 요소의 개수가 0이면 아무것도 제거하지 않고 Xn을 배열에 추가할 수 있습니다.
splice의 인자로 index만 들어가면 index뒤로 모든 요조가 제거됩니다.
배열 탐색
arr.indexOf(item, index)
item: 찾을 요소
index: 해당 index 부터 찾기 시작
요소를 발견하면 해당 요소의 index값을 반환하고, 찾지 못하면 -1일 반환합니다.
arr.includes(item, index)
item: 찾을 요소
index: 해당 index부터 찾기 시작
요소를 발견하면 해당 요소의 true를 반환하고, 찾지 못하면 false를 반환합니다.
arr.indexOf vs arr.includes
arr.indexOf() : 요소의 위치 정확하게 알고 싶을 때 사용
arr.includes(): 요소가 배열에 존재하는 지 확인하고 싶을 때 사용
arr.find(fn)
arr.find(function(item, index, array){함수본문})
함수가 참이면 즉시 탐색을 중단하고 해당 요소가 반환됩니다. 찾지 못했을 경우 undefined가 반환됩니다.
let arr = [1, 2, 3, 4, 5]
const result = arr.find((item)=>{
return item % 2 === 0;
})
console.log(result) // 2
객체로 이루어진 배열이 있다면 find를 사용하여 객체의 값에 접근하여 원하는 객체를 찾을 수 있습니다.
let useList = [
{name : "Mike", age: 30}.
{name : "Jane", age: 27},
{name : "Tom", age: 10}
{name: "Adel", age : 9}
]
userList.find((user)=>{
if(user.age < 19){
retrun true
}
return false
})
console.log(result); // {name: "Tom", age: 10}위의 예시를 보면 조건에 해당 하는 요소가 하나가 아닌데 하나만 반환합니다. 앞서 언급했듯이 조건이 true이면 즉시 탐색을 중단하기 때문에 첫번째 true인 요소만 반환합니다.
arr.findIndex(fn)
arr.find(fn)와 차이는 첫번째로 참인 요소의 index를 반환한다는 점이 다릅니다. 조건에 맞는 요소가 없으면 -1을 반환합니다.
arr.forEach(fn)
arr.forEach(function(item, index, array){함수본문}, thisArg)
forEach는 함수를 배열의 요소에 오름차순으로 한번씩 실행합니다.
-item: 배열의 요소
-index: 요소의 index
-array: forEach를 호출한 배열
-thisArg: 인수로 받은 함수의 this로 사용할 값
arr = [ 1, 2, 3, 4, 5]
arr.forEach(function(item){
console.log(item)
})arr.map(fn)
arr.map(function(item, index, array){함수 본문})
map은 배열의 요소에 함수를 호출하고 호출 결과를 배열로 반환해줍니다.
arr= [1 ,2, 3, 4, 5]
let mappedArr = arr.map(function (item, i){
return item*10 + i
})
consol.log(mappedArr) //[10, 21, 32, 43, 54]map의 콜백함수안에 조건문이 있어서 배열의 요소를 걸러진다면 그 자리에 undefined를 넣어 줍니다.
arr = [1, 2, 3, 4, 5]
let mappedArr = arr.map(function(item , i){
if(item % 2 === 0)
return item*10 + i
})
consol.log(mappedArr) // [undefined, 21, undefined, 43, undefined]arr.map(fn) vs arr.forEach(fn)
forEach는 배열의 모든 요소에 함수를 호출하는데 그치는 반면에 map은 배열의 모든 요소에 함수를 호출하고 그 결과를 새로운 배열에 반환합니다.
그러므로 forEach는 아무값도 return하지 않고 map은 함수 결과를 반환해야 하므로 return이 있어야 값을 출력할 수 있습니다.
arr.filter(fn)
arr.filter(function(item, index, array){함수 본문})
map과 같이 새로운 배열을 생성하지만 map은 원본 배열의 길이와 새로운 배열의 길이가 같지만 filter의 경우 원하는 요소만 return하여 배열 생성합니다.
let arr = [1, 2, 3, 4, 5]
const result = arr.filter((item)=>{
return item % 2 === 0;
})
console.log(result) //[2, 4]
arr.filter(fn) vs arr.find(fn)
find는 첫번째 true의 요소만 반환하지만 filter는 true인 모든 요소를 새로운 배열에 넣어서 반환합니다.
arr.reduce(fn)
arr.reduce(function (누적값, item, index, array){함수본문}, 초기값)
-누적값: 이전 함수의 호출 결과
-item: 배열의 요소
-index: 요소의 index
-array: reduce를 호출한 배열
-초기값: 최초로 함수를 호출 할 시 사용되는 초기값 = 첫번째 누적값
let arr = [1, 2, 3, 4, 5];
let result = arr.reduce(function(sum, item){
return sum += item
},0)
console.log(result) //15처리 과정은 다음과 같습니다
1. 함수를 최초 호출 시 '초기값이' '누적값'에 할당됩니다. 초기값이 없다면 함수의 첫 번째 요소를 초기값으로 사용합니다
2. 요소를 한번씩 호출하면서 함수의 결과값을 누적값에 업데이트 시켜줍니다
arr.sort(fn)
arr.sort는 배열의 요소를 정렬해줍니다. 배열 자체가 변하므로 사용할 때 이 점을 염두에 두어야 합니다.
sort에 콜백함수가 안들어가면 배열의 모든 요소를 문자형으로 변환하고 정렬합니다
arr =[1 , 2 , 4, 15]
arr.sort()
console.log(arr) // [1, 15, 2, 4]위와 같이 배열에 수가 들어간 경우 오름차순이나 내림차순으로 정렬하고 싶은데 의도와 다른 결과를 얻을 수 있습니다.
그래서 이러한 정렬 기준 대신 새로운 정렬 기준을 만들고 싶으면 콜백함수를 넣어 주면됩니다.
넣어줄 콜백함수는 대게 이미 최적화된 퀵소트(quicksort)가 있어 이를 활용하면 됩니다
문자열 ↔ 배열
문자열 → 배열: str.split(delim)
구분자(delim)을 기준으로 문자열을 쪼개 배열로 만들어 줍니다
let adress = "Korea, Seoul, GangNam"
let arr = adress.splie(', ')//쉼표과 공백을 합쳐 구분자로 사용
console.log(arr) // [Korea, Seoul, GangNam]배열 → 문자열: arr.join(delim)
split과 역활이 반대입니다. 배열의 요소를 구분자(delim)을 포함해 하나의 문자열로 만들어 줍니다
