[JS] 표준 내장 객체 - 배열

김다빈·2023년 8월 10일

JavaScript 자바스크립트

자바스크립트

목록 보기

10/36

표준 내장 객체 내용은 다 외울건 아니고 그냥 이런게 있구나... 나중에 쓸 일 있으면 참고하려고 작성합니다.

📢 표준 내장 객체 학습 시 주의사항

새로운 데이터를 반환하는지, 원본 데이터를 수정하는지를 확인하기!

📌 배열

.length

배열의 길이를 반환 (=아이템의 개수)

.at()

대상 배열을 인덱싱
대괄호로 인덱싱하는 것과 같은 결과이지만 음수로도 인덱싱할 수 있다는 장점이 있다.
음수 값을 사용하면 뒤에서부터 인덱싱한다.
- 대괄호 표기법으로 음수 인덱싱을 시도하면 undefined 가 출력된다.

const arr = ['A', 'B', 'C', 'D']

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

console.log(arr[arr.length - 1]); //D
console.log(arr.at(-1)); //D
console.log(arr[-1]); //undefined

.concat()

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

const arr1 = ['A', 'B', 'C']
const arr2 = ['D', 'E', 'F']
const arr3 = arr1.concat(arr2)
const arr4 = [...arr1, ...arr2] //concat 메소드 대신 전개 연산자를 사용할 수도 있음

console.log(arr3) //["A","B","C","D","E","F"]
console.log(arr4) //["A","B","C","D","E","F"]

.every()

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

const arr = [1, 2, 3, 4]
const isValid = arr.every(item => item < 5)

console.log(isValid) //true

every() 메소드 안에 함수를 입력함 (함수 안의 함수이므로 콜백함수 -> 콜백 테스트에서 참을 반환한다는 것은 arr의 요소가 콜백 함수의 인자로 들어가서 실행된 return 값이 true인지를 묻는 것)

.some()

대상 배열의 어떤 요소라도 콜백 테스트를 통과하는지를 확인
(즉, 배열의 요소 중 하나라도 콜백 테스트를 통과하면 true / 하나도 통과하지 못하면 false를 반환)
or 의 느낌

const arr = [1, 2, 3, 4]
const isValid = arr.some(item => item > 3)
console.log(isValid) //true

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

.filter()

주어진 콜백 테스트를 통과하는 모든 요소를 새로운 배열로 반환 (콜백 테스트 통과 = 참(Truthy) 값을 반환)
모든 요소가 테스트를 통과하지 못하면(=하나도 통과하지 못하면) 빈 배열을 반환

const numbers = [1, 20, 7, 9, 104, 60, 5]
const filteredNumbers = numbers.filter(number => number < 30)

console.log(filteredNumbers) //[1,20,7,9,5]

예제
users 객체에서 19세 이상의 성인들만 필터링하기

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, 139, 12, 44]
const foundItem = arr.find(item => item > 10)

console.log(foundItem) //139

.findIndex()

대상 배열에서 콜백 테스트를 통과하는 첫 번째 요소의 인덱스를 반환
콜백 테스트 통과한 첫 번째 요소를 찾으면 그 이후로는 실행하지 않음

const arr = [5, 8, 139, 12, 44]
const index = arr.findIndex(item => item > 10)

console.log(index) //2

.flat()

대상 배열의 모든 하위 배열을 지정한 깊이(Depth)까지 이어붙인 새로운 배열을 반환
하위 배열 : 어떤 배열의 요소로 들어있는 배열
깊이(Depth)의 기본값은 1

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]

만약, 하위 배열의 깊이에 관계없이 모두 이어붙여 하나의 배열로 만들고 싶다면 flat(Infinity) 라고 작성하면 된다.

.forEach()

대상 배열의 길이(=요소의 개수)만큼 주어진 콜백을 실행

const arr = ['A', 'B', 'C']

//forEach 메소드
arr.forEach(item => console.log(item))

//for 반복문
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i])
}

