자바스크립트 배열의 메소드

kiki97 ㅣ 2022. 9. 20. 16:17

요소 추가, 제거 메서드

arr.push() - 맨 끝에 요소 추가
arr.pop() - 맨 끝에 요소 제거
arr.shift() - 맨 앞 요소 제거
arr.unshift() - 맨 앞 요소 추가

splice()

요소 추가,삭제, 교체가 모두 가능한 메서드

arr.splice(index[, deleteCount, elem1, ..., elemN])

index - 첫 번째 요소 (음수 인덱스도 사용가능)
deleteCount - 제거하고자 하는 요소의 개수
elem1, ..., elemN - 배열에 추가할 요소

요소 삭제 예제

let arr = ["I", "study", "JavaScript"];

arr.splice(1, 1); // 인덱스 1부터 요소 한 개를 제거

alert( arr ); // ["I", "JavaScript"]

요소 교체 예제

let arr = ["I", "study", "JavaScript", "right", "now"];

// 처음(0) 세 개(3)의 요소를 지우고, 이 자리를 다른 요소로 대체합니다.
arr.splice(0, 3, "Let's", "dance");

alert( arr ) // now ["Let's", "dance", "right", "now"]

요소 추가

let arr = ["I", "study", "JavaScript"];

// 인덱스 2부터
// 0개의 요소를 삭제합니다.
// 그 후, "complex"와 "language"를 추가합니다.
arr.splice(2, 0, "complex", "language");

alert( arr ); // "I", "study", "complex", "language", "JavaScript"

리턴값

let arr = ["I", "study", "JavaScript", "right", "now"];

// 처음 두 개의 요소를 삭제함
let removed = arr.splice(0, 2);

alert( removed ); // "I", "study" <-- 삭제된 요소로 구성된 배열

splice는 삭제된 요소로 구성된 배열을 반환한다.

slice()

배열의 부분이나 전체를 복사한 새로운 배열을 반환

arr.slice([start], [end])

start 인덱스부터 (end를 제외한) end인덱스까지의 요소를 복사한 새로운 배열을 반환 (인수로 둘다 음수가능)

let arr = ["t", "e", "s", "t"];

alert( arr.slice(1, 3) ); // e,s (인덱스가 1인 요소부터 인덱스가 3인 요소까지를 복사(인덱스가 3인 요소는 제외))

alert( arr.slice(-2) ); // s,t (인덱스가 -2인 요소부터 제일 끝 요소까지를 복사)

기존의 배열을 건드리지 않으면서 배열을 조작해 새로운 배열을 만들고자 할 때 자주사용되는 메소드
arr.slice() - 인수를 하나도 넘기지 않고 호출하면 arr의 복사본을 만들 수 있다.

concat()

기존 배열의 요소를 추가해 새로운 배열을 반환

arr.concat(arg1, arg2...)

기존 배열의 요소를 사용해 새로운 배열을 만들거나 기존 배열에 요소를 추가하고자 할 때 사용한다.

let arr = [1, 2];

// arr의 요소 모두와 [3,4]의 요소 모두를 한데 모은 새로운 배열이 만들어집니다.
alert( arr.concat([3, 4]) ); // 1,2,3,4

// arr의 요소 모두와 [3,4]의 요소 모두, [5,6]의 요소 모두를 모은 새로운 배열이 만들어집니다.
alert( arr.concat([3, 4], [5, 6]) ); // 1,2,3,4,5,6

// arr의 요소 모두와 [3,4]의 요소 모두, 5와 6을 한데 모은 새로운 배열이 만들어집니다.
alert( arr.concat([3, 4], 5, 6) ); // 1,2,3,4,5,6

인수 개수엔 제한이 없다.
메서드를 호출하면 arr에 속한 모든 요소와 arg1, arg2등에 속한 모든 요소를 모아 새로운 배열을 반환

forEach(func)

모든 요소에 func를 호출 결과는 반환되지 않음

["Bilbo", "Gandalf", "Nazgul"].forEach((item, index, array) => {
  alert(`${item} is at index ${index} in ${array}`);
});

