JavaScript - 배열 메서드(17)

 

JavaScript - 배열 메서드(17)

 

1. 배열

 - 여러개의 값을 순서대로 저장할 수 있는 자료구조로 각 값에는 index로 접근할 수 있다.

 - 배열의 각 요소는 어떤 타입이든 될수 있다.(숫자, 문자열, 객체 등)

 배열의 특징

 - 순서가 있는 데이터

 - 다양한 자료형

 - 가변길이

let arr = [1, 2, 3];
console.log(arr.length);
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);

 

2. 배열 - 요소 조작

push메서드

 - 배열의 끝에 요소를 추가한다.

let arr1 = [1, 2, 3];
const newLength = arr1.push(4, 5, 6, 7);

console.log(newLength);
console.log(arr1);

 

pop메서드

 - 배열의 마지막 요소를 제거한다.

 - 반환값 : 제거된 요소

let arr2 = [1, 2, 3];
const popedItem = arr2.pop();

console.log(popedItem);
console.log(arr2);

 

shift

 - 배열의 첫번째 요소를 제거한다.

 - 반환값 : 제거된 요소

let arr3 = [1, 2, 3];
const shiftedItem = arr1.shift();
console.log(shiftedItem, arr3);

 

unshift

 - 배열의 앞에 요소를 추가한다.

 - 반환값 : 배열의 새로운 길이

let arr4 = [1, 2, 3];
const newLength2 = arr4.unshift(0);
console.log(newLength2, arr4);

 

slice

 - 배열의 일부분을 추출해 새로운 배열으로 반환한다.

 - 원본의 배열은 변경되지 않는다.

 - 반환값 : 추출된 부분이 포함된 새로운 배열

let arr5 = [1, 2, 3, 4, 5];
let sliced = arr5.slice(2, 5);
console.log(sliced);
console.log(arr5);

let sliced2 = arr5.slice(2);
console.log(sliced2);

let sliced3 = arr5.slice(-2);
console.log(sliced3);

 

concat

 - 두개 이상의 배열을 결합해 새로운 배열을 반환한다.

 - 반환값 : 결합된 새로운 배열

let arr6 = [1, 2];
let arr7 = [3, 4];
let concatedItem = arr6.concat(arr7);
console.log(concatedItem);

 

3. 배열 - 순회와 탐색

 

forEach

 - 모든 요소를 순회하면서 각 요소에 특정 동작을 수행시키는 메서드

let arr1 = [1, 2, 3];

arr1.forEach(function (item, idx, arr) {
  console.log(idx, item * 2);
});

 

includes

 - 배열에 특정 요소가 포함되어 있는지 확인하는 메서드

 - 반환값 : boolean

let arr2 = [1, 2, 3];
let isInclude = arr2.includes(30);
console.log(isInclude);

 

indexOf

 - 특정 요소의 인덱스(위치)를 찾아서 반환하며 요소가 없다면 -1을 반환한다.

 - 반환값 : 첫번째로 일치하는 요소의 인덱스

let arr3 = [2, 2, 20];
let index = arr3.indexOf(20);
console.log(index);

 

findIndex

 - 조건을 만족하는 첫번째 요소의 인덱스를 반환한다. 조건을 만족하는 요소가 없으면 -1을 반환한다.

 - 반환값 : 첫번째로 조건을 만족하는 요소의 인덱스

let arr4 = [1, 2, 3];
const findedIndex = arr4.findIndex((item) => {
  if (item % 2 !== 0) return true;
});
console.log(findedIndex);

 

find

 - 조건을 만족하는 첫번째 요소를 반환한다. 조건을 만족하는 요소가 없으면 undefind를 반환한다.

 - 반환값 : 첫 번째로 조건을 만족하는 요소

let arr5 = [{ name: "AR" }, { name: "arang" }];
const finded = arr5.find((item) => item.name === "AR");
console.log(finded);

 

 

4. 변형

 

filter

 - 기존 배열에서 조건을 만족하는 요소들만 필터링해 새로운 배열로 반환한다.

 - 반환값 : 각 요소에 대해 주어진 함수의 반환값으로 이루어진 새로운 배열

let arr1 = [
  { name: "피카츄", type: "전기" },
  { name: "파이리", type: "불" },
  { name: "이상해씨", type: "풀" },
];

const pokemon = arr1.filter((item) => item.type == "전기");
console.log(pokemon);

 

map

 - 배열의 각 요소에 대해 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다. 원본 배열은 변경되지 않는다.

 - 반환값 : 각 요소에 대해 주어진 함수의 반환값으로 이루어진 새로운 배열

let arr2 = [1, 2, 3];
const mapResult1 = arr2.map((item, idx, arr) => {
  return item * 2;
});

let names = arr1.map((items) => items.name);
console.log(names);

 

sort

 - 배열을 사전순으로 정렬하는 메서드

let arr3 = ["a", "c", "b"];
arr3.sort();
console.log(arr3);

 

 

오름차순 정렬

let arr3 = [10, 3, 5];
arr3.sort((a, b) => {
  if (a > b) {
    return 1; // b가 a앞에
  } else if (a < b) {
    return -1; // a가 b 앞에
  } else {
    return 0; // 자리 유지
  }
});
console.log(arr3);

 

내림차순 정렬

let arr3 = [10, 3, 5];
arr3.sort((a, b) => {
  if (a > b) {
    return -1; // b가 a앞에
  } else if (a < b) {
    return 1; // a가 b 앞에
  } else {
    return 0; // 자리 유지
  }
});
console.log(arr3);

 

toSorted

 - 정렬된 새로운 배열을 반환하는 메서드

 - sort와 동일하게 배열을 사전순을 정렬하지만 정렬된 새로운 배열을 반환하는 메서드

let arr5 = ["c", "a", "b"];
const sorted = arr5.toSorted();

console.log(arr5);
console.log(sorted);

 

join

 - 배열의 모든 요소를 문자열로 결합한다.

 - 반환값 : 결합된 문자열

let arr5 = ["c", "a", "b"];
const sorted = arr5.toSorted();

console.log(arr5);
console.log(sorted);

let arr6 = ["hello", "jini", "woo"];
const joined = arr6.join(" ");
console.log(joined);