프로그래밍 언어 응용 27일차 (24/12/17)

CONTENTS

 

JavaScript

8.반복문

추가.1. 변수/함수의 적용범위(스코프)    

         2. var의 문제점과 개선                                  

 

--------------------------------------------

 

JavaScript

 

8.반복문

 

◎for문

-반복문을 사용하면 같은 코드를 여러 번 작성할 필요 없이, 간단한 구조로 반복적인 작업을 수행

 

1)개념

-"특정 횟수만큼" 코드를 반복하고 싶을 때 주로 사용함

 

2)사용법

for (초기식; 조건식; 증감식) { //조건식이 참일 때 반복 실행할 코드 }

 

-초기식: 반복 변수값을 초기화하며, 처음 단 한 번만 실행됨  ex) var i = 0; (시작값에 따라 달라짐)

-조건식: 블록 내 문장을 얼마나 반복할지 결정하며, 조건식이 참인 동안 반복함 ex) i < 5;

-증감식: 초기식에서 초기화한 변수의 값을 증가 또는 감소시킴 ex) i++ 1씩 증가

 

3)동작과정

 

(1)초기식 수행

(2)조건식 비교

(3)조건식이 true면 중괄호 내부 코드 수행

(4)코드 수행 후 증감식으로 이동

(5)다시 조건식으로 가서 비교

(6)조건식이 false가 나올 때까지 2~4번 반복 수행

 

기본 for문

  <script>

    for (var i = 1; i <= 5; i++){

      document.write("우리 집에 " + i + "번 방문하였습니다" + "<br>");

    }

  </script>

 

for문 - 초기값

  <script>

    //fruits 배열: 객체 = 속성(고유 특징을 가진 변수) + 메서드(고유 특징을 가진 함수)

    //배열 객체 안에 속성들 중에 length

    //배열 객체: 내장 객체 > 속성, 메서드를 가져다 쓸 수 있다.

    //배열 객체 안에 속성들 중에 length를 가져다 쓰겠다.

    //배열 객체의 length = 배열의 크기(데이터공간의 갯수) = 5;

    var fruits = ["apple", "mango", "orange", "lemon", "pear"];

    for (var i = 0, len = fruits.length; i<len; i++){ //초기값은 여러 문장 가능, 콤마로 구분

    document.write(fruits[i] + "<br>");

    }

  </script>

 

for문 -증감식

  <script>

    var fruits = ["apple", "mango", "orange", "lemon", "pear"];

    for (var i = 0, len = fruits.length; i<len; i=i+2){ //증감식 2씩 증가

    document.write(fruits[i] + "<br>");

    }

  </script>

 

◎중첩 for문

-for문 안에 또 다른 for문을 작성하는 것

 

*이때 초기값을 담는 변수명은 다르게 작성하는 것이 좋음. 보통은 i, j, k ... 순으로 작성함.

 

중첩 for문

  <script>

    //1학년 1반~3학년 10반 출력

    var output = ""; //데이터유형을 문자열 - 비워둠

    //학년 반복 = 1학년~3학년

    for(var i = 1; i <= 3; i++){

      output += '<h3>=====' + i + '학년=====</h3>';

      //반을 반복 - 1반~10반

      for(var j = 1; j <= 10; j++){

        output += '<p>' + i + '학년 ' + j + '반</p>';

      }

    }

    document.write(output);

  </script>

 

퀴즈: 구구단을 문서에 출력

  <script>

    var output = "";

    for(var i = 2; i <= 9; i++) {

      output =  output + '<h3>====' + i + '단=====</h3>';  

   

    for(var j = 1; j <= 9; j++) {

     output =  output + '<p>' + i + " X " + j + " = " + (i * j) + '</p>';

    }

  }

    document.write(output);

  </script>

 

◎while문

1)개념

-"반복 횟수를 모를 때" 조건식에 의해 반복 여부를 결정하기 위해 사용함. while문은 일반 while문과 do while문으로 구분됨.

 

2)사용법

while (조건식) {       //반복할 구문 }

 

while문

  <script>

    var i = 0;

    var array01 = ["사과", "배", "포도", "딸기", "레몬"];

    // document.write("배열의 크기 : " + array01.length + "<br>")

    while (i <array01.length) {

      // document.write("반복문 수행 전 i : " + i + "<br>") ;

      document.write(array01[i] + "<br>");

      i++;

      // document.write("반복문 수행 후 i : " + i + "<br>") ;

    }

    //반복횟수를 알 때 for문 -> while문 버전으로 바꿈

  </script>  

 

◎do while문

1)개념

