자바스크립트 객체

1. 자바스크립트 객체와 프로토타입

객체의 정의 및 특성

객체(Object): 실제 세상에 존재하는 사물을 모델링한 것으로, 속성(데이터)과 동작(함수)을 함께 가집니다. 이를 통해 데이터와 동작이 분리되지 않고 하나로 묶여 관리되는 엔터티를 형성합니다.

• 속성(Property): 객체가 가지고 있는 특성값을 변수로 표현 (예: model, speed, color)
• 동작(Method): 객체가 수행할 수 있는 행동을 함수로 표현 (예: brake(), accel())
• 기본 자료형: 자바스크립트에서 객체는 가장 기초적인 자료형이며, 문자열, 수치형, 부울형 등 거의 모든 변수가 객체처럼 구현됩니다.

객체 지향 프로그래밍

정의: 속성과 동작을 하나로 묶어서 프로그램을 작성하는 기법입니다.

핵심 원칙:

• 속성과 메서드: 객체 내부에 존재하며 서로 긴밀하게 연결됩니다
• 컨테이너 개념: 객체는 변수(속성)와 메서드를 소유하는 컨테이너로 볼 수 있습니다
• 은닉성: 객체 내부의 변수는 외부 세계로부터 감추어져 있어 데이터 보호가 가능합니다

객체의 종류 및 생성 방법

객체의 종류:

• 내장 객체: window, document, Date, String, Array 등 생성자가 미리 작성되어 있음
• 사용자 정의 객체: 사용자(개발자)가 생성자를 정의함

객체 생성 방법:

1. 객체 상수로부터 생성 (싱글톤): 를 사용하여 객체를 정의하고 값을 초기화하며, 해당 문장이 실행될 때 바로 객체가 생성됩니다.

var myCar = {
  model: "Grandure",
  speed: 60,
  color: "red",
  brake: function () {
    this.speed -= 10;
  },
  accel: function () {
    this.speed += 10;
  },
};

2. 생성자 함수를 이용한 객체 생성: 생성자 함수를 정의한 후 new 연산자를 사용하여 객체를 생성합니다. 이는 C++의 클래스와 유사하며, 개발자가 원하는 개수만큼 객체를 쉽게 만들 수 있는 장점이 있습니다.

function Car(model, speed, color) {
  this.model = model;
  this.speed = speed;
  this.color = color;
  this.brake = function () {
    this.speed -= 10;
  };
  this.accel = function () {
    this.speed += 10;
  };
}
myCar = new Car("Sonata", 60, "red");

참고: this는 코드를 실행하는 현재 객체를 의미하며, 속성에 반드시 this를 붙여 지역 변수와의 혼동을 피해야 합니다.

객체 멤버 사용 및 추가

객체 멤버 사용: 객체 안의 속성과 메서드인 객체 멤버를 사용하기 위해서는 점(dot) 연산자를 사용합니다.

myCar.color = "yellow";
myCar.brake();

객체에 속성 및 메서드 추가: 기존 객체에도 점(dot) 연산자를 이용하여 새로운 속성이나 메서드를 동적으로 추가할 수 있습니다.

myCar.turbo = true;
myCar.showModel = function () {
  // 함수 내용
};

프로토타입

객체의 공유: 여러 객체가 동일한 메서드를 가질 때, 메모리 낭비를 줄이기 위해 메서드를 공유하는 메커니즘입니다. 일반적인 객체 지향 언어는 클래스를 사용하지만, 자바스크립트는 프로토타입(prototype) 개념을 사용합니다.

프로토타입의 개념: 자바스크립트의 모든 객체는 prototype이라는 숨겨진 객체를 가지고 있습니다. 이 prototype 객체를 통해 공유되는 속성과 메서드를 작성할 수 있습니다. 즉, 여러 인스턴스가 생성되더라도 공통적인 메서드는 다시 생성하지 않고 이전 메서드를 사용합니다.

function Point(xpos, ypos) {
  this.x = xpos;
  this.y = ypos;
}
Point.prototype.getDistance = function () {
  return Math.sqrt(this.x * this.x + this.y * this.y);
};

프로토타입 체인: 객체의 속성이나 메서드를 참조하는 순서를 의미합니다. 객체에서 속성이나 메서드를 찾을 때, 먼저 해당 객체 자체를 확인하고, 없으면 __proto__ 속성을 통해 연결된 prototype 객체로 올라가면서 찾습니다.

Object 객체: 자바스크립트 객체의 부모가 되는 객체입니다. 자바스크립트의 모든 객체는 Object 객체를 기초로 하여 생성되며, Object 객체의 메서드(toString(), valueOf(), hasOwnProperty(), isPrototypeOf())는 하위 객체에서 재정의하여 사용할 수 있습니다.

