(49) [JavaScript] 5일 JavaScript 객체

객체(Object)란?
객체는 JavaScript 언어 만이 가지고 있는 특징의 기초를 이루는 자료형으로,
데이터를 저장하고 있는 프로퍼티 및 프로퍼티에 저장된 데이터에 조작을 가 할 수 있는
method의 집합으로 구성된다.

프로토타입 기반 언어

자바스크립트는 클래스 기반이 아닌 `프로토타입`을 기반으로하는 객체 기반 언어이다. 프로토타입 기반 언어는 프로토타입 객체라는 개념이 있으며, 새로운 객체의 초기 속성을 가져오는 템플릿으로 사용되는 객체이다. 객체 원형인 프로토타팁을 이용하여 새로운 객체를 만들며, 생성된 객체는 또 다른 객체의 원형이 될 수 있다. 프로토타입 언어는 클래스 없이 객체를 생성할 수 있다.

객체 생성 방법

객체 이니셜라이저 또는 리터털
생성자 함수
Object.create메소드

위와 같은 방법으로 생성되어 메모리에 대입된 객체를 인스터스라고 한다.

</head>
<body>

	<h3>객체-생성</h3>

	<script type="text/javascript">
		var s;

		//1.객체생성-객체리터널 이용
		//var obj = {}; // 빈객체 
		var obj = {
			name : '이자바',
			age : 20
		};
		console.log(obj.name, obj.age);

		//속성값 변경
		obj.name = '다자바';
		console.log(obj.name, obj.age);

		//동적으로 속성 추가
		obj.city = '서울';
		console.log(obj.name, obj.age, obj.city);

		var obj2 = {};
		obj2.subject = '자바'; // 동적으로 속성 추가 
		obj2.score = 90;
		console.log(obj2.subject, obj2.score);

		//2.객체생성-객체리터널 이용 : 속성과 메소드
		var obj3 = {
			name : '홍길동',
			age : 20,
			state : function() {
				return this.age >= 19 ? '성인' : '미성년자';
			},
			msg : function() {
				//let s = state(); // 에러 
				let s = this.state();

				let m = `이름 : &{this.name},나이:${this.age},&{s}`;
				console.log(m);
			}
		};
		
		obj3.msg();
		
	</script>

</body>
</html>

</head>
<body>

	<h3>객체 생성- 생성자를 이용한 객체 생성</h3>

	<script type="text/javascript">
	//객체 생성 - 생성자 함수를 이용한 객체 생성 
	
	//생성자 함수 만들기
	function User(name,age) {
		this.name=name; // 프리퍼티(속성)
		this.age=age;
		
		//메소드 
		this.state=()=> this.age >= 19? '성인' : '미성년자';
		this.msg = function() {
			let s = this.state();
			let m = `이름:${this.name},나이:${this.age},${s}`;
			console.log(m);
		};
	}
	//생성자 함수를 이용하여 객체 생성
	var obj = new User('김자바',21);
	obj.msg();
    
	</script>

</body>
</html>

</head>
<body>

	<h3>객체</h3>

	<script type="text/javascript">
	//생성자 함수
	
	function User(name) {
		this.name=name;
	}
	
	var obj=new User('자바');
	console.log(obj instanceof User); // true 
	console.log(obj instanceof Object); // true
	
	var obj2 = {};
	console.log(obj2 instanceof Object); // true 
	</script>

</body>
</html>

</head>
<body>

	<h3>객체 - this</h3>
	
	<script type="text/javascript">
	//객체의 메소드를 호출할 때의 메소드 내의 this : 해당 메소드 호출 객체
	var obj = {
		name : '다자바',
		sayName : function() {
			//console.dir(this);
			console.log(this.name);
		}
			
	};
	obj.sayName();
	
	//new로 생성자 함수를 호출할때 생성자 함수의 this : 새로 생성된 객체
	function Test(arg) {
		this.name=arg;
		
		this.getName=()=>this.name;
	}
	
	var obj2 = new Test('홍길동');
	console.log(obj2.getName());
	
	//일반함수 : 일반 함수안의 this -> 전역객체(window)
	var user='스프링'; // 전역 변수. 전역 변수는 window의 속성 
	var sayUser = function () {
		console.log(this.user,user,window.user);
	};
	
	sayUser();
	
	//객체에서 this는 자신을 나타내지만, 다른 곳에서는 window를 나타내므로 주의 필요 
	
	</script>
</body>
</html>

