JavaScript_Object_개념

<객체>

 

1) 객체 선언 및 호출

2) 객체의 메소드 속성

3) 객체와 반복문

4) 객체 속성 추가 및 제거

5) 객체배열

 

1) 객체 선언 및 호출

: 중괄호{ }를 사용하여 객체를 생성하고, 속성에는 모든 자료형이 올 수 있다.

: 객체의 키 값을 사용하여 속성을 식별한다.

 

1-1) 객체명['속성명']

<script>
	function test1(){
    	var product = {
            pName: 'Dry Mango',
            type: 'pickle',
            ingredient: ['mango', 'suger'],
            origin: 'Philippines'
        };
    	
        console.log(product['pName']);//Dry Mango
        console.log(product['type]);//pickle
	console.log(product['ingredient'])//(2) ['mango', 'suger']
        console.log(product['origin'])//Philippines
    }

</script>

방법1-객체 안의 속성 접근하기

 

 

 

1-2) 객체명.속성명

function{
	var product = {
    	pName:'Dry Mango',
    	type:'pickle'
        ingredient:['mango', 'sugar'],
        origin:'Philippines'
    };
	
	console.log(product.pName);//Dry Mango
    console.log(product.type);//pickle
    console.log(product.ingredient);(2) ['mango', 'sugar']
    console.log(product.origin);//Philippines
}

 

그 외의 키로 특수문자가 가능할 때

function test1(){
	var objTest = {
    	'k$ey' : 'value1',
        'k_ey' : 'value2',
        'k ey' : 'value3'
    };
    console.log(objTest['k$ey']);
    console.log(objTest['k_ey']);
    console.log(objTest['k ey']);
    
    console.log(objTest.k$ey);
    console.log(objTest.k_ey);
    //console.log(objTest.k ey);--에러
}

띄어쓰기를 쓰면 키 자체에 문제가 생길 수 있다--> 대괄호로 감싸면 사용가능하긴하다.

 

2) 객체의 메소드 속성

<button onclick="test2();">실행확인</button>
<script>
	function test2(){
    	var satoori = {//사투리라는 객체 생성
        	area1:'전라도',//필드
        	area2:'경상도',
        	song: function(act){
        		var area2 = '강원도';
            	console.log(this.area1 + '와' + this.area2 + '는' + act);
        	}
        };
        satoori.song('사이가 좋다')
	}
</script>

song은 함수를 가지고 있기 때문에 메소드의 역할을 한다.

area1은 전라도+와+area2는 경상도+act는 song이라고하는것을 실행시킨다했을때 매개변수 act를 받아오기때문에 act다.

this를 쓰지않으면 강원도가 출력된다.

객체 안에서 내 속성을 호출할 때는 반드시 앞에 this가 들어가야한다.

 

3) 객체와 반복문_for in문

: 객체의 속성을 살펴볼 때는 단순 for문으로는 불가능하고 for in문 사용해야한

<button onclick="test3();">실행확인</button>
<script>
	function test3(){
    	var movie = {
        	title: '신비한 동물의비밀'
        	release: '2022-04'
        	director: '데이빗 예이츠'
            mainActor: ['에디 레드메인', '주드 로', '매즈 미켈슨', '댄 포글러', '앨리슨 수돌'],
            screening: true
        };
        for(var i in movie){
        	console.log(i);//screening
            console.log(i + " : " + movie[i]);//screening : true
        }
	}
</script>

for in 문에서 배열을 가지고 사용할 때 앞에 있는 변수에 담기는 값은 배열의 인덱스가 담긴다.

for in 문에서 객체를 가지고 사용할 때 앞에 있는 변수에 담기는 값은 객체의 키가 담긴다.

 

4) 객체 속성 추가 및 제거_delete(변수명.속성명)

: 처음 객체 생성 이후 속성을 추가하거나 제거하는 것을 '동적으로 속성을 추가/제거한다'라고 한다.

<button onclick="test4();">실행확인</button>	
	<script>
		function test4(){
			var student = {};
			console.log(student);
			//객체명.속성 = 강건강 값을 집어넣음.-->속성도 만들고 값도 집어넣음.
			student.name = '강건강';
			student.hobby = '운동';
			student['strength'] = '100m 달리기';
			student['dream'] = '체육관 관장';
			
			//toString(그냥이름)에 함수넣기, 객체에 대한 대표값을 나타낸다는 효과를 나타내기 위해서 이름을 toString이 이름인 메소드를 만듬.
			student.toString = function(){
				var str = '';
				for(var key in this){//이미 스튜던트안에 있기때문에 student->this로 변경해서 사용한다
					if(key != 'toString'){//toString의 내용부분을 제외 시키기위해toString 제외할 수 있는 반복문작성.키값만 넣어야하는데 투스트링도 같이 출력되어서 빼주는 역할
					
					str += key + " : " + this[key] + " // ";
					}					//스튜던트의 키값
				}						 
				
				return str;
			}
			
			console.log(student);
//			for(var key in student){
//				console.log(key);
//				console.log(student[key]);
//			}
			console.log(student.toString());
			
			delete(student.hobby);//hobby삭제
			
			console.log(student);
			
		}
	</script>

 

5) 객체배열

 

<button onclick="test5();">실행확인</button>
	<script>
		function test5(){
			var student0 = {name: '강건강', java:85, oracle:13, HTML:94, CSS:53, js:99};
			var student1 = {name: '남나눔', java:39, oracle:75, HTML:14, CSS:78, js:47};
			var student2 = {name: '도대담', java:42, oracle:87, HTML:85, CSS:14, js:74};
			var student3 = {name: '류라라', java:85, oracle:15, HTML:95, CSS:41, js:55};
			var student4 = {name: '문미미', java:34, oracle:94, HTML:45, CSS:81, js:85};
			var student5 = {name: '박보배', java:37, oracle:56, HTML:75, CSS:83, js:68};
			var student6 = {name: '송성실', java:94, oracle:34, HTML:24, CSS:65, js:86};
			var student7 = {name: '윤예의', java:66, oracle:45, HTML:22, CSS:89, js:98};
			var student8 = {name: '정재주', java:13, oracle:61, HTML:94, CSS:78, js:79};
			var student9 = {name: '차청춘', java:95, oracle:65, HTML:74, CSS:97, js:66};
			
			var students = [];
			students.push(student0);
			students.push(student1);
			students.push(student2);
			students.push(student3);
			students.push(student4);
			students.push(student5);
			students.push(student6);
			students.push(student7);
			students.push(student8);
			students.push(student9);
			//controll+shift+c = 주석
			
			console.log(students);
			
			for(var i in students){//students의 배열 인덱스i
				students[i].getSum = function(){//i번째 객체
					var sum = 0;
					for(var key in this){//이미 students 안에 있기 때문에 this로 사용
						if(key != 'name' && key != 'getSum' && key != 'getAvg'){//name과 getSum이 아니면 넣겠다는 뜻.
							 sum += students[i][key];//students i는 배열안에 있는i번째의 객체-->[key]키 속성값을 가져오는것 : 객체명['속성명'] 사용
						}
					}
					return sum;
				}
				students[i].getAvg = function(){
					return this.getSum() / 5;
				}
			}
			for(var i in students){
				console.log('이름 : ' + students[i].name + ", 총점 : " + students[i].getSum()
						+ ", 평균 : " + students[i].getAvg());
			}
		}
	</script>

**this를 활용, key 속성값 가져오는거 체크