자바스크립트 객체와 배열 (개념과 사용법, 속성과 메서드 추가 삭제)

5. 객체와 배열

자바스크립트에서 객체와 배열은 매우 중요한 데이터 구조입니다. 객체는 키-값 쌍을 저장하는 데이터 구조이며, 배열은 순서가 있는 값들의 리스트입니다. 이 장에서는 객체와 배열의 개념과 사용법, 객체와 배열의 주요 메서드, 그리고 객체의 속성과 메서드의 추가 및 삭제에 대해 알아보겠습니다.

5.1 객체의 개념과 사용법

자바스크립트의 객체(Object)는 속성(properties)과 메서드(methods)를 가지는 데이터 구조입니다. 속성은 객체의 상태를 저장하고, 메서드는 객체의 동작을 정의합니다. 객체는 주로 복잡한 데이터를 구조화하고 관리하는 데 사용됩니다.

5.1.1 객체의 생성

객체는 중괄호 {}를 사용하여 생성하며, 내부에 키-값 쌍을 정의합니다. 이때 키는 속성의 이름이고, 값은 그 속성에 해당하는 데이터입니다.

javascript
const person = {
  name: "Alice",
  age: 25,
  isStudent: true,
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

console.log(person.name); // Alice
console.log(person.age);  // 25
person.greet();           // Hello, my name is Alice.

위 예제에서 person 객체는 name, age, isStudent라는 세 개의 속성과 greet이라는 하나의 메서드를 가지고 있습니다.

5.1.2 객체의 속성 접근

객체의 속성에 접근하는 방법은 두 가지가 있습니다. 점 표기법(dot notation)과 대괄호 표기법(bracket notation).

javascript
const person = { name: "Bob", age: 30 };

// 점 표기법
console.log(person.name);  // Bob

// 대괄호 표기법
console.log(person["age"]);  // 30

// 대괄호 표기법으로 동적 속성 접근
const key = "name";
console.log(person[key]);  // Bob

점 표기법은 키가 알파벳으로 시작하는 문자열일 때 주로 사용하며, 대괄호 표기법은 키가 동적으로 결정되거나 공백 또는 특수 문자를 포함할 때 유용합니다.

5.2 배열의 개념과 사용법

배열(Array)은 여러 값을 순서대로 저장하는 데이터 구조입니다. 배열의 각 요소는 인덱스를 통해 접근할 수 있으며, 인덱스는 0부터 시작합니다. 배열은 다양한 크기의 데이터를 저장하고, 이를 효율적으로 처리하는 데 유용합니다.

5.2.1 배열의 생성

배열은 대괄호 []를 사용하여 생성하며, 내부에 값을 콤마(,)로 구분하여 정의합니다.

javascript
const fruits = ["apple", "banana", "cherry"];

console.log(fruits[0]);  // apple
console.log(fruits[1]);  // banana
console.log(fruits[2]);  // cherry

위 예제에서 fruits 배열은 세 개의 문자열 요소를 포함하고 있으며, 각 요소는 인덱스를 통해 접근할 수 있습니다.

5.2.2 배열의 길이

배열의 길이는 .length 속성을 통해 확인할 수 있습니다.

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

5.2.3 배열 요소의 추가와 삭제

배열에 새로운 요소를 추가하거나, 기존 요소를 삭제할 수 있습니다.

• 요소 추가: push() 메서드는 배열의 끝에 새로운 요소를 추가합니다.
• 요소 삭제: pop() 메서드는 배열의 마지막 요소를 제거합니다.

javascript
const fruits = ["apple", "banana"];
fruits.push("cherry");
console.log(fruits);  // ["apple", "banana", "cherry"]

fruits.pop();
console.log(fruits);  // ["apple", "banana"]

5.3 객체와 배열의 메서드

자바스크립트는 객체와 배열을 다룰 때 매우 유용한 내장 메서드를 제공합니다. 특히 배열의 요소들을 순회하거나 변형할 때 자주 사용되는 forEach, map, filter와 같은 고차 함수가 있습니다.

5.3.1 forEach

forEach 메서드는 배열의 각 요소에 대해 주어진 함수를 한 번씩 실행합니다. 배열 요소를 반복적으로 처리할 때 사용됩니다.

javascript
const fruits = ["apple", "banana", "cherry"];

fruits.forEach(fruit => {
  console.log(fruit);
});
// apple
// banana
// cherry

위 예제에서 forEach 메서드는 배열 fruits의 각 요소에 대해 주어진 함수를 실행하며, 각 요소를 순차적으로 출력합니다.

5.3.2 map

map 메서드는 배열의 각 요소에 대해 주어진 함수를 실행하고, 그 결과를 새로운 배열로 반환합니다. 기존 배열을 변형하여 새로운 배열을 만들 때 사용됩니다.

javascript
const numbers = [1, 2, 3, 4, 5];
const squared = numbers.map(num => num * num);

console.log(squared);  // [1, 4, 9, 16, 25]

위 예제에서 map 메서드는 numbers 배열의 각 요소를 제곱하여 새로운 배열 squared를 반환합니다.

5.3.3 filter

filter 메서드는 배열의 각 요소에 대해 주어진 조건을 검사하고, 그 조건을 만족하는 요소들만으로 새로운 배열을 만듭니다. 조건에 따라 배열에서 특정 요소를 추출할 때 사용됩니다.

javascript
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);

