자바스크립트 배열 메소드

taehyung·2023년 9월 11일
배열메소드
0

JavaScript

목록 보기
8/15

비슷한 기능을 가진 메소드를 분류해 놓았고, 상세 내용은 mdn의 순서와 흡사합니다.

Array.of() - 배열 생성, 기존 생성자와 다르게 숫자를 요소의 갯수가 아닌 값으로 판단
Array.from() - 배열 반환, 이터러블 객체를 배열로 변경하여 새 배열 반환
Array.isArray() - 배열 확인, boolean반환
배열 탐색

Array.prototype.at(index) - 호출한 배열에 인덱스 값으로 N번째 요소의 값 반환 ( 역순 탐색 가능 )
Array.prototype.indexOf(value) -  호출한 배열에 값을 주고 만족하는 가장 첫번째 요소 인덱스반환
Array.prototype.lastIndexOf(value) - 호출한 배열에 값을 주고 만족하는 뒤에서부터 가장 첫번째 요소 인덱스반환
Array.prototype.includes(value) - 배열 요소중 주어진 값 검색, boolean 반환
Array.prototype.some(callback) - 호출한 배열에 주어진 콜백함수를 만족하는 값 있는지 검색, boolean 반환
Array.prototype.find(callback) -  호출한 배열에 주어진 콜백함수를 만족하는 가장 첫번째 요소의 값 반환
Array.prototype.findLast(callback) -  호출한 배열에 주어진 콜백함수를 만족하는 뒤에서부터 가장 첫번째 요소의 값 반환
Array.prototype.findIndex(callback) -  호출한 배열에 주어진 콜백함수를 만족하는 가장 첫번째 요소의 index 반환
Array.prototype.findLastIndex(callback) -  호출한 배열에 주어진 콜백함수를 만족하는 뒤에서부터 가장 첫번째 요소의 index 반환
Array.prototype.every(callback) -  호출한 배열 내 모든 요소가 주어진 콜백함수를 통과하는지 테스트, boolean 반환, 참일시 탐색 종료
배열 수정
Array.prototype.copyWithin(target, start, end) - 호출한 배열 내 n ~ n 번째 요소 복사, 호출한 배열 내 특정위치에 복사, 수정된 원본배열 반환
Array.prototype.fill(value, start, end) - 호출한 배열 내 n ~ n 번째 요소를 주어진 값으로 변경, 새요소 추가X, 원본 배열 수정
Array.prototype.with(index, value) - 호출한 배열의 단일 요소의 값을 지정된 값으로 변경, 새 배열 반환
Array.prototype.slice(start, end) - 호출한 배열의 N ~ N 번째 요소를 복사, 새 배열 반환
Array.prototype.splice(start[, deleteCount[, item...]]]) - 호출한 배열의 기존 요소를, 삭제,교체, 혹은 새요소 추가, 원본 배열 반환
Array.prototype.toSplicedstart[, deleteCount[, item...]]() - 호출한 배열의 기존 요소를, 삭제,교체, 혹은 새요소 추가, 새 배열 반환

Array.prototype.pop() - 호출한 배열 가장 마지막 요소 제거, 제거된 요소 반환
Array.prototype.push(element...) - 호출한 배열 가장 마지막에 매개변수로 받은 값 삽입, 수정된 배열의 길이 반환
Array.prototype.shift() - 호출한 배열 가장 앞 요소를 제거, 제거된 요소 반환
Array.prototype.unshift(element...) - 호출한 배열 가장 앞에 N 개의 요소 추가, 수정된 배열의 길이 반환

Array.prototype.reverse() - 호출한 배열 요소들을 반전한 원본배열 반환
Array.prototype.toReversed() - 호출한 배열 요소들을 반전한 새배열 반환

Array.prototype.concat(array) - 호출한 배열의 뒤에 넘겨준 배열을 병합한 새 배열 반환
Array.prototype.filter(callback) - 호출한 배열 내에 콜백함수의 조건을 만족한 요소들 취합 후 새 배열 반환

Array.prototype.join(separator) - 호출한 배열의 모든 요소를 하나의 문자열로 변환하여 반환, ( 구분자 지정 가능 )
Array.prototype.toString() - 호출한 배열의 모든 요소를 하나의 문자열로 변경, 문자열 반환 ( 구분자 무조건 "," )
Array.prototype.toLocaleString() - 호출한 배열의 모든 요소를 하나의 문자열로 변경, 문자열 반환

Array.prototype.flat(depth) - 호출한 배열의 다차원 배열 평탄화, 새로운 배열 반환
Array.prototype.flatMap(callback) - 호출한 배열의 다차원 배열 평탄화, 각 배열 요소에 순환 접근 후 콜백 메소드 실행, 1뎁스만 평탄화 가능

Array.prototype.forEach(callback) - 호출한 배열에 콜백함수의 결과 반환
Array.prototype.map(callback) - 호출한 배열내의 모든 요소에 접근하여 콜백함수를 실행한 새 배열 반환

Array.prototype.sort(callback) - 호출한 배열에 주어진 콜백함수를 만족하는 방법으로 정렬, 원본배열 반환
Array.prototype.toSorted(callback) - 호출한 배열에 주어진 콜백함수를 만족하는 방법으로 정렬, 새 배열 반환
이터러블 객체 반환

Array.prototype.entries() - 배열의 키,값 을 가진 이터러블 객체 반환
Array.prototype.keys() - 배열내의 모든 요소의 인덱스를 키 값으로 가지는 이터러블 객체 반환
Array.prototype.values() - 배열의 모든 요소의 값을 순환하는 이터러블 객체 반환

