JavaScript 학습 정리_02

📌 개요

이번 글에서는 JavaScript의 기본 개념부터 객체, 배열, 그리고 콜백 함수까지 학습한 내용을 정리합니다. 각 개념을 코드와 함께 이해하고, 실제로 어떻게 활용되는지 살펴봅니다.

---

🖥 1️⃣ JavaScript 기본 자료형

🔍 개념

JavaScript의 데이터 타입은 크게 기본 자료형(Primitive Type) 과 객체(Object) 로 나뉩니다.

✅ 코드 예제

// Number
console.log(typeof 10); // "number"
console.log(typeof 10.5); // "number"

// String
console.log(typeof "HELLO WORLD"); // "string"
console.log(typeof `HELLO WORLD`); // "string" (백틱 사용)

// Object
console.log(typeof {name:'홍길동', age: 55}); // "object"
console.log(typeof JSON.stringify({name:'홍길동', age: 55})); // "string"

// null & undefined
let value1 = null;
console.log(typeof value1); // "object" (버그)
let value2;
console.log(typeof value2); // "undefined"

// Boolean
console.log(typeof true); // "boolean"

---

🖥 2️⃣ 템플릿 리터럴과 보간법

🔍 개념

• 문자열을 더 쉽게 조합하는 방법으로 백틱()을 사용하여 변수나 연산 결과를 직접 삽입할 수 있음.

✅ 코드 예제

let str1 = "hello";
let str2 = "world";
let result = `결과: ${str1} ${str2}`;
console.log(result); // "결과: hello world"

let sum = `10 + 20 = ${10+20}`;
console.log(sum); // "10 + 20 = 30"

---

🖥 3️⃣ 객체(Object)와 메서드

🔍 개념

객체는 속성과 기능(메서드)을 가질 수 있는 데이터 구조입니다.

✅ 코드 예제

const poppi = {
    name: "뽀삐",
    kind: "포메라니안",
    age: 1,
    birthday: "2025-01-01",
    sound: function(){
        alert(`${this.name} 이(가) 짖습니다.`);
    },
    toString: function(){
        alert(`이름: ${this.name}\n나이: ${this.age}\n견종: ${this.kind}`);
    }
};

---

🖥 4️⃣ 객체를 활용한 자동차 속도 제어

🔍 개념

• 객체를 활용하여 자동차의 속도를 증가(accel()), 감소(break()), 현재 상태를 확인하는 기능(status())을 구현할 수 있음.

✅ 코드 예제

const myCar = {
    owner: "홍길동",
    category: "세단",
    fueltype: "가솔린",
    speed: 0,
    max_speed: 200,
    min_speed: 0,
    accel: function(){
        if ((this.speed + 10) > this.max_speed) {
            this.speed = this.max_speed;
        } else {
            this.speed += 10;
        }
        console.log(`현재 속도: ${this.speed}`);
    },
    break: function(){
        if ((this.speed - 10) < this.min_speed) {
            this.speed = this.min_speed;
        } else {
            this.speed -= 10;
        }
        console.log(`현재 속도: ${this.speed}`);
    }
};

---

🖥 5️⃣ 배열과 반복문

🔍 개념

배열을 활용하여 여러 데이터를 저장하고 반복문(forEach)을 사용해 요소를 순회할 수 있습니다.

✅ 코드 예제

let arr = ["apple", "banana", "cherry"];
arr.forEach((item) => {
    console.log(`과일: ${item}`);
});

arr.push("grape"); // 배열 끝에 추가
console.log(arr);
arr.pop(); // 마지막 요소 제거
console.log(arr);

---

🖥 6️⃣ 콜백 함수

🔍 개념

• 콜백 함수는 다른 함수의 인자로 전달되어 실행되는 함수입니다.
• 주로 비동기 코드나 이벤트 핸들러에서 많이 사용됨.

✅ 코드 예제

function greeting(name, callback) {
    console.log(`안녕하세요, ${name}님!`);
    callback();
}

function sayGoodbye() {
    console.log("안녕히 가세요!");
}

greeting("철수", sayGoodbye);

---

📌 전체 내용 요약

개념	설명
기본 자료형	number, string, boolean, null, undefined, object
템플릿 리터럴	백틱(``)을 활용한 문자열 보간법
객체(Object)	속성과 메서드를 가질 수 있는 데이터 구조
자동차 객체	속도 증가/감소 기능을 가진 객체 구현
배열과 반복문	forEach, push, pop 활용
콜백 함수	다른 함수의 인자로 전달되어 실행되는 함수

---

🎯 결론

✅ JavaScript의 기본 데이터 타입과 객체 개념을 학습
✅ 템플릿 리터럴과 보간법을 이해하고 활용
✅ 배열과 반복문을 통해 데이터를 다루는 방법 익힘
✅ 콜백 함수의 개념과 활용법 학습