조건문 (conditional statement)

- 조건문이란? (if, if else, if else if)
	주어진 조건에 따라 애플리케이션을 다르게 동작하도록 하는 것

문법

1) if

if(true){
	console.log(1); // 1 (if 뒤에 true가 왔기 때문)
    }
    else{
    console.log(2); // 실행되지 않는다. (if뒤에 false가 왔기 때문)
    }

조건문은 if로 시작한다.
if문 뒤 소괄호 안에는 조건이 될 수 있는 값으로 불리언 데이터타입(true/false)이 온다.
Boolean값이 true라면 조건이 담긴 중괄호 구문이 실행된다.
Boolean값이 false라면 구문이 실행 되지 않는다.

if(true){
	console.log(1);
    console.log(2);
    console.log(3);
    console.log(4);
    }
    console.log(5);

true의 값인 1,2,3,4가 출력이 다 된 후 5가 출력된다.

if(false){
    console.log(1);
    console.log(2);
    console.log(3);
    console.log(4);
    }
    console.log(5);

조건이 false인 1,2,3,4는 출력되지 않고 false 조건 밖에 있는 5는 출력된다.

Boolean의 값이 무엇이냐에 따라서 실행되는 코드가 달라지기 때문에
조건문에서 Boolean은 중요한 역할을 한다.

2) else

if만으로는 좀 더 복잡한 상황을 처리하는데 부족하다.
else는 주어진 조건이 false일 때, 실행할 구간을 정의하고자 할 때 사용하며
if(false) 이라면 else 구문이 출력된다.
else는 생략 가능하다.

if(true){
	console.log(1);
    }
    else{
    console.log(2);
    }

if의 조건이 true이기 때문에 1이 출력되고 else구문은 출력되지 않는다.

if(false){
	console.log(1);
    }
    else{
    console.log(2);
    }

if의 조건이 false이기 때문에 1은 출력되지 않고 else이후의 구간의 2가 출력된다.

3) else if

else if는 두 개 이상의 조건식을 사용하고 싶을 때 사용하는 조건문이다.
여러개의 else if절이 중첩할 수 있다.
else처럼 if절 다음에 오며 원래 if문이 false일 때 출력한다.
그러나 else와는 달리 else if의 조건이 true일 때만 출력한다.

	if(조건식A){
    	console.log(A);
        }
    else if(조건식B){
    	console.log(B);
        }
    else{
    	console.log(C);
        }

조건식 A가 참일 때 A가 출력된다.
조건식 A가 거짓이고 조건식 B가 참일 때 B가 출력된다.
조건식 A와 B가 모두 거짓일 때 C가 출력된다.

	var num = prompt('숫자를 입력하세요.');
    if( num >= 100 ){
    	alert('입력한 숫자는 100 이상 입니다.');
        }
    else if( num >= 50 ){
    	alert('입력한 숫자는 50 이상 99 이하 입니다.');
        }
    else if( num >= 0 ){
    	alert('입력한 숫자는 0 이상 49 이하 입니다.');
        }
    else{
    	alert('입력한 숫자는 음수 입니다.');
        }

else if는 좀더 다양한 케이스의 조건을 검사할 수 있는 기회를 제공한다.

참고 - 자바스크립트 조건문 switch

변수와 비교연산

	var id = prompt('아이디를 입력해주세요.');
    if(id === 'oh'){
    	var password = prompt('비밀번호를 입력해주세요.');
        if(password === '123'){
        	alert('인증완료');
            }
        else{
        	alert('인증실패');
            }
        }
    else{
    	alert('인증실패');
        }

변수와 비교연산자 그리고 조건문을 결합 할 수 있다.
prompt() 구문은 사용자가 입력한 값을 가져와서 변수의 값으로 대입한다.
조건문은 조건문 안에 중첩사용이 가능하며 위의 코드는
사용자가 입력한 값과 아이디가 일치하는지 확인 후,
일치한다면 비밀번호가 일치하는지 확인한다.

1) 논리 연산자

논리 연산자로 조건문을 좀 더 간결하고 다양한 방법으로 구사할 수 있다.

&&, ||, !

• && (AND) : 좌항과 우항, 양쪽 다 (true)일 때만 true가 된다. = ( and 연산자 )
• || (OR) : 둘 중 하나라도 true일 때 true가 된다. = ( or 연산자 )
• ! (NOT) : Boolean값을 역전시킨다. = ( not 연산자 )

	var id = prompt('아이디를 입력해주세요.');
    var password = prompt('비밀번호를 입력해주세요.');
    if( id === 'oh' && password === '123'){
    	alert('인증완료');
        } else {
        	alert('인증실패');
            }

