배열(Array)과 메서드(Method)

goodjam92·2022년 8월 2일
0

JS-자료구조와-자료형

목록 보기
3/4

.splice ★

배열에서 원하는 위치의 요소를 지웠을 때 지워진 요소의 자리를 다른 요소가 자동으로 채워주지 않고 빈자리로 남아있음.

배열 안에서 원하는 요소를 추가, 제거, 교체하고자 할 때 사용하는 메소드

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

첫 번째 매개변수 = 조작 할 요소를 가리키는 인덱스(index) // 요소의 자리
두 번째 매개변수 = 제거하고자 하는 요소의 갯수
elem1, ... , elemN = 설정한 인덱스부터 배열에 추가할 요소를 나타낸다.

splice 예시

let arr = [ "I", "am", "your", "fother" ];

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

alert( arr ); // [ "I", "your", "fother" ]

arr.splice( 0, 1, "Where", "is" ); // 인덱스 0부터 1개 요소 제거 후 인덱스 교체 및 추가

alert( arr ); // [ "Where", "is", "your", "fother" ]

arr.splice( 4, 0, "??") // 인덱스 4부터 0개 요소 제거 후 인덱스 추가

alert( arr ); // [ "Where", "is", "your", "fother", "??" ]

  • splice로 삭제된 요소들은 배열의 형태로 반환 된다.

  • 배열 관련 메서드엔 음수 인덱스를 사용할 수 있다.

let arr = [ 1, 2, 5 ];

// 인덱스 -1부터 = 배열 끝에서부터 첫 번째 요소
// 0개의 요소 삭제하고,
// 3과 4 요소를 추가한다.
arr.splice( -1, 0, 3, 4 );

.slice (배열 복사) ★

arr.slice( [start], [end] ) // 예시

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

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

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

arr.slice는 서브 배열을 반환
(str.slice() = 서브 문자열을 반환)
arr.slice()는 인수를 하나도 넘기지 않고 호출하여 arr의 복사본을 만들 수 있다.

.concat ★

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

arr.concat ( arg1, arg2, ... )

let arr = [1, 2, 3];
let arr2 = [5, 6];

