[JavaScript 문법] 10일차: 배열 기초

배열이란?

배열은 여러 값을 하나의 변수에 저장할 수 있는 데이터 구조입니다. 배열의 각 값은 인덱스를 통해 접근할 수 있으며, 인덱스는 0부터 시작합니다. JavaScript의 배열은 크기가 동적으로 조정되며, 다양한 데이터 타입을 혼합하여 저장할 수 있습니다.

배열 선언

배열을 선언하는 방법에는 배열 리터럴과 Array 생성자를 사용하는 방법이 있습니다.

배열 리터럴

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

Array 생성자

let fruits = new Array('Apple', 'Banana', 'Cherry');

배열 요소 접근

배열 요소는 인덱스를 사용하여 접근할 수 있습니다.

 

예제

let fruits = ['Apple', 'Banana', 'Cherry'];
console.log(fruits[0]); // 'Apple'
console.log(fruits[1]); // 'Banana'
console.log(fruits[2]); // 'Cherry'

배열 요소 추가 및 삭제

배열 요소 추가

push 메서드를 사용하여 배열의 끝에 요소를 추가할 수 있습니다.

let fruits = ['Apple', 'Banana'];
fruits.push('Cherry');
console.log(fruits); // ['Apple', 'Banana', 'Cherry']

배열 요소 삭제

pop 메서드를 사용하여 배열의 마지막 요소를 제거할 수 있습니다.

let fruits = ['Apple', 'Banana', 'Cherry'];
let lastFruit = fruits.pop();
console.log(lastFruit); // 'Cherry'
console.log(fruits); // ['Apple', 'Banana']

배열 메서드

JavaScript는 배열을 조작할 수 있는 다양한 메서드를 제공합니다.

shift와 unshift

shift 메서드는 배열의 첫 번째 요소를 제거하고 반환합니다. unshift 메서드는 배열의 앞에 요소를 추가합니다.

let fruits = ['Apple', 'Banana'];
let firstFruit = fruits.shift();
console.log(firstFruit); // 'Apple'
console.log(fruits); // ['Banana']

fruits.unshift('Grape');
console.log(fruits); // ['Grape', 'Banana']

splice

splice 메서드는 배열의 중간에 요소를 추가하거나 제거할 수 있습니다.

let fruits = ['Apple', 'Banana', 'Cherry'];
fruits.splice(1, 1, 'Mango', 'Peach');
console.log(fruits); // ['Apple', 'Mango', 'Peach', 'Cherry']

slice

slice 메서드는 배열의 일부를 복사하여 새로운 배열을 만듭니다.

let fruits = ['Apple', 'Banana', 'Cherry'];
let someFruits = fruits.slice(1, 3);
console.log(someFruits); // ['Banana', 'Cherry']

concat

concat 메서드는 두 개 이상의 배열을 결합하여 새로운 배열을 만듭니다.

let fruits = ['Apple', 'Banana'];
let moreFruits = ['Cherry', 'Date'];
let allFruits = fruits.concat(moreFruits);
console.log(allFruits); // ['Apple', 'Banana', 'Cherry', 'Date']

forEach

forEach 메서드는 배열의 각 요소에 대해 콜백 함수를 실행합니다.

let fruits = ['Apple', 'Banana', 'Cherry'];
fruits.forEach(function(fruit, index) {
  console.log(index + ': ' + fruit);
});
// 출력:
// 0: Apple
// 1: Banana
// 2: Cherry

map

map 메서드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과를 새로운 배열로 반환합니다.

let numbers = [1, 2, 3];
let doubled = numbers.map(function(number) {
  return number * 2;
});
console.log(doubled); // [2, 4, 6]

filter

filter 메서드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과가 참인 요소들로 구성된 새로운 배열을 반환합니다.

let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});
console.log(evenNumbers); // [2, 4]

reduce

reduce 메서드는 배열의 각 요소에 대해 콜백 함수를 실행하고, 단일 값으로 축약합니다.

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce(function(total, number) {
  return total + number;
}, 0);
console.log(sum); // 15

배열의 길이

length 속성은 배열의 길이를 반환합니다.

예제

let fruits = ['Apple', 'Banana', 'Cherry'];
console.log(fruits.length); // 3

배열과 객체의 차이점

배열은 인덱스를 사용하여 요소를 저장하고 접근하며, 주로 순서가 중요한 데이터에 사용됩니다. 객체는 키-값 쌍으로 데이터를 저장하고 접근하며, 주로 속성이 중요한 데이터에 사용됩니다.

 

예제: 배열

let fruits = ['Apple', 'Banana', 'Cherry'];
console.log(fruits[0]); // 'Apple'

 

예제: 객체

let person = {
  name: 'Alice',
  age: 25
};
console.log(person.name); // 'Alice'

결론

배열은 여러 값을 하나의 변수에 저장하고 관리하는 데 유용한 데이터 구조입니다. 이번 글에서는 배열 선언, 요소 접근, 추가 및 삭제, 다양한 배열 메서드, 배열의 길이에 대해 배웠습니다. 다음 글에서는 배열 고급 주제에 대해 알아보겠습니다.

다음 글에서 만나요!