//출력 결과는 동일함
//A
//B
//C

배열의 길이(=요소의 개수)만큼 반복문을 실행한다면 for문과 forEach 중 forEach 를 사용하는 것이 더 효율적이고 간단하겠지만, forEach 는 무조건 배열의 길이만큼 반복문을 실행해야하기 때문에 중간에 반복을 멈추거나 반복 횟수를 추가할 수 없다.

.includes()

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

const arr = [1, 2, 3]
console.log(arr.includes(2)) //true

참조형 데이터의 특징
참조형(객체, 배열, 함수...)은 데이터의 생김새가 똑같아도 다른 데이터일 수 있다.

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()

대상 배열의 모든 요소를 구분자로 연결한 문자를 반환
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"

.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']

.shift()

대상 배열에서 첫 번째 요소를 제거하고 그 요소를 반환 (pop 메소드와 같은 동작인데 그 대상이 되는 요소가 첫번째/마지막인지만 다름)
대상 배열 원본이 변경됨

const arr = ['A', 'B', 'C']

console.log(arr.shift()) //'A'
console.log(arr) //['B', 'C']

.unshift()

새로운 요소를 대상 배열의 맨 앞에 추가하고, 배열의 새로운 길이를 반환 (push 메소드와 같은 동작인데 그 대상이 되는 요소가 첫번째/마지막인지만 다름)
대상 배열 원본이 변경됨

const arr = ['A', 'B', 'C']

console.log(arr.unshift('X')) //4
console.log(arr) //['X', 'A', 'B', 'C']

.map()

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

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

console.log(newNumbers) //[2,4,6,8]

객체 예제

const users = [
  { name: 'Neo', age: 85 },
  { name: 'Amy', age: 22 },
  { name: 'Lewis', age: 11 }
]

const newUsers = users.map(user => ({
    ...user,
    isValid : true,
    email : null
}))

console.log(newUsers)

.reduce()

대상 배열의 길이만큼 주어진 콜백을 실행하고, 마지막에 호출되는 콜백의 반환 값을 반환
각 콜백의 반환 값은 다음 콜백으로 전달됨

예제
const numbers = [1, 2, 3]
const sum = numbers.reduce((acc, cur) => acc + cur, 0)

console.log(sum) //6
reduce 메소드는 2개의 인수를 받는다. 콜백함수와 초기값

콜백함수는 2개의 인수를 받는데 accumulator, currentValue

accumulator / acc : 누산기 (누적되는 값)
reduce 메소드 입력 시에 초기값을 설정해주었다면 이 값이 첫번째 콜백의 acc로 들어가고, 그 이후로는 이전 콜백의 return 값이 들어간다.

currentValue / cur : 현재 처리할 요소. 배열의 요소가 순서대로 들어간다.

예제
const users = [
  { name: 'Neo', age: 85 },
  { name: 'Amy', age: 22 },
  { name: 'Lewis', age: 11 }
]

//총 나이 계산
const totalAge = users.reduce((acc,cur) => acc + cur.age, 0)
console.log(totalAge) //118
console.log(`평균 나이 : ${(totalAge / users.length).toFixed(1)}세`) //평균 나이 : 39.3세

//모든 이름 추출
const nameArray = users.reduce((acc, cur) => {
  acc.push(cur.name)
  return acc
}, [])
console.log(nameArray) //["Neo","Amy","Lewis"]
console.log(nameArray.join(', ')) //"Neo, Amy, Lewis"
모든 이름 추출 더 간단하게 코드 정리
join 메소드를 reduce 메소드 실행 후 나온 리턴 값에 바로 붙여 작성해서 names 라는 변수에 배열이 아닌 문자열 형태로 저장하기
const names = users
  .reduce((acc, cur) => {
  acc.push(cur.name)
  return acc
  }, [])
  .join(', ')