-먼저 반복문을 1차 실행한 후에 조건식에 의해 반복 여부를 체크함. 나머지 기능은 while문과 동일함.

 

2)사용법

do {       //반복할 구문 } while(조건식);

 

do while문

  <script>

    var i = 0;

    var array01 = ["사과", "배", "포도", "딸기", "레몬"];

    // document.write("배열의 크기 : " + array01.length + "<br>");

    do {

      // document.write("반복문 수행 전 : " + i + "<br>");

      document.write(array01[i] + "<br>");

      i++;

      // document.write("반복문 수행 후 : " + i + "<br>");

    } while(i < array01.length);

  </script>

 

◎break문

-if문, switch문이나 반복문(for문, while문)의 실행을 중단하고 빠져나오도록함

 

break문

  <script>

    var remain = 0; //나눗셈 한 나머지

    var array = [1, 31, 57, 23, 80, 5, 4];

    for (var i = 0; i < array.length; i++) {

      remain = array[i] % 2;     

      //i를 2로 나눈 나머지를 반환

      //소수점 이하의 수를 다루기 위해서는 먼저 해당 수를 정수로 변환

      //짝수: i % 2 === 0

      //홀수: i % 2 === 1  

      if (remain == 0) { //배열의 특정 인덱스 값이 짝수 일 때

       break;

      }

      document.write(array[i] + "<br>");

    }

  </script>  

 

◎continue문

-현재의 반복문의 수행을 중단하고 다음 반복문을 계속 수행함

 

continue문

  <script>

    for (var i = 0; i < 6; i++) {

      if (i == 3) {

        document.write("현재 반복문 내의 다음 코드를 생략" + "<br>");

        continue;

        document.write("continue 다음 줄" + "<br>");

      }

      document.write("for문" + i + "번째" + "<br>");

    }

  </script>

 

◎배열의 반복(for in구문)

-object의 key를 순회하는 반복문이며 key를 출력해보면 문자열형임

 

1)사용법

for (var i in 배열명) {     //반복할 표현식 } for (var i 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>

  <script>

    var first = ['101', '011', '016', '017', '018', '019'];

   

    var output = '<select>';

    for (var i in first) {//배열의 인덱스 번호만큼 반복

      output += '<option>' + first[i] + '</option>';

    }

    output += '<select>';

      document.write(output);

  </script>

</head>

<body>

 

</body>

</html>

 

◎배열의 반복(for of구문)

1)개념

-배열뿐만 아니라 iterable 객체(배열, 문자열, 맵, 셋 등)의 요소를 순회할 때 사용하는 반복문으로, 배열의 각 요소에 대해 직접적으로 접근 가능함

 

2)사용법

