JavaScript(6)-2

Minji Lee·2023년 10월 12일
js배열표준 내장객체
0

javascript

목록 보기
7/11
post-thumbnail

Ch06 표준 내장 객체 - 배열

.length

배열의 길이(숫자를 반환)

const arr = ["A", "B", "C"];
console.log(arr.length); // 3

.at()

대상 배열을 인덱싱

  • 음수 값을 사용하면 뒤에서부터 인덱싱
const arr = ["A", "B", "C"];

console.log(arr[0]); // "A"
console.log(arr.at(0)); // "A"

console.log(arr[arr.length - 1]); // "C"
console.log(arr.at(-1)); // "C"

.concat()

대상 배열과 주어진 배열을 병합해 새로운 배열을 반환

  • 음수 값을 사용하면 뒤에서부터 인덱싱
  • 전개 연산자 이용하여 배열 병합 가능
const arr1 = ["A", "B", "C"];
const arr2 = ["D", "E", "F"];
const arr3 = arr1.concat(arr2); // ["A", "B", "C", "D", "E", "F"]
// 전개연산자를 이용하여 배열 병합
// const arr3 = [...arr1, ...arr2]; // ["A", "B", "C", "D", "E", "F"]

console.log(arr1);
console.log(arr2);
console.log(arr3);

.every()

대상 배열의 모든 요소가 콜백 테스트에서 참(Truthy)을 반환하는지 확인

  • 콜백함수는 배열의 길이만큼 반복
const arr = [1, 2, 3, 4];
const isValid = arr.every((item) => {
  return item < 5;
});
console.log(isValid); // true

const isValid2 = arr.every((item) => {
  return item < 4;
});
console.log(isValid2); // false

.filter()

주어진 콜백 테스트를 통과(참(Truthy)을 반환)하는 모든 요소를 새로운 배열로 반환

  • 모든 요소가 테스트를 통과하지 못하면 빈 배열 반환
const numbers = [1, 20, 7, 9, 194, 0, 58];
const filteredNumbers = numbers.filter((number) => number < 30);
console.log(filteredNumbers); // [1, 20, 7, 9, 0]
const users = [
  { name: "Neo", age: 85 },
  { name: "Amy", age: 22 },
  { name: "Lewis", age: 11 },
];
const adults = users.filter((user) => user.age >= 19);
console.log(adults); // [{ name: "Neo", age: 85 }, { name: "Amy", age: 22 }]

.find()

대상 배열에서 콜백 테스트를 통과하는 첫 번째 요소 반환

const arr = [5, 8, 130, 12, 44];
const foundItem = arr.find((item) => item > 10);
console.log(foundItem); // 130
const users = [
  { name: "Neo", age: 85 },
  { name: "Amy", age: 22 },
  { name: "Lewis", age: 11 },
];

const foundUser = users.find((user) => user.name === "Amy");
console.log(foundUser); // { name: "Amy", age: 22 }

.findIndex()

대상 배열에서 콜백 테스트를 통과하는 첫 번째 요소의 인덱스 반환

const arr = [5, 8, 130, 12, 44];
const index = arr.findIndex((itme) => item > 10);
console.log(index); // 2

.flat()

대상 배열의 모든 하위 배열을 지정한 깊이(Depth)까지 이어붙인 새로운 배열 생성

  • 길이의 기본값은 '1’
  • arr.flat(Infinity) : 모든 하위 배열을 이어붙임
const arr = [1, 2, [3, 4]];
console.log(arr.flat()); // [1,2,3,4]

const arr = [1, 2, [3, 4, [5, 6]]];
console.log(arr.flat()); // [1,2,3,4,[5,6]]
console.log(arr.flat(2)); // [1,2,3,4,5,6]
console.log(arr.flat(Infinity)); // [1,2,3,4,5,6]

.forEach()

대상 배열의 길이만큼 주어진 콜백을 실행

💡 forEach와 for의 차이점
forEach는 break, continue, return을 사용할 수 없음
for는 break, continue, return을 사용할 수 있음

