[JavaScript] 5. 배열과 객체 (Array and Object)

개인적으로 JavaScript를 공부하고 그 흔적을 남기는 곳입니다.

 

 

1. 배열 (Arrays)

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

 

[ 기본 배열 조작 메서드 ]

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


// 1) reverse : 원본 배열 요소의 순서를 반대로 정렬
numbers.reverse()
console.log(numbers) // [5, 4, 3, 2, 1]


// 2) push : 배열의 가장 뒤에 요소 추가
numbers.push(100)
console.log(numbers) // [1, 2, 3, 4, 5, 100]


// 3) pop : 배열의 마지막 요소 제거
numbers.pop()
console.log(numbers) // [1, 2, 3, 4, 5]


// 4) unshift : 배열의 가장 앞에 요소 추가
numbers.unshift(100)
console.log(numbers) // [100, 1, 2, 3, 4, 5]


// 5) shift : 배열의 첫번째 요소 제거
numbers.shift()
console.log(numbers) // [1, 2, 3, 4, 5]


// 6) includes : 배열에 특정 값이 존재하는지 참/거짓 반환
console.log(numbers.includes(1)) // true
console.log(numbers.includes(100)) // false


// 7) indexOf : 배열에 특정 값이 존재하는지 확인 후, 가장 첫번째로 찾은 요소의 인덱스 반환.
//              만약 해당 값이 없을 경우 -1을 반환
console.log(numbers.indexOf(3)) // 2
console.log(numbers.indexOf(100)) // -1


// 8) join : 배열의 모든 요소를 연결하여 반환
//           구분자는 선택적으로 지정 가능하며, 생략 시 기본적으로 쉼표 사용
console.log(numbers.join()) // 1,2,3,4,5
console.log(numbers.join('')) // 12345
console.log(numbers.join('-')) // 1-2-3-4-5

 

 

[ 심화 배열 조작 메서드 (Array Helper Methods) ]

• 배열을 순회하며 특정 로직을 수행하는 메서드
• 메서드 호출 시 인자로 CallBack 함수를 받는 것이 특징이다.
• Callback (콜백) 함수 : 어떤 함수의 내부에서 실행될 목적으로 인자로 넘겨받는 함수를 말한다.

// 1) forEach : 배열의 각 요소에 대해 콜백 함수를 한 번씩 실행, 반환 값이 없음
const fruits = ['사과', '배', '수박', '참외']

fruits.forEach((fruit, index) => {
  console.log(fruit, index)
  // 사과 0
  // 배 1
  // 수박 2
  // 참외 3
}


// 2) map : 콜백 함수의 반환 값을 요소로 하는 새로운 배열을 반환
const numbers = [1, 2, 3, 4, 5]

const doubleNumbers = numbers.map(num => {
  return num * 2
  // [2, 4, 6, 8, 10]
}


// 3) filter : 콜백 함수의 반환 값이 참인 요소들만 모아서 새로운 배열을 반환
const numbers = [1, 2, 3, 4, 5]

const oddNumbers = numbers.filter(num => {
  return num % 2
  // [1, 3, 5]
}


// 4) reduce : 콜백 함수의 반환 값들을 하나의 값(acc)에 누적 후 반환
//             빈 배열의 경우 initialValue를 제공하지 않으면 에러가 발생한다.
const numbers = [1, 2, 3]

const result = numbers.reduce((acc, num) => {
  return acc + num
  // 1, 2, 3을 순회하면서 acc에 계속 더해진다.
  // acc의 초기값(initialValue)는 0이다.
  // 최종적으로 6을 반환한다.
}, 0)


// 5) find : 콜백 함수의 반환 값이 참이면 해당 요소를 반환
//           찾는 값이 배열에 없으면 undefined를 반환한다.
const persons = [
  { name: 'kyle', age: 27 },
  { name: 'james', age: 30 }
]

const result = persons.find(person => {
  return person.name === 'kyle'
  // { name: 'kyle', age: 27 }
}


// 6) some : 배열의 요소 중 하나라도 주어진 판별 함수를 통과하면 참을 반환
//           빈 배열은 항상 거짓을 반환한다.
const numbers = [1, 2, 3, 4, 5]

const hasEvenNumber = numbers.some(num => {
  return num % 2 === 0
  // true
}


// 7) every : 배열의 모든 요소가 주어진 판별 함수를 통과하면 참을 반환
//            빈 배열은 항상 참을 반환한다.
const numbers = [1, 2, 3, 4, 5]

const isEveryNumberDownSix = numbers.every(num => {
  return num < 6
  // true
}

 

---

 

2. 객체 (Objects)

• 객체는 속성의 집합이며 중괄호 내부에 key: value 쌍으로 표현
• key는 문자열 타입만 가능하다! key에 띄어쓰기 등의 구분자가 있다면 따옴표로 묶어서 표현해야 한다.
• value는 모든 타입이 가능하다!
• 객체의 요소에 접근하려면 "." 또는 "[ ]"로 가능하다. 하지만 key에 구분자가 있다면 "[ ]"만 가능하다.

const person = {
  name: '홍길동',
  'phone number': '01012345678'
}

console.log(person.name) // 홍길동
console.log(person['name']) // 홍길동
console.log(person['phone number']) // 01012345678

 

[ ES6에 도입된 객체 관련 문법 ]

 

1. 속성명 축약 (shorthand)

• 객체를 정의할 때, key와 할당하는 변수의 이름이 같으면 축약이 가능하다.

const a = 'a'
const b = 'b'

// not shorthand
const alphabet = {
  a: a,
  b: b,
}

// shorthand
const alphabet = {
  a,
  b,
}

 

2. 메서드명 축약 (shorthand)

• 메서드(어떤 객체의 속성이 참조하는 함수) 선언 시, function 키워드 생략 가능

// not shorthand
const newObj = {
  greeting: function () {
    console.log('Hello')
  }
}

// shorthand
const newObj = {
  greeting() {
    console.log('Hello')
  }
}

 

3. 계산된 속성 (computed property name)

• 객체를 정의할 때 key의 이름을 표현식을 이용하여 동적으로 생성 가능

const key = 'names'
const values = ['홍길동', '김철수', '박영희']

const persons = {
  [key]: values,
}

console.log(persons) // { names: Array(3) }
console.log(persons.names) // ["홍길동", "김철수", "박영희"]

 

4. 구조 분해 할당 (destructing assignment)

• 배열 또는 객체를 분해하여 속성을 변수에 쉽게 할당할 수 있는 문법

const person = {
  name = '홍길동',
  age = 27,
}

// not destructing assignment
const name = person.name
const age = person.age

// destructing assignment
const { name, age } = person

 

---

 

3. JSON (JavaScript Object Notation)

• key: value 쌍의 형태로 데이터를 표기하는 언어 독립적 표준 포맷
• 자바스크립트의 object와 유사하게 생겼으나, 실제로는 문자열 타입이다.
• 자바스크립트에서는 Json을 조작하기 위한 두 가지의 내장 메서드를 제공한다.
  • JSON.parse() : JSON => object
  • JSON.stringify() : object => JSON