18일차 js while문 for문 실습

1. 1~100까지 반복되는 while문을 작성하고 1~100까지의 합산값을 콘솔에 출력하여라.

<script type="text/javascript">
	var num = 0;
	var total = 0;
	while(num < 100){
		num++;
		total += num;
	}
	console.log(total);
</script>

2. 1~100까지 반복되는 while문을 작성하고 1~100까지의 결괏값중 2의 배수만 합산시켜 최종 결괏물만 출력

<script type="text/javascript">
	var num = 1;
	var sum = 0;
	while(num <= 100){
		num++;
		sum += num;
		num++;
	}
	console.log(sum);
</script>

처음 작성 한 것, 증감 사이에 복합 대입 연산자 넣어서 처리했음.

<script type="text/javascript">
	var num = 1;
	var sum = 0;
	while(num <= 100){
		num += 1;
		sum += num;
		num++;
	}
	console.log(sum);
	</script>

더 생각하다 num += 1; 사용했는데 어차피 같은 의미

​

이건 아닌 것 같아서 새로 작성

<script type="text/javascript">
	var num = 1;
	var sum = 0;
	while(num <= 100){
		if(num % 2 == 0){
		sum += num;
		}
		num++;
	}
	console.log(sum);
</script>

결과적으로 이렇게 나왔다.

​

3. 실습. 1~100까지 반복되는 while문을 작성하고 1~100까지의

결괏값중 2의 배수와 3의 배수만 합산시켜 최종 결괏물만 출력하여라.

<script type="text/javascript">
	var num = 1;
	var sum = 0;
	while(num <= 100){
		if(num % 2 == 0 || num % 3 == 0){
		sum += num;
		}
		num++;
	}
	console.log(sum);
</script>

위에 or조건 추가해주면 끝, &&와 &, || 와 | 의 차이가 궁금했는데 조건식을 다 처리하냐 아니냐의 차이였다.

​

4. 실습. 구구단

<script type="text/javascript">
	var firstNum = 1;
	var secondNum = 1;
	while(firstNum <= 9){
		while(secondNum <= 9){
			console.log(firstNum + "X" + secondNum + "=" + firstNum * secondNum);
			secondNum++;
		}
		firstNum++;
		secondNum = 1;
	}
</script>

while문 안에 while문 밖 while문에서 한 번 처리하는 동안

안에 while문은 false나올 때까지 반복도는걸 이해하면 쉽다.

​

5. 실습. for문을 활용하여 2단 구구단을 출력하여라.

<script type="text/javascript">
	for(var i = 2; i <= 9; i++){
		for(var j = 1; j <= 9; j++){
			console.log(i + "X" + j + "=" + (i*j));
		}
			
	}
</script>

5. 실습. 학생의 점수를 입력받아 평균을 구하시오.

(입력받은 점수는 배열에 저장하고 저장된 배열을 풀어 평균을 구하여라.)

<script type="text/javascript">
		var subjectArray = ['java', 'html', 'css', 'js'];
		var scoreArray = [];
		var avg = 0;
		for(var i = 0; i < subjectArray.length; i++){
			var score = prompt(subjectArray[i] + '점수를 입력해주세요.');
			scoreArray.push(score);
			avg += parseInt(scoreArray[i]);
		}
			console.log(avg/subjectArray.length);
</script>

내가 한 것 나는 어차피 for문도 순서대로 실행되면 avg 변수에 복합 대입 연산자로 값 저장할 때

이미 배열 원소에 값이 담기니 같은 for문 안에 넣어도 될 것 같다고 생각했다.

<script type="text/javascript">
	var subjectArray = ['java', 'html', 'css', 'js'];
	var scoreArray = [];
	for(var i = 0; i < subjectArray.length; i++){
		var score = prompt(subjectArray[i] + '점수를 입력해주세요.');
		scoreArray.push(Number(score));
	}
	var sum = 0;
	for(var i=0; i < scoreArray.length; i++){
		sum += scoreArray[i];
	}
	console.log(sum / scoreArray.length);
</script>

선생님이 적어주신 답안 분리해서 하셨다. 또한 나는 변수를 avg로 설정했는데 개념에는 sum이 더 부합한다.

분리한 답안이 가독성은 더 좋은 것 같다. 개발자가 뭐를 연산하고자 하는지가 바로 보인다.