Array.fromAsync() - ??
Array.prototype.reduce() - ??
Array.prototype.reduceRight() - ??

스태틱 메소드

생성자 함수 내부에 정의된 메소드

Array.from(arrayLike[, mapFn[, thisArg]])

forEach:~에서

설명
Array.from() 메서드는 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운Array 객체를 만듭니다.

유사 배열 객체 : length 속성과 인덱싱 된 요소를 가진 객체, HTML DOM을 취득하면 유사배열로 반환된다.
배열처럼 보이지만 사실 객체인것.

매개변수

  • arrayLike : 배열로 변환하고자 하는유사 배열 객체나 반복 가능한 객체.
    • mapFn : 배열의 모든 요소에 대해 호출할 맵핑 함수.
    • thisArg : mapFn 실행 시에 this로 사용할 값.

반환 값
새로운 Array 인스턴스

원본 배열 손상여부 : 손상없음

주의사항

  • 유사배열 객체와 일반 배열의 가장 큰 차이점은 배열 메소드를 사용할 수 있느냐 없느냐이다. ( 유사배열객체는 forEach, map, filter, reduce 등 사용 불가능 )
<div class="kakao">무지</div>
<div class="kakao">라이언</div>

const kakao = document.querySelectorAll('.kakao');
console.log(kakao);

{
  0: div.kakao,
  1: div.kakao,
  length: 2,
}

이런 유사배열 객체에 배열메소드를 사용하기위해 배열로 변환해준다.

Array.of(element...)

매개변수로 전달된 값들만큼의 가변배열을 생성합니다.

of : ~의

설명

  • Array 생성자에 숫자를 전달하면, 숫자의 길이만큼의 빈 배열을 생성합니다.
  • 숫자가 아닌값을 전달하면 값의 갯수만큼 요소를가진 배열을 생성합니다.

이 동작은 Array 생성자에 전달되는 데이터의 유형을 모를때 문제를 야기합니다. 이 문제를 해결하기위해 Of 가 도입되었습니다.

매개변수

  • element : 새로운 배열을 채워줄 N 개의 요소들

반환 값
새 배열

원본 배열 손상여부 : 손상없음

주의사항

  • 일반적인 생성자와 다른점은 숫자의 처리방식이 다르다는 것입니다.
기존 생성자의 문제점
const arr = new Array(3);
console.log(arr) // [undefiend,undefiend,undefiend] 

const arr = new Array("3");
console.log(arr) // ["3"]
Of 사용으로 해결
const arr = Array.of(3);
console.log(arr) //[3] 

const arr = Array.of("3");
console.log(arr) // ["3"]

Array.isArray(value)

isArray : 배열인가(의문문)

설명
매개변수로 주어진 값이 배열인지 아닌지 판별합니다.

매개변수

  • value : 배열인지 확인할 값

반환 값
Boolean

원본 배열 손상여부 : 손상없음

주의사항

  • Array. 값의 프로토타입 체인을 확인하지 않으며 Array연결된 생성자에도 의존하지 않습니다.
const arr =  ["라이언","무지",,"농담곰","콘"]
console.log(Array.isArray(arr)) // true

프로토타입 메소드

Array.prototype.at(Index)

at : ~ 에

설명
양수와 음수를 사용하여 배열 인덱스에 접근이 가능합니다. 음의 정수는 배열의 마지막 항목부터 거슬러 셉니다.

매개변수 ( index )
양수는 기존의 방식과 동일합니다.
음수는 배열의 끝부터 거슬러 셉니다.

반환 값
매개변수로 전달한 인덱스와 일치하는 배열의 요소 입니다.
index < -array.length 또는 index >= array.length 와 같은식의 문법은 항상 undefined 를 반환합니다.

원본 배열 손상여부 : 손상없음

const arr = ["라이언","무지","콘"];
const lastItem = arr.at(-1);
console.log(arr.at(-1))//콘
console.log(arr.at(1)) //라이언

Array.prototype.concat(Array)

concatenate : 연쇄된, 이어진, 연결된

설명
concat은 복사 메서드 입니다.
두 개 이상의 배열을 병합하는 데 사용됩니다. 이 메서드는 기존 배열을 변경하지 않고, 새 배열을 반환합니다.

매개변수 ( Array )
새 배열로 연결할 배열 및 또는 값입니다. 매개변수 생략시 concat 은 호출된 기존 배열의 얕은 복사본을 반환합니다.

반환 값
새로운 Array 객체

원본 배열 손상여부 : 손상없음

const arr = ["라이언","무지","콘"];
const arr2 = ["농담곰"];
const arr3 = arr.concat(arr2,"카카오",10,{})
console.log(arr3)//라이언,무지,콘,농담곰,카카오,10,{}

ps. concat은 arr3 = [...arr,...arr2] 와 동일한 동작을 한다. ( 스프레드 연산자 )

Array.prototype.copyWithin(target[, start[, end]])

copy : 복제,복사
within : ~안에서

설명
배열의 일부분을 발췌하여 발췌한 배열 요소들을 특정위치에 덮어씌우는 메서드 입니다.

매개변수(target[, start[, end]])

  • target : 발췌한 배열 요소를 붙혀넣기 시작할 Index
    • 0부터 시작
    • 음수 지정시 배열 끝부터
  • start : 발췌할 데이터의 시작 Index
    • 0부터 시작
    • 음수 지정시 배열 끝부터
    • 미지정시 0부터
  • end : 발췌할 데이터의 끝 Index
    • end 인덱스 이전까지 복사하므로 end 인덱스가 가리키는 요소는 제외합니다.
    • 마지막index까지 발췌하고싶으면 마지막index +1

반환 값
수정한 배열

원본 배열 손상여부 : 손상있음

