Created

April 22, 2024

Array

배열은 순서가 있는 데이터의 집합이다. 여러 자료형의 데이터를 저장할 수 있으며, 인덱스를 통해 각 요소에 접근할 수 있다.

// 배열 리터럴을 사용하여 배열 생성
let fruits = ['Apple', 'Banana', 'Cherry'];

// Array 생성자를 사용하여 배열 생성
let fruits = new Array('Apple', 'Banana', 'Cherry');

console.log(fruits[2]); // Banana

배열의 주요 메서드를 알아보자.

push()

배열의 끝에 하나 이상의 요소를 추가한다.

pop()

배열의 끝에서 요소를 제거하고 반환한다.

forEach()

배열의 각 요소에 대해 주어진 함수를 한 번씩 실행한다. 배열을 순회하면서 반복적인 작업을 수행할 때 사용된다.

array.forEach(function(currentValue, index, array) {
  // 실행할 코드
});

currentValue: 현재 처리 중인 요소
index (선택): 현재 요소의 인덱스
array (선택): forEach가 호출된 배열

예시

let fruits = ["Apple", "Banana", "Cherry"];

fruits.forEach(function(fruit, index) {
  console.log(index + ": " + fruit);
});

// 0: Apple
// 1: Banana
// 2: Cherry

map()

배열의 각 요소에 대해 주어진 함수를 호출하고, 그 결과를 모아 새로운 배열을 생성한다. 원본 배열은 변경되지 않는다.

let newArray = array.map(function(currentValue, index, array) {
  // 실행할 코드
  return element;
});

currentValue: 현재 처리 중인 요소
index (선택): 현재 요소의 인덱스
array (선택): map이 호출된 배열

예시

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

let squares = numbers.map(function(number) {
  return number * number;
});

console.log(numbers): // [1, 2, 3, 4, 5]
console.log(squares); // [1, 4, 9, 16, 25]

filter()

주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열을 생성한다. 원본 배열은 변경되지 않는다.

let newArray = array.filter(function(currentValue, index, array) {
  // 실행할 코드
  return condition;
});

currentValue: 현재 처리 중인 요소
index (선택): 현재 요소의 인덱스
array (선택): filter가 호출된 배열

예시

let numbers = [1, 2, 3, 4, 5, 6];

let evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});

console.log(evenNumbers); // [2, 4, 6]

sort()

배열의 요소를 정렬하고, 정렬된 배열을 반환한다. filter()처럼 새로운 배열이 반환되는 것이 아니다. 기본 정렬 순서는 알파벳 오름차순으로 문자열 즉, 문자열의 유니코드 값을 따른다.

array.sort([compareFn]);

compareFn (선택): 비교 함수. 생략하면 요소들은 문자열로 취급되어 유니코드 순서대로 정렬됩니다.

compareFn(a, b)이 0보다 작은 경우, a가 b보다 앞에 옵니다.
0을 반환하면, 두 요소의 순서를 변경하지 않습니다.
0보다 큰 값을 반환하면, b가 a보다 앞에 옵니다.

compareFn

정렬 순서를 정의하는 함수이다. 이 함수는 두 개의 배열 요소를 파라미터로 받는다.

compareFn(a, b) 반환 값이 음수이면, a가 b보다 앞에 있어야 한다.
compareFn(a, b) 반환 값이 0일 경우 a와 b의 순서를 바꾸지 않는다.
compareFn(a, b) 반환 값이 양수이면, b가 a보다 앞에 있어야 한다.

💡

반환 값 < 0: a가 먼저. 반환 값 = 0: a와 b 순서 변경 없음. 반환 값 > 0: b가 먼저.

예시

let fruits = ["Banana", "Apple", "Cherry"];

fruits.sort();
console.log(fruits); // ["Apple", "Banana", "Cherry"]

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

numbers.sort(function(a, b) {
  return a - b;
});
console.log(numbers); // [1, 2, 3, 4, 5]

숫자 정렬

var array = [1, 20, 8, 7];
array.sort(); // [1, 20, 7, 8]

위 결과를 [1, 7, 8, 20]이 될 것 같다. 하지만 예상과 다르게 [1, 20, 7, 8]의 결과를 반환한다. 왜냐하면 sort()는 기본적으로 문자열의 유니코드 값으로 정렬하기 때문이다.

숫자를 정렬하려면? 정렬 순서를 정의하는 함수compareFn 파라미터를 사용하면 된다.

var array = [1, 20, 8, 7];
array.sort((a, b) => a - b); // [1, 7, 8, 20]

