📚 [JavaScript] 객체

📕 객체

1. 객체(object)

프로그램에서 인식할 수 있는 모든 대상

2. 인스턴스(instance)

🎁 문법

new 객체이름

🎈 예제

<script>
var now = new Date();
document.write("현재 시각은 " + now); //현재 시각은 Fri Apr 08 2022 4:00:00 GMT+0900 (한국 표준시)
</script>

3. 프로퍼티(property)

객체의 특징이나 속성

🎁 문법

객체이름.프로퍼티이름
객체이름["프로퍼티이름"]

🎈 예제

<script>
var person = {
	name: "이가뿡",
	age: "21",
	nameage: function () {
		return this.name + this.age;
	}
}
document.write(person.name); //이가뿡
document.write(person["name"]); //이가뿡
</script>

4. 메소드(method)

객체에서 할 수 있는 동작

🎁 문법

객체이름.메소드이름()

🎈 예제

<script>
var person = {
	name: "이가뿡",
	age: "21",
	nameage: function () {
		return this.name + this.age;
	}
}
document.write(person.nameage()); //이가뿡21
document.write(person.nameage); //function () { return this.name + this.age; }
</script>

✔ 괄호(())를 붙이지 않으면 메소드가 아닌 프로퍼티 그 자체를 참조하게 된다!

📙 객체 생성 방법

1. 리터럴 표기를 이용한 방법

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

🎁 문법

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

🎈 예제

<script>
var person = {
	name: "이가뿡",
	age: "21",
}
document.write("이름은 " + person.name + "이고, 나이는 " + person.age + "살입니다"); //이름은 이가뿡이고, 나이는 21살입니다
</script>

2. 생성자 함수를 이용한 방법

new 연산자를 사용하여 객체를 생성하고 초기화한다

🎈 예제

<script>
var now = new Date();
document.write("현재 시각은 " + now.toLocaleString()); //현재 날짜와 시간 정보를 로컬 형식으로 바꿔준다
//현재 시각은 2022. 4. 8. 오후 4:00:00
</script>

3. Object.create() 메소드를 이용한 방법

지정된 프로토타입 객체와 프로퍼티를 가지고 새로운 객체를 만들어준다

🎁 문법

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

🎈 예제

<script>
var xy = Object.create(null, { //null 프로토타입을 사용하여 새로운 객체를 만든다
	x: { value: 100, enumerable: true }, //x좌표를 나타내는 열거할 수 있는 프로퍼티 추가
    y: { value: 200, enumerable: true } //y좌표를 나타내는 열거할 수 있는 프로퍼티 추가
});
document.write(xy.x); //100
document.write(xy.y); //200
</script>

📒 표기법

1. 점 표기법

인스턴스명 뒤에 마침표(.)를 붙이고 객체의 프로퍼티나 메소드 이름을 작성한다

🎁 문법

객체이름.프로퍼티이름

🎈 예제

<script>
var obj = {
	'name' : '이가뿡',
	'name-21' : '이가뿡-21'
}

// 점 표기법
document.write(obj.name); //이가뿡
document.write(obj.name - 21); //NaN
//식별자 규칙 위반
</script>

2. 괄호 표기법

🎁 문법

객체이름['프로퍼티이름']

🎈 예제

<script>
var obj = {
	'name' : '이가뿡',
	'name-21' : '이가뿡-21'
}

// 괄호 표기법
document.write(obj['name']); //이가뿡
document.write(obj['name-21']); //이가뿡-21
</script>

✔ 괄호 표기법은 속성을 식별자나 변수로 접근해야 하는 경우에 사용하면 좋다!

📗 this 키워드

해당 키워드가 사용된 자바스크립트 코드 영역을 포함하고 있는 객체를 가리킨다

1. 함수 호출

🎈 예제

<script>
var win = function () {
	document.write(this);
}
win(); //[object Window]
</script>

✔ this는 전역 객체를 가리킨다

2. 메소드 호출

🎈 예제

<script>
var person = {
	name: '이가뿡',
	printName: function () {
		document.write(this.name);
	}
}
person.printName(); //이가뿡
</script>

✔ this는 해당 메소드를 소유한 객체를 가리킨다