Frontend/JavaScript

[JavaScript]객체(Object)

sukii 2024. 1. 5. 13:04
반응형

자바랑 비슷한듯하면서도 뭔가 헷갈리게 하는 자바스크립트의 객체.. 

객체.. 프로토타입.. 이게 다 뭔데 라는 생각이 계속 들었다. 그러다가 TCP School에 정리된 내용이 가장 이해하기 쉬웠다.

 

자바스크립트의 기본 타입(data type)은 객체(object)다.

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

프로퍼티의 값으로 함수가 올 수도 있는데, 이러한 프로퍼티를 메소드(method)라고 한다.

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

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

출처: TCP School

 

⚫Object 클래스 함수
프로퍼티 및 메소드가 하나도 선언되어 있지 않은 클래스 함수로 프로퍼티 또는 메소드가 없는 객체를 생성할 때 사용 - 클래스 함수(클래스)의 기본적인 자료형
생성된 Object 객체에 필요한 프로퍼티 또는 메소드를 추가하여 사용 - 객체를 하나만 생성할 때 사용

 

실습예제👩‍💻

+참고

자바스크립트에서는 Object 객체를 보다 쉽게 생성하기 위해 JSON 기능 제공
JSON(JavaScript Object Notation) : 자바스크립트 객체 표기법 
 => 자바스크립트에서 객체를 쉽게 생성하기 위해 제공하는 표현 방식
 => Object 객체 : { }, Array 객체 : [ ]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
	<script type="text/javascript">
	//new 연산자로 Object 클래스 함수를  호출하여 Object 객체 생성 - Empty Object
	var student=new Object();
	//객체가 저장된 변수를 출력하면 객체를 생성한 클래스 함수를 반환하여 출력
	alert(student);//[object Object]
	
	
	student.num=1000;//객체 요소에 값을 저장하여 프로퍼티 추가
	student.name="홍길동";
	student.address="서울시 강남구 논현동";
	
	//객체 요소에 함수를 저장하여 메소드 추가
	student.display=function() {
		alert("학번 = "+this.num+", 이름 = "+this.name+", 주소 = "+this.address);
	}
	
	student.display();
	
	
	//자바스크립트에서는 Object 객체를 보다 쉽게 생성하기 위해 JSON 기능 제공
	// => Object 객체 : {}, Array 객체 : []
	var student1={};
	
	student1.num=1000;
	student1.name="홍길동";
	student1.address="서울시 강남구 논현동";
	student1.display=function() {
		alert("학번 = "+this.num+", 이름 = "+this.name+", 주소 = "+this.address);
	}
    
	student1.display();
	
	
	//JSON 기능을 사용하면 객체를 생성할 때 미리 프로퍼티 또는 메소드를 추가하여 생성 가능
	//형식) var 객체변수명={"요소명":값,"요소명":값, "요소명": 함수, ... }
	var student2={"num":1000, "name":"홍길동", "address":"서울시 강남구"
		, "display":function() {
			alert("학번 = "+this.num+", 이름 = "+this.name+", 주소 = "+this.address);
		}
	};
    
	student2.display();


	//Object 객체의 메소드는 function 키워드 없이 작성하여 추가 가능 - ES6
	var student3={"num":1000, "name":"홍길동", "address":"서울시 강남구"
		, display() {
			alert("학번 = "+this.num+", 이름 = "+this.name+", 주소 = "+this.address);
		}
	};
	
	student3.display();
	</script>
</body>
</html>
반응형