프로그램에서 소스 실행 순서를 결정하는 명령문을 '제어문'이라고 한다.

 

프로그램을 짤 때 작성 순서대로 명령이 실행되는 경우는 거의 없고,

조건에 따라 명령 시행 순서가 정해지기에 if문을 자주 사용한다.

 

조건에 맞는지만 확인한다면 if문을 사용하고,

조건에 맞을 때와 맞지 않을 때를 구별해야한다면 if else문을 사용한다.

 

 

 

if문 

 

if(조건){
	~자바스크립트 소스~
}

소괄호 안의 조건이 true면 중괄호 안의 자바스크립트 소스를 실행

소괄호 안의 조건이 false면 중괄호 안의 자바스크립트 소스를 실행

 

 

 

 

if(true) {
	document.write("if문의 조건을 만족하여 이 문장이 실행되었습니다.");
}

true를 false로 고치면 조건을 만족하지 못하기 때문에 document.write가 실행되지 않는다.

 

 

 

 

if..else문

 

조건을 확인해서 조건에 맞을 때 실행할 명령과 

조건에 맞지 않을 때 실행할 명령이 따로 있다면 if문과 else문을 사용합니다.

 

if문이나 else문에서 실행할 명령이 둘 이상일 경우

중괄호로 묶고 중괄호 안에 실행순서대로 명령을 나열

 

 

 

 

var number = prompt("숫자를 입력하세요 : ");

if(number < 0) {
	aleft("0이상의 수를 입력하세요.");
}

else{
	document.write("입력한 숫자: " + number);
}

number가 0보다 작으면 alert 함수를 실행하고,

아니면 document.write를 실행하는 예제이다.

 

 

 

 

조건 연산자 물음표(?)와 콜론(:)

 

만약 조건이 하나이고, true와 false일 때 실행할 명령도 하나뿐이라면

if else문 대신 '조건 연산자'를 사용하는 것이 간단하다.

조건 연산자는 기호 ?와 기호 :으로 이루어져 있다.

 

var score = 75;
(score >= 60) ? alert("통과") : alert("실패");

 

물음표 왼쪽에 조건을 넣고 콜론 왼쪽에는 조건이 true일 때 실행할 명령을,

오른쪽에는 false일 때 실행할 명령을 넣는다.

 

 

 

 

truthy 값과 falsy 값

 

논리형 자료 값은 true와 false뿐이다. 하지만 일반값 중에서도

'true로 인정할 수 있는 값'과 'false로 인정할 수 있는 값'이 있다.

 

'truthy'하다 'falsy하다'라고 표현

 

자바스크립트에서 falsy하게 인정하는 값

1. 0    (숫자) 

2. ""    (빈 문자열)

3. NaN  (숫자가 아님, Not a Number)

4. undefined 

5. null

 

위의 falsy값을 제외한 나머지 값은

자바스크립트에서 true로 인정하는 truthy값이 된다.

 

truthy값과 false값은 조건을 확인할 때 유용하게 사용할 수 있다.

 

 

 

 

var input = prompt(“이름을 입력하세요”)
if(input) {
	alert(“이름을 입력했습니다” + input);
}

else {
	alert(“이름을 입력하지 않았습니다.”);
}

아무것도 입력하지 않아서 input ="" 가 되거나 

취소 버튼을 눌러서 input = null이 되면 확인 결과는 false가 된다.

 

무엇이든 값을 입력했다면 true가 된다.

 

 

 

if문에서 조건이 true가 되면, 그 다음에 오는 else문은 실행하지 않고 넘어간다.

즉 무조건 if문의 조건을 먼저 확인한다.

이 특징을 잘 활용하면 프로그램을 더 똑똑하게 작성할 수 있다.

 

promt창에서 [취소] 버튼을 눌렀는지 확인 할 때 if문에 두 가지 조건을 사용할 수 있다.

 

if(userNumber == null) {} // 취소 버튼을 눌렀을 때 실행할 명령

else{} // 값을 입력했을 때 실행할 명령
if(userNumber != null) {} // 값을 입력했을 때 실행할 명령

else{} // [취소] 버튼을 눌렀을 때 실행할 명령

 

if else문을 만들 때 true가 될 경우가 많은 조건을 if문에 넣고

다른 조건을 else문에서 처리하는 것이 좋다.

 

 

 

 

조건이 많을 때 흐름 조절하는 switch문

 

switch(변수) {
	case “조건값” : 실행할 명령
		break;
	case “조건값” : 실행할 명령
		break;

	default : 실행할 명령 // case문 지정 조건과 전부 일치하지 않을 때
}

1. switch 예약어 오른쪽에 괄호와 함께 값을 확인할 변수를 지정

 

2. 여러가지 조건 값은 case문 다음에 콜론(:)을 붙여 지정하고, 해당 값일 때 실행할 명령도 콜론 다음에 나열.  둘 이상의 명령을 실행한다면 명령을 중괄호로 묶는다

 

3. break 문을 사용해서 명령을 실행한 다음에는 완전히 switch문을 빠져나오도록 소스를 작성

 

4. 사용자가 입력한 값이 case문에서 지정한 조건 값과 전부 일치하지 않을 때 실행할 명령은 [default : 어쩌구] 이다.

 

 

반복문은 어떤 동작을 여러번 실행하는데 사용한다.

반복문을 사용하면 여러 명령을 늘어 놓지 않고 소스를 간단하게 작성할 수 있고

작성한 소르의 양이 줄어들어 컴퓨터 실행속도가 빨라지는 장점이 있다.

 

 

 

 

반복문 중에서도 가장 많이 사용하는 for문

 

var sum = 0;
sum += 1;
sum += 2;
sum += 3;
sum += 4;
sum += 5;
document.write(“1부터 5까지 더하면” + sum);

 