const arr = ["A", "B", "C"];
arr.forEach((item) => console.log(item)); // "A" "B" "C"

for (let i = 0; i < arr.length; i += 1) {
  console.log(arr[i]); // "A" "B" "C"
}

.includes()

대상 배열이 특정 요소를 포함하고 있는지 확인

  • 대소문자 구분
const arr = [1, 2, 3];
console.log(arr.includes(2)); // true
console.log(arr.includes(4)); // false

const fruits = ["apple", "banana", "orange"];
console.log(fruits.includes("apple")); // true
console.log(fruits.includes("Orange")); // false
  • js는 데이터를 원시형과 참조형(객체, 배열, 함수)으로 구분
    → 참조형 데이터는 형태가 같아도 다른 데이터로 인식
const users = [
  { name: "Neo", age: 85 },
  { name: "Amy", age: 22 },
  { name: "Lewis", age: 11 },
];
console.log(users.includes({ name: "Neo", age: 85 })); // false

const neo = users[0];
console.log(users.includes(neo)); // true

.join()

대상 배열의 모든 요소를 구분자로 연결한 문자를 반환

const arr = ["Apple", "Banana", "Cherry"];
console.log(arr.join()); // "Apple,Banana,Cherry"
console.log(arr.join(", ")); // "Apple, Banana, Cherry"
console.log(arr.join("/")); // "Apple/Banana/Cherry"

.map()

대상 배열의 길이만큼 주어진 콜백을 실행하고, 콜백의 반환 값을 모아 새로운 배열을 반환

const numbers = [1, 2, 3, 4];
const newNumbers = numbers.map((item) => item * 2);

console.log(newNumbers); // [2, 4, 6, 8]
console.log(numbers); // [1, 2, 3, 4]
const users = [
  { name: "Neo", age: 85 },
  { name: "Amy", age: 22 },
  { name: "Lewis", age: 11 },
];
const newUsers = users.map((user) => {
  return {
    ...user,
    isValid: true,
    email: null,
  };
});

console.log(newUsers);
// [{ name: "Neo", age: 85, isValid: true, email: null },
//  { name: "Amy", age: 22, isValid: true, email: null },
//  { name: "Lewis", age: 11, isValid: true, email: null }]

.pop()

대상 배열에서 마지막 요소를 제거하고 그 요소를 반환

  • 대상 배열 원본이 변경됨
const fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits.pop()); // "Cherry"
console.log(fruits); // ["Apple", "Banana"]

.push()

대상 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환

  • 대상 배열 원본이 변경됨
const fruits = ["Apple", "Banana", "Cherry"];
const newLength = fruits.push("Orange");
console.log(newLength); // 4
console.log(fruits); // ["Apple", "Banana", "Cherry", "Orange"]

fruits.push("Mango", "Strawberry");
console.log(fruits); // ["Apple", "Banana", "Cherry", "Orange", "Mango", "Strawberry"]

.reduce()

대상 배열의 길이만큼 주어진 콜백을 실행하고, 마지막에 호출되는 콜백의 반환 값을 반환

  • 각 콜백의 반환 값은 다음 콜백으로 전달
  • 두 번째 인자값은 accumulator의 초기값
const numbers = [1, 2, 3];
const sum = numbers.reduce((accumulator, currentValue) => {
  return (accumulator = currentValue);
}, 0);
console.log(sum); // 6
const users = [
  { name: "Neo", age: 85 },
  { name: "Amy", age: 22 },
  { name: "Lewis", age: 11 },
];
// 총 나이 계산
const totalAge = users.reduce((acc, cur) => {
  return acc + cur.age;
}, 0);
console.log(totalAge); // 118

// 모든 이름 추출
const namesArray = users.reduce((acc, cur) => {
  acc.push(cur.name);
  return acc;
}, []);

const names = namesArray.join(", ");
console.log(names); // "Neo, Amy, Lewis"

.reverse()

대상 배열의 순서를 반전

  • 대상 배열 원본이 변경됨
const arr = ["A", "B", "C"];
const reversedArr = arr.reverse();

