[JavaScript] #05_ 객체(Object)

객체 선언 및 호출

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

중괄호{ }내부에   속성명(키): 값  형태로 작성한다.
(작성형식이 Map과 비슷. 내부에 작성한 속성의 순서가 유지되지 않는다는 것도 체크포인트)

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

 

객체 안의 속성 접근하기

1) 객체명['속성명']
속성명(키)에 띄어쓰기를 사용했을 경우에는 이 방법으로만 가능

console.log(product['pName']);

2) 객체명.속성명
속성명에 띄어쓰기가 포함되어 있으면 이 방법은 불가능하다.

console.log(product.pName);

 

객체의 메소드 속성

---> 해당 코드에서의 song이 함수를 가지고 있기 때문에 메소드와 같은 역할을 하고 있는 것.

** 객체안의 함수안에서 함수 밖의 객체안에 있는 속성을 호출할때는 반드시 앞에 this.를 붙여야 한다. **

** this를 붙이지 않을 경우에는 객체안의 함수안에 있는 속성을 나타낸다.

 

객체와 반복문

객체의 속성을 살펴볼때는 단순 for문으로는 불가능하고 for in문을 사용해야 한다.
** for in문에서 객체를 가지고 사용할때는 앞에 있는 변수에 담기는 값은 객체의 키가 담긴다.
(!!배열을 가지고 사용할 때는 배열의 인덱스가 담긴다!!)

 

객체 속성 추가 및 제거

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

 

속성 추가

객체명.키 = 값          -->객체에 해당 키의 속성을 만들고 안에 값을 집어넣어줌.
객체명['키'] = 값

보기 편하게 toString()를 출력해보자.

toString안에 있는 내용(함수 코드 내용 전부)이 전부 출력이 된다.

코드 내용이 궁금한 것은 아니므로 키값이 toString이 아닐때만 출력하게끔 조건을 걸어준다.

속성 제거

delete(객체.속성)

 

속성에 접근하여 연산값 넣기

<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);
			
		console.log(students);		//배열에 객체들이 들어감. 객체 배열
			
		for(var i in students){		//i에는 배열의 인덱스가 들어간다.
			students[i].getSum = function(){	//students[i] ==> 배열안에 있는 i번째에 대한 객체값
				var sum = 0;
				for(var key in this){
					if(key != 'name' && key != 'getSum' && key != 'getAvg'){
						sum += students[i][key];	
						//students[i][key]  ==> students배열의 i번째 객체의 key속성값
					}	//key가 name, getSum, getAvg가 아닌 i번째 객체의 안에 있는 속성값들을 다 더하겠다.
				}
					
				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>