CODO DAY5_Java Script(Switch문&반복문&제어문&함수&배열)

Switch(Case By Case)

특정 case마다 특정 내용을 실행
switch는 if처럼 복잡한 조건을 다루지 못하는 한계가 있음(단순한 조건)
중요한 내용을 다룰 경우 사용
속도가 빠르지만 메모리를 많이 차지함

var item = '콜라';

switch(item){ //코드는 코드블록에서 시작하면 끝까지 실행해야됨
    case "콜라":
        console.log(item + '가 나왔습니다');
        break;  //break가 없다면 끝까지 내려가게 됨

    case "생수":
        console.log(item + '가 나왔습니다');
        break;   //break는 진행중인 내용을 코드블록 밖으로 탈출시켜줌

    case "오렌지주스":
        console.log(item + '가 나왔습니다');
        break;

    default:
        console.log('해당음료가 없습니다');
}

If VS Switch

if문은 조건에 맞을 경우 실행함
switch문은 조건을 순서대로 실행해보며 맞는 조건을 찾음

반복문

똑같은 명령을 일정 횟수만큼 반복하여 수행하도록 제어하는 명령문(단순한 일을 반복 할 때 사용)
“자동화”를 위해 가장 중요한 조건
“특정한 조건”이 만족되어야 반복
For문 몇번까지 반복 / While문 그만하라고 할 때 까지 반복

For

반복 횟수가 정해진 경우 유용

<script>
    //for는 반복 횟수가 정해진 경우 유용
    //for(이녀석이; 이것을만족하면; 증가또는감소){}
    
    for(var cup=1; cup<=10; cup++){
        console.log("물" + cup + "잔 떠왔습니다")
    }
</script>

이중 for문

for문 안에 for문이 있는 형태
바깥쪽 for문이 한번 실행될 때마다 안쪽 for문이 모두 반복되어 끝나면, 다시 바깥쪽 for문을 실행

//물을 10잔 가져오려고 한 이유는 커피를 10잔을 타기 위해서이다.
//커피를 타기 위해 물 한 잔당 2개의 믹스를 넣자

for(var cup=1; cup<=10; cup++){
    console.log("물" + cup + "잔 떠왔습니다");
    for(var spoon=1; spoon<=2; spoon++){
        console.log("커피 " + spoon + "스푼");
    }
}

While

반복 횟수가 정해지지 않은 경우 유용

//while 조건이 true면 영원히 반복
//while은 반복횟수가 정해지지 않은 경우 유용    

var i=0;
         
while(true){
    console.log("죽어야 끝난다" + i);
    i++;
    if(i==10){
        break;
    }
}

Do-While

do while은 일단 실행하고 나서 조건을 체크
조건이 부합할 경우 while과 do while은 동일하게 동작
조건이 부합하지 않을 경우 다른 결과를 냄

cnt = 1;

do{
    cnt++;        //먼저 실행
}while(cnt<10);  //이후 조건을 체크
console.log('while : ' + cnt);

//do while은 조건이 만족하지 않을 경우 while과 결과가 달라짐

제어문

Break

특별한 경우 영역 안의 내용을 모두 실행 하지 않고 빠져 나오는 방법
좋은 예로 switch문의 case가 있음

var i =0;

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

Continue

특별한 경우 무시하고 지나치는 방법

for(var i=0; i<10; i++){
	if(i==3){
		continue;
}
	console.log(i);
} //3만 제외

for(var i=0; i<10; i++){
    if(i%3==0){
        continue;
    }
} //3의 배수만

함수(function)

동작을 실행해 주는 무언가
function 메소드이름(매개변수){실행문; return(반환문);} - 구성요소를 모두 넣어주지 않아도 됨

var dish;  //빵을 담을 그릇

//hoisting : 함수가 아래에 선언되어 있어도 미리 읽어들임
dish = toaster('식빵');  
console.log(dish);

function toaster(input){  //키워드  함수명(매개변수)
    console.log(input + '이 구워지고 있다')  //실행문
    return '구워진' + input;  //반환문
}

메소드는 구성요소를 꼭 모두 가지고 있는 것은 아님

function 토스트기(빵){
    console.lot(빵 + '을 굽는다');
    return '구워진' + 빵;
}

function 번호표기계(){
    return "번호표";
}

function 저금통(동전){
    console.log(동전 + "적립");
}

function 호출벨(){
    console.log('호출!!');
}

배열