console.log(reversedArr); // ["C", "B", "A"]
console.log(arr); // ["C", "B", "A"]

.shift()

대상 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환

  • 대상 배열 원본이 변경됨
const arr = ["A", "B", "C"];
console.log(arr.shift()); // "A"
console.log(arr); // ["B", "C"]

.slice()

대상 배열의 일부를 추출해 새로운 배열을 반환

  • 두 번째 인수 직전까지 추출하고, 두 번째 인수를 생략하면 대상 배열의 끝까지 추출
const arr = ["A", "B", "C", "D", "E", "F", "G"];
console.log(arr.slice(0, 3)); // ["A", "B", "C"]
console.log(arr.slice(4, -1)); // ["E", "F"]
console.log(arr.slice(4)); // ["E", "F", "G"]
console.log(arr); // ["A", "B", "C", "D", "E", "F", "G"]

.some()

대상 배열의 어떤 요소라도 콜백 테스트를 통과하는지 확인

const arr = [1, 2, 3, 4];
const isValid = arr.some((item) => item > 3);

console.log(isValid); // true

const isValid2 = arr.some((item) => item > 5);
console.log(isValid2); // false

.sort()

대상 배열을 콜백의 반환 값(음수, 양수, 0)에 따라 정의

  • 콜백을 제공하지 않으면, 요소를 문자열로 변환하고 유니코드 코드 포인트 순서로 정렬
  • 대상 배열 원본이 변경됨
const numbers = [4, 17, 2, 103, 3, 1, 0];
numbers.sort();
console.log(numbers); // [0, 1, 103, 17, 2, 3, 4]

// 오름차순
numbers.sort((a, b) => a - b);
console.log(numbers); // [0, 1, 2, 3, 4, 17, 103]

// 내림차순
number.sort((a, b) => b - a);
console.log(numbers); // [103, 17, 4, 3, 2, 1, 0]
const users = [
  { name: "Neo", age: 85 },
  { name: "Amy", age: 22 },
  { name: "Lewis", age: 11 },
];

users.sort((a, b) => a.age - b.age);
console.log(users); // [{ name: "Lewis", age: 11 }, { name: "Amy", age: 22 }, { name: "Neo", age: 85 }]

.splice()

대상 배열에 요소를 추가하거나 삭제하거나 교체

  • splice(시작 인덱스, 삭제할 요소 수, 추가할 요소)
  • 대상 배열 원본이 변경됨
const arr = ["A", "B", "C"];
arr.splice(2, 0, "X");
console.log(arr); // ["A", "B", "X", "C"]

const arr2 = ["A", "B", "C"];
arr.splice(1, 2);
console.log(arr); // ["A"]

.unshift()

새로운 요소를 대상 배열의 맨 앞에 추가하고, 새로운 배열의 길이 반환

  • 대상 배열 원본이 변경됨
const arr = ["A", "B", "C"];
console.log(arr.unshift("X")); // 4
console.log(arr); // ["X", "A", "B", "C"]

Array.from()

유사 배열(Array-like)을 실제 배열로 반환하는 정적 메서드

  • length를 반드시 가져야 함
  • 객체 데이터를 배열 데이터로 변환하여 사용 가능
const arraylike = {
  0: "A",
  1: "B",
  2: "C",
  length: 3,
};
console.log(arraylike.constructor === Array); // false
console.log(arraylike.constructor === Object); // true

arraylike.forEach(item=>console.log(item)); // TypeError: arraylike.forEach is not a function
Array.from(arraylike).forEach((item) => console.log(item)); // "A" "B" "C"

Array.isArray()

배열 데이터인지 확인하는 정적메서드

const arr = ["A", "B", "C"];
const arraylike = {
  0: "A",
  1: "B",
  2: "C",
  length: 3,
};
console.log(Array.isArray(arr)); // true
console.log(Array.isArray(arraylike)); // false
profile
Minji Lee
이전 포스트

JavaScript(6)-1

다음 포스트

JavaScript(6)-3

0개의 댓글