ITWILL : 무한반복문, 보조제어(break와continue)문, 익명함수, 재귀함수, 지역변수를 전역에서 사용하는 방법, 내장함수

ITWILL학원 : 7강 JS기초 BY 정규태강사

1. 무한반복문

반복문이 무한으로 실행되는 반복문.
문제의 해결이 언제 끝날지 모르는 경우에 주로 사용.

예를 들어,사용자가 정답을 맞출때까지 실행하는 퀴즈프로그램을 만들었다고 생각해보자
-> 사용자가 언제 정답을 맞출수있을지 알수있을까?
-> 모른다. 따라서 계속해서 실행을 하고 있어야한다
-> 이때 무한반복문 사용
-> 답을 맞추면 끝나야하기때문에 보조제어문이 필요하다

• 실제예시 : 스마트폰의 지문인식

for(;;){
 console.log("무한반복")
};

for(;true;){};

for(let i=1;;i++){};

while(true){};

do {} while(true);

2. 보조제어문

• break문 : 가장 가까운 반복문 하나를 탈출하는 코드다
  • 즉 이중for문이면 둘 다 탈출하는 것이 아니라 가장 가까운 for문만 탈출하는 것이다
  • break;의 순서에 따라 결과값이 달라지므로 위치가 중요하다
  • 예를 들어 : ~까지만 해라

for(let i=1; i<=10; i++){
	document.write(i+" ");
	if(i%4 === 0) break;
} //1 2 3 4

// break문은 순서가 중요하다
// 순서에 따라 값이 다르게 나오기 때문이다

for(let i=1; i<=10; i++){
	if(i%4 === 0) break;
	document.write(i+" ");
} //1 2 3

아래는 for문의 조건식으 true인 무한반복문이다
무한반복문과 함께 쓰이는 경우는 아래와 같다

for(let i=1;true;i++){
	if(i === 10) break;
	document.write(i+" ")
}

• continue문 : 해당 경우를 실행하지않고 다음 경우를 실행하는 동작
  • continue조건은 빼고 반복문을 실행하는 동작.
  • 예를 들어 : ~를 빼고 진행해라!할때 사용

let sum=0,i=0

while(i<5){
	i++
	if(i==3)
		continue;
		sum=sum+i
	document.write("i값은 " + i + " sum값은 " + sum + "<br>")
 }
/* i값은 1 sum값은 1
i값은 2 sum값은 3
i값은 4 sum값은 7
i값은 5 sum값은 12 */

document.write("while문의 결과값 : "+sum) // 12

위의 두가지를 활용한 숫자퀴즈를 만들어보자

1. 특정숫자 미리 지정 (1부터 100까지 중에서)
2. 사용자로부터 입력 -> 미리 지정한 숫자와 큰지, 작은지 같은 지를 비교
3. 큰 경우 -> “입력된 값이 큽니다” 출력
4. 같은경우 -> “정답입니다 도전횟수는 땡땡입니다” 출력
5. 작은 경우 -> “입력된 값이 작습니다” 출력

let quiz = Math.floor(Math.random()*100); //랜덤숫자만들기
console.log("랜덤숫자 정답은? "+ quiz)
let input = prompt('텔레파시를 보냈습니다~ 숫자를 입력하세요');

for(let count=1; true; count++){
	if(quiz > input){
		input = prompt("텔레파시숫자보다 작습니다. 숫자를 다시 입력해주세요");
	}else if(quiz < input){
		input = prompt("텔레파시숫자보다 큽니다. 숫자를 다시 입력해주세요");
	}else if(quiz == input){
		alert("정답은 " + quiz + ", " + count + "회 시도만에 정답!")
		document.write("정답은 " + quiz + ", " + count + "회 시도만에 정답!")
		break;
	}else{
		input = prompt("잘못입력하였습니다. 숫자를 다시 입력해주세요");
	}
}

강사님 코드는 아래와 같다
굳이 input을 for문 밖에 두는 것이 아니라 안에 두기만 하면 되는 거였다
괜히 일일히 input = prompt를 적었다… 띠용

let quiz = Math.floor(Math.random()*100);
console.log("랜덤숫자 정답은? "+ quiz)

