본문 바로가기
REVIEW/FRONTEND

JavaScript 기초 (2) - 조건문(if, switch), 반복문(for, while)

by 진자이 2023. 7. 3.

안녕하세요 진자이입니다 :) 이번 포스팅에서는 javascript 기초에 대한 내용으로, 지난 내용에 대한 복습과 더불어 반복문과 switch의 개념과 예시 코드를 기록해보려고 합니다.

 

복습

출력하는 방법

  • body에 출력 → document.write, document.writeln
  • 대화상자에 출력 → alert - modal(한 번 제어권을 잡으면 종료될 때 까지 제어권을 놓지 않는 대화상자 EX) 적용버튼이 있는 대화상자
    • ↔ non-modal(modalless) EX) 확인버튼밖에없는 대화상자(ctrl+F)
  • 콘솔에 출력 → console.log, 브라우저내에서 볼 수 없고, 브라우저 검사 창이나 IDE의 console 창에서 확인이 가능하다.

 

데이터에 이름 붙이기

  • global(블럭 외부에서 선언되어 모든 곳에서 사용가능한 곳)
  • local

 

Hoisting

선언(만들기)하기 전에 사용하는 것으로 자바스크립트에서만 사용가능하다. 이름 = 데이터 : //global 로 만들어지고 hoisting이 가능하다.

  • var 이름 = 데이터 //지역 변수로 만들어지는데 함수 안에서 만든 것은 함수 외부에서 사용 가능하며 hoisting이 가능하다
  • let 이름 = 데이터 //지역 변수로 만들어진다

const 이름 = 데이터 //변경할 수 없는 읽기 전용이 된다.

 

제어문

코드는 왼쪽에서 오른쪽으로, 위에서 아래로 순차적으로 수행되는데 특정 블럭으로 분기하거나 반복하도록 해주는 명령어이다.

  • branch(분기) - 값에 의한 분기와 조건(True, False)에 의한 분기로 나뉜다.
  • loop(반복) - 반복과 순회로 나뉘며, 순회는 0개 이상의 데이터를 가진 collection을 순차적으로 접근한다
  • 기타 - 반복을 빠져나오는 것, 다음 반복으로 넘어가는 것, 현재 모듈의 수행을 종료하고 호출한 곳으로 돌아가는 것 등이 있다.

 

조건문

if 조건문 : 조건에 의한 분기

if(표현식){
		표현식이 Truthy인 경우 수행할 내용
}else if(표현식1){
		이전의 표현식이 Falsy이고 표현식1이 Truthy인 경우 수행할 내용
}else{
		이전 모든 표현식이 Falsy인 경우 수행할 내용
}

//Falsy? : False, 0 ,null, undefined, ""
//if는 한 번만, else if는 0번 이상, else는 0번 or 1번.
//else if와 else는 반드시 if와 함께 사용
//표현식은 변수, 연산식, 리턴이 있는 함수를 호출한다.

//예시
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        let score=80
        //score가 60이상이면 합격이라고 콘솔에 출력
        if(score>=60){
            console.log('합격')
            //let을 붙이면 지역변수로 생성이되며, 블럭 외부에서는 사용할 수 없다.
            let name = 'adam'
        }

        //score가 60이상이면 합격, 그렇지 않으면 불합격
        let score2 = 50;
        if(score2>=60){
            console.log('합격')
        }else{
            console.log('불합격')
        }

        //아래 방법이 더 좋다고 함.
        let msg;
        if(score>=60){
            msg='합격';
        }else{
            msg='불합격';
        }
        console.log(msg)

        //80이상이면 우수, 그렇지 않고 60이상이면 보통. 0~59 사이는 저조
        let score3 = 79;
        if(score>=80){
            console.log('우수')
        }else if(score>=60){
            console.log('보통')
        }else{
            console.log('저조')
        }

        //and를 쓰는 방법
        let score4 = 55;
        if(score>=80 && score<=80){
            console.log('80점에서 100점 사이')
        }else{
            console.log('그 외')
        }

        //윤년 파악(아래 두 조건 중 하나만 만족하면 됨)
        //1. 4의 배수이고 100의 배수는 아닌 경우
        //2. 400의 배수인 경우
        let year=2023;
        if(year % 4 ==0 && year % 100 !=0 || year%400 ==0){
            console.log(year+': 윤년')
        }else{
            console.log(year +': 윤년x')
        }

        
    </script>
