Class19(객체 기본)

2022-06-03 3 분 소요

2022. 06. 02. 수업내용 정리

객체 ..개념, 생성

객체

객체(object)란 실생활에서 우리가 인식할 수 있는 사물로 이해할 수 있습니다.
- 예시
  
  객체(object)
  - 고양이
  프로퍼티(property)
  - cat.name = ‘나비’
  - cat.family = ‘코리한 숏 헤어’
  - cat.age = 1
  - cat.weight = 800
  메소드(method)
  - cat.mew()
  - cat.eat()
  - cat.sleep()
  - cat.play()
  고양이 객체는 모두 위와 같은 프로퍼티 가지지만, 각 프로퍼티의 값은 인스턴스마다 전부 다를 것입니다.
자바스크립트 객체

객체란 이름(name)과 값(value)으로 구성된 프로퍼티(property)의 정렬되지 않은 집합입니다.

프로퍼티의 값으로 함수가 올 수도 있는데, 이러한 프로퍼티를 메소드(method)라고 합니다.
```
<!DOCTYPE html>
<html lang="ko">
  
<head>
	<meta charset="UTF-8">
	<title>JavaScript Object</title>
</head>
  
<body>
  
	<h1>객체의 개념</h1>
  
	<script>
		var cat = "나비"; // 일반적인 변수의 선언
		// 객체도 많은 값을 가지는 변수의 하나임.
		var kitty = { name: "나비", family: "코리안 숏 헤어", age: 1, weight: 0.1 };
  
		document.write(cat + "<br>");
		document.write(kitty.name);
	</script>
  	
</body>
  
</html>
```
웹페이지 화면 ▼

자바스크립트에서는 숫자, 문자열, 불리언, undefined 타입을 제외한 모든 것이 객체입니다.

하지만 숫자, 문자열, 불리언과 같은 원시 타입은 값이 정해진 객체로 취급되어, 객체로서의 특징도 함께 가지게 됩니다.

객체 프로퍼티 참조

문법
객체이름.프로퍼티이름
  
또는
  
객체이름["프로퍼티이름"]

<!DOCTYPE html>
<html lang="ko">
  
<head>
	<meta charset="UTF-8">
	<title>JavaScript Object</title>
</head>
  
<body>
  
	<h1>객체의 프로퍼티 참조</h1>
  
	<script>
		var person = {
			name: "홍길동",			// 이름 프로퍼티를 정의함.
			birthday: "030219",		// 생년월일 프로퍼티를 정의함.
			pId: "1234567",			// 개인 id 프로퍼티를 정의함.
			fullId: function() {	// 생년월일과 개인 id를 합쳐서 주민등록번호를 반환함.
				return this.birthday + this.pId;
			}
		};
  
		document.write(person.name + "<br>");	// 홍길동
		document.write(person["name"]);			// 홍길동
	</script>
  	
</body>
  
</html>

웹페이지 화면 ▼

객체예시3

객체의 메소드 참조

<!DOCTYPE html>
<html lang="ko">
  
<head>
	<meta charset="UTF-8">
	<title>JavaScript Object</title>
</head>
  
<body>
  
	<h1>객체의 메소드 참조</h1>
  
	<script>
		var person = {
			name: "홍길동",			// 이름 프로퍼티를 정의함.
			birthday: "030219",		// 생년월일 프로퍼티를 정의함.
			pId: "1234567",			// 개인 id 프로퍼티를 정의함.
			fullId: function() {
				return this.birthday + this.pId;
			}
		};
  
		document.write(person.fullId() + "<br>");	// 0302191234567
		document.write(person.fullId);				// function () { return this.birthday + this.pId; } 
	</script>
  	
</body>
  
</html>

웹페이지 화면 ▼

객체예시4

★ 메소드를 참조할 때 메소드 이름 뒤에 괄호(( ))를 붙이지 않으면, 메소드가 아닌 프로퍼티 그 자체를 반환하게 됩니다.

객체의 생성
1. 리터럴 표기(literal notation)를 이용한 방법
2. 생성자 함수(constructor function)를 이용한 방법
3. Object.craete() 메소드를 이용한 방법
위와 같은 방법으로 생성되어 메모리에 대입된 객체를 인스턴스(instance)라고 합니다.