forEach() - 주어진 함수를 배열 요소 각각에 대해 실행할 수 있게 해준다.
인수로 넘겨준 함수의 반환값은 무시된다.

배열 탐색하기

배열 내에서 무언가를 찾고 싶을 때 사용하는 메서드에 대해 알아보자

indexOf(), lastIndexOf()와 includes()

let arr = [1, 0, false];

alert( arr.indexOf(0) ); // 1
alert( arr.indexOf(false) ); // 2
alert( arr.indexOf(null) ); // -1

alert( arr.includes(1) ); // true

arr.indexOf(item, from)는 from부터 시작해 item(요소)을 찾는다.
요소를 발견하면 해당 요소의 인덱스를 반환하고 발견하지 못했으면 -1을 반환
arr.lastIndexOf(item, from)는 위 메서드와 동일한 기능을 하는데, 검색을 끝에서부터 시작한다.
arr.includes(item, from)는 from부터 시작해 item이 있는지를 검색하고 요소를 발견하면 true를 반환한다.
위 메소드들은 요소를 찾을 때 완전 항등 연산자 ===를 사용한다. (유의)

const arr = [NaN];
alert( arr.indexOf(NaN) ); // -1 (완전 항등 비교 === 는 NaN엔 동작하지 않으므로 0이 출력되지 않습니다.)
alert( arr.includes(NaN) );// true (NaN의 여부를 확인하였습니다.)

includes는 NaN도 제대로 처리한다는 점에서 indexOf/lastIndexOf와 약간의 차이가 있다.

find()와 findIndex()

객체로 이루어진 배열에서 특정 조건에 부합하는 객체를 배열 내에서 찾기

let result = arr.find(callback(item, index, array), thisArg) {
  // true가 반환되면 반복이 멈추고 해당 요소를 반환합니다.
  // 조건에 해당하는 요소가 없으면 undefined를 반환합니다.
});

item – 함수를 호출할 요소
index – 요소의 인덱스
array – 배열 자기 자신
thisArg(생략 가능) - callback을 실행할 때 this로 사용되는 값

let users = [
  {id: 1, name: "John"},
  {id: 2, name: "Pete"},
  {id: 3, name: "Mary"}
];

let user = users.find(item => item.id == 1);