</head>
<body>

	<h3>form 요소의 이벤트 핸들러 안에서의 this : 이벤트를 발생 시킨 객체 자기 자신</h3>
	<p>form 요소 안에서의 this.form : 현재 객체의 form 객체 </p>
	<form name="myForm">
		<p>
			이름 : <input type="text" name="name">
		</p>
		<p>
			국어 : <input type="text" name="kor" onchange="validate(this);">
		</p>
		<p>
			영어 : <input type="text" name="emg" onchange="validate(this);">
		</p>
		<p>
			수학 : <input type="text" name="mat" onchange="validate(this);">
		</p>
		<p>
			<button type="button" onclick="send(this.form);">확인</button>
		</p>
	</form>

	<script type="text/javascript">
		function send(f) {
			//const f = document.myForm;

			const inputELS = document.querySelectorAll('form input[type=text]');
		
			
			for(let el of inputELS){
				if(! el.value.trim()){
					el.focus();
					return;
				}
			}
			
			 
			/*
			 for (let i = 0; i < inputELS.length; i++) {
				if (inputELS[i].value.trim()) {
					inputELS[i].focus();
					return;
				}

				if (i >= 1 && validate(inputELS[i]) === false) {
					return;
				}

			}
			*/

			let name = f.name.value;
			let kor = f.kor.value;
			let eng = f.eng.value;
			let mat = f.mat.value;

			let s = `${name}:${kor},${eng},${mat}`;
			alert(s);
		}

		function validate(inputEL) {
			if (!/^\d{1,3}$/.test(inputEL.value)) {
				inputEL.value = '';
				inputEL.focus();
				return false;
			}
			if (parseInt(inputEL.value) > 100) {
				inputEL.value = '';
				inputEL.focus();
				return false;
			}

			return true;
		}
	</script>


</body>
</html>

구문 전개

</head>
<body>


	<h3>구문 전개</h3>
	<!-- 
		- 배열이나 문자열과 같이 반복 가능한 값을 0개 이상의 인수(함수로 호출할 경우) 또는 
		  요소(배열 리터널인 경우)로 확장하여 0개 이상의 키-값 쌍으로 객체로 확장 시킬수 있다. 
	 -->

	<script type="text/javascript">
	function sum(x,y,z) {
		return x+y+z;
	}
	
	const nums=[10,20,30];
	
	//var s = sum(nums); // 10,20,30undefinedundefined <- 이상한 현상
	//var s=sum.apply(null,nums);
	var s=sum(...nums);
	console.log(s);
	
	// 객체 리터널에 속성은 전개 : 제공된 객체가 소유한 열거형 프로퍼티를 새로운 객체로 복사
	var obj1 = {name:'홍길동',age:20};
	var obj2 = {name:'김자바',city:'서울'};
	
	var obj3 = obj1; // 하나의 객체를 두변수가 참조 
	console.log(obj3===obj1); // true
	obj3.name='다자바';
	console.log(obj1.name); // 다자바
	
	
	//obj1 객체를 복제해서 새로운 객체 만들기 
	var cloneObj = {...obj1};
	console.log(cloneObj.name); //다자바 
	console.log(cloneObj===obj1); // false
	
	var mobj = {...obj1,...obj2}
	console.log(mobj);
	
	
	</script>
</body>
</html>

</head>
<body>

	<h3>객체-동적으로 프로퍼티 추가</h3>
	
	<script type="text/javascript">
	var obj = {
			name :'다자바'
	};
	
	console.log(obj.name); // 다자바 
	console.log(obj.age); // undefined
	
	//동적으로 속성 추가
	obj.age=20;
	console.log(obj.age); // 20
	
	
	//속성제거 
	delete obj.name;
	console.log(obj.name);
	
	</script>


</body>
</html>

</head>
<body>

	<h3>객체 -프로퍼티 나열 및 접근</h3>

	<script type="text/javascript">
		var obj = {
			name : '하자바',
			age : 20,
			result : function() {
				return this.age >= 19 ? '성인' : '미성년자';
			}

		};

		//객체의 속성 접근
		console.log(obj, name); // 도트 표기법으로 접근
		console.log(obj['name']); //대괄호 표기법으로 접근

		//메소드 접근
		console.log(obj.result());

		//객체의 프로퍼티 나열 
		for ( let o in obj) {
			// o : 속성이름
			// 프로퍼티 : o -> name,obj[o] -> 하자바
			// 메소드 : o -> result,obj[o]->f(){소스}
			console.log(o, obj[o]);

		}
		console.log('----------------------');

		//객체에 프로퍼티 존재 여부 확인 
		console.log('name' in obj); // true
		console.log('city' in obj); // false
		
		//console.log(obj.name);
		
		with(obj){
			console.log(name); // obj.name
			console.log(age); // obj.age
		}
		
		
		
		
		
		</script>

</body>
</html>

</head>
<body>

	<h3>객체 - 메소드 추가</h3>
	
	<script type="text/javascript">
	function User(name,age) {
		this.name=name;
		this.age=age;
	}
	
	var obj = new User('아저씨',20);
	obj.score = 80; // obj 객체에 scroe 속성 추가 
	obj.state = function () { // obj 객체에 state() 메소드 추가  
		return this.age >=19? '성인': '미성년자';
	};
	console.log(obj.name,obj.score);
	console.log(obj.state());
	
	var obj2 = new User('남균할배',29);
	console.log(obj2.name,obj2.score); // 남균할배 undefined  
	
	console.log(obj2.state()); // obj2.state is not a function 에러 함수는 없으면 호출할수없다 
	
	
		</script>
	
	

</body>
</html>

