프론트엔드/JavaScript

배열

Ryuzy 2025. 4. 10. 17:26
728x90
반응형

1. 배열

자바스크립트에서 배열은 여러 개의 값을 하나의 변수에 순서대로 저장할 수 있는 자료구조입니다. 배열은 대괄호 []를 사용하여 생성하며, 각 요소는 쉼표로 구분됩니다. 배열의 각 값은 인덱스(0부터 시작)를 통해 접근할 수 있으며, 숫자, 문자열, 객체, 함수 등 다양한 타입의 데이터를 함께 저장할 수 있습니다. 배열은 push, pop, shift, unshift, splice, forEach, map 같은 유용한 메서드를 제공하여 데이터를 쉽게 추가, 삭제, 반복, 변형할 수 있도록 도와줍니다. 이처럼 배열은 데이터를 순서대로 다루는 데 매우 유용하고 자주 사용되는 기본 자료형입니다.

let 변수명 = [값1, 값2, 값3, ...];

 

2. 배열의 특징

1. 여러 가지 자료형을 함께 저장할 수 있음

자바스크립트 배열은 숫자, 문자열, 불(boolean), 객체, 함수 등 다양한 타입을 섞어서 저장할 수 있습니다.

let mixed = [1, "hello", true, {name: "철수"}, function() { console.log("Hi"); }];

 

2. 인덱스를 기준으로 값을 저장하고 접근함

배열 안의 각 요소는 인덱스(순서 번호)를 가지고 있고, 0부터 시작합니다.

let fruits = ["사과", "바나나", "오렌지"];
console.log(fruits[0]); // "사과"
console.log(fruits[1]); // "바나나"

 

3. 길이(length)는 자동으로 관리됨

배열의 크기를 따로 설정하지 않아도 되고, 요소를 추가하거나 제거하면 자동으로 길이가 변경됩니다.

let nums = [1, 2, 3];
console.log(nums.length); // 3

nums[4] = 4;
console.log(nums.length); // 4

 

4. 요소가 연속되지 않아도 됨 (희소 배열 가능)

자바스크립트 배열은 중간 인덱스가 비어 있어도 동작합니다. 즉, 배열의 일부 요소가 undefined인 채로 있을 수 있습니다.

let arr = [];
arr[3] = "넷";
console.log(arr);
console.log(arr.length); // 4

 

5. 배열도 사실은 객체(Object)

자바스크립트 배열은 특수한 객체입니다. 실제로 배열도 typeof로 확인해보면 "object"로 나옵니다. 그래서 배열에도 키-값을 추가하는 것이 가능하지만, 그렇게 사용하면 일반 배열처럼 동작하지 않을 수 있어요. 배열은 숫자 인덱스와 length 중심으로 사용하는 게 안전합니다.

let arr = [1, 2, 3];
console.log(typeof arr); // "object"

 

 

3. 자주 쓰는 배열 메서드

const user = [1, 'apple', '김사과', 20, '서울 서초구']
console.log(user)

console.log(user[0])
console.log(user[1])
console.log(user[2])
console.log(user[3])
console.log(user[4])

user[4] = '서울 강남구'
console.log(user)
console.log(user.length)

user[6] = '여자'
console.log(user)
console.log(user.length)

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

console.log('-------------')

// push(): 배열의 요소를 추가
user.push('ISTJ')
console.log(user)

// pop(): 배열의 마지막 인덱스 번호에 있는 값을 제거
let temp = user.pop()
console.log(user)
console.log(temp)

// shift(): 배열의 첫번째 인덱스 번호에 있는 값을 제거
temp = user.shift()
console.log(user)
console.log(temp)

// concat() 두 배열의 요소를 합침
const profile = ['A형', 'istj']
result = user.concat(profile)
console.log(result)

// join(): 배열 요소 사이에 원하는 문자를 삽입
result = user.join('🎃')
console.log(result)
console.log(typeof(result))

// sort(): 배열의 요소를 오름차순
const arr = ['apple', 'banana', 'Apple', 'orange', 'melon']
arr.sort()
console.log(arr)

// reverse(): 배열을 역순으로 재배치
arr.reverse()
console.log(arr)

 

728x90
반응형

'프론트엔드 > JavaScript' 카테고리의 다른 글

함수  (0) 2025.04.11
배열과 반복문  (0) 2025.04.10
제어문 - 기본 반복문  (0) 2025.04.10
제어문 - 조건문  (0) 2025.04.10
연산자  (0) 2025.04.10