const arr = ["라이언","무지","콘","농담곰","카카오"];
console.log(arr.copyWithin(1,3,5))//'라이언', '농담곰', '카카오', '농담곰', '카카오'

Array.prototype.entries()

entry : 경기, 경연 따위에 참가하는 사람들의 명부.

설명 : 배열의 key, value 를 가진 반복자 객체를 반환한다.

매개변수
별도의 매개변수는 사용하지 않고 반환된 객체는 아래 형태와 같다.

  1. 반환된 객체의 구성요소 : value, done
  2. value : 배열이 할당되어있고, [key, value] 형태이다.
  3. done : 배열이 모두 순회되었는지 체크하는 속성 모두 순회시 true 반환

모두 순회하여 done 속성이 true 로 변하면 undefiend 를 반환합니다. 1회성 반복자 객체라는 뜻 입니다.

반복문으로 순환하여 출력이 가능합니다.

반환 값
반복자 객체

원본 배열 손상여부 : 손상없음

const arr = ["라이언","무지","콘","농담곰","카카오"];
const entri = arr.entries();
console.log(entri.next())//[0, '라이언']
console.log(entri.next())//[1, '무지']
console.log(entri.next())//[2, '콘']

ps. 이터러블 객체란 자바스크립트 내에서 순회 가능한 객체를 뜻합니다. 배열,객체,문자열도 이터러블 합니다. 이터러블한 객체는 모두 done 속성 값을 가지고 있다고 생각하고 넘어가겠습니다.

Array.prototype.every(callback(curentValue, index, array)[, thisArg])

every : 모든

설명
배열의 모든 요소가 조건에 만족하는지 확인하는 메소드
배열 순환중 조건에 만족하지 않는 요소가 있다면 즉시 순환을 중지하고 false를 반환한다.

매개변수

  • callback : function 안에서 조건을 체크하며, true/false를 반환한다.
  • curentValue: 현재 요소 (ex. 반복문의 현재 요소)
  • index : 현재 요소의 인덱스
  • array :대상 배열
  • thisArg : callback을 실행할 때 this로 사용하는 값.

반환 값
boolean

원본 배열 손상여부 : 손상없음

const arr = [
  {brand : "kakao", char : "라이언"},
  {brand : "kakao", char : "무지"},
  {brand : "nongdam", char : "농담곰"},
  {brand : "kakao", char : "콘"}
  ];

function checkBrand(pram){
 	if(pram.every(el => el.char == 'kakao')){
    	console.log("KAKAO");
    }else{
    	console.log("NOT KAKAO");
    }
}

checkBrand(arr);

Array.prototype.fill(value[, start[, end]])

fill:채우다,떼우다,메우다

설명
배열의 특정 index 범위를 같은 값으로 채워주는 메소드. end 로 지정한 index 이전까지만 채워진다.

매개변수

  • value : 배열을 채워넣을 값
  • start : 채워넣을 값의 시작지점
  • end : 채워넣을 값의 끝지점

반환 값
수정된 배열

원본 배열 손상여부 : 손상있음

const arr = ["라이언","무지","농담곰","콘"];
console.log(arr.fill("카카오",0,1))//[카카오,무지,농담곰,콘]

const arr = new Array(40).fill(0);
//배열의 요소수와 0으로 채우는 이유 : 정해진 메모리공간을 할당함으로 메모리를 더 빠르게 사용할 수 있다고함..

Array.prototype.filter(callback(element[, index[, array]])[, thisArg])

filter:여과하다,거르다

설명
주어진 함수의 조건을 통과하는 모든 요소를 합쳐 새로운 배열로 반환합니다.

매개변수

  • callback : 각 요소를 시험할 함수. true를 반환하면 요소를 유지하고, false를 반환하면 버립니다.
  • element : 조건을 검토할 배열의 요소들
  • index(optional) : 조건을 검토할 배열의 인덱스
  • array(optional) : 조건을 검토할 배열 객체
  • thisArg(optional) : callback을 실행할 때 this로 사용하는 값.

반환 값
테스트를 통과한 요소로 이루어진 새로운 배열. 어떤 요소도 테스트를 통과하지 못했으면 빈 배열을 반환합니다.

원본 배열 손상여부 : 손상없음

주의사항

  • filter 함수는 객체를 직접 사용하거나 변형시키지 않지만 callbackfn을 통해 수정할 수 있으며 이는 문제를 발생시키는 원인이 됩니다.

  • callbackfn이 호출되는 범위는 callbackfn이 처음 호출되기 이전이며, filter는 순회하는 도중에 추가된 요소는 접근하지 않습니다. 반대로 순회하는 도중 수정이 일어나면 변경된 값이 callbackfn에 전달되고 삭제된 요소는 접근하지 않습니다.

const arr = [
  {brand : "kakao", char : "라이언"},
  {brand : "kakao", char : "무지"},
  {brand : "nongdam", char : "농담곰"},
  {brand : "kakao", char : "콘"}
  ];

const checkBrand = arr.filter(item => item.brand === "nongdam");
console.log(checkBrand)//[{brand : "nongdam", char : "농담곰"}]

Array.prototype.find(callback[, thisArg])

find:찾다

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

  1. callback 함수가 참을 반환할때까지 배열순회
  2. 참 발견시, 즉시 순회중단하고 값 반환
  3. 참 없을시 undefined를 반환합니다.
  4. 희소 배열 (sparse arrays)도 모두 탐색 ( 효율 떨어짐 )

매개변수

  • callback : 각 요소를 시험할 함수. true를 반환하면 요소를 반환하고 중단합니다.
  • index(optional) : 조건을 검토할 배열의 인덱스
  • array(optional) : 조건을 검토할 배열 객체