1부터 5까지 더하는 프로그램이다.

그런데 만약 1부터 100까지 더한다면??? <<< 쉽지않음

 

for문은 값이 일정하게 커지면서 명령을 반복 실행할 때 편리한 반복문이다.

 

 

 

 

for(var i = 1; i < 6; i++){
	sum += i;
}

 

  1. var i =1; 
  2. i < 6;
  3. sum += i;
  4. i ++

동작 순서이다.

 

  1. 카운터 변수 선언으로 for문에서만 사용할 카운터 변수를 선언하는 것
  2. for문 안의ㅔ 소스를 실행할지 말지 판단하는 조건, 조건이 true면 중괄호 안의 소스를 실행하고 false라면 for문을 벗어나 다음 소스 실행
  3. 반복 실행할 자바스크립트 소스
  4. 증감 연산자를 사용해 카운터 변수 조절

동작순서를 설명하면 이렇게 된다.

 

 

카운터 변수란 for문을 실행할 때 반복 횟수의 기준이 되는 변수

카운터 변수는 어떤 것을 사용해도 좋지만 보통은 i라는 이름을 붙여서 사용

 

반복문을 시작하기 전에 반드시 초기화해야한다.

보통 for문의 반복 실행횟수만 알아낼 때는 카운터 변수를 0으로 초기화한다.

위의 예제는 덧셈을 위해 1로 초기화 

 

 

 

 

let seasons = [“봄”, “여름”, ”가을”, ”,겨울”];
for(let value of seasons) {
	console.log(value)
}

for문을 사용한 반복은 인덱스 값을 기준으로 반복하지만, es6에는 인덱스는 사용하지 않고 값을 기준으로 반복한다. 예를 들어 for — of 문을 사용해 3개 값이 있는 배열을 순회한다면 값이 끝날 때 까지 차례로 반복. 여러 값을 차례로 순회할 때 인덱스 값이 필요없다면 for of를 사용

 

 

 

 

이중 for문

 

for(var i = 0; i < 30; i++){
	document.write(“*”);
}

*을 한 줄에 30개 표시하는 소스이다.

 

 

for(var i = 0; i < 30; i++){
	document.write(“*”);
}
document.write(“<br>”)
for(var i = 0; i < 30; i++){
	document.write(“*”);
}
document.write(“<br>”)
for(var i = 0; i < 30; i++){
	document.write(“*”);
}
document.write(“<br>”)
for(var i = 0; i < 30; i++){
	document.write(“*”);
}
document.write(“<br>”)
for(var i = 0; i < 30; i++){
	document.write(“*”);
}

5줄을 만들기 위해 같은 소스를 5번이나 반복했다. 으 복잡해라

더 간단히 하기 위해서는 for문을 중첩하면 된다.

 

for (var k =0; k<5; k++){

	for(var i = 0; i < 30; i++){
	document.write(“*”);
}
	document.write(“<br>”);
}

작동순서는

1. 바깥쪽 for문을 실행한다(k=0)

2. 안쪽 for문을 살행해 30번 반복하고 빠져나옴

3. <br> 태그를 추가해서 줄을 바꿈

4. 바깥쪽 for문의 조건식이 false가 될 때 까지 반복한다. 

 

 

 

 

 

자바스크립트에서 사용할 수 있는 반복문은 for문 외에, while문과 do while문이 있다.

for문은 카운터 변수를 기준으로 명령하기에, 횟수가 정해져 있는 반복 명령을 작성할 때 편하고, while문과 do while문은 특정 조건을 만족하는 동안에만 명령을 반복

 

while(조건식){
	실행할 명령
}

while문은 조건식을 검사해서 조건식이 참이면 중괄호 안의 자바스크립트 소스를 실행한다.

 

 

var i = 0;
do {
	document.write(“반복 조건이 true면 반복합니다. <br>”); //명령 실행
	i += 1;
}while(i<10); // 조건이 false가 되면 반복 종료

while문과 다르게 do while문은 조건이 맨 뒤에 붙는다.

do while문은 일단 문장을 한 번 실행한 후 조건을 확인한다.

그러므로 조건의 결괏값이 false라고 해도, 일단 문장이 최소한 한번은 실행된다.

 

 

 

 

while은 조건부터 확인

do while은 일단 문장을 실행하고 조건을 확인

 

 

for문은 초깃값이 있으면서 일정한 간격으로 반복할 때 주로 사용

while,do while은 조건만 주어지기에, 그 조건을 만족하는 동안 반복한다.

 

ㄴ 조건에 맞지 않을 경우 아예 실행하지 않으려면 while, 일단 실행하고 상황에따라 반복하거나 안할 수 있다면 do while을 사용하면 된다.

 

 

 

 

break, continue

 

for (i = 0; i < 10; i++) {
	document.write(“*”);
	break; // 이 지점에 오면 바로 반복문을 종료
}

break문은 반복문의 흐름에서 바로 빠져나올 때 사용한다.

 

 

for(i = 0; i < 10; i++) {
	document.write(“*”);
	continue;
	document.write(“continue문 때문에 이 문장은 건너뜁니다.”);
}

주어진 조건에 맞는 값을 만났을 때 실행하던 반복문장을 건너뛰고,

반복문의 맨 앞으로 돌아가서 다시 반복을 시작한다.

 

쉽게 말해 continue문 다음 명령들을 건너뛰게 하는 것

'프로그래밍 언어 > JavaScript' 카테고리의 다른 글

자바스크립트 기초 훑기 - 2  (0) 2023.07.21
자바스크립트 기초 훑기 - 1  (0) 2023.07.19
자바스크립트 함수,이벤트  (0) 2023.06.28
자바스크립트 변수  (0) 2023.06.25
JS 기초 시작  (0) 2023.06.17

티스토리툴바