= id의 값이 oh 이고 password값이 123이면 참이다.

	var id = prompt('아이디를 입력해주세요.');
    if( id === 'oh' || id === 'joy' || id === 'yeon' ){
    	alert('인증완료');
        } else {
        	alert('인증실패');
            }

= id의 값을 3개 중 어느것을 사용해도 '인증완료'가 뜰 것이다.

	var id = prompt('아이디를 입력해주세요.');
    var password = prompt('비밀번호를 입력해주세요.')
    if(( id === 'oh' || id === 'joy' || id === 'yeon' ) && password === '123'){
    	alert('인증완료');
        } else {
        	alert('인증실패');
            }

= or 와 and를 함께 사용 가능하다.

	if(!true && !true){
    	console.log(1);
    } // false && false => 출력되지 않음
    
    if(!false && !true){
    	console.log(2);
    } // true && false => 출력되지 않음
    
    if(!true && !false){
    	console.log(1);
    } // false && true => 출력되지 않음
    
    if(!false && !false){
    	console.log(1);
    } // true && true => 양쪽 다 true이기 때문에 1이 출력된다.

2) Boolean의 대체제

- 조건문에 사용되는 데이터 타입에 꼭 Boolean만 들어갈 필요는 없다.

• 숫자 0은 false로, 0 제외 다른 숫자는 true로 간주된다.
• 기타 false로 간주되는 데이터 타입으로는 빈 문자열인'',"" 이나 0, null, undefined, NaN이 있다.

	if(''){
    	console.log('빈 문자열');
        }
        
    if(undefined){
    	console.log('undefined');
        }
    
    var a;
    if(a){
    	console.log('값이 할당되지 않은 변수');
        }
        
    if(null){
    	console.log('null');
        }
    if(NaN){
    	console.log('NaN');
        }

반복문 (Loop , Iterate)

- 반복문이란?
	컴퓨터에게 반복적인 작업을 지시하는 방법이다.
    

문법

1-1) while

	var i = 0;
    while(i<5){
    	console.log(i);
        i++; // i 값이 1 씩 증가
    }

while문은 while문 뒤에 따라오는 조건이 true이면 중괄호 안의 코드 구간을 반복적으로 실행한다.
조건이 false이면 반복문이 실행되지 않는다.
true와 false의 값을 변경하는 것을 통해서 반복문을 종료시킬 수 있다.
위의 예제는 종료조건으로 i의 값이 5보다 작다면 true, 크다면 false가 된다.

2) for

	for(var i = 0;//초기화 i<5;//반복조건 i++){
    	console.log(i);
    }

for문은 제일 먼저 '초기화'를 한다.
그 다음 반복조건이 실행되어 true이면 코드를 실행한다.
그리고 반복이 될 때 마다 i++를 실행한다.
이 과정에서 i의 값은 반복할 때 마다 1씩 증가하며, 결국 i값이 5가 되는 순간 i<5의 조건을 충족시키지 못하게 되고 반복문은 종료된다.

반복문의 제어

break로 반복문을 중단시킬 수 있다.
continue로 그 순간만 반복문을 종료시키고 반복문을 계속되게 할 수 있다.

1) break

반복 작업을 중간에 중단시킬 수 있다.

	for(var i = 0; i<10; i++){
    	if(i === 5){
        	break;
        }
    	console.log(i + 1);
    }

종료조건에 따르면 10까지 출력되어야 하는데 5까지만 출력되었다.
break문이 실행되면서 반복문이 중간에 완전히 종료되었기 때문이다.

2) continue

실행은 즉시 중단하면서 반복은 지속하게 할 수 있다.

	for(var i = 0; i<10; i++){
    	if(i ===5){
        	continue;
        }
        console.log(i + 1);
    }

결과는 1,2,3,4,6,7,8,9,10 으로 i = 5가 되었을 때 실행이 중단되었지만
반복문은 중단되지 않고 나머지 결과가 출력된다.

반복문의 중첩

반복문 안에 조건문, 조건문 안에 반복문이 들어갈 수 있다.

	for(var i = 0; i<10; i++){
    	for(var j = 0; j<10; j++){
            	console.log(i + j);        
      }
    }

참고 - 크롬 개발자 도구(debugger) 사용하기

함수 (function)