반환 값
주어진 조건을 만족하는 첫 번째로 발견된 요소의 값, 없으면 undefined

원본 배열 손상여부 : 손상없음

주의사항

  • find메서드가 실행 된 이후에 배열에 추가된 요소들에 대해서는 callback이 호출되지 않습니다.
  • 아직 callback이 호출되지 않았던 배열 요소가 callback에 의해서 변경된 경우, find가 해당 요소의 인덱스를 방문할 때의 값으로 callback함수에 전달될 것입니다. 즉, 삭제된 요소에도 callback이 호출됩니다.
const arr = [
  {brand : "kakao", char : "라이언"},
  {brand : "kakao", char : "무지"},
  {brand : "nongdam", char : "농담곰"},
  {brand : "kakao", char : "콘"}
  ];

const checkBrand = arr.find(item => item.brand === "kakao");
console.log(checkBrand)//{brand : "kakao", char : "라이언"}

Array.prototype.findIndex()(callback[, thisArg])

find:찾다

설명
메서드는 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환합니다. 만족하는 요소가 없으면 -1을 반환합니다.

  1. callback 함수가 참을 반환할때까지 배열순회
  2. 참 발견시, 즉시 순회중단하고 인덱스 반환
  3. 참 없을시 -1를 반환합니다.
  4. 희소 배열 (sparse arrays)도 모두 탐색 ( 효율 떨어짐 )

매개변수

  • callback : 각 요소를 시험할 함수. true를 반환하면 요소를 반환하고 중단합니다.
  • index(optional) : 조건을 검토할 배열의 인덱스
  • array(optional) : 조건을 검토할 배열 객체

반환 값
주어진 조건을 만족하는 첫 번째로 발견된 요소의 값 , 없으면 -1

원본 배열 손상여부 : 손상없음

주의사항

  • findIndex메서드가 실행 된 이후에 배열에 추가된 요소들에 대해서는 callback이 호출되지 않습니다.
  • 아직 callback이 호출되지 않았던 배열 요소가 callback에 의해서 변경된 경우, find가 해당 요소의 인덱스를 방문할 때의 값으로 callback함수에 전달될 것입니다. 즉, 삭제된 요소에도 callback이 호출됩니다.
const arr = [
  {brand : "kakao", char : "라이언"},
  {brand : "kakao", char : "무지"},
  {brand : "nongdam", char : "농담곰"},
  {brand : "kakao", char : "콘"}
  ];

const checkBrand = arr.findIndex(item => item.brand === "kakao");
console.log(checkBrand)//0

Array.prototype.findLast(callback[, thisArg])

find:찾다

설명
find() 를 배열의 역순으로 실행합니다.

  1. callback 함수가 참을 반환할때까지 역순으로 배열순회
  2. 참 발견시, 즉시 순회중단하고 값 반환
  3. 참 없을시 undefined를 반환합니다.
  4. 희소 배열 (sparse arrays)도 모두 탐색 ( 효율 떨어짐 )

매개변수

  • callback : 각 요소를 시험할 함수. true를 반환하면 요소를 반환하고 중단합니다.
  • index(optional) : 조건을 검토할 배열의 인덱스
  • array(optional) : 조건을 검토할 배열 객체

반환 값
주어진 조건을 만족하는 첫 번째로 발견된 요소의 값, 없으면 undefined

원본 배열 손상여부 : 손상없음

주의사항

  • find메서드가 실행 된 이후에 배열에 추가된 요소들에 대해서는 callback이 호출되지 않습니다.
  • 아직 callback이 호출되지 않았던 배열 요소가 callback에 의해서 변경된 경우, find가 해당 요소의 인덱스를 방문할 때의 값으로 callback함수에 전달될 것입니다. 즉, 삭제된 요소에도 callback이 호출됩니다.
const arr = [
  {brand : "kakao", char : "라이언"},
  {brand : "kakao", char : "무지"},
  {brand : "nongdam", char : "농담곰"},
  {brand : "kakao", char : "콘"}
  ];

const checkBrand = arr.find(item => item.brand === "kakao");
console.log(checkBrand)//{brand : "kakao", char : "콘"}

Array.prototype.findLastIndex(callback[, thisArg])

find:찾다

설명
findIndex() 를 배열의 역순으로 실행합니다.

  1. callback 함수가 참을 반환할때까지 역순으로 배열순회
  2. 참 발견시, 즉시 순회중단하고 인덱스 반환
  3. 참 없을시 -1를 반환합니다.
  4. 희소 배열 (sparse arrays)도 모두 탐색 ( 효율 떨어짐 )

매개변수

  • callback : 각 요소를 시험할 함수. true를 반환하면 요소를 반환하고 중단합니다.
  • index(optional) : 조건을 검토할 배열의 인덱스
  • array(optional) : 조건을 검토할 배열 객체

반환 값
주어진 조건을 만족하는 첫 번째로 발견된 요소의 값 , 없으면 -1

원본 배열 손상여부 : 손상없음

주의사항

  • findIndex메서드가 실행 된 이후에 배열에 추가된 요소들에 대해서는 callback이 호출되지 않습니다.
  • 아직 callback이 호출되지 않았던 배열 요소가 callback에 의해서 변경된 경우, find가 해당 요소의 인덱스를 방문할 때의 값으로 callback함수에 전달될 것입니다. 즉, 삭제된 요소에도 callback이 호출됩니다.
const arr = [
  {brand : "kakao", char : "라이언"},
  {brand : "kakao", char : "무지"},
  {brand : "nongdam", char : "농담곰"},
  {brand : "kakao", char : "콘"}
  ];