// arr의 요소 모두와 [4, 5] 요소 모두를 모은 새로운 배열이 생성
alert( arr.concat( [ 4, 5 ] ); // 1, 2, 3, 4, 5

// arr의 요소 모두와 [4, 5], [ 6, 7 ] 요소 모두를 모은 새로운 배열이 생성
alert( arr.concat( [ 4, 5 ], [ 6, 7 ] ); // 1, 2, 3, 4, 5, 6, 7

// arr의 요소 모두와 4, arr2 요소 모두를 모은 새로운 배열이 생성
alert( arr.concat(4, arr2)); // 1, 2, 3, 4, 5, 6

concat 메서드는 제공 받은 배열의 요소를 복사해 활용한다. 객체가 인자로 넘어오면 객체는 분해되지 않고,
통으로 복사되어 더해짐.

.forEach (반복 작업)

arr.forEach

// 인덱서 정보까지 포함해서 요소 모두를 알림창에 출력해주는 코드

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

.indexOf, lastIndexOf, includes

arr.indexOf(item, from) - 인덱스 from부터 시작해 item을 찾는다. 요소를 발견하면 인덱스를 반환하고, 아닌 경우엔 -1 반환
arr.lastIndexOf(item, from) - 위의 메소드와 동일한 기능인데 검색을 끝에서부터 시작
arr.includes(item, from) - 인덱스 from부터 시작해 item을 찾아서 발견하면 true 반환.

위 메서드들은 요소를 찾을 때 완전 한등 연산자 ===를 사용한다.
false를 검색하면 false 만을 찾고, 0을 찾지는 않는다.

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

includes는 NaN도 제대로 처리함. (indexOf/lastIndexOf는 처리하지 못함 (NaN === NaN) = false)

find, findindex

객체로 이루어진 배열을 찾는 메소드 

arr.find(fn)

let result = arr.find(function(item, index, array) {
  // true가 반환되면 반복이 멈추고 해당 요소를 반환합니다.
  // 조건에 해당하는 요소가 없으면 undefined를 반환합니다.
});
  • item 함수를 호출할 요소
  • index 요소의 인덱스
  • array 배열 자기 자신
let users = [
  {id: 1, name: "John"},
  {id: 2, name: "Pete"},
  {id: 3, name: "Mary"}
];

// 가장 많이 사용되는 패턴 (인자가 1개임(item) index, array는 잘 사용되지 않음)
let user = users.find(item => item.id == 1); 

alert(user.name); // John

arr.findIndex는 find와 동일한 일을 하나, 조건에 맞는 요소를 반환하는 대신 해당 요소의 인덱스를 반환한다는 차이가 있음.
찾지 못하면 -1 반환.

filter

함수의 반환 값을 true로 만드는 여러개의 요소를 검색하는 메서드
조건에 맞는 요소 전체를 담은 배열로 반환함.

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

배열을 변형하는 메서드

map ★

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

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

sort(fn)

sort()는 배열의 요소를 정렬해준다. (반환 값은 사용x)

let arr = [ 1, 2, 15 ];
// arr 내부가 재 정렬됩니다.
arr.sort();
alert( arr );  // 1, 15, 2

요소는 문자열로 취급되어 재 정렬되기 때문에 문자열로 비교(사전편집 순)되어 15보다 2가 큰 값으로 취급 됨.

새로운 정렬 기준을 만드려면 arr.sort()에 정렬 기준에 대한 새로운 함수를 주어야함.

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( (a, b) => a - b );

reverse

arr.reverse는 arr의 요소를 역순으로 정렬시켜주는 메서드

split & join

spilit = 긴 문자열 형태를 배열 형태로 변환

let names = 'Bilbo, Gandalf, Nazgul';
// 문자열 구분자로 쉼표와 공백을 사용하여 배열로 변환
let arr = names.split(', ');

for (let name of arr) {
  alert( `${name}에게 보내는 메시지` ); // Bilbo에게 보내는 메시지
}

join = 배열을 모두 합쳐 문자열로 변환

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

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

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

reduce & reduceRight

reduce = 반복문 처럼 배열 내 요소를 대상으로 반복 작업을 함.

let value = arr.reduce(function(accumulator, item, index, array) {
  // ...
}, [initial]);
  • accumulator - 이전 함수 호출의 결과 (reduce의 반환 값)
    initial은 함수 최초 호출 시 사용되는 초기값 (생략하지 않는 것이 좋다)

예시

let arr = [1, 2, 3, 4, 5];

// 모든 배열의 합을 반환하는 함수
let result = arr.reduce((sum, current) => sum + current, 0);

alert( result ); // 15

arr.reduceRight는 reduce와 동일한 기능을 하지만 배열의 오른쪽부터 연산을 수행한다는 점이 다른 메서드입니다.

Array.isArray

Array.isArray = 배열인지 아닌지 판별하는 메서드
typeof()도 형을 확인할 수 있지만 일반 객체와 배열은 구분하지 못 함.

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

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

배열 메서드와 'thisArg'

함수를 호출하는 대부분 배열 메서드는 thisArg라는 매개변수를 옵션으로 받을 수 있다.

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

thisArg는 func의 this가 된다.

예시

let army = {
  minAge: 18,
  maxAge: 27,
  canJoin(user) {
    return user.age >= this.minAge && user.age < this.maxAge;
  }
};

let users = [
  {age: 16},
  {age: 20},
  {age: 23},
  {age: 30}
];

// army.canJoin 호출 시 참을 반환해주는 user를 찾음
let soldiers = users.filter(army.canJoin, army);

alert(soldiers.length); // 2
alert(soldiers[0].age); // 20
alert(soldiers[1].age); // 23

thisArgs에 army를 지정하지 않고 사용하였다면 army.canJoin은 단독 함수처럼 취급되어, 함수 본문 내 this는 undefined가 되어 에러가 발생한다.

profile
goodjam92
습관을 들이도록 노력하자!
이전 포스트

배열(Array) - 문제 풀이

다음 포스트

배열(Array)과 메서드(Method) - 문제 풀이

0개의 댓글