JavaScript - 객체와 배열은 무엇일까?

1. JavaScript가 뭘까?
2. JavaScript를 시작하기
3. JavaScript의 기본 문법

4. JavaScript 제어문

5. JavaScript 함수

6. JavaScript에서 객체와 배열은 무엇일까?

 

---

JavaScript에서 객체와 배열은 데이터를 구조화하여 저장하고 관리하는 데 매우 중요한 역할을 한다.

 

이번 글에서는 객체와 배열의 기본 개념, 생성 및 사용법, 그리고 내장 메서드에 대해 살펴보자!

 

---

1. 객체(Object)

 

객체란?

객체는 키-값 쌍(Key-Value Pair)으로 데이터를 저장하는 데이터 구조입니다. 각각의 키는 고유하며, 이를 통해 값을 참조할 수 있다.

 

let person = {
    name: "Hanker",
    age: 32,
    isDeveloper: true
};

 

 

객체의 값 접근 방법

 

- 점 표기법을 사용

console.log(person.name); // "Hanker"
console.log(person.age); // 32
console.log(person.isDeveloper); // true

- 대괄호 표기법을 사용

console.log(person["name"]); // "Hanker"
console.log(person["age"]); // 25
console.log(person["isDeveloper"]); // true

 

 

객체 값 추가 및 수정

 

- 값 추가

person.country = "Korea";

 

- 값 수정

person.age = 30;

 

 

객체 메서드

객체는 함수도 값으로 저장할 수 있다. 이를 메서드(Method) 라고 부른다.

let person = {
    name: "Hanker",
    comment: function() {
        console.log("Hello, Hanker!");
    }
};

person.comment(); // "Hello, Hanker!"

 

---

2. 배열(Array)

 

배열이란?

배열은 순서가 있는 데이터의 리스트를 저장하는 데이터 구조이다.

배열의 각 데이터는 인덱스(Index)를 통해 접근한다.

let colors = ["red", "green", "blue"];

 

배열 요소 접근 방법

배열은 0부터 시작하는 인덱스를 사용하여 요소를 참조한다.

console.log(colors[0]); // "red"
console.log(colors[2]); // "blue"

 

 

배열에 요소 추가 및 제거

 

- 요소 추가

colors.push("yellow"); // 배열 끝에 추가
colors.unshift("purple"); // 배열 앞에 추가

 

- 요소 제거

colors.pop(); // 배열 끝 요소 제거
colors.shift(); // 배열 앞 요소 제거

 

 

---

3. 객체와 배열의 내장 메서드

 

객체의 주요 메서드

Object.keys(): 객체의 모든 키를 배열로 반환

console.log(Object.keys(person)); // ["name", "age", "isDeveloper"]

 

Object.values(): 객체의 모든 값을 배열로 반환

console.log(Object.values(person)); // ["Hanker", 32, true]

 

 

배열의 주요 메서드

map(): 배열의 각 요소를 변환하여 새 배열을 반환

let numbers = [1, 2, 3];
let squared = numbers.map(num => num * num);
console.log(squared); // [1, 4, 9]

 

filter(): 조건을 만족하는 요소만으로 새 배열을 생성

let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2]

 

forEach(): 배열의 각 요소에 대해 함수를 실행

numbers.forEach(num => console.log(num));

 

reduce(): 배열의 모든 요소를 하나의 값으로 합침

let sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 6

 

join(): 배열의 요소를 문자열로 결합

console.log(colors.join(", ")); // "red, green, blue"

 

---

4. 객체와 배열의 조합

 

객체와 배열은 서로 결합하여 복잡한 데이터 구조를 생성할 수 있다.

 

- 배열 안에 객체

let users = [
    { name: "Hanker", age: 32 },
    { name: "GilDong", age: 22 }
];
console.log(users[0].name); // "Hanker"

 

- 객체 안에 배열

let team = {
    members: ["Hanker", "GilDong", "Sam"],
    leader: "Hanker"
};
console.log(team.members[1]); // "GilDong"

 

 

---

정리

 

객체와 배열은 JavaScript에서 데이터를 다루는 핵심 요소이다.

객체를 사용하면 키-값 쌍으로 데이터를 구조화할 수 있고, 배열을 사용하면 순서가 있는 데이터 목록을 효율적으로 관리할 수 있다.

 

다음 글에서는 DOM 조작을 통해 HTML과 JavaScript가 어떻게 상호작용하는지 알아보자

 

 

끝.