HTML

HTML.자바스크립트 코어 객체와 배열

calla1013 2025. 5. 24. 17:06

💡 자바스크립트 핵심: 객체와 배열의 마법

안녕하세요! 😊 이번 시간에는 자바스크립트의 진정한 힘객체(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