console.log(evenNumbers);  // [2, 4]

위 예제에서 filter 메서드는 numbers 배열에서 짝수만을 추출하여 새로운 배열 evenNumbers를 반환합니다.

5.3.4 reduce

reduce 메서드는 배열의 각 요소를 누적하여 하나의 값으로 줄이는 작업을 수행합니다. 주로 배열의 모든 값을 더하거나 곱하는 작업에 사용됩니다.

javascript
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, num) => acc + num, 0);

console.log(sum);  // 15

위 예제에서 reduce 메서드는 배열의 각 요소를 누적하여 그 합계를 계산하고, 최종적으로 15를 반환합니다.

5.4 객체의 속성과 메서드 추가 및 삭제

자바스크립트 객체는 동적으로 속성과 메서드를 추가하거나 삭제할 수 있습니다. 이는 자바스크립트의 유연한 특성 중 하나로, 런타임 중에도 객체의 구조를 쉽게 변경할 수 있습니다.

5.4.1 객체 속성의 추가

객체에 새로운 속성을 추가하는 방법은 매우 간단합니다. 객체의 새 속성 이름과 값을 지정하면 됩니다.

javascript
const person = {
  name: "Alice",
  age: 25
};

// 새 속성 추가
person.isStudent = true;
console.log(person);  // { name: "Alice", age: 25, isStudent: true }

5.4.2 객체 메서드의 추가

메서드도 속성과 마찬가지로 객체에 동적으로 추가할 수 있습니다.

javascript
const person = {
  name: "Bob",
  age: 30
};

// 새 메서드 추가
person.greet = function() {
  console.log(`Hello, my name is ${this.name}.`);
};

person.greet();  // Hello, my name is Bob.

위 예제에서 person 객체에 greet라는 메서드를 추가했고, 이를 호출하여 객체의 이름을 출력했습니다.

5.4.3 객체 속성의 삭제

객체의 속성이나 메서드를 삭제할 때는 delete 연산자를 사용합니다.

javascript
const person = {
  name: "Charlie",
  age: 28,
  isStudent: true
};

// 속성 삭제
delete person.isStudent;
console.log(person);  // { name: "Charlie", age: 28 }

위 예제에서 person 객체의 isStudent 속성이 삭제되었습니다. 삭제된 속성에 접근하면 undefined가 반환됩니다.

5.5 객체와 배열의 조합

객체와 배열은 함께 사용될 때 더욱 유용한 기능을 제공합니다. 객체의 배열, 배열의 객체 등 다양한 방식으로 데이터 구조를 구성할 수 있으며, 이를 통해 복잡한 데이터를 효과적으로 관리할 수 있습니다.

5.5.1 객체의 배열

객체의 배열은 여러 개의 객체를 하나의 배열에 저장하는 방식입니다. 주로 데이터베이스에서 여러 레코드를 처리하거나, 여러 사용자의 정보를 관리할 때 사용됩니다.

javascript
const users = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 },
  { name: "Charlie", age: 28 }
];

users.forEach(user => {
  console.log(`${user.name} is ${user.age} years old.`);
});
// Alice is 25 years old.
// Bob is 30 years old.
// Charlie is 28 years old.

위 예제에서 users 배열은 세 개의 사용자 객체를 포함하고 있으며, forEach 메서드를 사용하여 각 사용자의 이름과 나이를 출력합니다.

5.5.2 배열의 객체

배열 자체를 객체의 속성으로 사용하여 더 복잡한 구조를 만들 수 있습니다. 예를 들어, 한 사용자가 여러 취미를 가질 수 있는 구조를 정의할 수 있습니다.

javascript
const person = {
  name: "David",
  hobbies: ["reading", "gaming", "hiking"]
};

console.log(person.name);        // David
console.log(person.hobbies[1]);  // gaming

위 예제에서 person 객체는 hobbies라는 배열을 속성으로 가지고 있으며, 이 배열은 여러 개의 취미를 저장합니다.

자바스크립트의 객체와 배열은 다양한 데이터를 저장하고 조작하는 데 유용한 데이터 구조입니다. 객체는 키-값 쌍으로 데이터를 저장하며, 배열은 순서가 있는 리스트 형태로 값을 저장합니다. 두 데이터 구조 모두 다양한 메서드를 제공하여 데이터를 효율적으로 처리할 수 있으며, 객체의 속성 및 메서드를 동적으로 추가하거나 삭제할 수 있는 유연성을 제공합니다. 객체와 배열을 잘 이해하고 활용하면 복잡한 데이터 구조도 쉽게 다룰 수 있습니다.