자바스크립트 배열 기초와 활용. 배열 메서드와 다차원 배열 - 자바스크립트 #7

이번에는 자바스크립트 배열에 대해 살펴보겠습니다. 자바스크립트 배열의 기본 개념을 이해하고, 배열을 다양한 방식으로 다루는 방법을 실제 예제와 함께 익힐 수 있도록 정리합니다.

자바스크립트 배열

 

자바스크립트 배열

배열은 여러 개의 값을 순서대로 저장할 수 있는 자료 구조입니다. 쉽게 말해, 여러 개의 상자가 일렬로 늘어서 있는 모습을 상상해 보세요. 각 상자에는 숫자, 문자열, 객체 등 다양한 타입의 데이터를 넣을 수 있습니다.

• 예를 들어, 학생들의 이름을 저장하는 배열을 만들어 봅시다:

let students = ['김철수', '이영희', '박민수', '정지은'];

이 코드에서 students라는 이름의 배열을 만들었고, 그 안에 4명의 학생 이름을 저장했습니다.

반응형

  배열 생성하기

배열을 만드는 방법에는 여러 가지가 있습니다. 가장 흔한 두 가지 방법을 살펴보겠습니다.

 

a. 대괄호 [] 사용하기

let fruits = ['사과', '바나나', '오렌지'];

 

b. Array() 생성자 함수 사용하기

let numbers = new Array(1, 2, 3, 4, 5);

두 방법 모두 동일한 결과를 만들어냅니다. 대괄호를 사용하는 방법이 더 간단하고 일반적으로 많이 사용됩니다.

 

  배열의 길이

배열의 길이는 배열에 들어있는 요소의 개수를 의미합니다. length 속성을 사용하여 배열의 길이를 알 수 있습니다.

let colors = ['빨강', '파랑', '초록']; console.log(colors.length); // 출력: 3

이 예제에서 colors 배열에는 3개의 요소가 있으므로, length는 3입니다.

 

  배열의 요소에 접근하기

배열의 각 요소에 접근하려면 인덱스(index)를 사용합니다. 인덱스는 0부터 시작합니다.

즉, 첫 번째 요소의 인덱스는 0, 두 번째 요소의 인덱스는 1, 이런 식으로 계속됩니다.

let animals = ['고양이', '강아지', '토끼', '햄스터']; console.log(animals[0]); // 출력: 고양이 console.log(animals[2]); // 출력: 토끼 // 배열의 마지막 요소에 접근하기 console.log(animals[animals.length - 1]); // 출력: 햄스터

  배열 요소 수정하기

배열의 요소를 수정하려면, 해당 인덱스에 새로운 값을 할당하면 됩니다.

let cars = ['현대', '기아', '벤츠', 'BMW']; console.log(cars); // 출력: ['현대', '기아', '벤츠', 'BMW'] cars[1] = '도요타'; console.log(cars); // 출력: ['현대', '도요타', '벤츠', 'BMW']

 

  배열에 요소 추가하기

배열에 새로운 요소를 추가하는 방법에는 여러 가지가 있습니다.

• push() 메서드: 배열의 끝에 하나 이상의 요소를 추가합니다.

let fruits = ['사과', '바나나']; fruits.push('오렌지'); console.log(fruits); // 출력: ['사과', '바나나', '오렌지'] fruits.push('딸기', '키위'); console.log(fruits); // 출력: ['사과', '바나나', '오렌지', '딸기', '키위']

• unshift() 메서드: 배열의 시작 부분에 하나 이상의 요소를 추가합니다.

let numbers = [3, 4, 5]; numbers.unshift(1, 2); console.log(numbers); // 출력: [1, 2, 3, 4, 5]

• c. 인덱스를 사용하여 직접 추가:

let colors = ['빨강', '파랑']; colors[2] = '초록'; console.log(colors); // 출력: ['빨강', '파랑', '초록'] // 주의: 존재하지 않는 인덱스에 값을 할당하면, 그 사이의 인덱스들은 비어있게 됩니다. colors[5] = '노랑'; console.log(colors); // 출력: ['빨강', '파랑', '초록', empty × 2, '노랑']

  배열에서 요소 제거하기

배열에서 요소를 제거하는 방법도 여러 가지가 있습니다.

• pop() 메서드: 배열의 마지막 요소를 제거하고 그 요소를 반환합니다.

let fruits = ['사과', '바나나', '오렌지']; let lastFruit = fruits.pop(); console.log(lastFruit); // 출력: 오렌지 console.log(fruits); // 출력: ['사과', '바나나']

