JavaScript #12 객체와 배열

2024. 7. 23. 17:34

객체 (Object)

객체는 자바스크립트에서 데이터를 구조화하고 저장하는 방식 중 하나로 키와 값 쌍의 집합으로 구성된다. 이 키-값 쌍을 통해서 다양한 테이터와 기능을 하나의 단위로 묶어 관리할 수 있다.

특징

키-값

키는 문자열 또는 심볼이어야 하며 값은 어떠한 데이터 타입도 가능하다. 만약 키에 숫자를 입력할 경우 자동으로 문자로 변환된다.

중첩 가능

객체의 값으로 또 다른 객체를 가질 수 있다. 이를 통해 복잡한 데이터 구조를 표현하는 것이 가능하다.

동적 속성 추가/제거

객체는 생성된 이후에도 속성을 동적으로 추가하거나 삭제할 수 있다.

생성 방법

1. 객체 리터럴

가장 일반적인 객체 생성 방법으로 중괄호를 사용하여 키-값 쌍을 정의한다.

const person = {
    name: 'Bak',
    age: 25,
    greet: function() {
        console.log('Hello, my name is ' + this.name);
    }
};

2. 객체 생성자

new Object() 구문을 사용하여 객체를 생성할 수 있다. 이후 점 표기법 또는 대괄호 표기법을 사용하여 속성을 추가한다.

const person = new Object();
person.name = 'Bak';
person.age = 25;
person.greet = function() {
    console.log('Hello, my name is ' + this.name);
};

3. 생성자 함수

특정 구조를 가진 객체를 반복해서 생성할 때 유용하다.

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.greet = function() {
        console.log('Hello, my name is ' + this.name);
    };
}

const alice = new Person('Bak', 25);

4. 클래스(ES6 이후)

클래스를 사용하면 객체 지향 프로그래밍의 패턴을 쉽게 구현할 수 있다.

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    greet() {
        console.log('Hello, my name is ' + this.name);
    }
}

const alice = new Person('Alice', 25);

객체 사용법

const game = {
    company: 'Bethesda',
    title: 'Fallout',
    year: 1997
};

// 속성 접근
console.log(game.company); // 'Bethesda'
console.log(game['title']); // 'Fallout'

// 속성 수정
game.year = 2008;
console.log(game.year); // 2008

// 속성 추가
game.series = 'Fallout : New Vegas';
console.log(game.series); // 'Fallout : New Vegas'

// 속성 삭제
delete company.title;
console.log(company.title); // undefined

배열 (Array)

배열은 자바스크립트에서 여러 개의 데이터를 순차적으로 저장할 수 있는 자료구조이다. 동일한 타입 또는 서로 다른 타입의 데이터를 모두 저장할 수 있으며 각 데이터는 인덱스로 접근할 수 있다.

특징

인덱스 기반

배열의 각 요소는 0부터 시작하는 인덱스를 통해 접근할 수 있다.

동적 크기

자바스크립트의 배열은 동적 크기를 가지며, 요소를 추가하거나 제거할 수 있다.

다양한 데이터 타입

배열의 요소는 숫자, 문자열, 객체, 다른 배열 등 어떤 데이터 타입도 될 수 있다.

배열 생성 방법

1. 배열 리터럴

가장 일반적인 배열 생성 방법으로 대괄호를 사용하여 배열 요소를 정의한다.

const numbers = [1, 2, 3, 4, 5];
const mixedArray = [1, 'two', {three: 3}, [4, 5]];

2. 배열 생성자

new Array() 구문을 사용하여 배열을 생성할 수 있다.

const numbers = new Array(1, 2, 3, 4, 5);
const emptyArray = new Array(10); // 길이가 10인 빈 배열 생성

배열 사용법

const fruits = ['apple', 'banana', 'cherry'];

// 요소 접근
console.log(fruits[0]); // 'apple'
console.log(fruits[1]); // 'banana'

// 요소 수정
fruits[1] = 'blueberry';
console.log(fruits[1]); // 'blueberry'

인덱스로 배열의 요소에 접근하여 사용할 수 있다.

배열 메서드

자바스크립트 배열은 다양한 메서드를 통해 요소를 추가, 제거, 탐색, 변형할 수 있다.

1. push

push 메서드는 배열의 끝에 하나 이상의 요소를 추가하고 배열의 새로운 길이를 반환한다.

const fruits = ['apple', 'banana'];
let len = fruits.push('orange');
console.log(len); // 3
console.log(fruits); // ['apple', 'banana', 'orange']

2. pop

pop 메서드는 배열의 마지막 요소를 제거하고 그 요소를 반환한다.

const fruits = ['apple', 'banana', 'orange'];
const lastFruit = fruits.pop();
console.log(fruits); // ['apple', 'banana']
console.log(lastFruit); // 'orange'

push & pop 사용 예제

const fruits = ['apple', 'banana'];

// push: 배열 끝에 요소 추가
fruits.push('cherry');
console.log(fruits); // ['apple', 'banana', 'cherry']

// pop: 배열 끝의 요소 제거
const lastFruit = fruits.pop();
console.log(fruits); // ['apple', 'banana']
console.log(lastFruit); // 'cherry'

3. map

map 메서드는 배열 내의 모든 요소에 대해 제공된 함수를 호출한 결과로 새로운 배열을 생성한다.

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

const numbers = [1, 2, 3, 4, 5];
const squared = numbers.map(num => num * num);
console.log(squared); // [1, 4, 9, 16, 25]

4. filter

filter 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다.

const numbers = [1, 2, 3, 4, 5];
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [2, 4]

5. reduce

reduce 메서드는 배열의 각 요소에 대해 주어진 reducer 함수를 실행하여 단일 값을 반환한다.

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 15

reduce는 배열의 각 요소를 순회하며, 콜백 함수의 결과를 누산 하여 단일 값을 생성한다. 여기서

(acc, curr) => acc + curr는 콜백함수로 두 개의 주요 인수를 받는다.

acc : 이전 콜백에서 반환된 값으로 이전 인덱스까지 누산 된 값

curr : 현재 순회 중인 인덱스의 요소

(콜백함수), 0 : 0이 초기값으로 이 값을 시작으로 요소의 값들이 누산 되기 시작한다.

공식 문법은 다음과 같다.

arr.reduce(callback(accumulator, currentValue, currentIndex, array), initialValue)

실제 필요한 인수들이 다양한 방식으로 표기가 가능한데 그 이유는 자바스크립트의 함수 인수 처리 방식 때문이다.

자바스크립트에서는 함수가 호출될 때 정의된 인수보다 더 많은 인수가 전달되면 무식하고, 더 적은 인수가 전달되면 undefined로 처리한다.

따라서 reduce 메서드에서 필요한 인수만이 알아서 사용된다.

따라서 생략형 콜백에서는 첫 번째와 두 번째 인수만 사용하며 두 값을 합한 결과만 리턴하기로 한다.

이 과정이 반복되면서 전체 요소의 합산이 되는 것이다.

모든 인수를 적용해서 호출하면 다음과 같다.

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

const sum = numbers.reduce((accumulator, currentValue, currentIndex, array) => {
    console.log('Accumulator:', accumulator);
    console.log('Current Value:', currentValue);
    console.log('Current Index:', currentIndex);
    console.log('Array:', array);
    return accumulator + currentValue;
}, 0);

console.log('Sum:', sum); // Sum: 15

인수 (accumulator, currentValue, currentIndex, array) => {콜백 함수} : 요소의 누산 값을 반환

auccumulator : 누산값

currentVlaue : 현재 요소값

currnetIndex : 현재 인덱스

array : 참조 배열

728x90

저작자표시

기록