[JavaScript] 배열 & 객체

💡 배열

: 키와 속성들을 담고 있는 참조 타입의 객체. 배열의 길이는 array.length로 접근 가능.

ex) [1, 2, 3, 4, 5]

 

📌 배열 관련 메서드

- array.reverse()

: 워본 배열의 요소들의 순서를 반대로 정렬

 

- array.push(요소)

: 배열의 가장 뒤에 요소 추가

 

- arrays.pop()

: 배열의 마지막 요소 제거

 

- arrays.unshift(요소)

: 배열의 가장 앞에 요소 추가

 

- arrays.shift()

: 배열의 첫번째 요소 제거

 

- array.includes(value)

: 배열에 특정 값이 존재하는지 판별 후 참 또는 거짓 반환

 

- array.indexOf(value)

: 배열에 특정 값이 존재하는지 확인 후 가장 첫번째로 찾은 요소의 인덱스 반환, 없다면 -1 반환.

 

- array.join([separater])

: 배열의 모든 요소를 연결하여 반환. separater는 연결 중간에 들어갈 구분자.

 

📌 Array Helper Methods

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

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

 

- array.forEach(callback(element[, index[, array]]))

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

: 반환값이 없는 메서드

const fruits = ['딸기', '사과', '메론']

fruits.forEach((fruit, index) => {
  console.log(fruit, index)
})
// 딸기 0
// 사과 1
// 메론 2

 

- array.map(callback(element[, index[, array]]))

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

const numbers = [1, 2, 3]

const doubleNums = numbers.map((num) => {
  return num * 2
})

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

 

- array.filter(callback(element[, index[, array]]))

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

const numbers = [1, 2, 3]

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

 

- array.reduce(acc, element, [index[, array]])[, initialValue])

: 콜백 함수의 반환 값들을 하나의 값(acc)에 누적 후 반환

const numbers = [1, 2, 3]

const result = numbers.reduce((acc, num) => {
  return acc + num
}, 0)

console.log(result)
// 6

 

- array.find(callback(element[, index[, array]]))

: 콜백 함수의 반환 값이 참이면 해당 요소를 반환

: 찾는 값이 배열에 없으면 undefined 반환

const peoples = [
  { name: 'eric', age: 20 },
  { name: 'yeongha', age: 25 },
  { name: 'jeongwoo', age: 30 },
]

const result = peoples.find((peoples) => {
  return peoples.name == 'yeongha'
})

console.log(result)
// {name: 'yeongha', age: 25}

 

- array.some(callback(element[, index[, array]]))

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

: 모든 요소가 통과하지 못하면 거짓 반환

const numbers = [1, 3, 5]

const hasEvenNum = numbers.some((num) => {
  return num % 2 === 0
})

console.log(hasEvenNum)
// false

const hasOddNum = numbers.some((num) => {
  return num % 2
})

console.log(hasOddNum)
// true

 

- array.every(callback(element[, index[, array]]))

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

: 요소 중 하나라도 통과하지 못하면 거짓 반환

const numbers1 = [2, 4, 6, 8]

const hasEvenNum = numbers1.some((num) => {
  return num % 2 === 0
})

console.log(hasEvenNum)
// true

const numbers2 = [1, 2, 3, 5]

const hasOddNum = numbers.some((num) => {
  return num % 2
})

console.log(hasOddNum)
// false

 

💡 객체

: 객체는 속성의 집합이며, 중괄호 내부에 key와 value의 쌍으로 표현

: key는 문자열 타입만 가능하고, value는 모든 타입 가능

 

📌 JSON

: key-value쌍의 형태로 데이터를 표기하는 언어 독립적 표준 포맷

: 자바스크립트의 객체와 유사하게 생겼으나 실제로는 문자열 타입

 

• JSON.parse(json)
  : JSON -> 자바스크립트 객체
• JSON.stringify(자바스크립트 객체)
  : 자바스크립트 객체 -> JSON