[JavaScript] 배열

2023.12.04.월

배열

여러 값을 하나의 변수에 저장하는 데이터 구조이다

다양한 유형의 데이터를 저장할 수 있으며 각 요소는 인덱스를 가지고 있다

 

배열 생성

자바스크립트에서 배열은 object 데이터 타입이며 객체 취급된다

배열에는 여러 개의 타입을 저장할 수 있다 

// 빈 배열 생성
let myArray = [];

// 초기값을 가진 배열 생성
let fruits = ['사과', '바나나', '딸기'];

// 다양한 데이터 유형을 가진 배열
let mixedArray = [1, 'Hello', true, { key: 'value' }];

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

// 배열은 object 타입
console.log(typeof myArray); // "object"

배열 요소 접근

배열에는 인덱스가 존재하고 인덱스는 0부터 시작한다

인덱스를 통해 배열 요소에 접근 가능하다

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

fruits[1] = '오렌지'; // 두 번째 요소 수정
fruits.push('포도'); // 배열의 끝에 새로운 요소 추가

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

// 또는 forEach 사용
fruits.forEach(function(fruit) {
  console.log(fruit);
});

 

배열 메서드

자바스크립트는 배열을 다루기 위한 다양한 내장 메서드를 제공한다

• push(): 배열 끝에 새로운 요소 추가
• pop(): 배열 끝의 요소 제거
• shift(): 배열 맨 앞의 요소 제거
• unshift(): 배열 맨 앞에 새로운 요소 추가
• splice(): 배열에서 특정 위치의 요소 추가 또는 제거
• slice(): 배열의 일부분을 새로운 배열로 반환
• indexof(): 해당 값을 가진 요소의 인덱스를 찾아 반환
• includes: 해당 배열애 해당 값이 포함되어 있는지 확인

// 배열 메서드를 활용한 검색
let index = fruits.indexOf('딸기'); // '딸기'의 인덱스 찾기
console.log(index); // 2

let isInArray = fruits.includes('사과'); // 배열에 '사과'가 포함되어 있는지 확인
console.log(isInArray); // true

배열 타입

자바스크립트는 타입스크립트와 달리 제너릭을 지원하지 않는다

제너릭은 주로 컴파일 타임에 타입 정보를 제공하여 코드의 안정성을 높이는데 사용된ㄴ다

자바스크립트는 동적 타입 언어로 제너릭을 다루긴 어렵다

 

다만 배열에 특정 타입의 요소만 포함하도록 내장 메서드와 함수를 통해

강제하거나 확인하도록 수동 처리 할 수 있다

// 숫자만 포함된 배열을 확인하는 예제
function isNumericArray(arr) {
  return arr.every(item => typeof item === 'number');
}

let numericArray = [1, 2, 3, 4];
let mixedArray = [1, 'two', 3, 'four'];

console.log(isNumericArray(numericArray)); // true
console.log(isNumericArray(mixedArray)); // false

제너릭은 컴파일 타임에 검사를 하는 반면 위의 방식은 런타임 중에 검사를 하는 방식이기 때문에

일부 제약 사항이 있을 수 있다

 

 

그 밖에 다양한 배열 메서드와 배열에 관련된 내용의 문서

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

Array - JavaScript | MDN