2022 호국 훈련으로 인해 2주가량의 공부 공백기가 생겼다.
객체의 복습
[객체] #1. 객체란?
객체(object)란? 객체(object)란 실생활에서 우리가 인식할 수 있는 사물로 이해할 수 있다. 흔히 객체를 복합 자료형이라고 하는데, 이는 객체 안에 숫자, 문자열 등 여러 가지 자료형이 포함되기 때
udangtangtang-cording-oldcast1e.tistory.com
이전 포스팅에서는 객체의 의미와 객체의 종류를 살펴보았다.
객체란 변수 하나에 여러 정보를 저장하는 것을 말하며, 객체에서 값을 담고 있는 정보를 속성이라고 언급했다.
객체의 종류는 아래의 표와 같다.
| 내장 객체 | 자바스크립트 엔진에 정의되어 있어 필요한 경우 생성해서 사용할 수 있다. |
| 브라우저 객체 모델 | 브라우저에 계층 구조로 내장되어 있는 객체를 의미하며, 브러우저 정보를 객체로 다룬다. |
| 문서 객체 모델 | 객체를 사용해 웹문서를 관리하는 방식을 말한다. |
| 사용자 정의 객체 | 사용자가 필요에 의해 객체를 선언한다. |
객체의 프로토타입과 인스턴스
http://www.tcpschool.com/javascript/js_object_prototype을 인용했다.
상속(inheritance)
상속(inheritance)이란 새로운 클래스에서 기존 클래스의 모든 프로퍼티와 메서드를 사용할 수 있는 것을 의미한다.
상속의 장점은 다음과 같다.
- 새로운 프로그램의 요구에 맞게 기존 클래스를 수정하여 재사용할 수 있다.
- 클래스 간의 종속 관계를 형성함으로써 객체의 관계를 조직화할 수 있다.
- 추상화, 캡슐화와 더불어 객체 지향 프로그래밍을 구성하는 중요한 특징 중 하나가 된다.
자바스크립트는 프로토타입 기반(prototype-based)의 객체 지향 언어이다. 때문에 상속의 개념이 클래스 기반의 객체 지향 언어와는 약간 다르다.
자바스크립트에서는 현재 존재하고 있는 객체를 프로토타입으로 사용하여, 해당 객체를 복제하여 재사용하는 것을 상속이라고 한다.
프로토타입(prototype)
자바스크립트의 모든 객체는 프로토타입(prototype)이라는 객체를 가지고 있고 모든 객체는 그들의 프로토타입으로부터 프로퍼티와 메서드를 상속받는다.
이처럼 자바스크립트의 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며, 이때 상속되는 정보를 제공하는 객체를 프로토타입(prototype)이라고 한다.
인스턴스(instance)
프로토타입을 사용해 만들어낸 객체를 인스턴스라고 한다. 객체의 인스턴스를 만들 때, 다시 말해 새로운 객체를 만들 때에는 new 예약어를 사용하고 프로토타입 객체 이름과 괄호를 붙이면 된다.
> var now = Date();
> now
< Mon Oct 31 2022 22:25:59 GMT+0900 (대한민국 표준시)
내장 객체 활용하기: Math() 함수
자바스크립트의 Math 객체는 삼각함수나 로그 함수를 비롯한 수학 연산 함수를 가지고 있는 내장 객체이다.
Math 객체와 관련된 여러 함수가 다양하게 포함되어있으며 주로 사용하는 함수는 다음과 같다.
| 함수 | 기능 |
| abs(x) | 숫자의 절대값을 반환 |
| cbrt(x) | 숫자의 세 제곱근을 반환 |
| ceil(x) | 인수보다 크거나 같은 수 중에서 가장 작은 정수를 반환한다. (숫자의 소수점 이하를 올린다. = 반올림) |
| floor(x) | 인수보다 작거나 같은 수 중에서 가장 큰 정수를 반환한다. (숫자의 소수점 이하를 내린다. = 반내림) |
| random() | 0과 1사이의 난수를 반환한다. |
| round(x) | 숫자에서 가장 가까운 정수를 반환한다. (숫자의 소수점 이하를 반올림한다.) |
사용자 정의 객체 생성
앞서 객체의 종류 중에 사용자가 직접 만든 객체를 사용자 정의 객체라고 언급했다. 이때 가장 많이 사용하는 객체 리터럴과 생성자 함수를 사용하는 방법에 대해 알아보자.
리터럴 표기법을 사용한 객체 생성
리터럴이란 프로그래밍에서 자료를 표기하는 방식을 말한다.
이 리터럴을 사용해 표기한다는 것은 변수를 선언하면서 동시에 값을 지정하는 표기 방식을 말한다. 즉, 선언과 함께 값의 초기화를 한다면 그것이 바로 리터럴 방식이라는 것이다.
객체 리터럴을 사용해 객체를 정의할 때는 중괄호 {} 안에 '속성 이름: 값'을 하나의 쌍으로 지정한다.
객체 리터럴: ' 함수 이름: function(){…} '
객체 생성 실습
객체 생성을 실습해보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>객체 생성</title>
</head>
<body>
<script>
var study = {
title: "코딩",
maker: "old_cast1e",
number: 71105315,
school: "SJU",
info: function(){
document.write("메이커의 이름은 " + this.maker + "이고 번호는 " + this.number+"입니다.");
}
};
study.info();
</script>
</body>
</html>라이브 서버를 실행하면 아래와 같이 출력이 되는 것을 확인할 수 있다.
이는 C 언어의 클래스와 비슷한 개념으로 이루어진다. 하지만 C#이나 C++과 같은 클래스 기반(class-based)의 객체 지향 언어와는 다른데, JS는 클래스라는 개념이 없으므로 기존의 객체를 복사하여 새로운 객체를 생성하는 프로토타입 기반의 언어인 것이다.
프로토타입 기반의 언어는 객체 원형인 프로토타입을 이용해 새로운 객체를 만들어내며, 이렇게 생성된 객체 역시 또 다른 객체의 원형이 될 수 있다.
생성자 함수를 사용한 객체 생성
리터럴 표기법을 사용해 객체를 만드는 방법은 정해진 값을 가진 객체를 한 번만 만들어낸다. 이는 여러 객체의 생성이 필요할 때 불필요한 반복을 만들 수 있다는 단점이 존재한다.
항상 필요한 속성과 함수는 틀 처럼 미리 만들어 두고, 필요할 때마다 그 틀을 복제한 인스턴스를 만들어 원하는 정보를 담는 것이 편리한데 이때 생성자 함수를 이용한다.
생성자 함수란 객체를 만들어내는 함수를 말한다.
이 또한 함수이므로 function() 예약어를 이용해 선언하며, 생성자 함수 안에 객체의 속성과 함수를 정의할 때에는 this 예약어와 마침표를 입력한다. 여기서 this가 가리키는 것은 객체 자체를 말한다.
생성자 함수 실습하기
생성자 함수에서 주의할 것은 객체의 요소를 선언할 때 세미콜론을 붙인다는 것이다!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>객체 생성</title>
</head>
<body>
<script>
function book(title,author,pages,price){
this.title = title;
this.author = author;
this.pages = pages;
this.price = price;
}
information = new book("Hello World!","old_cast1e",110,15200);
document.write("title:"+information.title+"<br>");
document.write("author:"+information.author+"<br>");
document.write("pages:"+information.pages+"<br>");
document.write("price:"+information.price+"<br>");
</script>
</body>
</html>실행 화면
(+) 객체 실습 예제: D-day 계산기 파일
'JavaScript > [theory]' 카테고리의 다른 글
| [객체] #3. Array 객체 (2) | 2022.11.01 |
|---|---|
| [객체] #1. 객체란? (0) | 2022.10.10 |
| [함수] #4. 함수와 이벤트 (0) | 2022.10.05 |
| [함수] #3. 함수 표현식 (0) | 2022.10.04 |
| [함수] #2. let과 constant로 변수 선언하기 (0) | 2022.10.03 |