</head>
<body>


	<h3>객체 - 메소드 / 프로퍼티 추가</h3>
	<!-- 
		- prototype 프로퍼티
		: 생성자 함수에 존재
		: 생성자로 생성되는 객체에 물려줄 프로퍼티와 메소드를 가지고 있음 
	 -->


	<script type="text/javascript">
		function User(name) { // 생성자
			this.name = name; // 프로토타입에 추가
			this.age = 20; // 프로토타입에 추가. 기본값을 가질 수 있음
			this.state = function() { //프로토타입에 추가 
				return this.age >= 19 ? '성인' : '미성년자';
			};
		}

		console.dir(User); // prototype 프로퍼티를 확인

		// User 생성자의 prototype에 scroe 라는 속성 추가
		User.prototype.score = 80;
		// User 생성자의 prototype에 msg 라는 메소드 추가 
		User.prototype.msg = function() {
			console.log(this.name + ':' + this.state() + ':' + this.score);
		};

		var obj = new User('이자바');
		console.log(obj.age);
		console.log(obj.state());
		obj.msg();
		console.log('--------------------');

		var obj2 = new User('스프링');
		obj2.age = 17;
		console.log(obj2.age);
		console.log(obj2.state());
		obj2.msg();
		console.log('--------------------');

		
		</script>

</body>
</html>

</head>
<body>

	<h3>객체 : 정적 메소드</h3>

	<script type="text/javascript">
		//정적 메소드 : 생성자의 속성에 직접 지정된 메소드 
		function User(nmae) { // 생성자
			this.name = name;
			this.getName = function() {
				return this.name;
			};
		}

		User.state = function(age) { // 정적 메소드 
			return age >= 19 ? '성인' : '급식';
		};

		let obj = new User('한별')
		console.log(obj.getName());

		//console.log(User.getName()); // 에러.객체를 생성해야 접근 가능
		console.log(User.state(17)); // static 메소드 호출 
		
		
	</script>

</body>
</html>

구조분해

구조분해(비구조화) 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다.

배열 구조 분해

</head>
<body>

	<h3>구조분해</h3>
	<!-- 
		구조분해(비구조화)할당 구문은 배열이나 객체의 속성을 해제하여 
		그 값을 개별 변수에 담을 수 있는 자스 표현식 
	 -->

	<script type="text/javascript">
	 // 배열 구조 분해
	 
	 //기본 변수 할당
	 var arr = [10,20,30];
	 var [a,b,c]=arr;
	 console.log(a,b,c,a+b+c);
	 
	 //선언에서 분리하여 할당
	 var x, y;
	 //x = 10; y=20;
	 [x,y]=[1,2];
	 console.log(x,y);
	 
	 //기본값
	 var x2,y2;
	 [x2=10,y2=20]=[1];
	 console.log(x2,y2);//1 20
	 
	 //변수 값 교환 
	 var m = 10;
	 var n = 5;
	 [m,n]=[n,m];
	 console.log(m,n);
	 
	 
	 //함수의 반환값인 배열을 분해 
	 function f() {
		let aa = [10,20,30];
	
		return aa;
	}
	 
	 var [a3,b3,c3] = f();
	 console.log(a3,b3,c3);
	 
	 
	 //변수에 배열의 나머지 값 할당
	 var arr4 = [1,3,5,7,9];
	 var [a4,...b4]=arr4;
	 console.log(a4); // 1
	 console.log(b4); //[3,5,7,9]
	 
	 
	 
	 
	 </script>


</body>
</html>

</head>
<body>

	<h3>구조분해</h3>

	<script type="text/javascript">
	//객체 구조 분해 
	
	var obj = {name:'홍길동',age:20};
	var {name,age}=obj; // 변수명이 속성명과 동일 
	console.log(name,age);
	
	//var{p,q}=obj;
	//console.log(p,q); undefined undefined//
	var{name:p,age:q}=obj ;
	console.log(p,q);
	
	
	var a2,b2;
	({a2,b2}={a2:1,b2:2}); // 선언 없는 할당 
	console.log(a2,b2);
	
	//기본값
	var {x=10,y=5}={x:3};
	console.log(x,y); // 3 5
	
	
	var {n:nn=10,m:mm=15}={n:5};
	console.log(nn,mm); // 5 undefined 
	
	
	
	
	</script>


</body>
</html>

'💻 > Javascript' 카테고리의 다른 글

(50) [JavaScript] 6일 JavaScript 객체 - DOM (1)	2024.04.28
(50) [JavaScript] 6일 JavaScript 객체 - 클래스 (1)	2024.04.28
(49) [JavaScript] 5일 JavaScript 내장객체 (0)	2024.04.28
(48) [JavaScript] 4일 JavaScript Array (0)	2024.04.24
(47) [JavaScript] 3일 JavaScript 내장객체 (0)	2024.04.23

Power Up!

(49) [JavaScript] 5일 JavaScript 객체 - 생성, 구조분해

프로토타입 기반 언어

객체 생성 방법

구문 전개

구조분해

배열 구조 분해

'💻 > Javascript' 카테고리의 다른 글

티스토리툴바

(49) [JavaScript] 5일 JavaScript 객체 - 생성, 구조분해

프로토타입 기반 언어

객체 생성 방법

구문 전개

구조분해

배열 구조 분해

'💻 > Javascript' 카테고리의 다른 글

관련글

티스토리툴바