const checkBrand = arr.findLastIndex(item => item.brand === "kakao");
console.log(checkBrand)//3

Array.prototype.flat([depth])

flat:평평한, 편평한

설명
중첩된 배열(다중차원 배열)을 평탄화할 때 사용합니다.

매개변수

  • depth(optional) : 몇개의 뎁스를 평탄화할지 적는 정수, 기본값은 1

반환 값
평탄화 된 새로운 배열

원본 배열 손상여부 : 손상없음

주의사항

  • 원본 배열을 수정하여 반환할거같지만 그렇지 않다.
  • 희소배열에서는 값이 없는 공백배열을 삭제시켜준다.
const arr =  ["라이언","무지",["농담곰","콘"]]
const flatArr = arr.flat()
console.log(arr) //라이언,무지,Array(2);
console.log(flatArr) //라이언,무지,농담곰,콘

Array.prototype.flatMap(callback(currentValue[, index[, array]])[, thisArg])

flatMap은 flat() 과 map() 을 한번에 해결해주는 고마운 녀석입니다.예제를 보시면 아시겠지만 flatMap() 는 flat 된 중첩배열을 문자열로 반환합니다. 사칙연산을 하려면 NaN 을 만나실 수 있으니 숫자는 꼭 숫자형태로 변환시켜주세요.

flat:평평한, 편평한
Map :(배치구조 등에 대한 정보를) 발견하다,보여주다

설명
각 요소에 접근하여 callback 함수를 실행하고 1뎁스만 평탄화 합니다.

매개변수

  • callback : 새로운 배열의 엘리먼트를 생성하는 함수
    • currentValue : 배열에서 처리되는 현재 요소
    • index(optional) : 배열에서 처리되고 있는 현재 엘리먼트의 인덱스
    • array(optional) : map 이 호출된 배열.

반환 값
각 요소가 callback 함수의 결과, 1뎁스만 평탄화 된 배열

원본 배열 손상여부 : 손상없음

주의사항

  • 원본 배열을 수정하여 반환할거같지만 그렇지 않다.
  • 희소배열에서는 값이 없는 공백배열을 삭제시켜준다.
  • 중요! flat 된 중첩 배열은 문자열로 반환된다.
  • 중요! 1뎁스만 평탄화 가능하다. 
const arr = [1, 2, [3,4],5];
const mapped = arr.flatMap((x) => x+2);
console.log(mapped); // [2, 4, '3,42', 10]

const arr = [1, 2, [3],4,5];
const mapped = arr.flatMap((x) => parseInt(x)+2);
console.log(mapped); // [3, 4, 5, 6, 7]

Array.prototype.forEach(callback(currentValue[, index[, array]])[, thisArg])

for(let i = 0 ; i < arr.length; i++ ) 와 동일한 동작을 합니다.

forEach:각각의

설명
각 요소에 접근하여 callback 함수를 실행합니다.

매개변수

  • callback : 배열의 각 요소에 접근하여 실행할 함수
    • currentValue : 배열에서 처리되는 현재 요소
    • index(optional) : 배열에서 처리되고 있는 현재 엘리먼트의 인덱스
    • array(optional) : forEach()를 호출한 배열.

반환 값
콜백함수의 결과

원본 배열 손상여부 : 손상없음

주의사항

  • 무조건 전체 배열요소 다 순환
  • forEach() 호출을 시작한 뒤 배열에 추가한 요소는 순환 안함
  • 배열의 기존 요소값이 바뀐 경우, callback에 전달하는 값은 forEach()가 요소를 방문한 시점의 값을 사용합니다.
  • 방문하기 전에 삭제한 요소는 방문하지 않습니다.
const arr =  ["라이언","무지",,"농담곰","콘"]
let playCount = 0;

arr.forEach(function(item){
	console.log("배고픈" + item + "입니다");
  	++playCount;
});

console.log("실행된 횟수는 :" + playCount)

Array.prototype.includes(searchElement[, fromIndex])

include : 포함

설명
배열 Array의 항목 중 특정 값이 포함되어있는지 검색하여 true 를 반환한 요소의 값을 반환합니다.

매개변수

  • searchElement : 검색할 값
  • fromIndex : 검색을 시작할 Index 기본값은 0 음수가 입력되면 arr.length+fromIndex로 계산

반환 값
Boolean

원본 배열 손상여부 : 손상없음

주의사항

  • fromIndex배열의 길이보다 크거나 같으면 반환 false됩니다. 배열은 검색되지 않습니다.
  • 희소배열을 찾아낼 수 있습니다.
const arr =  ["라이언","무지",,"농담곰","콘"]
console.log(arr.includes("무지")) // true

희소배열 검색

console.log(["무지", ,"라이언"].includes(undefined)); // true

Array.prototype.indexOf(searchElement[, fromIndex])

indexOf : 색인의

설명
배열 Array의 항목 중 특정 값이 포함되어있는지 검색하여 true 를 반환한 요소의 Index를 반환합니다.

매개변수

  • searchElement : 검색할 값
  • fromIndex : 검색을 시작할 Index 기본값은 0 음수가 입력되면 arr.length+fromIndex로 계산

반환 값
인덱스

원본 배열 손상여부 : 손상없음

주의사항

  • fromIndex배열의 길이보다 크거나 같으면 반환 false됩니다. 배열은 검색되지 않습니다.
  • 희소배열을 건너뜁니다.
const arr =  ["라이언","무지",,"농담곰","콘"]
console.log(arr.indexOf("무지")) // 1

Array.prototype.lastIndexOf(searchElement[, fromIndex])

indexOf : 색인의