for문 작성 시 가독성을 어떻게 높일지랑 변수 이름 결정을 좀 고민해야겠다.

​

6. 실습. 점수가 담긴 배열이 있다 배열의 값의 평균이 60점이며,

점수 중 40점 이하가 없다면 '합격', 평균 60점 이상시면서 40점 미만인

점수가 있다면 '과락', 평균이 60점 미만면 '불합격'의 결과물이 나오도록

코드를 작성하고 실행하여라

(입력받은 점수는 배열에 저장하고 저장된 배열을 풀어 평균을 구하여라.)

<script type="text/javascript">
 	var scoreArray = [38,50,90,88,70];
 	var sum = 0;
 		
 	for(i = 0; i < scoreArray.length; i++){
		sum += scoreArray[i];
		if(scoreArray[i] < 40){
			console.log('과락입니다.');
			break;
		}
		if(i+1 < scoreArray.length){
		}else{
	 		var avg = (sum/scoreArray.length);
	 		
	 		if(avg >= 60){
					console.log('합격입니다.');
			 		console.log(avg);
	 		}else{
					console.log('불합격입니다.');
			 		console.log(avg);
	 		}
		}
 	}
 </script>

이건 내가 작성한 것. 과락여부 판단이 끝나면 합불 판단하게 작성했다.

​

for문 안의 2번째 if문은 i+1이 scoreArray.length 보다 클 때 합불을 판단하는데

​

만약 배열 원소에 40미만의 값이 들어가 있다면 1번째 if문에서 break해버려서 2번째 if문은

​

판별조차 하지 않음.

<script type="text/javascript">
 	var scoreArray = [38,50,90,88,70];
 	var sum = 0;
 	var isCheck = true;
 	
 	for(i = 0; i < scoreArray.length; i++){
		sum += scoreArray[i];
		if(scoreArray[i] < 40){
			isCheck = false;	
		}
 	}
 	
 	var avg = sum / scoreArray.length ;
 	
 	if(avg >= 60){
 		if(isCheck){
 			console.log('합격입니다.');
		}else{
			console.log('과락입니다.');
		}
	}else{
		console.log('불합격입니다.');
	}
 </script>

선생님께서 작성하신 코드 isCheck로 boolean 설정해두고 for문이 끝났을 때

​

isCheck에 담긴 값이 true냐 false냐로 합, 불, 과락 판단

​

변수 새로 선언해서 하는 방법이 있다는 것을 알았으니 활용해야겠다.

​

7. 실습. 난수 생성 후 평균, 최솟값, 최댓값 구하기기

 

//계속 고민하면서 나온 코드
<script type="text/javascript">
	var imoteArray =[];
	imoteArray[0] = "*";
	console.log('0 : "' + imoteArray[0] + '"');
	for(var i = 0; i < 9; i++){
		imoteArray[i+1] = imoteArray[i] + imoteArray[0];
		console.log(i+1 + ' : "' + imoteArray[i+1] + '"');
	}
	console.log(imoteArray);
</script>
<script type="text/javascript">
	var imoteArray =["*"];
	for(var i = 0; i < 10; i++){
		imoteArray.push(imoteArray[i] + imoteArray[0]);
		console.log(i + ' : "' + imoteArray[i] + '"');
		if(i == 9) break;
	}
	console.log(imoteArray);
</script>
<script type="text/javascript">
	var starArray =[];
	var str = '';
	for(var i = 0; i < 10; i++){
		str += '*';
		starArray.push(str);
	}
	console.log(starArray);
</script>

처음 문제를 듣고 평균까지는 무난하게 구했는데 최댓값과 최솟값을 어떻게 구할까 고민을 좀 했다.

​

이것 저것 써보다가 다 아닌 것 같아서 곰곰히 생각해봤다.

​

그랬더니 아래와 같이 나왔다.