</head>
<body>
    <script>

    </script>
</body>
</html>

 

SWITCH

값에 의한 분기로, 값은 정수와 문자열이 가능하다. javascript에서 switch는 fallthrough가 기본이어서 일치하는 값을 만나면 break를 만날때까지 계속 수행하게 되므로 주의가 필요하다. 또한, 정수나 문자열 표현식에 True를 설정하면 값의 자리에 조건을 설정해서 True인 경우 수행하도록 할 수 있다. case 의 개수에는 제한이 없으며 default는 생략하거나 1번만 나와야 한다. IF나 SWITCH를 사용할 때는 주의할 점이 있다. 바로, 도달할 수 없는 코드를 작성하는 것!

switch(정수나 문자열 표현식){
	case 값1:
		()안의 내용이 값1일때 수행할 내용
	case 값2:
		()안의 내용이 값2일때 수행할 내용
	...
	default:
		일치하는 값이 없을 때 수행할 내용

//예시
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let menu = 1
        switch(menu){
            case 0:
                console.log('한식');
                break;
            case 1:
                console.log('중식');
                break;
            case 2:
                console.log('분식');
                break;
            defualt;
                console.log('일식');
        }

        //switch를 if 처럼 사용
        let score = 88;
        switch(true){
            case score>=80:
                console.log('우수');
                break;
            case score>=60:
                console.log('보통');
                break;
            default:
                console.log('저조');
        }

    </script>
</body>
</html>

 

반복문

 

WHILE

표현식을 하나씩 확인하면서 { } 의 내용을 반복한다. 반복문을 사용하면 유지보수가 편리하며 코드의 재사용성이 증가한다.

while(boolean 표현식){
	표현식이 Falsy가 아니면 수행할 내용
}

DO ~ WHILE

표현식을 확인해서 표현식이 Falsy가 아니라면 { }안의 내용을 반복하며, while은 한 번도 수행하지 않을 수 있지만 do~while은 반드시 1번은 수행해야 한다.

do{
	표현식이 Falsy가 아니면 수행할 내용
}while(boolean 표현식);
//예시
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //hello javascript를 다섯번 출력
        let idx=0;
        while (idx <5){
            console.log('hello javascript');
            idx = idx+1; //idx++, idx+=1 과 같음
        }

        //4,3,2,1,0를 순서대로 출력
        let idx2=0;
        while (idx2<5){
            console.log(4-idx2);
            idx+=1
        }
    </script>
</body>
</html>

 

 

for

while과 유사한 용도로 사용할 수 있으며 객체나 배열을 순회하는 용도로 사용이 가능하다. while 처럼 사용할 때는 

for(처음 한 번만 수행되는 식; 판별을 위한 표현 식; 두번째 반복부터 수행할 식){
	표현식이 Falsy가 아닌 경우 수행할 내용
}

for ~ in

배열에서는 인덱스가 순서대로 임시변수에 대입이 되고, 객체의 경우는 속성이 임시 변수에 대입된다.

for(임시변수 in 배열이나객체){
	수행할 문장
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        for(let idx=0,i=0; idx<5; idx=idx+1,i+=2){
            console.log(idx+i)
        }

        let ar=['안녕','하세요']
        for (idx in ar){
            console.log(idx);
            console.log(ar[idx]);
        }
    </script>
</body>
</html>
저작자표시 (새창열림)

'REVIEW > FRONTEND' 카테고리의 다른 글

JavaScript 기초 (3) - 함수  (0) 2023.07.03
JavaScript 기초 (1) - 데이터 유형, 연산자  (0) 2023.06.30
CSS 기초 정리 - 기본 형식 및 선택자 등  (0) 2023.06.30
XHTML 기본 구성 요소 정리 (3) - TABLE & FORM  (0) 2023.06.29
XHTML 기본 구성 요소 정리 (2) - BODY 영역 요소 및 속성  (0) 2023.06.29

관련글

티스토리툴바