설명
배열 Array의 항목 중 특정 값이 포함되어있는지 검색하여 true 를 반환한 요소의 Index를 반환합니다. 배열의 끝부터 검색합니다. 역방향 검색

매개변수

  • searchElement : 검색할 값
  • fromIndex : 검색을 시작할 Index 기본값은 0 음수가 입력되면 arr.length+fromIndex로 계산

반환 값
인덱스

원본 배열 손상여부 : 손상없음

주의사항

  • fromIndex배열의 길이보다 크거나 같으면 반환 false됩니다. 배열은 검색되지 않습니다.
  • 희소배열을 건너뜁니다.
const arr =  ["라이언","무지",,"농담곰","콘"]
console.log(arr.lastIndexOf("무지")) // 1

Array.prototype.join([separator])

join :연결하다, 잇다

설명
배열의 모든 요소를 쉼표나 지정된 구분 문자열로 구분하여 연결하여 새 문자열을 만들고 반환합니다. 배열에 항목이 하나만 있는 경우 해당 항목은 구분 기호를 사용하지 않고 반환됩니다.

매개변수

  • separator : 배열의 인접한 요소의 각 쌍을 구분하는 문자열입니다. 생략하면 배열 요소가 쉼표(",")로 구분됩니다.

반환 값
모든 배열 요소가 결합된 문자열입니다. arr.lengthis 인 경우 0빈 문자열이 반환됩니다.

원본 배열 손상여부 : 손상없음

주의사항

  • 중첩배열은 모두 평면화되어 반환됩니다.
  • 빈 요소는 공백으로 반환됩니다.
const arr =  ["라이언","무지",,["농담곰","콘"]]
console.log(arr.join())//라이언,무지,,농담곰,콘

Array.prototype.keys()

keys : 열쇠들

설명
배열의 모든 요소의 인덱스를 키 값으로 가지는 이터러블 객체 반환

매개변수
없음

반환 값
이터러블 객체

원본 배열 손상여부 : 손상없음

주의사항

  • Object.keys()처럼 실제로 존재하는 키만 포함하는것과 달리 Array.keys() 반복자는 희소배열의 빈 요소도 포함합니다.

  • 다차원 배열은 무시됩니다. 중첩된 배열 자체를 하나의 키로 봅니다.

const arr =  ["라이언","무지",,["농담곰","콘"]];
const iter = arr.keys();

for(const key of iter){
    console.log(key);
}
console.log(arr);//0,1,2,3  농담곰,콘 은 하나의 요소로판별

Array.prototype.map()

map : (배치구조 등에 대한 정보를) 발견하다,보여주다

설명
호출 배열의 모든 요소에 대해 콜백함수의 결과로 채워진 새 배열을 만듭니다.

매개변수

  • callback : 배열의 각요소에 대해 실행할 함수. 리턴값은 새 배열의 요소로 추가 됩니다.
  • element : 배열에서 현재 처리 중인 요소
  • index : 배열에서 현재 처리 중인 요소의 인덱스
  • array : map를 호출한 배열
  • thisArg(optional) : callback을 실행할 때 this로 사용하는 값.

반환 값
각 요소에 콜백함수의 결과가 적용된 새 배열

원본 배열 손상여부 : 손상없음

주의사항

  • 희소배열 빈 요소는 무시됩니다.
// 각 배열요소의 인덱스로 채워진 새 배열을 반환함
const arr =  ["라이언","무지","농담곰","콘"];
const arr2 = arr.map((x) => {return arr.indexOf(x)})
console.log(arr2);//0,1,2,3

Array.prototype.pop()

pop : 펑 하고 터뜨리다

설명
배열 에서 마지막 요소를 제거 하고 해당 요소를 반환합니다. 이 메서드는 배열의 길이를 변경합니다.

매개변수
없음

반환 값
제거된 요소

원본 배열 손상여부 : 손상있음

주의사항

  • 원본 배열이 변경됩니다.

const kakao = ["라이언","무지","콘"];
console.log(kakao.pop()); //콘
console.log(kakao); //[라이언,무지]

Array.prototype.push(element..)

push : 밀다

설명
지정된 배열의 끝에 매개변수로 전달된 값을 추가하고 변경된 배열의 길이를 반환합니다.

매개변수

  • element : N 개의 추가될 요소들

반환 값
push를 호출한 배열의 변경된 length 값

원본 배열 손상여부 : 손상있음

주의사항

  • 원본 배열이 변경됩니다.
const kakao = ["라이언","무지","콘"];
console.log(kakao.push("농담곰","춘식이")); // 5
console.log(kakao); //[라이언,무지,콘,농담곰,춘식이]

Array.prototype.reverse()

reverse : (정반대로) 뒤바꾸다, 반전시키다

설명
호출한 배열의 요소의 위치를 반전시킵니다.

매개변수
없음

반환 값
원본 배열을 반전시킨 배열

원본 배열 손상여부 : 손상있음

주의사항

  • 원본 배열이 변경됩니다.
  • 희소 배열도 적용 됩니다.
const kakao = ["라이언","무지","콘"];
const kakaoReverse = kakao.reverse();
console.log(kakao);//[콘,무지,라이언]
console.log(kakaoReverse);//[콘,무지,라이언]

Array.prototype.toReversed()

reverse : (정반대로) 뒤바꾸다, 반전시키다

설명
호출한 배열의 복사본을 만들고 요소의 위치를 반전시킵니다.

매개변수
없음

반환 값
원본 배열을 반전시킨 배열 복사본

원본 배열 손상여부 : 손상없음

주의사항

  • 희소 배열도 적용 됩니다.
const kakao = ["라이언","무지","콘"];
const kakaoReverse = kakao.toReversed();
console.log(kakao);//[라이언,무지,콘]
console.log(kakaoReverse);//[콘,무지,라이언]

