Object(객체)에 대해서 공부해보자.
자바스크립트에는 기본 데이터 타입(숫자, 문자, 참과 거짓의 boolean, undefined, null)이라고 불리우는 데이터 타입들을 제외한 나머지는 "객체"라고 할 수 있다. 함수나 변수도 자바스크립트에서는 큰 범주안에서 객체이다.
객체를 설명할 때는 보통 사람을 예를 들어 설명을 하는데, [한 명의 사람 = 객체]이라고 설정한다.
한 사람은 이름과 성별 등등의 기타 속성들을 가지고 있다.
객체는 속성들과 동작 또는 기능(액션)으로 이루어진 집합체라고 생각하면 된다.
객체를 만드는 법
첫번째,
객체를 만드는 법은 중괄호{ }로 만들수있다. (배열은 [ ]) 객체를 생성한 후, 'name' 과 'age' 같은 속성들을 추가해보자.
const person = {}; // 객체의 생성
person.name = '일분이';
person.age = 10;
그리고 동작을 추가해보자. 여기서 동작은 함수(function)이다.
person.introduce = function() {
console.log('안녕하세요!');
};
person.introduce(); // 함수 호출
객체에 추가한 name, age 등 값들로 정의되는 것들을 속성(property)라고 불리우는 데, 속성들 중 "함수"로 표현되는 속성을 메소드(method)라고 한다.
정리하자면,
자바스크립트에서는 함수도 하나의 값이며, 객체에 속성들을 점 . 으로 추가할 수 있다.
두번째,
두번째 방법이 보편적으로 더 많이 쓰인다.
const person = {
name: '일분이',
age: 10,
introduce: function() {
console.log('안녕하세요?');
}
}
console.log(person.name);
person.introduce();값을 이용해서 응용해보자.
선언된 값으로 콘솔로그에 사람을 선언하고 콘솔 로그에서 자기소개를 하도록 이용해볼 수 있다.
const person = {
name: "일분이",
age: 10,
introduce: function() {
console.log('안녕하세요! 저는' + this.name + '이고, 나이는' + this.age + '살 이에요.');
}
};
person.introduce();※ 여기서 주의할 점은 this. 없이 age를 찍을 경우 age is not defined 에러가 나는데, 이 때 this는 객체가 메소드를 실행했을 때, 메소드를 실행할 주체 객체를 가르킨다.
(name의 경우 window.name 이라는 전역 객체가 이미 있으므로, 에러가 나지 않지만 "" 빈 값이다.)
생성자(constructor) 함수를 만들어보자
객체를 생성해내는 역할을 하는 "생성자"는 함수이다. 그리고 생성자는 관례적으로 첫 글자를 대문자로 써준다.
function Person() {
}
const person1 = new Person(); // 생성자 호출1
const person2 = new Person(); // 생성자 호출2※ 여기서 규칙은 함수가 생성자로서 호출을 하고 싶다면, new 키워드(인스턴스)를 붙히면 된다.
만들고자 하는 것,
- 일분이1와 일분이2 라는 객체를 각각 만들고 싶다.
- 이 때 생성자를 이용해 매개변수로 값을 전달해 생성자를 호출한다면 값이 많아졌을 때, 유지 보수하기가 편리해질 것이다.
// 생성자(constructor)
function Person(nickname, age) {
this.nickname = nickname;
this.age = age;
this.introduce = function() {
console.log("안녕하세요? 저는" + this.nickname + "이고, 나이는" + this.age + "살이에요.");
}
}
// 인스턴스(instance)
const person1 = new Person("일분이", 10);
const person2 = new Person("이분이", 8);
person1.introduce();
person2.introduce();개선해보기
위의 코드에서 보자면 this.introduce는 각 nickname과 age의 인스턴스를 가지고 있기 때문에 일분이와 이분이의 메모리를 점유하고 있다는 뜻이다. 이 코드는 메모리 사용면에서 비효율적이기 때문에 공통으로 쓰는 메소드는 "프로토타입"이라는 객체에 추가를 해준다.
// 생성자(constructor)
function Person(nickname, age) {
this.nickname = nickname;
this.age = age;
}
Person.prototype.introduce = function() {
console.log("안녕하세요? 저는" + this.nickname + "이고, 나이는" + this.age + "살이에요.");
}
// 인스턴스(instance)
const person1 = new Person("일분이", 10);
const person2 = new Person("이분이", 8);
person1.introduce();
person2.introduce();프로토타입 객체는 함수 하나에 쌍으로 단 하나씩있기 때문에, 개별 인스턴스들이 메소드와 속성들을 공유하게 된다. 정리하자면, nickname과 age 처럼 개별 값이 들어와야 하는 속성들은 생성자에서, 공유하는 값을 가지고 있다면 prototype 객체에서 처리를 해줄 수 있다.
카드게임 예시를 들어보자
두 카드는 공통된 width와 height값을 가지고 있다.(프로토타입)
생성자를 이용해서 실제로 코드로 구현을 해보자.
※ 이때 Card.prototype을 세팅을 해줄때 원래의 constructor를 선언해주어야 한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie-edge">
<title>Object</title>
<style>
.card {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100px;
height: 150px;
border: 2px solid black;
border-radius: 10px;
font-size: 3rem;
font-weight: 900;
}
</style>
<body>
<script>
function Card(num, color) {
this.num = num;
this.color = color;
this.init();
}
Card.prototype = {
constructor: Card,
init: function() {
const mainElem = document.createElement('div');
mainElem.style.color = this.color;
mainElem.innerHTML = this.num;
mainElem.classList.add('card');
document.body.appendChild(mainElem); // 조립
}
}
const Card1 = new Card(1, 'green');
const Card2 = new Card(2, 'blue');
</script>
</body>
</html>
마무리
이렇게 자바스크립트의 오브젝트에 관해서 학습을 해보았고, 객체를 생성, 생성자와 프로토타입 객체를 익혀서 만들어낸 UI는 컴포넌트처럼 분리해내 필요한 부분을 유지 보수하기가 훨씬 용이해진다는 것을 알 수 있었다.
'Front End' 카테고리의 다른 글
| 인터랙티브 웹 개발 제대로 시작하기-Transition이벤트 (0) | 2022.02.10 |
|---|---|
| 인터랙티브 웹 개발 제대로 시작하기-스크롤 다루기 (0) | 2022.02.05 |
| 인터랙티브 웹 개발 제대로 시작하기-자바스크립트 이벤트 다루기 (0) | 2022.01.07 |
| 인터랙티브 웹 개발 제대로 시작하기-인터랙티브 웹 개발을 위한 자바스크립트 시작하기 (0) | 2021.12.26 |
| 인터랙티브 웹 개발 제대로 시작하기-CSS Flex (0) | 2021.12.18 |