console.log(names) //"Neo, Amy, Lewis"
메소드 체이닝 : 연속적인 코드 줄에서 개체의 메소드를 반복적으로 호출하는 것. 메소드가 객체를 반환하면 그 반환 값(객체)가 또 다른 메소드를 호출할 수 있다.

메소드 체이닝이 잘 보일 수 있도록 코드 라인 정리도 같이 해주면 좋다.

.reverse()

대상 배열의 순서를 반전합니다.
대상 배열 원본이 변경됨

const arr = ['A', 'B', 'C']
const reversed = arr.reverse()

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

.slice()

대상 배열의 일부를 추출해 새로운 배열을 반환
인수를 2개 작성할 수 있는데 첫번째 인수부터 두번째 인수 직전까지 추출, 만약 두번째 인수를 생략하면 대상 배열의 끝까지 추출

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']

음수로 인덱싱 가능
음수로 인덱싱하게 되면 배열의 끝에서부터 거꾸로 ..., -3, -2, -1 인덱싱 값을 갖게 됨.
➡️ 예제 str 에서 arr[-1] = 'G', arr[-2] = 'F', arr[-3] = 'E'...

.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]
//첫번째, 두번째 요소를 각각 a,b에 넣고 a-b의 값이 음수이면
//a가 더 작은 값이라고 판단, a에 더 작은 인덱스 값을 부여
//즉, 작은 값부터 차례대로 정렬될 수 있도록

numbers.sort((a, b) => b - a)
console.log(numbers) //[103,17,4,3,2,1,0]
//첫번째, 두번째 요소를 각각 a,b에 넣고 b-a의 값이 양수이면
//a가 더 작은 값이라고 판단, a에 더 큰 인덱스 값을 부여
//즉, 큰 값부터 차례대로 정렬될 수 있도록

예제

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 } ]

//나이 많은 순으로 정렬
users.sort((a, b) => b.age - a.age)
console.log(users)
//[ { name: 'Neo', age: 85 }, { name: 'Amy', age: 22 }, { name: 'Lewis', age: 11 } ]

.splice()

대상 배열의 요소를 추가, 삭제, 교체 가능
대상 배열 원본이 변경됨

splice 메소드에는 인수를 3개 입력할 수 있다.
첫 번째 인수는 변경할 요소의 인덱스 번호
두 번째 인수는 삭제할 요소의 개수
세 번째 인수는 추가할 요소. 아무 요소도 지정하지 않으면 요소를 제거하기만 합니다.

예제 1

const arr = ['A', 'B', 'C']
arr.splice(2, 0, 'X') //2번 인덱스 자리에, 아무것도 삭제하지 않고, 'X'라는 요소를 추가한다.
console.log(arr) //['A', 'B', 'X', 'C']

예제 2

const arr = ['A', 'B', 'C']
arr.splice(1, 1) //1번 인덱스 자리에, 1개를 삭제한다.
console.log(arr) //['A', 'C']

예제 3

const arr = ['A', 'B', 'C']
arr.splice(1, 2, 'X', 'Y') //1번째 인덱스부터, 2개 요소를 삭제하고, 'X', 'Y' 요소를 추가한다.
console.log(arr) //['A', 'X', 'Y']

Array.from()

유사 배열(Array-like)을 실제 배열로 반환

const arrayLike = {
  0: 'A',
  1: 'B',
  2: 'C',
  length: 3
}

Array.from(arrayLike).forEach(item => console.log(item))
//'A'
//'B'
//'C'

Array.isArray()

인수로 들어오는 데이터가 배열인지 확인

const array = ['A', 'B', 'C']
const arraylike = {
  0: 'A',
  1: 'B',
  2: 'C',
  length: 3
}

console.log(Array.isArray(array)) //true
console.log(Array.isArray(arraylike)) //false

김다빈

Hello, World

이전 포스트

[JS] 표준 내장 객체 - 날짜

다음 포스트

[JS] 표준 내장 객체 - 객체

1개의 댓글

happy

2023년 8월 10일

정리가 잘 된 글이네요. 도움이 됐습니다.

답글 달기