본문 바로가기

Front-End/JavaScript

JavaScript #12 (배열)

반응형

Array (배열) : 여러 값을 하나의 변수로 묶어서 다루는 자료 구조. ([  ] 로 묶인 값들의 모음, 순서 존재)

let fruits = ["사과", "바나나", "딸기"];
console.log(fruits[0]); // "사과"

 

배열의 길이 : .length

console.log(fruits.length); // 3

 

 

 

 

실습 - 여행 준비물 점검기

let items = ["여권", "칫솔", "수건"];

items.push("충전기");
items.splice(1, 1, "세면도구");

alert("여행 준비물 목록: " + items.join(", "));

// 요소 꺼내기 (실행하면 본래의 배열에선 삭제)
console.log(items.pop());       
console.log(items);

 

 

배열에 쓰이는 반복문

// for문으로 배열 전체 순회
let animals = ["강아지", "고양이", "토끼"];
for (let i = 0; i < animals.length; i++) {
    console.log(animals[i]);
}

// for ~ of
for (let animal of animals) {
    console.log(animal);
}

// for Each
animals.forEach(function (animal) {
    console.log(animal);
})

 

 

 

 

※ filter(조건) : 조건에 맞는 값들을 필터링해서 출력. 

// 일반적인 배열 (array)
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers);

- [2, 4, 6, 8, 10]



// 키-값 쌍의 딕셔너리 구조
const users = [
    {name: "Alice", age: 20},
    {name: "Bob", age: 19},
    {name: "Charlie", age: 30},
]

const adults = users.filter(user => user.age >= 20);
console.log(adults);

- [{name: "Alice", age: 20}, {name: "Charlie", age: 30}]

 

 

 

 

반응형

'Front-End > JavaScript' 카테고리의 다른 글

JavaScript #14 (form)  (0) 2025.06.30
JavaScript #13 (DOM 이벤트)  (1) 2025.06.26
JavaScript #11 (날짜/시간 객체 관련)  (0) 2025.06.25
JavaScript #10 (객체)  (0) 2025.06.25
JavaScript #9 (이벤트)  (0) 2025.06.24