함수는 '코드 수납상자'라고 할 수 있으며 코드가 길어지고 많아졌을 때 정리할 수 있는 도구 중 하나이다.
같은 코드를 여러번 사용해야 할 때 함수를 활용한다.
함수를 활용하면
1. 코드 안의 요소를 변경할 때 한번에 통제 가능해 유지보수가 이롭다.
2. 코드의 길이가 줄어든다.
3. 함수의 이름으로 어떤 역할을 하는 코드인지 쉽게 파악 할 수 있다.
즉, 함수는 하나의 로직을 재실행 할 수 있도록 하므로 코드의 재사용성, 유지보수의 효율, 가독성을 높여준다.

재사용성 - 작성한 코드를 여러 맥락에서 다시 사용할 수 있도록 하는 것으로,
코드를 개선하면 사용된 모든 곳에서 개선이 동시에 일어난다. => 함수는 재사용성이 높다.

함수의 형식

	function 함수명(a,b){
    	코드
    	return a + b
    }
    testFun(1,2);

위 코드에서 함수를 선언할 때 (a,b)의 a,b가 매개변수이며 말 그대로 변수이다.
그리고 함수를 호출 할 때(1,2)는 변수에 들어가는 값이며 인자라고 한다.

함수의 정의와 호출

자바스크립트에서 함수의 정의는 function키워드로 시작

• 함수의 이름
• 괄호 안에 쉼표로 구분되는 함수의 매개변수로 인자값(생략 가능)
• 중괄호로 둘러싸인 자바스크립트 실행문

	function Num(){
    	i = 0;
        while(i < 10) {
        	console.log(i);
            i += 1;
        }
    }
    Num();

위 예제의 함수명은 Num이고 0부터 9까지 출력한다.
제일 하단 Num(); 구문에 의해서 Num이라는 이름의 함수가 호출되고 있는것이다.

1) 함수의 다양한 정의 방법

function get_argument(arg1, arg2){ // 매개변수
	return arg1 + arg2;
};
console.log(get_argument(10, 20)); // 인자

f = function(){
	return '함수를 정의하는 다른 방법';
};
f();

(function (){
    return '익명함수'; // 1회성 호출용으로 이름이 없는 함수
}) ();
// 이름 없는 함수 전체를 ()로 감싸고 바로 뒤에 ();를 작성하여 함수를 호출한다.

함수

함수의 효용성

	function Num(){
    	i = 0;
        while(i < 10) {
        	console.log(i);
            i += 1;
        }
    }
    Num();

위의 예제를 함수 없이 여러번 출력해야 한다면

	var i = 0;
    while(i < 10) {
    	console.log(i);
        i += 1;
    }

반복하고자 할 때마다 위와 같은 코드를 매번 작성해야 한다.
함수를 사용한다면 이런 어려움을 줄일 수 있다.

	function Num(){
    	i = 0;
        while(i < 10) {
        	console.log(i);
            i += 1;
        }
    }
    Num();
    Num();
    Num();
    Num();
    Num();

함수의 입력과 출력

함수는 입력과 출력으로 이루어져 있다.
입력 : 매개변수(parameter)와 인자(agument)
출력 : return //결과물

1) 입력

인자

인자(argument)는 함수로 유입되는 '입력'값을 의미한다.
어떤 값을 인자로 전달하느냐에 따라 함수가 반환하는 값을 다르게 할 수 있다.

function get_argument(arg){
	return arg;
}
console.log(get_argument(1));

결과는 1이다.
변수 arg의 값으로 숫자 1이 함수 안으로 전달된다.(입력)
이 변수 arg는 함수 get_argument 안에서만 유효하다.

복수인자

function get_arguments(arg1, arg2){
	return arg1 + arg2
}
console.log(get_arguments(10, 20));

2) 출력

return

함수 내에서 사용한 rerutn은 return 뒤에 따라오는 값을 함수의 결과로 반환함과 동시에 함수를 종료시킨다.

function get_1(){
	return 'oh';
}
function get_2(){
	return 'yeon';
}
console.log(get_1());
console.log(get_2());

결과가 각각 oh와 yeon인 이유는 함수 내에서 각각의 문자열을 return했기 때문이다.

return은 결과를 반환 하는 것 외에 함수를 중지시키는 역할도 한다.

function get_1(){
	return 'oh';
    return 'yeon';
    return 'joy';
}
console.log(get_1());

oh 이후의 것은 출력되지 않는다.
return 'oh'를 결과로 반환함과 동시에 함수를 종료시켰기 때문이다.

반복문은 일정한 반복을 '그 자리'에서 실행할 때 의미가 있고,
함수는 일정한 반복을 '여러 곳'에서 실행할 때 의미가 있다.