반응형
자바스크립트 배열(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>
반응형
'자바스크립트_Javascript' 카테고리의 다른 글
자바스크립트: setInterval() 함수, 특정 시간마다 반복적으로 함수를 실행 (1) | 2025.08.22 |
---|---|
자바스크립트: setTimeout() 함수, 지정된 시간 후 실행 (0) | 2025.08.21 |
자바스크립트: onload 이벤트, 웹페이지나 특정 요소가 로드된 후 발생 (0) | 2025.08.20 |
자바스크립트: onchange 이벤트, 값이 변경될 때 발생 (0) | 2025.08.20 |
자바스크립트: onclick 이벤트, 버튼을 클릭할 때마다 문자열과 배경 변경하기 (6) | 2025.08.19 |