오름차순

var array = [1, 20, 8, 7];
array.sort((a, b) => a - b);

내림차순

var array = [1, 20, 8, 7];
array.sort((a, b) => b - a);

문자 정렬

오름차순

sort() 메서드는 파라미터가 입력되지 않으면, 문자열의 유니코드 값으로 정렬하기 때문에 문자열의 오름차순 정렬은 파라미터 입력이 필요 없다.

var array = ['banana', 'apple', 'orange'];
array.sort(); // ['apple', 'banana', 'orange']

// 오름차순 반환 값
array.sort((a, b) => {
	if (a < b) {
		return -1;
	}
	if (a === b) {
		return 0;
	}
	if (a > b) {
		return 1;
	}
});

내림차순

하지만 문자열을 내림차순 정렬하기 위해서는 compareFn 파라미터에 두 문자열을 비교하는 코드가 들어가야 한다.

var array = ['banana', 'apple', 'orange'];
// 내림차순 반환 값
array.sort((a, b) => {
	if (a < b) {
		return 1;
	}
	if (a === b) {
		return 0;
	}
	if (a > b) {
		return -1;
	}
}); // ['orange', 'banana', 'apple']

Object

객체는 속성(property)의 집합이다. 각 속성은 키(key)와 값(value) 쌍으로 구성된다. 순서의 개념이 없다.

// 객체 리터럴을 사용하여 객체 생성
let person = {
  name: "Son",
  age: 33,
  city: "London"
};

// Object 생성자를 사용하여 객체 생성
let car = new Object();
car.make = "Toyota";
car.model = "Camry";
car.year = 2020;

객체의 주요 연산을 알아보자.

객체 속성 접근

// 점 표기법 (Dot Notation)
console.log(person.name); // Son

// 대괄호 표기법 (Bracket Notation)
console.log(person['city'); // London

객체 속성 추가 및 수정

person.name: "Sonny";
person.team = "Spurs";
console.log(person); // { name: 'Sonny', age: 33, city: 'London', team: 'Spurs' }

객체 속성 삭제

delete 연산자를 사용하여 객체의 속성을 삭제할 수 있다.

delete person.age;
console.log(person); // { name: 'Sonny', city: 'London', team: 'Spurs' }

객체 속성 확인

in 연산자를 사용하여 객체에 특정 속성이 있는지 확인할 수 있다.

console.log('name' in person); // true
console.log('occupation' in person); // false

객체 순회

for (const key in person) {
  if (person.hasOwnProperty(key)) {
    console.log(`${key}: ${person[key]}`);
  }
}

// { name: 'Sonny', city: 'London', team: 'Spurs' }

객체 병합

Object.assign 메서드를 사용하여 객체를 병합할 수 있다.

const additionalInfo = { hobby: 'Football' };
const updatedPerson = Object.assign({}, person, additionalInfo);
console.log(updatedPerson); 
// { name: 'Sonny', city: 'London', team: 'Spurs', hobby: 'Football' }

객체 키와 값 얻기

Object.keys와 Object.values 메서드를 사용하여 객체의 키와 값을 배열로 얻을 수 있다.

console.log(Object.keys(person)); // ['name', 'city', 'team', 'hobby']
console.log(Object.values(person)); // ['Sonny', 'London', 'Spurs', 'Football']

객체의 프로토타입 설정

Object.create 메서드를 사용하여 객체의 프로토타입을 설정할 수 있다.

const personPrototype = {
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

const person = Object.create(personPrototype);
person.name = 'Sonny';
person.greet(); // Hello, my name is Sonny

객체 복사

객체의 얕은 복사를 Object.assign이나 전개 연산자(...)를 사용하여 할 수 있다.(참고: 타입과 자료구조)

const copiedPerson1 = Object.assign({}, person);
const copiedPerson2 = { ...person };
console.log(copiedPerson1); // { name: 'Sonny', city: 'London', team: 'Spurs', hobby: 'Football' }
console.log(copiedPerson2); // { name: 'Sonny', city: 'London', team: 'Spurs', hobby: 'Football' }

정리

배열은 순서가 있는 데이터의 집합으로, 다양한 메서드를 통해 데이터를 추가, 제거, 변환, 필터링할 수 있다.
객체는 키와 값으로 이루어진 속성의 집합이며, 속성 접근, 추가, 삭제, 순회 등의 다양한 연산이 가능하다.

👈🏻 이벤트

DOM 👉🏻

배열과 객체