[JavaScript 기초 시리즈] 5일차: JavaScript 객체와 배열에 대해 알아보자

5. 객체와 배열

객체란 무엇인가?

객체는 키-값 쌍의 컬렉션입니다. 객체를 사용하면 여러 관련 데이터를 하나의 단위로 묶을 수 있습니다.

객체 생성

1. 객체 리터럴

객체 리터럴을 사용하여 객체를 생성할 수 있습니다.

let person = {
  name: "Alice",
  age: 30,
  greet: function() {
    console.log("Hello, " + this.name + "!");
  }
};

console.log(person.name);  // 출력: Alice
console.log(person.age);   // 출력: 30
person.greet();            // 출력: Hello, Alice!

 

2. 프로퍼티 접근

객체의 프로퍼티에 접근하는 방법은 두 가지가 있습니다.

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

 

3. 프로퍼티 추가 및 수정

객체의 프로퍼티를 동적으로 추가하거나 수정할 수 있습니다.

person.job = "Developer";
person.age = 31;
console.log(person.job);  // 출력: Developer
console.log(person.age);  // 출력: 31

 

4. 프로퍼티 삭제

객체의 프로퍼티를 삭제할 수 있습니다.

delete person.job;
console.log(person.job);  // 출력: undefined

 

배열이란 무엇인가?

배열은 순서가 있는 데이터의 집합입니다. 배열의 각 요소는 인덱스를 통해 접근할 수 있습니다.

 

배열 생성

1. 배열 리터럴

배열 리터럴을 사용하여 배열을 생성할 수 있습니다.

let numbers = [1, 2, 3, 4, 5];
console.log(numbers);  // 출력: [1, 2, 3, 4, 5]

 

2. 배열 요소 접근

배열의 각 요소에 인덱스를 사용하여 접근할 수 있습니다.

console.log(numbers[0]);  // 출력: 1
console.log(numbers[2]);  // 출력: 3

 

3. 배열 길이

배열의 길이를 확인할 수 있습니다.

console.log(numbers.length);  // 출력: 5

 

배열 메서드

배열은 다양한 메서드를 제공하여 데이터를 처리할 수 있습니다.

 

1. push()

배열의 끝에 요소를 추가합니다.

numbers.push(6);
console.log(numbers);  // 출력: [1, 2, 3, 4, 5, 6]

 

2. pop()

배열의 끝에서 요소를 제거합니다.

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

 

3. shift()

배열의 앞에서 요소를 제거합니다.

numbers.shift();
console.log(numbers);  // 출력: [2, 3, 4, 5]

 

4. unshift()

배열의 앞에 요소를 추가합니다.

numbers.unshift(1);
console.log(numbers);  // 출력: [1, 2, 3, 4, 5]

 

5. forEach()

배열의 각 요소에 대해 함수를 실행합니다.

numbers.forEach(function(number) {
  console.log(number);
});
// 출력: 1 2 3 4 5

 

6. map()

배열의 각 요소를 변환하여 새로운 배열을 만듭니다.

let squaredNumbers = numbers.map(function(number) {
  return number * number;
});
console.log(squaredNumbers);  // 출력: [1, 4, 9, 16, 25]

 

7. filter()

조건을 만족하는 배열의 요소를 필터링합니다.

let evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});
console.log(evenNumbers);  // 출력: [2, 4]

 

8. reduce()

배열의 각 요소를 누적하여 단일 값을 만듭니다.

let sum = numbers.reduce(function(total, number) {
  return total + number;
}, 0);
console.log(sum);  // 출력: 15

 

결론

객체와 배열은 JavaScript에서 데이터를 구조화하고 관리하는 데 중요한 역할을 합니다. 이들을 잘 이해하고 활용하면 더욱 효율적이고 강력한 코드를 작성할 수 있습니다.

 

다음 글에서는 조건문과 반복문에 대해 알아보겠습니다. 다음 글에서 만나요!