본문 바로가기

Front-end/JavaScript

배열과 객체: 다양한 데이터 구조의 활용

🌟 배열과 객체: 다양한 데이터 구조의 활용 🌟

배열과 객체의 특징과 활용 📚

배열과 객체는 웹 애플리케이션 개발에서 핵심적인 역할을 수행하는 데이터 구조입니다. 이모지를 활용하여 더욱 생동감 있게 알아보도록 하겠습니다! 😄

배열은 순서가 있는 데이터의 모음으로, 인덱스를 통해 각 요소에 접근할 수 있습니다. 반면, 객체는 속성과 값을 가지는 데이터 구조로, 각 속성은 키와 값으로 구성됩니다. 이를 이해하기 위해 코드 예제를 살펴보겠습니다. 👀


// 배열 예제
const fruits = ['🍎', '🍌', '🍇', '🍉', '🍓'];

// 객체 예제
const person = {
  name: 'John Doe',
  age: 30,
  city: 'New York'
};

객체 속성의 추가, 조회, 변경, 삭제 ✏️

객체는 동적으로 속성을 추가, 조회, 변경, 삭제할 수 있는 유연한 특성을 가지고 있습니다. 이를 코드 예제를 통해 알아보겠습니다. 💡


const person = {
  name: 'John Doe',
  age: 30,
  city: 'New York'
};

// 속성 추가
person.gender = 'Male';

// 속성 조회
console.log(`이름: ${person.name}`);
console.log(`나이: ${person['age']}`);

// 속성 변경
person.age = 35;

// 속성 삭제
delete person.city;

객체 속성 조회법 두 가지 🕵️‍♀️

객체 속성을 조회할 때에는 두 가지 방법이 있습니다: 도트 표기법(dot notation)과 대괄호 표기법(bracket notation)입니다. 각각의 차이점을 알아보겠습니다. 🔍


const person = {
  name: 'John Doe',
  age: 30,
  city: 'New York'
};

// 도트 표기법(dot notation)
console.log(`이름: ${person.name}`);

// 대괄호 표기법(bracket notation)
console.log(`나이: ${person['age']}`);

배열과 객체에 반복문을 응용하는 실습 💻

배열과 객체는 반복문을 활용 하여 효과적으로 데이터를 처리할 수 있습니다. 실습 예제를 통해 다양한 활용법을 익혀봅시다! 🚀

배열 반복문 예제


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

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

객체 반복문 예제


const person = {
  name: 'John Doe',
  age: 30,
  city: 'New York'
};

for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

더 많은 정보와 실습 예제를 확인하려면 MDN JavaScript 객체 가이드MDN JavaScript 배열 가이드를 참고해주세요. 📖

이로써 배열과 객체의 특징과 활용에 대해 알아보았습니다. 실습 예제를 통해 개념을 익혀보세요! 💪

궁금한 점이나 글에 오류가 있다면 댓글로 남겨주시면 성심껏 답변해드리겠습니다. 📝

🎉🎉🎉