<script type="text/javascript">
 	var ran = Number(prompt());
 	var ranArray = [];
 	var sum = 0;
 	for(var i = 0; i < ran; i++){
//  			Math.random() - > 0~1 소수 난수 발생시켜 반환
//  		 	Math.round(소수) - > 들어간 인자값 소수를 반올림하여 반환
 		var r = Math.round(Math.random() * 100);
 		ranArray.push(r);
 			
 		sum += r;
 	}
 		
 	var avg = sum/ranArray.length;
 	console.log(avg, '평균');
 	console.log(ranArray);
 		
 	var first = ranArray[0];
 		
 	for(var j = 0; j <ran; j++){
 		if(ranArray[0] < ranArray[j]){
 		ranArray[0] = ranArray[j];
 		}
 	}
 		
 	console.log(ranArray[0], '최댓값');
 		
 	for(var j = 0; j <ran; j++){
 		if(ranArray[0] > ranArray[j]){
 		ranArray[0] = ranArray[j];
 		}
 	}
 		
 	if(first <= ranArray[0]){
 		console.log(first);
 	}else{
 		console.log(ranArray[0], '최솟값');
 	}
 		
 	</script>

좀만 더 생각해보니

​

배열 인덱스 0에 담긴 값을 인덱스 전체와 비교해서 값을 바꿔준다는 발상이 나왔다.

​

그래서 짜고 나서 만족할만한 결과가 나왔는데 하나 간과한게

​

최솟값을 구할 때는 이미 인덱스 0에 최댓값이 담겨져있어

​

만약 배열 생성 시 인덱스 0에 최솟값이 담겨있었다면 실제 최솟값이 아닌 인덱스 0의 값을 제외하고

​

최솟값을 구한 것이니 목적에 부합하지 않는다는 것이였다.

​

그래서 최댓값을 비교하기전 인덱스 0의 값을 새로운 변수에 담아서

​

나중에 나온 최솟값과 비교했다.

<script type="text/javascript">
 		var ran = Number(prompt());
 		var ranArray = [];
 		var sum = 0;
 		var max = ranArray[0];
 		var min = ranArray[0];
 		console.log(ranArray);
 		for(var i = 0; i < ran; i++){
//  			Math.random() - > 0~1 소수 난수 발생시켜 반환
//  		 	Math.round(소수) - > 들어간 인자값 소수를 반올림하여 반환
 			var r = Math.round(Math.random() * 100);
 			ranArray.push(r);
 			sum += ranArray[i];
 			if(max < ranArray[i]){
 				max = ranArray[i];
	 		console.log(max, '최댓값');
 			}
 			if(min > ranArray[i]){
 				min = ranArray[i];
 			}
 		}
 		
 		var avg = sum/ranArray.length;
 		console.log(ranArray);
 		console.log(avg, '평균');
 		console.log(max, '최댓값');
		console.log(min, '최솟값');
 		
 </script>

선생님이 작성해주신 코드 확연히 깔끔하다. 애초에 max와 min을 선언해서 하는 방법을 생각해내지 못했을까

​

아쉬움이 든다. 근데 어차피 배열에서 최댓값 최솟값 구하는 방법이 따로 있다고한다. 그냥 사고하는 능력을

​

키워주려고 시키셨다고한다.

​

7. 실습. 아래의 배열은 회원의 연령 나이를 담은 배열이다. 20대의 나이를 찾아 20으로

값을 교체하도록 하여라.

<script type="text/javascript">
	var ageArray = [38,65,27,30,23,55,41,27];
	// 배열 원소 = 배열의 값
	for(var i = 0 ; i < ageArray.length; i++){
		if(Math.floor(ageArray[i] / 10) == 2){
			ageArray[i] = 20;
		}
	}
	console.log(ageArray);

	for(var i = 0 ; i < ageArray.length; i++){
		if(ageArray[i] >=20 && ageArray[i] < 30){
			ageArray[i] = 20;
		}
	}
	console.log(ageArray);
</script>

위에 코드는 전에 소수점 버림을 배웠던게 기억나서 활용해보았고, 아래는 위에 다 작성하고 나니까 선생님께서

​

전에 배운 거 활용안해도 그냥 구간 나눠서 구해도 된다고 하셔서 또 작성해봤다. 또 이걸 실습하는걸 잊어서

​

나중에 하셨다고 말씀하셨는데 아마 최댓값 최솟값을 구하기 전에 하려고 하셨지 않았을까 생각이 들었다.

​

처음 배우는 사람 입장에서 배열 원소의 값을 다른 값으로 대체한다는 개념을 생각하기 어렵기 때문이다.

---

세미클론 찍는 습관이랑 for문 변수 선언 시

​

var 좀 잘 써야겠다. 실행은 잘 돼서 몰랐는데

​

인터넷 찾아보니 글로벌 변수로 저장되어

​

나중에 문제가 생길 수도 있다고한다.