---

2. 내장 객체

Date 객체

기능: 날짜와 시간 코딩 작업에 사용되는 가장 기본적인 객체입니다.

생성 방법:

• new Date() (현재 날짜/시간)
• new Date(milliseconds)
• new Date(dateString)
• new Date(year, month, date[, hours[, minutes[, seconds[, ms]]]])

주요 메서드:

• getDate(), setDate()
• getDay()
• getFullYear(), setFullYear()
• getHours(), setHours()
• getMilliseconds(), setMilliseconds()
• getMinutes(), setMinutes()
• getMonth(), setMonth()
• getSeconds(), setSeconds()
• toDateString()
• toISOString()
• toJSON()
• toLocaleDateString()
• toLocaleTimeString()
• toLocaleString()
• toString()
• toTimeString()
• toUTCString()

활용 예시: 두 날짜 비교 (getTime() 메서드 활용), 카운트다운 타이머, 시계 제작 등에 사용됩니다.

String 객체

기능: 문자열을 다루는 객체입니다.

주요 속성 및 메서드:

• length: 문자열의 길이
• toUpperCase(), toLowerCase(): 대소문자 변환
• concat(), +: 문자열 결합
• indexOf(): 문자열 내에서 특정 텍스트가 처음 등장하는 위치 반환
• match(): 정규식을 사용하여 문자열 내 일치하는 콘텐츠 탐색
• replace(): 정규식을 사용하여 문자열 내 주어진 값을 다른 값으로 대체
• split(delimiter[, limit]): 문자열을 분리자로 분리한 후, 배열로 반환

HTML 래퍼 메서드:

• big(), small()
• bold(), italics()
• fixed()

문자열 리터럴과 문자열 객체: 문자열 리터럴은 큰따옴표로 생성되며, 자동 형변환이 되어 문자열 객체의 모든 속성과 메서드를 사용할 수 있습니다. new String()을 통해 생성된 문자열 객체와는 달리, 함수로 전달될 때 값만 전달되므로 원본은 변경되지 않습니다.

Math 객체

기능: 수학적 계산 작업을 위한 객체입니다.

특징: new를 통해 객체를 생성할 필요 없이 바로 이용합니다.

주요 속성:

• E (오일러 상수)
• LN2, LN10
• PI
• SQRT1_2, SQRT2

주요 메서드:

• abs(x): 절대값
• acos(x), asin(x), atan(x): 아크 삼각함수
• ceil(x): 올림
• floor(x): 내림
• round(x): 반올림
• max(x, y): 최댓값
• min(x, y): 최솟값
• pow(x, y): 거듭제곱
• sqrt(x): 제곱근
• random(): 0과 1 사이의 난수

Array 객체

배열의 표현: 자바스크립트에서는 배열도 객체로 표현되며, 배열을 나타내는 객체는 Array입니다.

특징:

• 배열의 크기가 자동으로 조절됩니다
• 하나의 배열에 여러 가지 자료형을 혼합해서 저장할 수 있습니다
• 배열의 크기보다 큰 인덱스 값으로 접근해도 오류가 발생하지 않고 undefined 값이 반환됩니다

생성 방법:

• new Array()
• new Array("요소1", "요소2")
• ["요소1", "요소2"]

주요 속성:

• length: 배열의 크기

주요 메서드:

• concat(value1[, value2...]): 배열의 끝에 인수를 추가하며, 인수는 배열일 수도 있습니다
• indexOf(searchStr[, startIndex]): 요소의 값을 가지고 요소의 인덱스를 찾습니다
• push(value), pop(): 스택(stack)처럼 데이터를 삽입/추출합니다
• shift(), unshift(): 큐(queue)처럼 배열의 첫 번째 요소를 반환하고 제거하며, 맨 앞에 요소를 추가합니다
• sort(): 배열을 알파벳순으로 정렬하며, 수치값 정렬을 위해 function(a,b) { return a-b }와 같은 정렬 기준 함수를 사용할 수 있습니다
• slice([begin[, end]]): 배열의 일부를 복사하여 새로운 배열로 반환합니다
• join(delimiter): 배열의 요소들을 하나의 문자열로 출력하며, 분리자를 지정할 수 있습니다
• filter(): 어떤 조건에 부합하는 요소만을 선택하여 새로운 배열로 만들어서 반환하며, 요소를 선택하는 함수를 인수로 전달합니다

2차원 배열: Array 객체 안에 다른 Array 객체를 포함시켜 2차원 배열을 구현할 수 있습니다.

matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];