💡 자바스크립트 핵심: 객체와 배열의 마법
안녕하세요! 😊 이번 시간에는 자바스크립트의 진정한 힘인 객체(Object)와 배열(Array)에 대해 알아봅니다. 데이터를 구조화하고 복잡한 기능을 구현할 때 가장 많이 쓰이는 핵심 중의 핵심 개념이에요.
📌 목차
🔷 1. 자바스크립트 객체: 현실 세계를 코드로 표현하기
객체는 현실의 사물을 코드로 표현한 것입니다. 예를 들어, 자동차라는 객체는 다음과 같은 속성(Property)과 기능(Method)을 가질 수 있죠.
let car = {
color: "orange",
engine: "3000CC",
maker: "현대",
number: "서울1-1",
start: function() {
console.log("출발합니다!");
}
};
car.start(); // "출발합니다!"
📍 객체 생성 방법
1) 생성자 방식let account = new Object();
account.owner = "황기태";
account.balance = 35000;
account.inquiry = function() {
return this.balance;
};
2) 객체 리터럴 방식 (가장 많이 사용)
let account = {
owner: "황기태",
code: "111",
balance: 35000,
inquiry: function () {
return this.balance;
},
deposit: function (money) {
this.balance += money;
},
withdraw: function (money) {
if (this.balance < money) {
alert("잔액이 부족합니다!");
} else {
this.balance -= money;
}
}
};
📍 객체 접근 방법
console.log(account.owner); // "황기태"
account.deposit(10000); // 잔액 + 10000
console.log(account.inquiry()); // 현재 잔액 출력
🔷 2. 자바스크립트 배열: 데이터의 순차적 저장소
배열은 여러 데이터를 순차적으로 저장할 수 있는 객체입니다.
📍 배열 선언 방법
// 배열 리터럴 방식 (추천)
let fruits = ["사과", "바나나", "오렌지"];
console.log(fruits[0]); // "사과"
fruits[1] = "포도"; // 값 변경
📍 배열 주요 메소드
fruits.push("망고"); // 마지막에 추가
fruits.pop(); // 마지막 제거
fruits.unshift("딸기"); // 앞에 추가
fruits.shift(); // 앞에서 제거
console.log(fruits.join(", ")); // 문자열로 결합
🔷 3. 자바스크립트 코어 객체: 내장된 강력한 도구들
🕒 Date 객체
let now = new Date();
console.log(now.getFullYear(), now.getMonth() + 1, now.getDate());
📝 String 객체
let text = "Hello JavaScript!";
console.log(text.length);
console.log(text.indexOf("Java")); // 6
console.log(text.toUpperCase()); // HELLO JAVASCRIPT!
🧮 Math 객체
console.log(Math.PI); // 3.141592...
console.log(Math.round(4.7)); // 5
console.log(Math.floor(4.9)); // 4
console.log(Math.random()); // 0~1 사이 난수
✅ 마무리하며
객체와 배열은 자바스크립트의 뼈대이며, 코어 객체는 실전에서 정말 자주 사용됩니다.
이 개념들을 확실히 익히면 자바스크립트를 사용하는 모든 프론트엔드/백엔드 개발의 기초 체력이 탄탄해져요!
🔥 다음 시간엔 함수와 클로저에 대해 알아볼 예정이니 기대해주세요!
'HTML' 카테고리의 다른 글
| HTML.이벤트 기초 및 활용 (0) | 2025.05.25 |
|---|---|
| HTML.DOM과 Document (1) | 2025.05.24 |
| HTML.자바스크립트 기초 (0) | 2025.05.24 |
| HTML.고급 CSS (0) | 2025.05.24 |
| HTML.CSS로 웹 페이지 꾸미기 (0) | 2025.05.24 |