• shift() 메서드: 배열의 첫 번째 요소를 제거하고 그 요소를 반환합니다.

let numbers = [1, 2, 3, 4, 5]; let firstNumber = numbers.shift(); console.log(firstNumber); // 출력: 1 console.log(numbers); // 출력: [2, 3, 4, 5]

• splice() 메서드: 배열의 특정 위치에서 요소를 제거하거나 새로운 요소를 추가할 수 있습니다.

let animals = ['고양이', '강아지', '토끼', '햄스터', '기니피그']; // 인덱스 2부터 2개의 요소를 제거합니다. let removedAnimals = animals.splice(2, 2); console.log(removedAnimals); // 출력: ['토끼', '햄스터'] console.log(animals); // 출력: ['고양이', '강아지', '기니피그'] // 인덱스 1의 위치에 새로운 요소들을 추가합니다. animals.splice(1, 0, '사자', '호랑이'); console.log(animals); // 출력: ['고양이', '사자', '호랑이', '강아지', '기니피그']

  배열 반복하기

배열의 모든 요소를 반복하는 방법에는 여러 가지가 있습니다.

 

for 루프 사용하기

let fruits = ['사과', '바나나', '오렌지', '딸기']; for (let i = 0; i < fruits.length; i++) { console.log(fruits[i]); } // 출력: // 사과 // 바나나 // 오렌지 // 딸기

 

for...of 루프 사용하기

let colors = ['빨강', '파랑', '초록', '노랑']; for (let color of colors) { console.log(color); } // 출력: // 빨강 // 파랑 // 초록 // 노랑

 

forEach() 메서드 사용하기

let numbers = [1, 2, 3, 4, 5]; numbers.forEach(function(number, index) { console.log(`인덱스 ${index}의 값: ${number}`); }); // 출력: // 인덱스 0의 값: 1 // 인덱스 1의 값: 2 // 인덱스 2의 값: 3 // 인덱스 3의 값: 4 // 인덱스 4의 값: 5

  배열 메서드 활용하기

자바스크립트는 배열을 다루는 데 유용한 여러 메서드를 제공합니다. 몇 가지 중요한 메서드를 살펴보겠습니다.

• map(): 배열의 모든 요소에 대해 주어진 함수를 호출하고, 그 결과로 새로운 배열을 만듭니다.

let numbers = [1, 2, 3, 4, 5]; let squaredNumbers = numbers.map(function(number) { return number * number; }); console.log(squaredNumbers); // 출력: [1, 4, 9, 16, 25]

• filter(): 주어진 함수의 테스트를 통과하는 요소들로 새로운 배열을 만듭니다.

let ages = [32, 33, 16, 40, 9, 7, 14, 55, 65, 72]; let adults = ages.filter(function(age) { return age >= 18; }); console.log(adults); // 출력: [32, 33, 40, 55, 65, 72]

• reduce(): 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결괏값을 반환합니다.

let numbers = [1, 2, 3, 4, 5]; let sum = numbers.reduce(function(accumulator, currentValue) { return accumulator + currentValue; }, 0); console.log(sum); // 출력: 15

• find(): 주어진 테스트 함수를 만족하는 첫 번째 요소의 값을 반환합니다.

let fruits = ['사과', '바나나', '오렌지', '딸기', '키위']; let foundFruit = fruits.find(function(fruit) { return fruit.length > 3; }); console.log(foundFruit); // 출력: 바나나

• some(): 배열의 어떤 요소라도 주어진 테스트 함수를 통과하는지 테스트합니다.

let numbers = [1, 2, 3, 4, 5]; let hasEvenNumber = numbers.some(function(number) { return number % 2 === 0; }); console.log(hasEvenNumber); // 출력: true

• every(): 배열의 모든 요소가 주어진 테스트 함수를 통과하는지 테스트합니다.

let numbers = [1, 2, 3, 4, 5]; let allPositive = numbers.every(function(number) { return number > 0; }); console.log(allPositive); // 출력: true

 

  다차원 배열

배열의 요소로 다른 배열을 포함할 수 있습니다. 이를 다차원 배열이라고 합니다.

let matrix = [ [1, 2, 3], [4, 5, 6], [7, 8, 9] ]; console.log(matrix[1][1]); // 출력: 5 // 다차원 배열 반복하기 for (let i = 0; i < matrix.length; i++) { for (let j = 0; j < matrix[i].length; j++) { console.log(matrix[i][j]); } }

여기까지, 이렇게 자바스크립트의 배열에 대해 정리해 보았습니다.