모던 JavaScript 튜토리얼을 따라가면서 정리합니다.
요소 추가 및 삭제
push(...items): 맨 끝에 요소 추가pop(): 맨 끝 요소 추출shift(): 첫 요소 추출unshift(): 맨 앞에 요소 추가splice(pos, deleteCount, ...items):pos부터deleteCount개의 요소를 지우고,items추가하기delete을 사용해 배열에서 요소를 지우면 해당 자리는 비어있는 채로 남아있다.length에는 변화가 없다.1 2 3 4 5 6 7 8
let arr = ["I", "go", "home"]; delete arr[1]; // "go"를 삭제합니다. alert( arr[1] ); // undefined // delete를 써서 요소를 지우고 난 후 배열 --> arr = ["I", , "home"]; alert( arr.length ); // 3
빈 공간을 나머지 요소들이 자동으로 채울 것을 기대한다면 이 메서드를 사용해야 한다.
splice를 사용하면 요소 추가, 삭제, 교체가 모두 가능하다.1 2 3 4 5
let arr = ["I", "study", "JavaScript"]; arr.splice(1, 1); // 인덱스 1부터 요소 한 개를 제거 alert( arr ); // ["I", "JavaScript"]
splice메서드의deleteCount를 0으로 설정하면 요소를 제거하지 않으면서 새로운 요소를 추가할 수 있다.splice(start, end):start부터end바로 앞까지의 요소를 복사해 새로운 배열을 만듦concat(...items): 배열의 모든 요소를 복사하고items를 추가해 새로운 배열을 만든 후 이를 반환한다.items가 배열이면 이 배열의 인수를 기존 배열에 더해준다.concat메서드에 객체가 인자로 넘어오면 (배열처럼 보이는 유사 배열 객체이더라도) 객체는 분해되지 않고 통으로 복사되어 더해진다. 그런데 인자로 받은 유사 배열 객체에 특수한 프로퍼티Symbol.isConcatSpreadable이 있으면concat은 이 객체를 배열처럼 취급한다. 따라서 객체 전체가 아닌 객체 프로퍼티의 값이 더해진다.
원하는 요소 찾기
indexOf/lastIndexOf(item, from):from부터 원하는item을 찾는다. 찾게 되면 해당 요소의 인덱스를, 아니면-1을 반환한다.incudes(value, from): 배열에value가 있으면true를, 없으면false를 반환한다.indexOf,lastIndexOf,include는 요소들을 찾을 때 완전 항등 연산자인===를 사용한다.false를 검색하면 정확히false만을 검색하지, 0을 검색하지는 않는다.includes는NaN도 제대로 처리한다는 점에서indexOf/lastIndexOf와 차이가 있다.1 2 3
const arr = [NaN]; alert( arr.indexOf(NaN) ); // -1 (완전항등비교) alert( arr.includes(NaN) ); // true (NaN 여부 확인)
find/filter(func):func의 반환 값을true로 만드는 첫 번째/전체 요소를 반환한다.findIndex:find와 유사하다. 다만 요소 대신 인덱스를 반환한다.
배열 전체 순회하기
forEach(func): 모든 요소에func를 호출한다. 결과는 반환되지 않는다.1 2
// for each element call alert ["Bilbo", "Gandalf", "Nazgul"].forEach(alert);
1 2 3
["Bilbo", "Gandalf", "Nazgul"].forEach((item, index, array) => { alert(`${item} is at index ${index} in ${array}`); });
이때, 인수로 넘겨준 함수의 반환값은 무시된다.
배열 변형하기
map(func): 모든 요소에func를 호출하고, 반환된 결과를 가지고 새로운 배열을 만듦sort(func): 배열을 정렬하고 정렬된 배열을 반환함reverse(func): 배열을 뒤집어 반환함split/join: 문자열을 배열로, 배열을 문자열로 변환함reduce(func, initial): 요소를 차례로 돌면서func을 호출함. 반환값은 다음 함수 호출에 전달함. 최종적으로 하나의 값이 도출됨
기타
Array.isArray(arr):arr이 배열인지 여부를 판단함arr.some(fn)와arr.every(fn): 배열을 확인함map과 유사하게 모든 요소를 대상으로 함수를 호출한다.some은 함수의 반환 값을true로 만드는 요소가 하나라도 있는지 여부를 확인하고,every는 모든 요소가 함수의 반환 값을true로 만드는 지 여부를 확인한다. 모두 조건을 충족시키면true를, 아니면false를 반환한다.arr.fill(value, start, end): start부터 end까지value를 채워넣음arr.copyWithin(tartget, start, end): start부터 end까지 요소를 복사하고, 복사한 요소를 target으로 붙여넣음. 기존 요소가 있다면 덮어씀
sort,reverse,splice는 기존 배열을 변형시킨다.- 보통
slice메서드뿐만 아니라 배열 관련 메서드엔 음수 인덱스를 사용할 수 있다. 마이너스 부호 앞의 숫자는 배열 끝에서부터 센 요소를 나타낸다. 예를 들어 인덱스 -1은 배열 끝에서부터 첫 번째 요소이다.