JavaScript 자바스크립트 배열(Array) 생성 및 접근 방법

자바스크립트 배열이란?

자바스크립트 배열(Array)은 데이터를 저장하고 관리하는 데 사용되는 중요한 자료 구조 중 하나입니다. 배열의 생성 방법과 접근 하는 방법에 대하여 알아보겠습니다.

배열 특징 정리

• 다양한 데이터 타입 수용: 배열은 숫자, 문자열, 객체, 함수 등 여러 데이터 유형을 혼합하여 저장할 수 있습니다. 이로써 배열은 다양한 종류의 데이터를 효율적으로 다룰 수 있습니다.
• 인덱스 기반의 접근: 각 요소는 0 부터 시작하는 인덱스를 가지며, 해당 인덱스를 통해 배열의 특정 요소에 접근할 수 있습니다. 예를 들어, arr[0] 은 배열의 첫 번째 요소를 나타냅니다.
• 동적인 길이: 배열은 동적으로 크기를 조절 할 수 있습니다. 새로운 요소를 추가하거나 삭제할 때 배열의 크기가 자동으로 조정되므로 길이에 제한이 없습니다.
• 내장 메서드 제공: 다양한 내장 메서드를 통해 배열을 조작할 수 있습니다. 예를 들어, push(), pop(), splice(), slice() 등의 메서드를 사용하여 배열을 효과적으로 수정할 수 있습니다.
• 반복문과 함께 사용: 배열은 반복문과 함께 자주 사용됩니다. for 나 forEach 와 같은 반복문을 사용하여 배열의 모든 요소를 순회하거나 조건에 따라 특정 작업을 수행할 수 있습니다.
• 객체와 차이점: 배열은 객체와 비슷해 보일 수 있지만, 배열은 순서가 있는 요소들의 집합이며 각 요소에는 순서를 나타내는 인덱스가 있습니다. 반면, 객체는 키와 값의 쌍으로 데이터를 저장하며, 순서가 없습니다.

배열 생성 방법

리터럴 표기법 (Literal Notation)

배열을 직접 정의하는 가장 간단한 방법은 대괄호 [] 를 사용하는 것입니다.

let fruits = ['사과', '바나나', '딸기'];
console.log(fruits);
// 결과: ['사과', '바나나', '딸기']

빈 배열 생성

빈 배열을 생성하려면 대괄호만 사용하면 됩니다.
나중에 요소를 추가할 수 있습니다.

let emptyArray = [];

Array 생성자 사용

Array 생성자를 사용하여 배열을 생성할 수 있습니다.
Array 생성자는 여러 가지 방식으로 사용될 수 있습니다.

// 빈 배열 생성
const emptyArray = new Array();
console.log(emptyArray); // []

// 요소를 포함한 배열 생성
const numbersArray = new Array(1, 2, 3);
console.log(numbersArray); // [1, 2, 3]

// 배열의 길이를 지정한 배열 생성
const arrayLength = new Array(5);
console.log(arrayLength); // [ <5 empty items> ]
// new Array(length) 형태로 호출. 이 경우 배열은 비어있는 상태이며 길이가 5입니다.

Array.of() 메서드 사용

Array.of() 메서드를 사용하여 주어진 인자를 요소로 갖는 배열을 생성할 수 있습니다.
Array.of() 는 Array 생성자와 달리 전달된 인자가 하나 일 때 특히 유용합니다.

let numbersArray = Array.of(1, 2, 3, 4, 5);
console.log(numbersArray);
// 결과: [1, 2, 3, 4, 5]

// 값이 하나인 경우에도 배열이 제대로 생성됩니다.
let singleArray = Array.of(10);
console.log(singleArray);
// 결과: [10]

Array.from() 메서드 사용

Array.from() 메서드를 사용하여 유사 배열 객체나 이터러블 객체로부터 배열을 생성할 수 있습니다.

// 문자열을 배열로 변환
let str = 'hello';
let strArray = Array.from(str);
console.log(strArray);
// 결과: ['h', 'e', 'l', 'l', 'o']

// Set을 배열로 변환
let set = new Set([1, 2, 3, 4, 5]);
let setArray = Array.from(set);
console.log(setArray);
// 결과: [1, 2, 3, 4, 5]

// 유사 배열 객체를 배열로 변환
const arrayLikeObject = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
const arrayFromObject = Array.from(arrayLikeObject);
console.log(arrayFromObject); // ['a', 'b', 'c']

배열 접근 방법

배열에 접근하는 방법은 인덱스를 활용하여 특정 위치의 값을 읽거나 수정하고, 배열의 길이를 확인하며, 반복문이나 배열 메서드를 사용하여 모든 요소에 접근하는 등 다양합니다.

인덱스를 사용하여 값 읽기

let fruits = ['사과', '바나나', '딸기'];

// 첫 번째 요소 읽기
let firstFruit = fruits[0];
console.log(firstFruit); // '사과'

// 두 번째 요소 읽기
let secondFruit = fruits[1];
console.log(secondFruit); // '바나나'

• 이 예제에서는 배열의 인덱스를 사용하여 특정 위치의 값을 읽는 방법을 보여줍니다.
• 배열의 첫 번째 요소는 0번 인덱스에 있으므로 fruits[0]은 ‘사과’를 반환합니다.
• 마찬가지로 fruits[1]은 ‘바나나’를 반환합니다.

인덱스를 사용하여 값 수정

let fruits = ['사과', '바나나', '딸기'];

// 두 번째 요소 수정
fruits[1] = '오렌지';
console.log(fruits);
// 결과: ['사과', '오렌지', '딸기']

• 배열의 두 번째 요소를 수정하는 예제입니다.
• fruits[1]에 ‘오렌지’를 할당하여 배열의 내용을 변경합니다.

배열의 길이에 접근

let fruits = ['사과', '바나나', '딸기'];

// 배열의 길이 확인
let length = fruits.length;
console.log(length); // 3

• 배열의 length 속성을 사용하여 배열의 길이를 확인하는 방법을 보여줍니다.
• fruits.length는 배열 fruits의 요소 개수인 3을 반환합니다.

반복문을 사용하여 모든 요소에 접근

let fruits = ['사과', '바나나', '딸기'];

// for 반복문을 사용하여 모든 요소에 접근
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}
// 결과:
// '사과'
// '바나나'
// '딸기'

• for 반복문을 활용하여 배열의 모든 요소에 접근하는 방법을 보여줍니다.
• 배열의 길이를 이용하여 각 요소에 접근하고 값을 출력합니다.

forEach 메서드 사용

let fruits = ['사과', '바나나', '딸기'];

// forEach 메서드를 사용하여 모든 요소에 접근
fruits.forEach(function(fruit) {
  console.log(fruit);
});
// 결과:
// '사과'
// '바나나'
// '딸기'

• forEach 메서드를 활용하여 배열의 각 요소에 대해 콜백 함수를 실행하는 방법을 보여줍니다.
• 각 과일을 순회하면서 콘솔에 출력합니다.

결론

배열을 생성 하는 방법과 접근 하는 방법에 대하여 알아보았습니다.
자바스크립트 배열은 다양한 기능과 메서드를 제공하여 데이터를 효과적으로 관리할 수 있는 도구입니다. 배열의 유연성과 다양성을 활용하여 프로그래밍 작업을 더욱 효율적으로 수행할 수 있습니다.