객체 (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 : 참조 배열
