위코딩
article thumbnail
Published 2023. 7. 20. 14:06
[JS] 배열과 객체 Language/JavaScript
반응형

배열과 객체는 자바스크립트에서 데이터를 구조화하고 다루는 데 사용되는 중요한 자료형입니다. 각각의 특징과 활용 방법에 대해 알아보겠습니다.


배열(Array)

배열은 여러 개의 값을 순서대로 나열한 데이터 구조입니다. 자바스크립트에서 배열은 [ ] 대괄호로 생성하며, 각 요소들은 쉼표(,)로 구분합니다.

// 배열 생성
let fruits = ['apple', 'banana', 'orange'];

// 인덱스를 사용하여 배열 요소에 접근
console.log(fruits[0]); // 'apple'
console.log(fruits[1]); // 'banana'
console.log(fruits[2]); // 'orange'

배열은 동적으로 크기가 조정되며, 요소들의 데이터 타입이 일치하지 않아도 됩니다.

let mixedArray = [1, 'hello', true];


배열에는 다양한 메서드가 내장되어 있어 데이터를 다루는데 유용합니다.

fruits.push('grape'); // 배열의 끝에 요소 추가
fruits.pop(); // 배열의 끝 요소 제거
fruits.length; // 배열의 길이 반환
fruits.indexOf('banana'); // 요소의 인덱스 반환
// ... 등등

객체(Object)

객체는 이름(key)과 값(value)으로 이루어진 속성들의 집합입니다. 객체는 중괄호 { }를 사용하여 생성하며, 속성은 쉼표(,)로 구분합니다. 속성의 이름은 문자열로 작성하고, 값은 모든 데이터 타입을 가질 수 있습니다.

// 객체 생성
let person = {
    name: 'John',
    age: 30,
    isStudent: false
};

// 속성에 접근
console.log(person.name); // 'John'
console.log(person.age); // 30
console.log(person.isStudent); // false

객체는 서로 다른 종류의 데이터를 그룹화하고 관리하는데 사용됩니다.

let book = {
    title: 'JavaScript Book',
    author: 'John Doe',
    pages: 200,
    isAvailable: true
};

객체에도 다양한 메서드가 내장되어 있지는 않지만, 속성과 메서드를 함께 사용하여 객체를 조작할 수 있습니다.

let user = {
    name: 'John',
    age: 25,
    sayHello: function() {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
};

user.sayHello(); // 'Hello, my name is John and I am 25 years old.'

배열과 객체의 활용

배열과 객체는 복잡한 데이터를 구조화하고 관리하는 데 유용합니다. 배열은 순차적인 데이터를 저장하고 처리하는 데 적합하며, 객체는 이름으로 접근하여 데이터를 처리하는데 적합합니다. 이 두 자료형을 조합하여 원하는 구조를 만들고 데이터를 효율적으로 다룰 수 있습니다.

let students = [
    { name: 'John', age: 25, isStudent: true },
    { name: 'Alice', age: 22, isStudent: true },
    { name: 'Bob', age: 28, isStudent: false }
];

배열과 객체는 자바스크립트에서 데이터를 구조화하고 다루는 데 사용되는 중요한 자료형입니다. 배열은 여러 개의 값을 순서대로 나열하는 데 적합하며, 객체는 이름과 값을 가진 속성들의 집합을 표현하는데 적합합니다. 배열과 객체를 적절히 활용하여 데이터를 구조화하고 다양한 처리를 할 수 있습니다. 웹 개발에서 데이터 관리와 다루기에 있어서 배열과 객체는 매우 유용한 자료구조입니다.

반응형
loading loading