자바스크립트_Javascript

자바스크립트: 배열(Array) 정리

coding-abc.tistory.com 2025. 8. 23. 12:09
반응형

자바스크립트 배열(Array)에 대해 정리해 봅니다.


📌 자바스크립트 배열 (Array)

1. 배열이란?

  • 여러 개의 값을 하나의 변수에 저장할 수 있는 자료구조.
  • 값은 인덱스(index, 0부터 시작) 로 접근합니다.
let fruits = ["사과", "바나나", "포도"];
console.log(fruits[0]); // "사과"
console.log(fruits[2]); // "포도"
 

2. 배열 생성 방법

let arr1 = [1, 2, 3];              // 리터럴 방식
let arr2 = new Array(4, 5, 6);     // 생성자 방식
 

3. 주요 속성

let nums = [10, 20, 30];
console.log(nums.length); // 3 (배열 길이)
 

4. 배열 주요 메서드

➡️ 요소 추가 / 삭제

let fruits = ["사과", "바나나"];

fruits.push("포도");    // 끝에 추가
console.log(fruits);    // ["사과", "바나나", "포도"]

fruits.pop();           // 끝에서 삭제
console.log(fruits);    // ["사과", "바나나"]

fruits.unshift("딸기"); // 앞에 추가
console.log(fruits);    // ["딸기", "사과", "바나나"]

fruits.shift();         // 앞에서 삭제
console.log(fruits);    // ["사과", "바나나"]
 

➡️ 배열 순회

let nums = [1, 2, 3];

for (let i = 0; i < nums.length; i++) {
  console.log(nums[i]); // 1, 2, 3
}

nums.forEach(n => console.log(n)); // 1, 2, 3
 

➡️ 배열 가공

let nums = [1, 2, 3, 4, 5];

let doubled = nums.map(n => n * 2);     // [2, 4, 6, 8, 10]
let even = nums.filter(n => n % 2 === 0); // [2, 4]
let sum = nums.reduce((a, b) => a + b, 0); // 15
 

➡️ 배열 검색

let fruits = ["사과", "바나나", "포도"];

console.log(fruits.includes("바나나")); // true
console.log(fruits.indexOf("포도"));    // 2
console.log(fruits.find(f => f === "사과")); // "사과"
 

정리

  • 배열은 여러 값을 관리하는 기본 자료구조.
  • push/pop/unshift/shift → 요소 추가/삭제
  • forEach/map/filter/reduce → 배열 가공/순회
  • includes/indexOf/find → 검색

HTML + JavaScript 예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>자바스크립트 배열 예제</title>
</head>
<body>
  <h2>자바스크립트 배열 예제</h2>
  <pre id="output"></pre>

  <script>
    let out = "";

    // 배열 생성
    let fruits = ["사과", "바나나", "포도"];
    out += "초기 배열: " + fruits + "\n";

    // 요소 추가/삭제
    fruits.push("딸기");
    out += "push('딸기') 후: " + fruits + "\n";

    fruits.pop();
    out += "pop() 후: " + fruits + "\n";

    fruits.unshift("오렌지");
    out += "unshift('오렌지') 후: " + fruits + "\n";

    fruits.shift();
    out += "shift() 후: " + fruits + "\n\n";

    // 배열 순회
    out += "forEach 순회:\n";
    fruits.forEach((item, idx) => {
      out += `  ${idx}: ${item}\n`;
    });
    out += "\n";

    // 배열 가공
    let nums = [1, 2, 3, 4, 5];
    out += "원본 숫자 배열: " + nums + "\n";
    out += "map (x2): " + nums.map(n => n * 2) + "\n";
    out += "filter (짝수): " + nums.filter(n => n % 2 === 0) + "\n";
    out += "reduce (합): " + nums.reduce((a, b) => a + b, 0) + "\n\n";

    // 배열 검색
    out += "fruits 배열: " + fruits + "\n";
    out += "includes('바나나'): " + fruits.includes("바나나") + "\n";
    out += "indexOf('포도'): " + fruits.indexOf("포도") + "\n";
    out += "find('사과'): " + fruits.find(f => f === "사과") + "\n";

    // 출력
    document.getElementById("output").textContent = out;
  </script>
</body>
</html>

자바스크립트: 배열(Array) 정리

반응형