Array.prototype.shift()

shift : (장소를) 옮기다, 이동하다[되다]; 자세를 바꾸다

설명
배열의 첫번째 요소를 제거하고 제거된 요소를 반환합니다.

매개변수
없음

반환 값
배열에서 제거된 요소

원본 배열 손상여부 : 손상있음

주의사항

  • 가장 앞에 제거된 요소를 채우기위해 모든 배열의 요소가 한칸씩 이동해야합니다. 사용되는 자원이 많을것으로 예상되며 속도가 느릴것같습니다
  • 요소는 무조건 1개만 삭제됩니다.
const kakao = ["라이언","무지","콘"];
console.log(kakao.shift()); // 라이언
console.log(kakao); // [라이언,무지]

Array.prototype.unshift(element...)

shift : (장소를) 옮기다, 이동하다[되다]; 자세를 바꾸다

설명
배열의 첫번째에 요소를 추가하고 추가된 요소를 반환합니다.

매개변수

  • element : 배열의 앞에 추가할 N 개의 요소들 입니다.

반환 값
추가된 요소를 포함한 배열의 length

원본 배열 손상여부 : 손상있음

주의사항

  • 가장 앞에 요소를 추가하기 위해 모든 배열의 요소가 빈자리를 만들기위해 우측으로 이동해야합니다. 사용되는 자원이 많을것으로 예상되며 속도가 느릴것같습니다.
const kakao = ["라이언","무지","콘"];
console.log(kakao.unshift("농담곰","캐릭터")); // 5
console.log(kakao); //['농담곰', '캐릭터', '라이언', '무지', '콘']

Array.prototype.slice(start, end)

slice : 조각, 부분, 썰다

설명
호출한 배열의 일부를 얕은 복사본인 새 배열로 만들어줍니다.

매개변수

  • start : 추출을 시작할 인덱스 , 음수는 끝부분 부터
  • end : 추출을 종료할 인덱스 , 음수는 끝부분 부터

반환 값
추출된 요소를 포함하는 새 배열입니다.

원본 배열 손상여부 : 손상없음

주의사항

  • 희소배열의 빈 요소도 포함합니다.
const kakao = ["라이언","무지","콘","춘식이","제이슨"];
const sliceKakao = kakao.slice(1,3);

console.log(kakao);//["라이언","무지","콘","춘식이","제이슨"]
console.log(sliceKakao);//["무지","콘"]

Array.prototype.some(callback[, thisArg])

some:조금, 일부

설명
주어진 판별 함수를 만족하는 값이 있다면 true 를 그렇지 않으면 false 를 반환합니다.

  1. callback 함수가 참을 반환할때까지 배열순회
  2. 참 발견시, 즉시 순회중단하고 true 반환
  3. 참 없을시 false 를 반환합니다.
  4. 희소 배열 (sparse arrays)도 모두 탐색 ( 효율 떨어짐 )

매개변수

  • callback : 각 요소를 시험할 함수
  • index : 조건을 검토할 배열의 인덱스
  • array : 조건을 검토할 배열

반환 값
boolean

원본 배열 손상여부 : 손상없음

주의사항

  • 희소 배열은 순회하지 않습니다.
  • callbackFn호출이 시작될 때 배열의 초기 길이를 초과하여 추가된 요소를 방문하지 않습니다
  • 삭제된 요소는 방문하지 않습니다.
const arr = ["라이언","무지","농담곰","콘"];
arr.some((x)=> "라이언" === x); // true

const arr = ["라이언","무지","농담곰","콘"];
arr.some((x)=> "춘식이" === x); // false

Array.prototype.sort([compareFunction])

Sort 메소드의 정렬 알고리즘은 Tim Sort 방식이라고 합니다. Tim Sort는 Merge Sort + Insertion Sort 두가지의 방식을 적절히 조화시킨 방식이라고합니다.

정렬을 시키는 이유
단순히 보기 편해서?? 아닙니다.
정렬이 되어있는 데이터는 바이너리탐색을 할 수있다는 장점이있습니다.

바이너리탐색은 이진법의 "이진" 이 아니라 배열을 반씩 나누어 진행한다는겁니다.

바이너리탐색은 정렬, 요소추가, 삭제 등에서 시간이 많이 걸리지만 데이터를 검색할때 말도안되게 빠르게 찾을 수 있습니다.

그렇다면 배열요소의 변동이 적고, 탐색을 많이하는 배열에 정렬을 하면 더 극대화된 효과를 누릴 수 있겠죠?

sort: 정리하다

설명
배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다.정렬 속도와 복잡도는 각 구현방식에 따라 다를 수 있습니다.

매개변수

  • compareFunction :
    • 정렬 순서를 정의하는 함수.
    • 함수를 생략하면, 배열의 요소들은 문자열로 취급되어, 유니코드 값 순서대로 정렬됩니다.
    • 함수를 호출한 배열의 두개의 요소를 매개변수로 받습니다.
    • 함수의 리턴값이 음수이면 a가 b 앞으로 정렬됩니다.
    • 함수의 리턴값이 양수이면 b가 a 앞으로 정렬됩니다.
    • 0을 리턴하면 원상태를 유지합니다.

반환 값
원본배열을 정렬한 배열

원본 배열 손상여부 : 손상있음

주의사항

  • 원본 배열을 변경합니다.
  • 브라우저마다 정렬에 관한 알고리즘이 달라서 console 에 찍어보면서 계산해보아도 답이 안나옵니다. 오름차순 내림차순 외우세요.
