JavaScript - 배열(Arrays)

🤍배열(Arrays)

JavaScript에서의 배열은 “정식 배열”이 아님! “유사 배열 객체”임! →객체

const a = []
typeof a //'object'

배열의 정의와 특징

• 키와 속성들을 담고 있는 참조 타입의 객체(object)
• 순서를 보장하는 특징이 있음
• 주로 대괄호를 이용하여 생성하고, 0을 포함한 양의 정수 인덱스로 특정 값에 접근 가능
• 배열의 길이는 array.length 형태로 접근 가능
  • (참고) 배열의 마지막 원소는 array.length – 1로 접근

const numbers = [1,2,3,4,5]
console.log(numbers[0]) //1
console.log(numbers[-1]) //undefined
console.log(numbers.length)//5
console.log(numbers[numbers.length -1]) //5
console.log(numbers[numbers.length -2]) //4

배열 관련 주요 메서드

기본 배열 조작

• reverse
• push & pop
• unshift & shift
• includes
• indexOf
• join

|reverse

• array.reverse()
  • 원본 배열의 요소들의 순서를 반대로 정렬

const numbers = [1,2,3,4,5]
numbers.reverse()
console.log(numbers) //[5,4,3,2,1]

|push & pop

• array.push()
  • 배열의 가장 뒤에 요소 추가
• array.pop()
  • 배열의 마지막 요소 제거

const numbers = [1,2,3,4,5]
numbers.push(100)
console.log(numbers) // [1,2,3,4,5,100]
numbers.pop()
console.log(numbers) // [1,2,3,4,5]

|unshift & shift

• array.unshift()
  • 배열의 가장 앞에 요소 추가
• array.shift()
  • 배열의 첫번째 요소 제거

const numbers = [1,2,3,4,5]

numbers.unshift(100)
console.log(numbers) // [100,1,2,3,4,5]

numbers.shift(100)
cosole.log(numbers) // [1,2,3,4,5]

|includes

• array.includes(value)
  • 배열에 특정 값이 존재하는지 판별 후 참 또는 거짓 반환

const numbers = [1,2,3,4,5]
console.log(numbers.includes(1)) //true
console.log(numbers.includes(100)) //false

|indexOf

• array.indexOf(value)
  • 배열에 특정 값이 존재하는지 확인 후 가장 첫 번째로 찾은 요소의 인덱스 반환
  • 만약 해당 값이 없을 경우 -1 반환

const numbers = [1,2,3,4,5]
let result

result = numbers.indexOf(3) //2
console.log(result)

result = numbers.indexOf(100) //-1
console.log(result)

|join

• array.join([seperator])
  • 배열의 모든 요소를 구분자를 이용해 연결하여 반환
  • seperator(구분자)는 선택적으로 지정가능하며, 생략시 쉼표를 기본 값으로 사용

const numbers = [1,2,3,4,5]
let result

result = numbers.join()
console.log(result) // 1,2,3,4,5

result = numbers.join('')
console.log(result) //12345

result = numbers.join(' ')
console.log(result) // 1 2 3 4 5

result = numbers.join('-')
console.log(result) //1-2-3-4-5

|Seperator operator(...)

• spread operator(…)를 사용하면 배열 내부에서 배열 전개 가능.
• ES5까지는 Array.concat() 메서드를 사용.
• 얕은 복사에 활용 가능

const array = [1, 2, 3]
const newArray = [0, ...array, 4]
console.log(newArray) // [0, 1, 2, 3, 4

배열 관련 주요 메서드 (심화 Array Helper Methods)

• 배열을 순회하며 특정 로직을 수행하는 메서드
• 메서드 호출 시 인자로 callback 함수를 받는 것이 특징
  • callback 함수: 어떤 함수의 내부에서 실행될 목적으로 인자로 넘겨 받는 함수를 말함
• forEach
• map
• filter
• reduce
• find
• some
• every

|forEach

• 배열의 각 요소에 대해 콜백 함수를 한 번씩 실행
• 콜백 함수는 3가지 매개변수로 구성
  • element: 배열의 요소
  • index: 배열 요소의 인덱스
  • array: 배열 자체
• 반환 값(return)이 없는 메서드

