JavaScript 기초 - Array

Array

: 키와 속성들을 담고 있는 참조 타입의 객체

• 순서를 보장
• 주로 대괄호를 이용하여 생성, 0을 포함한 양의 정수 인덱스로 특정 값에 접근 가능
• array.length의 형태로 배열의 길이에 접근

 

배열 메서드 기초

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

메서드	설명	비고
reverse	원본 배열의 요소들의 순서를 반대로 정렬
push & pop	배열의 가장 뒤에 요소를 추가 또는 제거
unshift & shift	배열의 가장 앞에 요소를 추가 또는 제거
includes	배열에 특정 값이 존재하는지 판별 후 참/거짓 반환
indexOf	배열에 특정 값이 존재하는지 판별 후 인덱스 반환	요소가 없을 경우 -1 반환
join	배열의 모든 요소를 구분자를 이용하여 연결	구분자 생략 시 쉼표 기준

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

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

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

console.log(numbers.includes(3))    // true
console.log(numbers.includes(100))  // false

console.log(numbers.indexOf(4))     // 1
console.log(numbers.indexOf(100))   // -1

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

 

 

 

 

배열 메서드 심화

 

Array helper Methods

: 배열을 순회하며 특정 로직을 수행하는 메서드

- 메서드 호출 시 인자로 callback 함수를 받는 것이 특징

 

* callback 함수 : 어떤 함수의 내부에서 실행될 목적으로 인자로 넘겨받는 함수

메서드	설명	비고
forEach	배열의 각 요소에 대해 콜백 함수를 한 번씩 실행	반환 값 없음
map	콜백 함수의 반환 값을 요소로 하는 새로운 배열 반환
filter	콜백 함수의 반환 값이 참인 요소들만 모아서 새로운 배열을 반환
reduce	콜백 함수의 반환 값들을 하나의 값에 누적 후 반환
find	콜백 함수의 반환 값이 참이면 해당 요소를 반환
some	배열의 요소 중 하나라도 판별 함수를 통과하면 참을 반환
every	배열의 모든 요소가 판별 함수를 통과하면 참을 반환

 

 

1. forEach : 인자로 주어지는 함수를 배열의 각 요소에 대해 한 번씩 실행

array.forEach(element, index, array) => {
  // do something
}

// 1.
const colors = ['red', 'orange', 'green', 'yellow']

const printClr = function (color) {
  console.log(color)
}

colors.forEach(printClr) 

// 2. 함수 정의를 인자로 넣어보기
/* 적용될 배열.forEach()*/
colors.forEach(function (color) {
  console.log(color)
})

// 3. 화살표 함수 적용하기
colors.forEach((color) => {
  console.log(color)
})

 

 

 

2. map : 콜백 함수의 반환 값을 요소로 하는 새로운 배열 반환

• 배열의 각 요소에 대해 콜백 함수를 한 번씩 실행
• 기존 배열 전체를 다른 형태로 바꿀 때 사용

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

// 1.
const double = function (number) {
  return number * 2
}

const doubleNumbers = numbers.map(double)
console.log(doubleNumbers)      // [ 2, 4, 6, 8, 10 ]

// 2.
const doubleNumbers = numbers.map(function (number) {
    return number * 2
})
console.log(doubleNumbers)      // [ 2, 4, 6, 8, 10 ]

// 3.
const doubleNumbers = numbers.map((number) => number * 2)
console.log(doubleNumbers)      // [ 2, 4, 6, 8, 10 ]

 

 

 

3. filter : 콜백 함수의 반환 값이 참인 요소들만 모아서 새로운 배열 반환

• 배열의 각 요소에 대해 콜백 함수를 한 번씩 실행
• 기존 배열의 요소들을 필터링할 때 유용

const products = [
  { name : 'cucumber', type : 'vegetable'},
  { name : 'apple', type : 'fruit'},
  { name : 'tomato', type : 'vegetable'},
  { name : 'cherry', type : 'fruit'},
]

// 1.
const fruitFilter = function (product) {
  return product.type === 'fruit'
}

const newArray = products.filter(fruitFilter)

console.log(newArray)   // [ { name: 'apple', type: 'fruit' }, { name: 'cherry', type: 'fruit' }]

// 2.
const newArray = products.filter(function (product) {
  return product.type === 'fruit'
})
console.log(newArray)   // [ { name: 'apple', type: 'fruit' }, { name: 'cherry', type: 'fruit' }]

// 3.
const newArray = products.filter((product) => product.type === 'fruit')
console.log(newArray)   // [ { name: 'apple', type: 'fruit' }, { name: 'cherry', type: 'fruit' }]

 

 

 

4. reduce : 인자로 주어지는 함수를 배열의 각 요소에 대해 한 번씩 실행해서, 하나의 결과 값을 반환

- 배열을 하나의 값으로 계산하는 동작이 필요할 때 사용!!

array.reduce((반환값이 누적되는 변수, element) => {
  // do something
}, 누적될 값의 초기값)

const numbers = [90, 60, 80, 100]
// 총합구하기

// 1.
const sumV = numbers.reduce(function (total, num) {
  return total + num
}, 0)

console.log(sumV)    // 330

// 2.
const sumV = numbers.reduce((total, num) => {
  return total + num
}, 0)

console.log(sumV)    // 330

// 3.
// 총합
const sumV = numbers.reduce((total, num) => total + num, 0)
// 평균
const avgV = numbers.reduce((total, num) => total + num, 0) / numbers.length   

console.log(sumV)    // 330
console.log(avgV)    // 82.5

 

 

 

5. find : 배열의 각 요소에 대해 콜백 함수를 한 번씩 실행

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

const heros = [
  { name : 'Superman', age : 45 },
  { name : 'Spiderman', age : 20 },
  { name : 'Batman', age : 45 },
]

const hero = heros.find((hero) => hero.name  === 'Superman')
console.log(hero)  // { name: 'Superman', age: 45 }

 

 

 

6. some : 배열의 요소 중 하나라도 주어진 판별 함수를 통과하면 참을 반환

• 모든 요소가 통과하지 못하면 거짓 반환
• 빈 배열은 항상 false 반환

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

// 1.
const result = arr.some(function (num){
  return num % 2 === 0
})

// 2.
const result = arr.some((num) => {
  return num % 2 === 0
})

// 3.
const result = arr.some((num) => num % 2 === 0)

console.log(result)   // true

 

 

 

 

7. every : 배열의 모든 요소가 주어진 판별 함수를 통과하면 참을 반환

• 하나의 요소라도 통과하지 못하면 거짓 반환
• 빈 배열은 항상 true 반환

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

const newResult = arr.every((num) => num % 2 === 0)

console.log(newResult)   // false

 

 

 

 

 

 

얼마전까지만 해도 집에 혼자 있으면 너무 우울했는데, 지금은 또 사람 대하는게 너무 피곤하게 느껴진다.

하늘사진을 보니 마음이 뚫리는,,기뷴

 

드라마 정주행 순서,, 적어놔야지

쌈마이웨이 - 커피프린스 - 멜로가 체질 - 궁