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

📌 .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)
const arr4 = [...arr1, ...arr2]

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

 

📌 .every()

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

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

console.log(isValid)  // true

 

📌.filter()

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

모든 요소가 테스트를 통과하지 못하면 빈 배열로 반환한다.

const numbers = [1,20,7.9,104.0,58]
const filteredNumbers = numbers.filter(number => number < 30)

console.log(filteredNumbers)  // [ 1, 20, 7.9 ]

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 adult = users.find(user => user.age >= 19)	// { name: 'Neo', age: 85 }
console.log(adult)

 

📌.findIndex()

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

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

 

📌.flat()

대상 배열의 모든 하위 배열을 지정한 길이까지 이어붙인 새로운 배열을 생성한다.

길이의 기본 값은 '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(2))  // [ 1, 2, 3, 4, 5, 6 ]

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

Infinity : 하위 배열이 얼마나 깊게 들어가져있는지 상관 안함

 

📌.forEach()

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

for문에서는 break문을 사용하여 반복을 종료할 수 있는데, forEach는 반복을 종료할 수 없다.

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

 

📌.includes()

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

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

 

객체,배열,함수 데이터처럼 참조형은 단순하게 모양으로 구분하는 것이 아니라

할당된 변수, 즉 메모리의 주소를 비교하게 된다.

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 users = [
  { name: 'Neo', age: 85 },
  { name: 'Amy', age: 22 },
  { name: 'Lewis', age: 11 }
]

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 ]

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 arr = ['Apple','Banana','Cherry']
console.log(arr.pop())  // 'Cherry'
console.log(arr)    	// [ 'Apple', 'Banana' ]

 

📌.push()

대상 배열의 마지막에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환한다.

대상 배열 원본이 변경된다.

const arr = ['Apple','Banana','Cherry']
arr.push('Orange')
console.log(arr)  // [ 'Apple', 'Banana', 'Cherry', 'Orange' ]

 

📌.reduce()

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

각 콜백의 반환 값은 다음 콜백으로 전달한다.

 

처음 실행될 때 초기값 0 은 arr로, 배열의 첫번 째 값은 cur 로 들어간다.

콜백의 실행 값은 다음 arr 로 전달되며 다음 배열의 값은 cur로 들어간다.

acc : 누적되는 값
cur :  반복되는 배열의 아이템

const numbers = [1, 2, 3]
const sum = numbers.reduce((acc, cur) => {
  return acc + cur
},0)
console.log(sum)  // 6

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

/* 총 나이 계산 */
const totalAge = users.reduce((acc,cur) => acc + cur.age , 0)
console.log(totalAge)    // 66

/* 모든 이름 추출 */
const namesArray = users
	.reduce((acc,cur) => {
      acc.push(cur.name)
      return acc
    }, [])
    .join(', ')
console.log(namesArray);  // 'Neo, Amy, Lewis'

 

📌. reverse()

대상 배열의 순서를 반전한다. 대상 배열 원본이 변경된다.

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

console.log(arr)    	// [ 'C', 'B', 'A' ]
console.log(reversed)  	// [ '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

 

📌.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 ]
// 4, 17 들어오면 4 - 17 = 음수이므로 a가 b보다 작다고 판단되며 4가 앞으로간다.

numbers.sort((a, b) => b - a)
console.log(numbers)    // [ 103, 17, 4, 3, 2, 1, 0 ]
// 4, 17 들어오면 17 - 4 = 양수이므로 a가 b보다 크다고 판단되므로 4가 뒤로간다.

const users = [
  { name: 'Neo', age: 33 },
  { name: 'Amy', age: 22 },
  { name: 'Lewis', age: 11 }
]
users.sort((a, b) => a.age - b.age)	// [{ name: 'Lewis', age: 11 },{ name: 'Amy', age: 22 },{ name: 'Neo', age: 33 }]

 

📌.splice( a, b, c )

대상 배열의 요소를 추가/삭제/교체 한다.

대상 배열 원본이 변경된다.

a : 추가/삭제/교체 할 인덱스 번호
b : 아이템을 삭제할 개수
c : 추가할 아이템

/* 추가 */
const arr = ['A', 'B', 'C']
arr.splice(2, 0, 'x', 'y')
console.log(arr)    // [ 'A', 'B', 'x', 'y', 'C' ]

/* 삭제 */
const arr2 = ['A', 'B', 'C']
arr2.splice(1, 1)
console.log(arr2)    // [ 'A', 'C' ]

/* 교체 */
const arr3 = ['A', 'B', 'C']
arr3.splice(1, 1, 'x')
console.log(arr3)    // [ 'A', 'x', 'C' ]

 

📌.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)
console.log(arrayLike.constructor === Object)

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