리터럴 표기를 이용한 객체의 생성

자바스크립트에서 객체를 생성하는 가장 쉬운 방법은 리터럴 표기(literal notation)를 이용하는 방법입니다.

문법
var 객체이름 = {
  
    프로퍼티1이름 : 프로퍼티1의값,
  
    프로퍼티2이름 : 프로퍼티2의값,
  
    ...
  
};

각각의 프로퍼티는 이름과 값을 콜론(:)으로 연결하고, 쉼표(,)를 사용해 다른 프로퍼티와 구분합니다.

프로퍼티의 이름으로는 자바스크립트의 식별자(identifier)나 문자열을 사용할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
  
<head>
	<meta charset="UTF-8">
	<title>JavaScript Object</title>
</head>
  
<body>
  
	<h1>객체 이니셜라이저를 이용한 객체 생성</h1>
  
	<script>
		var kitty = {
			name: "나비",
			family: "코리안 숏 헤어",
			age: 1,
			weight: 0.1
		};
  
		document.write("우리 집 새끼 고양이의 이름은 " + kitty.name + "이고, 종은 " + kitty.family + "입니다.");
	</script>
  	
</body>
  
</html>

웹페이지 화면 ▼

객체예시5

생성자를 이용한 객체의 생성

new 연산자를 사용하여 객체를 생성하고 초기화할 수 있습니다.

이때 사용하는 메소드를 생성자(constructor)라고 하며, 이 메소드는 새롭게 생성되는 객체를 초기화하는 역할을 합니다.

자바스크립트는 원시 타입을 위한 생성자를 미리 정의하여 제공합니다
```
<!DOCTYPE html>
<html lang="ko">
  
<head>
	<meta charset="UTF-8">
	<title>JavaScript Object</title>
</head>
  
<body>
  
	<h1>생성자 함수를 이용한 객체 생성</h1>
  
	<script>
		var day = new Date(); // new 연산자를 사용하여 Date 타입의 객체를 생성함.
  
		document.write("올해는 " + day.getFullYear() + "년입니다.");
	</script>
  	
</body>
  
</html>
```
웹페이지 화면 ▼

위의 예제처럼 자바스크립트에서 제공하는 생성자를 사용할 수도 있으며, 사용자가 직접 객체 생성자 함수(object constructor function)를 작성하여 사용할 수도 있습니다.

object.create() 메소드를 이용한 객체의 생성

지정된 프로토타입(prototype) 객체와 프로퍼티를 가지고 새로운 객체를 만들어 줍니다.

따라서 이 메소드를 이용하면 사용자가 프로토타입 객체를 직접 명시할 수 있으므로, 상당히 유용하게 사용됩니다.

문법
Object.create(프로토타입객체[, 새로운객체의프로퍼티1, 새로운객체의프로퍼티2, ...]);

object.create() 메소드의 첫번째 인수로는 프로토타입으로 사용할 객체를 전달합니다.

두 번째 인수로는 새로운 객체의 추가할 프로퍼티 정보를 전달합니다.

<!DOCTYPE html>
<html lang="ko">
  
<head>
	<meta charset="UTF-8">
	<title>JavaScript Object</title>
</head>
  
<body>
  
	<h1>Object.create() 메소드를 이용한 객체 생성</h1>
  
	<script>
		var obj = Object.create(null, {				// null 프로토타입을 사용하여 새로운 객체를 만들고
            x: { value: 100, enumerable: true },	// x좌표를 나타내는 열거할 수 있는 속성과
            y: { value: 200, enumerable: true }		// y좌표를 나타내는 열거할 수 있는 속성을 추가함.
        });
  
		document.write(obj.x + "<br/>");			// x좌표
		document.write(obj.y + "<br/>");			// y좌표
		document.write(Object.getPrototypeOf(obj));	// 객체의 프로토타입을 반환해 줌.
	</script>
  	
</body>
  
</html>

웹페이지 화면 ▼

객체예시7

Twitter Facebook LinkedIn

Class19(객체 기본)

2022. 06. 02. 수업내용 정리

객체 ..개념, 생성

공유하기

댓글남기기

참고

Class01(pocker project with mfc)

Tip03

Class15(레이어)

Class06(트랜잭션)