javascript 객체(Object)와 배열(Array)

객체(Object)란?

객체(object)는 키-값(key-value) 쌍으로 데이터를 저장하는 구조입니다. 자바스크립트에서 객체는 동적인 특성을 가지며, 다양한 데이터 타입을 값으로 가질 수 있습니다.

const user = {
  name: "홍길동",
  age: 25,
  isStudent: true,
  hobbies: ["독서", "운동", "영화 감상"],
};

• 키(key): 속성의 이름으로 문자열 또는 심볼(symbol) 타입만 가능합니다.
• 값(value): 숫자, 문자열, 배열, 함수 등 어떤 데이터 타입도 올 수 있습니다.

배열(Array)이란?

배열(array)은 순서가 있는 데이터의 집합입니다. 자바스크립트에서 배열은 객체의 특별한 형태로, 다양한 데이터 타입을 저장할 수 있습니다.

const fruits = ["사과", "바나나", "포도"];

• 인덱스(index): 각 요소의 위치를 나타내는 숫자(0부터 시작).
• 요소(element): 배열 안에 저장된 데이터.

배열은 객체와 달리 순서를 보장하며, 일반적으로 데이터를 나열하거나 반복 작업을 수행할 때 사용합니다.

객체와 배열의 기본 사용법

객체의 기본 사용법

객체의 속성에 접근하거나 값을 변경할 때는 점 표기법(dot notation)과 대괄호 표기법(bracket notation)을 사용합니다.

// 객체 생성
const book = {
  title: "자바스크립트 마스터",
  author: "김개발",
  publishedYear: 2023,
};

// 속성 접근
console.log(book.title); // "자바스크립트 마스터"
console.log(book["author"]); // "김개발"

// 속성 변경
book.publishedYear = 2024;
console.log(book.publishedYear); // 2024

배열의 기본 사용법

배열은 요소에 접근하거나 수정할 때 인덱스를 사용합니다.

// 배열 생성
const languages = ["JavaScript", "Python", "Ruby"];

// 요소 접근
console.log(languages[0]); // "JavaScript"

// 요소 변경
languages[1] = "Java";
console.log(languages); // ["JavaScript", "Java", "Ruby"]

객체와 배열의 메서드

push와 pop

배열 끝에 요소를 추가하거나 제거하는 메서드입니다.

const numbers = [1, 2, 3];

// 요소 추가
numbers.push(4);
console.log(numbers); // [1, 2, 3, 4]

// 요소 제거
const lastElement = numbers.pop();
console.log(lastElement); // 4
console.log(numbers); // [1, 2, 3]

map

배열의 각 요소에 대해 주어진 함수를 호출한 결과로 새로운 배열을 만듭니다.

const prices = [100, 200, 300];

// 10% 할인된 가격 계산
const discountedPrices = prices.map((price) => price * 0.9);
console.log(discountedPrices); // [90, 180, 270]

filter

조건에 맞는 요소만 포함하는 새로운 배열을 반환합니다.

const ages = [15, 20, 25, 30];

// 성인만 필터링
const adults = ages.filter((age) => age >= 20);
console.log(adults); // [20, 25, 30]

reduce

배열의 각 요소를 순회하며 누적 값을 계산합니다.

const transactions = [1000, -200, 500, -100];

// 총 잔액 계산
const totalBalance = transactions.reduce((acc, curr) => acc + curr, 0);
console.log(totalBalance); // 1200