//# array.forEach(callback(element[, index[,array]])
array.forEach((element,index,array) => {
	//do something
}

---

const fruits = ['딸기','수박','사과','체리']
fruits.forEach((fruit,index) => {
	console.log(fruit,index)
})
//딸기 0
//수박 1
//사과 2
//체리 3

---

1,2,3 출력하기

const test = [1,2,3]
//방법1
for (let i=0 ; i<test.length ; i++){
	console.log(test[i])
}
//방법2
test.forEach(e=>console.log(e))
//방법3
for(t of test){
	consonle.log(t)
}

|map

• 배열의 각 요소에 대해 콜백 함수를 한번씩 실행
• 콜백 함수의 반환 값을 요소로 하는 새로운 배열 반환
• 기존 배열 전체를 다른 형태로 바꿀 때 유용

//# array.map(callback(element[, index[, array]]))
array.map((elemnt,index,array) => {
	//do something
})

---

const numbers = [1,2,3,4,5]
const doubleNums = numbers.map((num) => {
	return num * 2
})

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

|filter

• 배열의 각 요소에 대해 콜백 함수를 한 번씩 실행
• 콜백 함수의 반환 값이 참인 요소들만 모아서 새로운 배열을 반환
• 기존 배열의 요소들을 필터링 할 때 유용

//# array.filter(callback(element[, index[, array]]))
array.filter((element,index,array) => {
	 //do something
})

---

const numbers = [1,2,3,4,5]
const oddNums = numbers.filter((num) => {
	return num %2
})
console.log(oddNums) //1,3,5

---

const test = [1,2,3]
test.filter(e => e%2 ===1) //[1,3]
test.filter(e => e%2 ===0) //[2]
test.filter(e => {
	return e%2===0
}) //[2]

|reduce

• 배열의 각 요소에 대해 콜백 함수를 한 번씩 실행
• 콜백 함수의 반환 값들을 하나의 값(acc)에 누적 후 반환
• reduce 메서드의 주요 매개변수
  • acc
    • 이전 callback 함수의 반환 값이 누적되는 변수
  • initialValue(optional)
    • 최초의 callback 함수 호출 시 acc에 할당되는 값, default 값은 배열의 첫 번째 값
• (참고) 빈 배열의 경우 initialValue를 제공하지 않으면 에러 발생

//#array.reduce(callback(acc, element, [index[, array]])[, initialValue])
array.reduce((acc,element,index,array) => {
	//do something
}, initialValue)

---

const test = [1,2,3]
const res = test.reduce((acc,cur) => {
    return acc+cur
},0) //마지막 매개변수가 시작값?
res //6

|find

• 배열의 각 요소에 대해 콜백 함수를 한 번씩 실행
• 콜백 함수의 반환 값이 참이면, 조건을 만족하는 첫번째 요소를 반환
• 찾는 값이 배열에 없으면 undefined 반환

//#array.find(callback(element[, index[, array]]))
array.find((element, index, array)) {
 // do something
}

---

const avengers = [
	{name: 'Tony Stark', age: 45},
	{name: 'Steve Rogers', age: 32},
	{name: 'Thor', age: 40},
}

const result = avengers.find((avengers) => {
	return avenvers.name === 'Tony Stark'
})
console.log(result) // {name: 'Tony Stark', age:45}

|some

• 배열의 요소 중 하나라도 주어진 판별 함수를 통과하면 참을 반환
• 모든 요소가 통과하지 못하면 거짓 반환
• (참고) 빈 배열은 항상 거짓 반환

//#array.some(callback(element[, index[, array]]))
array.some((element,index,array) => {
	//do something
})

---

const numbers = [1,3,5,7,9]

const hasEvenNumber = numbers.some((num) => {
	return num % 2 ===0
})
console.log(hasEvenNumber) //false

const hasOddNumber = numbers.some((num) => {
	return num %2
})
console.log(hasOddNumber) //true

|every

• 배열의 모든 요소가 주어진 판별 함수를 통과하면 참을 반환
• 하나의 요소라도 통과하지 못하면 거짓 반환
• (참고) 빈 배열은 항상 참 반환

//# array.every(callback(element[, index[, array]]))
array.every((element,index,array) => {
	//do something
})

---

const numbers = [2,4,6,8,10]

const isEveryNumberEven = numbers.every((num) => {
	return num % 2 ===0
})
console.log(isEveryNumberEven) //true

const isEveryNumberOdd = numbers.every((num) => {
	return num %2
})
console.log(isEveryNumberOdd) //false

|배열 순회 방법 비교

const chars = ['A', 'B', 'C', 'D']
 // for loop
 for (let idx = 0; idx < chars.length; idx++) {
 console.log(idx, chars[idx])
 }
 // for ... of
 for (const char of chars) {
 console.log(char)
 }
 // forEach
 chars.forEach((char, idx) => {
 console.log(idx, char)
 })
 chars.forEach(char => {
 console.log(char)
 })

방식	특징	비고
for loop	-모든 브라우저 환경에서 지원 -인덱스를 활용하여 배열의 요소에 접근 -break, continue 사용 가능
for...of	-일부 오래된 브라우저 환경에서 지원 X -인덱스 없이 배열의 요소에 바로 접근 가능 -break, continue 사용 가능
forEach	-대부분의 브라우저 환경에서 지원 -break, continue 사용 불가능	Airbnb Style Guide 권장방식