// x y 에는 arr 배열의 요소가 각각 할당되고, 그 값으로 연산을 합니다.
const arr = [5,10,7,3,4];
const arr2 = arr.sort(fn);

function fn(a,b){
    return a - b;
};

arr === arr2 //true
a - b : 오름차순b - a : 내림차순

Array.prototype.toSorted([compareFunction])

sort: 정리하다

설명
sort()에 대응되는 복사 메서드입니다. 이 메서드는 요소들을 오름차순으로 정렬한 새로운 배열을 반환합니다.

매개변수

  • compareFunction :
    • 정렬 순서를 정의하는 함수.
    • 함수를 생략하면, 배열의 요소들은 문자열로 취급되어, 유니코드 값 순서대로 정렬됩니다.
    • 함수를 호출한 배열의 두개의 요소를 매개변수로 받습니다.
    • 함수의 리턴값이 음수이면 a가 b 앞으로 정렬됩니다.
    • 함수의 리턴값이 양수이면 b가 a 앞으로 정렬됩니다.
    • 0을 리턴하면 원상태를 유지합니다.

반환 값
원본배열을 복사한 별개의 수정된 배열

원본 배열 손상여부 : 손상없음

주의사항

  • 브라우저마다 정렬에 관한 알고리즘이 달라서 console 에 찍어보면서 계산해보아도 답이 안나옵니다. 오름차순 내림차순 외우세요.
// x y 에는 arr 배열의 요소가 각각 할당되고, 그 값으로 연산을 합니다.
const arr = [5,10,7,3,4];
const arr2 = arr.toSorted(function(a,b){return a-b});

arr === arr2 //false
a - b : 오름차순b - a : 내림차순

Array.prototype.splice(start[, deleteCount[, item1[, item2[, ...]]]])

splice: 잇다, 붙이다

설명
배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.

매개변수

  • start : 배열의 변경을 시작할 인덱스입니다. 배열의 길이보다 큰 값이라면 실제 시작 인덱스는 배열의 길이로 설정됩니다. 음수인 경우 배열의 끝에서부터 요소를 세어나갑니다.
  • deleteCount : 배열에서 제거할 요소의 수입니다.
  • item : 배열에 추가할 요소입니다. start 로 지정한 인덱스부터 추가합니다.

반환 값
변경된 배열

원본 배열 손상여부 : 손상있음

주의사항

  • 원본 배열을 변경합니다.
const arr = ["라이언","무지","농담곰","콘"];
const arr2 = arr.splice(2,0,'제이지','캐릭터');

console.log(arr)//[라이언,무지,제이지,캐릭터,농담곰,콘]
console.log(arr2)//[라이언,무지,제이지,캐릭터,농담곰,콘]

arr === arr2 // true

Array.prototype.toSpliced(start[, deleteCount[, item1[, item2[, ...]]]])

splice: 잇다, 붙이다

설명
배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경하고, 새 배열을 반환합니다.

매개변수

  • start : 배열의 변경을 시작할 인덱스입니다. 배열의 길이보다 큰 값이라면 실제 시작 인덱스는 배열의 길이로 설정됩니다. 음수인 경우 배열의 끝에서부터 요소를 세어나갑니다.
  • deleteCount : 배열에서 제거할 요소의 수입니다.
  • item : 배열에 추가할 요소입니다. start 로 지정한 인덱스부터 추가합니다.

반환 값
변경된 배열

원본 배열 손상여부 : 손상없음

주의사항

  • 원본 배열을 변경하지 않습니다.
const arr = ["라이언","무지","농담곰","콘"];
const arr2 = arr.splice(2,0,'제이지','캐릭터');

console.log(arr)//[라이언,무지,농담곰,콘]
console.log(arr2)//[라이언,무지,제이지,캐릭터,농담곰,콘]

arr === arr2 // false

Array.prototype.toLocaleString([locales[, options]])

설명
배열의 요소를 연결하여 반환합니다. 요소는 문자열로 변환되고 이 문자열을 사용하는 데 사용되는 로케일 고유 문자열(가령 휴식표 ",")에 의해 분리됩니다.

매개변수

반환 값
배열요소를 모두 합친 문자열

원본 배열 손상여부 : 손상없음

주의사항

const arr = ["라이언","무지","농담곰","콘"];
arr.toLocaleString();
console.log(arr)// "라이언,캐릭터,농담곰,콘" 문자열 반환

Array.prototype.values()

value: 값, 가치

설명
배열의 모든 개별요소의 값을 반환하는 반복자 객체를 반환합니다.

매개변수
없음

반환 값
이터러블 객체

원본 배열 손상여부 : 손상없음

주의사항

const arr = ["라이언","무지","농담곰","콘"];
const iter = arr.values();
//console.log(iter) = Array Iterator {}

arr.forEach( (el) => {console.log(el)} );
//라이언
//무지
//농담곰
//콘

Array.prototype.with(index, value)

value: ~와 함께, ~을 가진

설명
배열의 지정된 인덱스의 값을 변경하고, 지정된 인덱스의 요소가 지정된 값으로 대체된 새 배열을 반환합니다.

매개변수

  • index : 배열을 변경할 0부터 시작 인덱스, 음수는 끝부터
  • value : 주어진 인덱스에 할당될 모든 값입니다.

반환 값
변경된 새 배열

원본 배열 손상여부 : 손상없음

주의사항

const arr = ["라이언","무지","농담곰","콘"];
const iter = arr.values();
//console.log(iter) = Array Iterator {}

arr.forEach( (el) => {console.log(el)} );
//라이언
//무지
//농담곰
//콘
profile
taehyung
Front End
이전 포스트

프로토타입 ( Prototype )

다음 포스트

JS getter 지양해라?

0개의 댓글