for (var i of 배열명) {     //반복할 표현식 } for (var i of 객체명) {     //반복할 표현식 }

 

for in	for of
객체의 속성(property)을 순회	객체의 값(value)을 순회
배열도 가능하나 주로 객체 속성 반복할 때 사용	주로 배열이나 다른 객체 요소 반복할 때 사용
프로토타입 체인에 있는 모든 열거 가능한 속성까지 포함하여 순회하므로 속도가 느림	객체에 있는 값만 순회하므로 속도가 빠름
var test = "안녕하세요" for (var i in test) {     console.log(i); } i의 값: 0, 1, 2, 3, 3, 4 "문자열형"의 인덱스를 반환	var test = "안녕하세요" for (var i of test) {      console.log(i); } i 의 값: 안, 녕, 하, 세, 요 값을 반환

 

for of구문

  <script>

    var fruits = ['apple', 'banana', 'orange', 'lemon', 'pear'];

   

    for (var i of fruits) { //배열의 인덱스번호만큼 반복

      document.write(i);

    }

  </script>

 

 

추가. 1.변수/함수의 적용범위(스코프)

 

-변수/함수는 프로그램의 어느 곳에서도 선언하여 사용할 수 있음. 다만 선언된 위치에 따라 영향을 미치는 범위가 한정됨. 이와 같이 변수/함수가 적용되는 범위를 유효범위(scope)라고 함. 변수/함수는 유효 범위에 따라 '전역 스코프'와 '함수 스코프', '블록 스코프'로 구분됨

 

◎전역 스코프

-전역 스코프는 전체 코드에서 접근 가능한 변수와 함수. 함수 밖에서 변수를 선언하여 사용함

-전역 스코프의 변수와 함수 스코프의 변수가 같은 이름으로 명시되면 유효한 범위 내에서 함수 스코프 변수가 먼저 적용됨

-HTML 파일에서 <script>태그로 포함된 파일 간에도 전역 스코프의 변수에 접근 할 수 있음

(<script type = "module">은 제외)

 

◎ 함수 스코프

-특정 함수 내에서만 접근 가능한 변수로 함수 내부에서 선언된 변수는 외부에서 접근할 수 없음, 따라서 함수가 실행될 때 생성되고, 함수의 실행이 종료되면 변수의 유효성이 사라짐

-함수 스코프의 변수를 사용하기 위해서는 함수 안에 'var'를 붙여서 새롭게 선언해야함. 이렇게 선언하지 않으면 전역 스코프의 변수를 참조하는 경우가 됨

 

*함수 내부에 선언된 함수는 중첩 함수 혹은 내부 함수라고 함 . 내부 함수의 스코프는 본인을 포함한 외부 함수의 스코프를 따름. 내부 함수는 외부 함수의 변수 뿐만 아니라 본인의 내부 변수에도 접근 가능함

 

◎블록 스코프

-원래 함수 스코프까지 지원하였으나, 변수가 함수 내에서만유효하다보니 블록 내(if문, while문 등)에서 선언된 변수는 외부에서 접근이 가능하여 코드의 가독성과 유지보수를 어렵게 만들었음. 그로 인하여 let과 const 키워드로 선언된 변수는 해당 블록 내에서만 유효하도록 블록 스코프에 대한 개념이 추가로 생기되 됨

 

 

추가. 2. var의 문제점과 개선

 

◎var

*특징 및 단점

1)호이스팅 문제

-var로 선언된 변수는 호이스팅되어 변수 선언이 코드의 최상단으로 끌어올려지지만, 초기화는 그대로 유지됨. 이로 인해 서넌 이전에 변수를 참조할 경우 undefined가 반환되어 혼란을 초래할 수 있음

 

2)블록 스코프 없음

-var는 if문이나  for 루프와 같은 블록 내에서 선언된 변수도 블록 외부에서 접근할 수 있음. 이로 인해 예기치 않은 동작이 발생할 수 있음

                

3)var 키워드 생략

-함수 내에서 var 키워드 없이 사용하면 전역 변수가 생성됨. 이는 다른 코드와 충돌할 수 있으며, 전역 변수가 예기치 못한 변경을 겪을 수 있음

 

4)재선언 가능

-같은 스코프 내에서 동일한 이름으로 변수를 여러 번 선언할 수 있음. 이로 인해 코드의 가독성이 떨어지고, 의도치 않은 오류가 발생할 수 있음

 

◎let, const

*특징 및 개선

1)호이스팅되지만 초기화 전 접근 시 ReferenceError가 뜸

 

2)블록 스코프: 블록은 {}로 바인딩된 코드 묶음인데, .if문 for 루프 포함하여 중괄호 속에서 변수 선언되었다면 해당 범위에서만 유효함

 

3)선언 위치

-전역 위치에서 선언, 블록 위치에서 선언, 함수 위치에서 선언. 선언위치에 따라 유효범위가 달라짐

 

4)재선언 불가능

-같은 스코프 내에서 동일한 이름으로 변수를 여러 번 선언할 수 없음

 

<요약>

var	let	const
호이스팅O	호이스팅O	호이스팅O
변수 선언	변수 선어	상수 선언 (동시에 초기화 필수)
업데이트 가능	업데이트 가능	업테이트 부분적 가능 (개체는 불가능, 속성은 가능)
전역/함수스코프	전역/함수/블록스코프	전역/함수/블록스코프
같은 범위 재선언 가능	같은 범위 재선언 불가능	같은 범위 재선언 불가능
선언 이전 접근 가능 (undefined)	선언 이전 접근 불가능 (Reference Error)	선언 이전 접근 불가능 (Reference Error)