여러 개의 변수를 하나에 담는 기능
변수를 일렬로 세워놓고 각 상자에 번호를 붙여 놓은 형태
배열의 첫번째 값은 0번째(자기자신을 기준으로 떨어져 있는 위치를 말하는 것임으로 위치의 차이가 없어 0부터 시작)
각 잔들은 기준 잔에서 얼마나 떨어져 있는지가 이름이 됨
값을 넣거나 부를 때 이 이름을 사용
배열의 크기는 거의 무한

length 속성은 해당 배열의 길이 값(많이 사용)

Function

<body> //function 버튼 삽입
    <button onclick="arrPush()">push</button>
    <button onclick="arrPop()">pop</button>
    <button onclick="arrUnshift()">unshift</button>
    <button onclick="arrShift()">shift</button>
    <hr/>
    <button onclick="arrSlice()">slice</button>
    <button onclick="arrSpliceDel()">splice-Del</button>
    <button onclick="arrSpliceAdd()">splice-Add</button>
    <hr/>
    <button onclick="arrConcat()">concat</button>
    <button onclick="arrDelete()">delete</button>
    <button onclick="arrJoin()">join</button>
</body>

<script>
    //js에서는 배열을 편리하게 사용하기 위한 함수를 제공
    var arr = [];
    var i = 1;

    function arrPush(){// 값을 뒤쪽에서 순차적으로 넣음
        arr.push(i);
        i++;
        console.log(arr);
    }

    function arrPop(){ //뒤에서 순차적으로 뺌
        var val = arr.pop();
        console.log(val, arr);
    }

    function arrUnshift(){ //앞으로 넣음
        arr.unshift(i);
        i++;
        console.log(arr);
    }

    function arrShift(){ //앞에서 빼냄
        console.log(arr.shift()); //뺀값만 콘솔에 보여주나 배열에도 영향을 미침

    }

    function arrSlice(){ //범위 가져오기(기존 배열은 그대로 두고-해치지 않음) *많이 사용*
        //slice(몇번부터 가져오고, 몇번부터 버려)
        arr =[0,1,2,3,4,5,]
        console.log(arr);
        var newArr = arr.slice(1,3)  //1번 인덱스부터 가져오고, 3번 인덱스부터 버려
        console.log(newArr);  //원본 배열은 보존됨
        console.log(arr);
    }

    var strArr = ['마', '가', '다', '바', '나', '라'];
    function arrSpliceDel(){
        var sortArr = strArr.sort(); //정렬 ▲(오름차순) ▼(내림차순) : 넓은면이 큰숫자
        console.log(sortArr);

        // splice(해당인덱스부터, 삭제할 갯수, 추가할 값)
        sortArr.splice(2,2);  //원본을 변경
        console.log(sortArr);
    }

    function arrSpliceAdd(){
        var sortArr = strArr.sort();
        console.log(sortArr);

        // splice(해당인덱스부터, 삭제할 갯수, 추가할 값)
        // sortArr.splice(2,0,'A','B','C');  //원본을 변경

        // 다,라,마 -> A,B,C
        sortArr.splice(2,3,'A','B','C');
        console.log(sortArr);
    }

    function arrConcat(){
        //newArr = arry1.concat(arry2,arry3,arry4,...)
        var arr1 = [1,2,3,4,5];
        var arr2 = ['A','B','C','D'];
        var totalArr = arr1.concat(arr2);
        console.log(totalArr);

        totalArr = totalArr.concat('E');
        console.log(totalArr);
    }

    //배열의 특정 인덱스를 삭제
    function arrDelete(){
        delete arr[2];  //권장하지 않음 / splice를 사용 권장
        console.log(arr);
        arr[2] = 'new';
        console.log(arr);
    }

    function arrJoin(){
        console.log(arr);
        console.log(arr.valueOf());
        console.log(arr.join('_'));
    }
</script>

저작자표시 비영리 변경금지

'코딩도전기 > Java script' 카테고리의 다른 글

CODO DAY6_Java Script(배열&차원&객체) (0)	2023.02.08
Java Script_TEST(메소드 만들기) (0)	2023.02.07
CODO DAY4_Java Script(연산&IF문) (1)	2023.02.06

CODO(코딩꼬마의 코딩도전기)

CODO DAY5_Java Script(Switch문&반복문&제어문&함수&배열)

Switch(Case By Case)

반복문

For

While

제어문

Break

Continue

함수(function)

배열

'코딩도전기 > Java script' 카테고리의 다른 글

티스토리툴바

CODO DAY5_Java Script(Switch문&반복문&제어문&함수&배열)

Switch(Case By Case)

반복문

For

While

제어문

Break

Continue

함수(function)

배열

'코딩도전기 > Java script' 카테고리의 다른 글

관련글

티스토리툴바