[TIL]JavaScript (생성자 함수, 프로토타입, 배열, 내장 객체)

1. 생성자 함수 (Constructor Function)

객체를 반복해서 만들 때 사용하는 함수이다.

기존 방식은 같은 구조의 객체를 계속 작성해야 하는 비효율이 있다.

특징

• 함수 이름은 대문자로 시작
• this는 생성될 객체를 가리킴
• new 키워드와 함께 사용

기본 구조

function Student(name, age) {
  this.name = name;
  this.age = age;
  this.getInfo = function() {
    return `${this.name}은 ${this.age}세 입니다.`;
  }
}

const student = new Student('판다', 5);

---

2. new 키워드 동작 원리

new는 단순히 객체 생성이 아니라 내부적으로 여러 단계를 수행한다.

동작 과정

1. 빈 객체 생성 {}
2. this에 바인딩
3. 프로퍼티 추가
4. this 반환

핵심

• new를 사용하지 않으면 일반 함수처럼 실행됨
• 이 경우 this는 전역 객체를 가리켜 문제가 발생

안전 장치

function Dog(name) {
  if(!new.target) {
    return new Dog(name);
  }
  this.name = name;
}

---

3. 프로토타입 (Prototype)

자바스크립트는 클래스 기반이 아니라 프로토타입 기반 언어이다.

핵심 개념

• 모든 객체는 [[Prototype]]을 가짐
• 다른 객체를 참조하며 상속 구조 형성

예시

Object.setPrototypeOf(student, user);

특징

• 없는 속성 → 프로토타입에서 찾음
• 메서드 공유 가능
• this는 항상 호출한 객체 기준

---

4. 생성자 함수와 프로토타입

생성자 함수로 만든 객체는 자동으로 프로토타입과 연결된다.

function Student(name) {
  this.name = name;
}

Student.prototype = user;

결과

• 모든 인스턴스가 user의 기능을 공유
• 메모리 효율 증가

---

5. 배열 (Array)

여러 값을 순서대로 저장하는 자료구조이다.

기본

const arr = ['사과', '바나나'];
arr[0]; // 인덱스로 접근

---

6. 배열 주요 메서드

추가 / 제거

• push() : 뒤에 추가
• pop() : 뒤에서 제거
• unshift() : 앞에 추가
• shift() : 앞에서 제거

탐색

• indexOf() : 위치 반환
• includes() : 존재 여부

배열 처리

• slice() : 잘라서 반환 (원본 유지)
• splice() : 원본 변경

기타

• join() : 문자열 변환
• reverse() : 뒤집기

---

7. 배열 반복 메서드

forEach

• 단순 반복 (반환값 없음)

arr.forEach(item => console.log(item));

---

map

• 새로운 배열 생성

arr.map(x => x * 2);

---

filter

• 조건에 맞는 요소만 추출

arr.filter(x => x > 3);

---

reduce

• 하나의 값으로 누적

arr.reduce((acc, cur) => acc + cur, 0);

---

기타

• find() : 첫 번째 요소 반환
• some() : 하나라도 만족하면 true
• every() : 모두 만족해야 true

---

8. 정렬 (sort)

arr.sort((a, b) => a - b);

특징

• 기본은 문자열 기준 정렬
• 숫자는 반드시 비교 함수 필요

---

9. 표준 내장 객체

자바스크립트에서 기본 제공하는 객체들이다.

String

• indexOf, includes
• slice, split, trim
• toUpperCase, toLowerCase

---

Math

• Math.random() : 랜덤
• Math.floor() : 내림
• Math.round() : 반올림
• Math.ceil() : 올림

---

Date

const now = new Date();

• 현재 시간
• 연, 월, 일 추출 가능

---

오늘 핵심 요약

• 생성자 함수는 객체를 효율적으로 만들기 위한 구조
• new는 객체 생성 + this 바인딩 + 반환까지 자동 처리
• 자바스크립트는 프로토타입 기반 상속 구조
• 배열은 다양한 메서드(map, filter, reduce)가 핵심
• sort는 비교 함수가 중요
• String, Math, Date는 필수 내장 객체