for(let count=1; true; count++){
	let input = prompt('텔레파시를 보냈습니다~ 숫자를 입력하세요');

	if(quiz > input){
		alert("텔레파시숫자보다 작습니다. 숫자를 다시 입력해주세요. 시도횟수 " + count +"회");
	}else if(quiz < input){
		alert("텔레파시숫자보다 큽니다. 숫자를 다시 입력해주세요. 시도횟수 " + count +"회");
	}else if(quiz == input){
		alert("정답은 " + quiz + ", " + count + "회 시도만에 정답!")
		document.write("정답은 " + quiz + ", " + count + "회 시도만에 정답!")
		break;
	}else{
		alert("잘못입력하였습니다. 숫자를 다시 입력해주세요");
	}
}

3. Function 함수 : 일반, 익명

함수는 절차지향언어에서 사용되고 매서드는 객체지향언어에서 사용된다.
엄밀히 따지면 다른 개념이지만 크게 보면 동일하게 사용되기도 한다.
익명함수는 보통 변수에 넣어서 사용한다

• 변수 : 데이터를 저장해서 사용하는 곳
• 함수 : 실행문을 저장해서 사용하는 곳

1. 일반함수
   일반적으로 함수는 아래와 같이 선언과 사용한다.

//1. 일반함수 선언
fuction 함수명(매개변수){
	실행코드
}

//2. 일반함수 호출
함수명();

2. 익명함수
   익명함수의 선언과 사용은 아래와 같다.
   익명함수는 함수명이 없기때문에 변수이름으로 호출하면 된다.
   보통 익명함수는 1회성으로 주로 사용한다

//1. 익명함수 선언
 변수 = fuction (매개변수){
	실행코드
}

//2. 익명함수 호출
변수명();

//3.예시

let fun1 = function (){
	document.write("하이")
}
fun1() //하이

4. 재귀함수

재귀함수란 다시 자기자신을 호출하는 함수이다.
재귀함수는 반복문없이 계속 반복된다 따라서 사용범위를 주의해서 사용해야한다
재귀함수는 일정크기만큼만 실행되고 자동적으로 멈춘다.

return을 이용해 함수를 탈출할수있다

//1. 재귀함수 선언
fuction 함수명(매개변수){
	실행코드;
	함수명(); //자신의 이름 또 호출
}

//2. 재귀함수 호출
함수명();

재귀함수를 활용하여 1~10까지 숫자를 나타내는 함수예제를 보자

let num=0;
function testFun(){
	if(num < 10){
		num++;
		document.write(num + " ")
		testFun();
	}else{
		return;
	}
}
// 1 2 3 4 5 6 7 8 9 10

강사님은 더 짧은 코드를 썼다
나는 왜 이 코드를 못했을까?

뭔가 더 간단해보인다.
무슨 코드가 더 좋은 코드일까?

가독성이 좋지만 긴 코드 vs 가독성이 조금 떨어지지만 짧은 코드

아직 잘 모르겠다. 아마 회사 분위기에 따라 다르지 않을까?

let num1 = 0;
function testFun2(){
	num1++;
	document.write(num1 + " ")
	if(num1 === 10){
		return;
	}
	testFun2();
}
// 1 2 3 4 5 6 7 8 9 10

5. 지역변수를 전역범위에서 쓰는 방법

지역변수를 전역변수처럼 쓸 수 있을까?
정답은 예스!
return을 이용한 예시를 보자

let number = 200;

function fun() {
	var number = 300;
	return number;
}

number = fun();
document.write(number) //300

number의 값은 200이 아니라 300이 나온다.
지역변수를 함수로 만들고 그 값을 전역변수 안에 넣었기 때문이다.

6. 내장함수

자바스크립트엔진에는 내장되어있는 함수들이 있다.

예시

• String(1)
• Number(“1”) => number는 정수와 실수를 합친 것으로 표현됨
• Boolean(0) =>
• alert(“경고창”)
• prompt(“질문”, “기본값”)
• confirm() => yes, no 결정
• parseInt() => 문자데이터를 정수데이터로 변경
• parseFloat() => 문자데이터를 실수데이터로 변경