객체와 배열 기초

자바스크립트에서 객체와 배열은 복잡한 데이터 구조를 표현하고 조작하는 데 사용되는 핵심 요소입니다.

이 절에서는 객체와 배열의 기본 개념부터 고급 사용법까지 다루겠습니다.

객체 (Objects)

객체 생성

객체 리터럴

let person = {
  name: "Alice",
  age: 30,
  isStudent: false
};

생성자 함수

function Person(name, age) {
  this.name = name;
  this.age = age;
}
let person = new Person("Bob", 25);

객체 속성 접근 및 수정

점 표기법

console.log(person.name); // "Alice"
person.age = 31;

대괄호 표기법

console.log(person["name"]); // "Alice"
person["age"] = 31;

계산된 속성명

let propertyName = "job";
let person = {
  [propertyName]: "Developer"
};
console.log(person.job); // "Developer"

객체 메서드와 this

let person = {
  name: "Alice",
  greet: function() {
    console.log("Hello, I'm " + this.name);
  }
};
person.greet(); // "Hello, I'm Alice"

this는 메서드를 호출한 객체를 참조합니다.

주의할 점은 화살표 함수에서 this가 다르게 동작한다는 것입니다.

배열 (Arrays)

배열 생성

let fruits = ["apple", "banana", "orange"];
let numbers = new Array(1, 2, 3, 4, 5);

배열 요소 접근 및 수정

console.log(fruits[0]); // "apple"
fruits[1] = "grape";

주요 배열 메서드

push와 pop

fruits.push("mango"); // 끝에 추가
let lastFruit = fruits.pop(); // 끝에서 제거 및 반환

unshift와 shift

fruits.unshift("lemon"); // 앞에 추가
let firstFruit = fruits.shift(); // 앞에서 제거 및 반환

slice와 splice

let slicedFruits = fruits.slice(1, 3); // 부분 배열 반환
fruits.splice(1, 1, "kiwi", "melon"); // 요소 제거 및 추가

배열 순회

for 루프

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

forEach

fruits.forEach(function(fruit) {
  console.log(fruit);
});

let upperFruits = fruits.map(fruit => fruit.toUpperCase());

filter

let longFruits = fruits.filter(fruit => fruit.length > 5);

reduce

let totalLength = fruits.reduce((sum, fruit) => sum + fruit.length, 0);

각 방법의 특징

for 루프 : 가장 기본적이고 유연함, 성능이 중요할 때 사용
forEach : 간단한 순회에 적합, 반환값 없음
map : 배열의 각 요소를 변환할 때 사용, 새 배열 반환
filter : 조건에 맞는 요소만 선택할 때 사용, 새 배열 반환
reduce : 배열을 단일 값으로 축소할 때 사용

얕은 복사 vs 깊은 복사

얕은 복사

객체나 배열의 최상위 속성만 복사합니다.

let original = { a: 1, b: { c: 2 } };
let shallowCopy = Object.assign({}, original);
// 또는
let shallowCopy = { ...original };

깊은 복사

모든 중첩 객체나 배열을 포함하여 완전히 새로운 복사본을 만듭니다.

let deepCopy = JSON.parse(JSON.stringify(original));

주의 : 이 방법은 함수, undefined, Symbol 등을 처리하지 못합니다.

복잡한 데이터 구조 구현 예제

학생 관리 시스템을 구현해 보겠습니다.

let school = {
  name: "High School",
  students: [],
  addStudent: function(name, grade) {
    let student = {
      id: this.students.length + 1,
      name: name,
      grade: grade,
      courses: []
    };
    this.students.push(student);
    return student.id;
  },
  addCourse: function(studentId, course) {
    let student = this.students.find(s => s.id === studentId);
    if (student) {
      student.courses.push(course);
    }
  },
  getStudentInfo: function(studentId) {
    let student = this.students.find(s => s.id === studentId);
    if (student) {
      return {
        name: student.name,
        grade: student.grade,
        courses: student.courses.map(c => c.name)
      };
    }
    return null;
  },
  getTopStudents: function() {
    return this.students
      .filter(s => s.courses.length > 0)
      .map(s => ({
        id: s.id,
        name: s.name,
        average: s.courses.reduce((sum, c) => sum + c.score, 0) / s.courses.length
      }))
      .sort((a, b) => b.average - a.average)
      .slice(0, 3);
  }
};
 
// 사용 예
let studentId = school.addStudent("Alice", 10);
school.addCourse(studentId, { name: "Math", score: 90 });
school.addCourse(studentId, { name: "Science", score: 85 });
console.log(school.getStudentInfo(studentId));
console.log(school.getTopStudents());

이 예제는 객체와 배열을 사용하여 복잡한 데이터 구조와 연산을 구현하는 방법을 보여줍니다. school 객체는 학생들의 정보를 관리하고, 다양한 메서드를 통해 학생 정보를 조작하고 조회합니다.

자바스크립트의 객체와 배열은 강력하고 유연한 데이터 구조를 제공합니다. 객체는 관련 데이터와 기능을 하나의 단위로 묶는 데 사용되며, 배열은 순서가 있는 데이터 컬렉션을 다루는 데 적합합니다.

객체를 다룰 때는 속성에 접근하고 수정하는 다양한 방법을 이해하는 것이 중요합니다. 또한, this 키워드의 동작을 정확히 이해하여 메서드를 올바르게 구현해야 합니다.

배열을 다룰 때는 상황에 따라 적절한 메서드를 선택하는 것이 중요합니다. push, pop, shift, unshift는 배열의 시작이나 끝을 수정할 때 유용하고, slice와 splice는 배열의 일부를 추출하거나 수정할 때 사용됩니다.

배열 순회 메서드들(forEach, map, filter, reduce)은 함수형 프로그래밍 스타일을 지원하며, 코드를 더 간결하고 표현력 있게 만들어줍니다. 각 메서드의 특성을 이해하고 상황에 맞게 사용하면 효율적인 코드를 작성할 수 있습니다.

객체와 배열을 복사할 때는 얕은 복사와 깊은 복사의 차이를 이해하고, 필요에 따라 적절한 방법을 선택해야 합니다. 특히 중첩된 객체나 배열을 다룰 때는 깊은 복사가 필요할 수 있습니다.

마지막으로, 객체와 배열을 조합하여 복잡한 데이터 구조를 만들고 효과적으로 관리하는 능력은 자바스크립트 프로그래밍에서 매우 중요합니다. 이를 통해 현실 세계의 복잡한 시스템을 모델링하고 효율적으로 데이터를 처리할 수 있습니다.

이전으로 다음으로