JavaScript 기초: 배열과 객체

JavaScript 기초: 배열과 객체

이번 포스팅에서는 JavaScript의 핵심 데이터 구조인 배열(Array)과 객체(Object)에 대해 다뤄보겠습니다. 배열은 데이터를 순서대로 저장하며, 객체는 키-값(key-value) 형태로 데이터를 저장합니다.

1. 배열(Array)

배열은 여러 값을 하나의 변수에 저장할 수 있는 데이터 구조입니다. 각 값은 인덱스를 통해 접근할 수 있으며, 인덱스는 0부터 시작합니다.

// 배열 선언
const fruits = ["사과", "바나나", "체리"];

// 배열 요소 접근
console.log(fruits[0]); // "사과"

// 배열 길이
console.log(fruits.length); // 3

// 배열 요소 추가
fruits.push("포도");
console.log(fruits); // ["사과", "바나나", "체리", "포도"]

// 배열 요소 삭제
fruits.pop();
console.log(fruits); // ["사과", "바나나", "체리"]
    

배열 메서드

배열에는 다양한 메서드가 제공됩니다. 자주 사용되는 몇 가지를 살펴봅시다.

// 배열 반복 (forEach)
fruits.forEach(fruit => console.log(fruit));

// 새로운 배열 반환 (map)
const upperFruits = fruits.map(fruit => fruit.toUpperCase());
console.log(upperFruits); // ["사과", "바나나", "체리"]

// 조건에 맞는 요소 필터링 (filter)
const longNames = fruits.filter(fruit => fruit.length > 2);
console.log(longNames); // ["바나나", "체리"]
    

2. 객체(Object)

객체는 데이터를 키-값 쌍으로 저장합니다. 키는 문자열 또는 심볼이어야 하며, 값은 어떤 데이터 타입도 가능합니다.

// 객체 선언
const person = {
    name: "홍길동",
    age: 30,
    job: "개발자"
};

// 객체 요소 접근
console.log(person.name); // "홍길동"

// 객체 요소 추가
person.hobby = "독서";
console.log(person); // { name: "홍길동", age: 30, job: "개발자", hobby: "독서" }

// 객체 요소 삭제
delete person.age;
console.log(person); // { name: "홍길동", job: "개발자", hobby: "독서" }
    

객체 메서드

객체를 다룰 때 유용한 메서드들도 있습니다.

// 키 배열 반환
console.log(Object.keys(person)); // ["name", "job", "hobby"]

// 값 배열 반환
console.log(Object.values(person)); // ["홍길동", "개발자", "독서"]

// 키-값 배열 반환
console.log(Object.entries(person)); // [["name", "홍길동"], ["job", "개발자"], ["hobby", "독서"]]
    

3. 실습 예제

실습 과제

1. 배열의 모든 요소를 대문자로 변환하고, 길이가 3 이상인 요소만 출력하세요.

2. 객체를 생성하여 이름, 나이, 취미를 포함한 정보를 저장하고, 이 중 나이를 삭제한 후 객체를 출력하세요.

정답 확인 👇

// 실습 1
const fruits = ["사과", "바나나", "체리"];
const filteredFruits = fruits
    .map(fruit => fruit.toUpperCase())
    .filter(fruit => fruit.length >= 3);
console.log(filteredFruits); // ["사과", "바나나", "체리"]

// 실습 2
const myInfo = {
    name: "홍길동",
    age: 25,
    hobby: "등산"
};
delete myInfo.age;
console.log(myInfo); // { name: "홍길동", hobby: "등산" }

            

이번 포스팅에서는 배열과 객체의 기본 사용법과 주요 메서드들을 다뤘습니다. 다음에는 ES6+의 주요 기능들에 대해 알아보겠습니다!