//위와 동일한 함수
let user = users.find(function(item) {return item.id == 1};

alert(user.name); // John

(item => item.id == 1) 이런 패턴이 가장 많이 사용되는 편이다.
다른 인자들(index, array)는 잘 사용되지 않는다.
findIndex()는 find()과 동일하나, 조건에 맞는 요소를 반환하는 대신 해당 요소의 인덱스를 반환한다. 없으면 -1

filter()

find 메서드와 문법이 유사하지만, 조건에 맞는 요소 전체를 담은 배열을 반환한다는 점에서 차이가 있다.

let results = arr.filter(function(item, index, array) {
  // 조건을 충족하는 요소는 results에 순차적으로 더해집니다.
  // 조건을 충족하는 요소가 하나도 없으면 빈 배열이 반환됩니다.
});

let users = [
  {id: 1, name: "John"},
  {id: 2, name: "Pete"},
  {id: 3, name: "Mary"}
];

// 앞쪽 사용자 두 명을 반환합니다.
let someUsers = users.filter(item => item.id < 3);

alert(someUsers.length); // 2

배열을 변형하는 메서드

배열을 변형시키거나 요소를 재 정렬해주는 메서드

map()

배열 요소 전체를 대상으로 함수를 호출하고, 함수 호출 결과를 배열로 반환

let result = arr.map(function(item, index, array) {
  // 요소 대신 새로운 값을 반환합니다.
});

let lengths = ["Bilbo", "Gandalf", "Nazgul"].map(item => item.length);
alert(lengths); // 5,7,6

각 요소(문자열)의 길이를 출력해준다.

sort(fn)

배열의 요소를 정렬해준다. 배열 자체가 변경된다.

let arr = [ 1, 2, 15 ];

// arr 내부가 재 정렬됩니다.
arr.sort();

alert( arr );  // 1, 15, 2

요소는 문자열로 취급되어 재정의된다. (그래서 1, 15, 2 값으로 정렬된것)

숫자 오름차순으로 정렬하기

function compareNumeric(a, b) {
  if (a > b) return 1;
  if (a == b) return 0;
  if (a < b) return -1;
}

let arr = [ 1, 2, 15 ];

arr.sort(compareNumeric);

alert(arr);  // 1, 2, 15


//위와 동일한 기능을하는 함수
arr.sort(function(a, b) { return a - b; });

arr.sort( (a, b) => a - b );

reverse()

요소를 역순을 정렬시켜주는 메서드

let arr = [1, 2, 3, 4, 5];
arr.reverse();

alert( arr ); // 5,4,3,2,1

반환값은 재 정렬된 배열

split(delim)

구분자(delim)를 기준으로 문자열을 배열로 쪼개준다.

let names = 'Bilbo, Gandalf, Nazgul';

let arr = names.split(', '); // ["Bilbo", "Gandalf", "Nazgul"];

let str = "test";

alert( str.split('') ); // t,e,s,t

문자열을 글자 단위로 분리하기

join()

배열의 요소를 모두 합친 후 하나의 문자열을 만들어주는 메서드

let arr = ['Bilbo', 'Gandalf', 'Nazgul'];

let str = arr.join(';'); // 배열 요소 모두를 ;를 사용해 하나의 문자열로 합칩니다.

alert( str ); // Bilbo;Gandalf;Nazgul

isArray()

배열인지 아닌지 감별해내는 메서드

alert(typeof {}); // object
alert(typeof []); // object

자바스크립트에서는 배열은 객체에 속해서, typeof로는 일반 객체와 배열을 구분할 수 없다.

alert(Array.isArray({})); // false

alert(Array.isArray([])); // true

isArray() - 인수가 배열이면 true 아니면 false를 반환

배열 메서드와 thisArg

함수를 호출하는 대부분의 배열 메서드(find, filter, map등 sort는 제외)는 thisArg라는 매개변수를 옵션으로 받을 수 있다.

arr.find(func, thisArg);
arr.filter(func, thisArg);
arr.map(func, thisArg);
// ...
// thisArg는 선택적으로 사용할 수 있는 마지막 인수입니다.

thisArg는 func의 this가 된다.

⭐ 요약

요소를 더하거나 지우기

push(...items) – 맨 끝에 요소 추가하기
pop() – 맨 끝 요소 추출하기
shift() – 첫 요소 추출하기
unshift(...items) – 맨 앞에 요소 추가하기
splice(pos, deleteCount, ...items) – pos부터 deleteCount개의 요소를 지우고, items 추가하기
slice(start, end) – start부터 end 바로 앞까지의 요소를 복사해 새로운 배열을 만듦
concat(...items) – 배열의 모든 요소를 복사하고 items를 추가해 새로운 배열을 만든 후 이를 반환함. items가 배열이면 이 배열의 인수를 기존 배열에 더해줌

원하는 요소 찾기

indexOf/lastIndexOf(item, pos) – pos부터 원하는 item을 찾음. 찾게 되면 해당 요소의 인덱스를, 아니면 -1을 반환함
includes(value) – 배열에 value가 있으면 true를, 그렇지 않으면 false를 반환함
find/filter(func) – func의 반환 값을 true로 만드는 첫 번째/전체 요소를 반환함
findIndex는 find와 유사함. 다만 요소 대신 인덱스를 반환함

배열 전체 순회하기

forEach(func) – 모든 요소에 func을 호출함. 결과는 반환되지 않음

배열 변형하기

map(func) – 모든 요소에 func을 호출하고, 반환된 결과를 가지고 새로운 배열을 만듦
sort(func) – 배열을 정렬하고 정렬된 배열을 반환함
reverse() – 배열을 뒤집어 반환함
split/join – 문자열을 배열로, 배열을 문자열로 변환함
reduce(func, initial) – 요소를 차례로 돌면서 func을 호출함. 반환값은 다음 함수 호출에 전달함. 최종적으로 하나의 값이 도출됨

기타

Array.isArray(arr) – arr이 배열인지 여부를 판단함

sort, reverse, splice는 기존 배열을 변형시킨다는 점에 주의

kiki-dev