현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다.
본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.

1. 생성자(Constructor)

• 생성자(Constructor) 는 new 키워드를 사용해 새로운 객체를 생성하는 함수이다.
• 보통 첫 글자를 대문자로 시작하는 PascalCase 방식으로 작성한다.

1) 생성자 함수 만들기

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sayHello = function() {
        console.log(`안녕하세요, 저는 ${this.name}입니다.`);
    };
}

const person1 = new Person("상희", 25);
const person2 = new Person("채홍", 32);

console.log(person1.name); // "상희"
console.log(person2.age);  // 32
person1.sayHello();        // "안녕하세요, 저는 상희입니다."

• new Person("상희", 25)를 실행하면 새로운 객체가 생성됨.
• this 키워드는 새로 만들어지는 객체를 가리킴.

2) class 문법을 사용한 생성자 (ES6)

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    
    sayHello() {
        console.log(`안녕하세요, 저는 ${this.name}입니다.`);
    }
}

const person1 = new Person("상희", 25);
person1.sayHello(); // "안녕하세요, 저는 상희입니다."

• class 문법을 사용하면 객체 지향 프로그래밍을 쉽게 구현 가능.

3) 생성자 없이 객체 만드는 방법 (Object.create)

const person = Object.create(null);
person.name = "상희";
person.age = 25;
console.log(person.name); // "상희"

• Object.create()를 사용하면 프로토타입을 지정하여 객체 생성 가능.

2. 빌트인 생성자(Built-in Constructor)

자바스크립트에서 기본적으로 제공하는 내장 생성자 함수를 의미한다.
new 키워드를 사용해 문자열, 숫자, 배열, 객체 등을 생성할 수 있다.

1) Object() - 빈 객체 생성

const obj1 = new Object();
obj1.name = "상희";
console.log(obj1); // { name: "상희" }

2) Array() - 배열 생성

const arr = new Array(1, 2, 3);
console.log(arr); // [1, 2, 3]

💡 보통 [] 리터럴을 사용하는 것이 더 간편함 → const arr = [1, 2, 3];

3) String() - 문자열 객체 생성

const str = new String("Hello");
console.log(str); // String {"Hello"}
console.log(typeof str); // "object"

💡 기본 문자열 리터럴("Hello")을 사용하는 것이 일반적

4) Number() - 숫자 객체 생성

const num = new Number(123);
console.log(num); // Number {123}
console.log(typeof num); // "object"

💡 일반적으로 Number 객체보다는 리터럴(123)을 사용하는 것이 좋음.

5) Boolean() - 불리언 객체 생성

const bool = new Boolean(false);
console.log(bool); // Boolean {false}
console.log(typeof bool); // "object"

💡 false 값을 Boolean 객체로 생성하면 if(bool)에서 true로 평가될 수 있음.
→ 리터럴 false를 사용하는 것이 안전함.

6) Date() - 날짜 객체 생성

const now = new Date();
console.log(now); // 현재 날짜 및 시간 출력

7) RegExp() - 정규 표현식 객체 생성

const regex = new RegExp("\\d+"); // 숫자를 찾는 정규식
console.log(regex.test("123")); // true

💡 정규식을 생성할 때 보통 리터럴 표기법 사용: /\d+/

8) Error() - 에러 객체 생성

const error = new Error("에러 발생!");
console.log(error.message); // "에러 발생!"

9) 빌트인 생성자 사용 시 주의점

• String(), Number(), Boolean() 생성자는 객체를 생성하므로 기본 자료형처럼 동작하지 않음.

const str1 = "Hello"; // 일반 문자열
const str2 = new String("Hello"); // 문자열 객체

console.log(typeof str1); // "string"
console.log(typeof str2); // "object"
console.log(str1 === str2); // false

• 가능하면 리터럴 방식 사용이 권장됨.
  ✅ const str = "Hello"; (권장)
  ❌ const str = new String("Hello"); (비추천)
  

👉 일반적으로 Object, Array, Date 등은 유용하지만, String, Number, Boolean 같은 기본 자료형은 리터럴 방식이 더 좋다.

3. 타이머 메소드(Timer Methods)

자바스크립트에서 특정 시간이 지난 후 또는 일정 간격마다 함수를 실행하는 메소드다.

1) setTimeout() - 일정 시간 후에 실행

지정된 시간(ms) 후에 한 번 실행하는 함수.

setTimeout(function() {
    console.log("3초 후 실행!");
}, 3000);

✔️ setTimeout(함수, 지연시간(ms))

a. setTimeout 취소하기 - clearTimeout()

const timer = setTimeout(() => console.log("실행되지 않음"), 5000);
clearTimeout(timer); // 실행 취소

2) setInterval() - 일정 간격마다 실행

지정된 시간(ms)마다 반복 실행하는 함수.

setInterval(function() {
    console.log("2초마다 실행!");
}, 2000);

✔️ setInterval(함수, 간격(ms))

a. setInterval 정지하기 - clearInterval()

const interval = setInterval(() => console.log("반복 실행"), 1000);
setTimeout(() => clearInterval(interval), 5000); // 5초 후 중지

3) setTimeout을 이용한 setInterval 구현

setInterval 대신 setTimeout을 재귀적으로 호출하는 방법도 있음.

function repeat() {
    console.log("1초마다 실행!");
    setTimeout(repeat, 1000);
}
setTimeout(repeat, 1000);

✔️ 장점: setTimeout은 실행 간격을 유연하게 조정할 수 있음.

👉 setTimeout은 한 번 실행, setInterval은 반복 실행.

끝맺음.

정신없이 시간은 빠르게 흘러가고.. 내 머리는 포화상태..