20211008 객체생성자 함수 실습

1. 실습.

UserInfo 라는객체 생성자 함수를 객체화 하였더니 getUserName 이라는 메서드에 접근이 가능하였다.
getUserName 을 실행 시켰더니 '홍길동' 이라는 문자열이 반환되었다.
위 설명대로 객체 생성자 함수를 선언하고 객체화시켜 getUserName 메서드를 실행하고 결과물을 출력하여라.

 

<script type="text/javascript">
	var UserInfo = function UserInfo(){
		this.getUserName = function(){
			return '홍길동'
		}
	}
	var ui1 = new UserInfo();
	console.log(ui1.getUserName());
	</script>

 

2. 실습. 

MyNumber라는 생성자 함수를 객체화하여 콘솔로 확인 해보니
setNumber 와 getSum이라는 메서드만 존재하는 것을 확인하였다(프로퍼티 없음)
setNumber메서드는 인수2개를 받도로 되어있고 getSum메서드는 인수를 받을 수가 없다.

setNumber메서드 실행 하면서 10과 20을 넣어 getSum메서드를 실행시켜 30이라는 결괏값을 받아 출력하도록 하여라.

 

	<script type="text/javascript">
	var MyNumber = function MyNumber(){
		var num1;
		var num2;
		
		this.setNumber = function(a, b){
			num1 = a;
			num2 = b;
		}
		
		this.getSum = function(){
			return num1+num2;
		}
	}
	var mn = new MyNumber();
	mn.setNumber(10,20);
	console.log(mn.getSum());

	
	</script>

 

3. 실습. 

아래는 학생들의 교고목 성적을 나열하였다. 각 학생들의 최고점수의 교과목과 평균을 구할 수 있는 객체생성자
함수를 구현하도록 하여라.
홍길동 -> java : 80, html : 60, css : 75, javascript : 95
이순신 -> java : 75, html : 66, css : 43, javascript : 78
고길동 -> java : 87, html : 88, css : 74, javascript : 77

 

 

1. 내가 한 풀이 

	<script type="text/javascript">
	
	var Student = function Student(){

		var sum;
		var maxname = '';
		var avg;
		
		
		
		this.setMax = function(n1,n2,n3,n4){
			this.arr1 = [['JAVA',n1],['HTML',n2],['css',n3],['javascript', n4]];
			var max = 0;
			for(var i=0; i<this.arr1.length; i++){
				if(max < this.arr1[i][1]){
					maxname = this.arr1[i][0];
				}
			}
		}
		
		this.getmax = function(){
			return maxname;

		}
		
		this.setavg = function(n1, n2, n3, n4){
			this.arr2 = [['JAVA',n1],['HTML',n2],['css',n3],['javascript', n4]];
			var sum = 0;
			for(var i=0; i<this.arr2.length; i++){
				sum += this.arr2[i][1];
				avg = sum/this.arr2.length
				}
		}
		
		this.getsum = function(){
			return avg;
		
		}
	}

	var person1 = new Student();
	var person2 = new Student();
	var person3 = new Student();
	person1.setMax(80,60,75,95);
	console.log(person1.getmax());
	person1.setavg(80,60,75,95);
	console.log(person1.getsum());

	</script>

피드백 :

1. this 와 var 의 기능을 구분하기

2. 교과목 개수 및 교과목 명이 각 학생별로 다를 수 있다는 가정하에 다시 구성

 

 

2. 선생님 풀이 

<script type="text/javascript">
	var studnetscore = {
			name : '홍길동',
			subject : {java : 80, html: 60, css  : 75, javascript : 95}
	}
	//1. 생성자 함수 선언 - 객체화시 인자를 받을 수 있도록 매개변수 1개 선언
	function StudnetScore(scoreobj){
		/*
			2. 생성자 함수의 메서드 선언
			- 3개의 메서드 생성
			- getname : 학생명을 반환하는 메서드
			- avg : 학생의 교과목  점수 평균을 구하는 메서드
			- maxscroe : 최고 높은 점수의 교과목 이름을 반환하는 메서드
		*/
		/*
		
		studnetscore = scoreobj = 
		즉 아래의 객체
		{			
			name : '홍길동',
			subject : {java : 80, html: 60, css  : 75, javascript : 95}
					
			}
		*/
		this.getName = function(){
				/*
				scoreobj 매개변수에는 객체화시 삽입된 객체를 받았으므로
				name 속성에 학생명이 저장되어있어 호출하여 반환
				
				*/
			return scoreobj.name; //학생명을 리턴
		}
		this.avg = function(){
			/*
			scoreobj.subject -> {java : 80, html: 60, css  : 75, javascript : 95}
			
			
			for(var key in 객체){
				
			}
			위의 for문에 in 키워드 뒤에 객체를 두었을 경우
			대입 데이타(키:값의 한쌍) 수만큼 반복을 시키면서 
			앞 var 변수에 객체 키명이 대입된다.
			java html css javascript
			
			*/
			var subject = scoreobj.subject; //{java : 80, html: 60, css  : 75, javascript : 95}
			var cnt = 0;// 4번 반복 했으니 cnt에 4 대입됨.
			var sum = 0;
			for(var key in subject){
				//console.log(key);
				/*
				객체에 값에 접근하는 방식
				var obj = {a:1};
				obj.a; //1
				obj[a]; //1

				2가지 방식으로 접근이 가능하다.
				
				key는 변수 개체의 속셩명을 가지고 온다.
				즉 객체참조변수명[속성명] 형태로 객체의 속성값에 접근이 가능하다.
				*/
				sum += subject[key];
				cnt++; 
			}
			return sum / cnt;
		}
		
		
		this.maxscore = function(){
			/*
			scoreobj.subject -> {java : 80, html: 60, css  : 75, javascript : 95}
		
			
			*/
			var subject = scoreobj.subject; //{java : 80, html: 60, css  : 75, javascript : 95}
			var maxsubject;
			var maxscore = 0;
			for(var key in subject){
				if(maxscore<subject[key]){
					maxscore = subject[key];
					maxsubject = key;
				}
			}
			return maxsubject;
		}
	}
	//3. 객체생성자 메서드 객체화 -> 객체화시 학생의 객체 인수로 삽입
	var score = new StudnetScore(studnetscore);
	console.log(score.avg()); // 학생의 평균을 구하는 메서드 호출
	console.log(score.maxscore()); // 학생의 최고 높은 점수 받은 교과목명 구하는 메서드 호출
	
	</script>

 

 

---

for(var key in obj)

 for in 구문은 객체의 key 값에 접근할 수 있지만, value 값에 접근하는 방법은 없다.

 for in 구문은 이 값이 true로 셋팅되어 속성들만 반복할 수 있다.

 

for ~ in예문>

	<script type="text/javascript">
	var obj = {
			a : 1,
		    b : 2,
		    c : 3
		};

		for(var key in obj){
			console.log(key);
		}

	
	</script>

//결과 :
a
b
c

 

key 를 이용해서 value 값에 접근하기

	<script type="text/javascript">
	var obj = {
			a : 1,
		    b : 2,
		    c : 3
		};

		for(var key in obj){
			console.log(obj[key]);
		}

	</script>
//결과
1
2
3