52일 차 - 자바스크립트 조건문, arguments 객체, callback 콜백함수, 클로저 (23.03.13)

yvonne·2023년 3월 13일
JavaScript
0

📂Javascript

목록 보기
2/5
post-thumbnail

1. 조건문

💡 if문

   var varNum = 100;
   
    if (varNum > 50) {
        console.log("varNum > 50");
      }
      if (varNum <= 50) {
        console.log("varNum <= 50");
      }
      console.log("varNum : " + varNum);
  • 결과




💡 if, else if, else문

   var varNum = 100;

      if (varNum < 50) {
        console.log("varNum < 50");
      } else {
        console.log("varNum >= 50");
      }

      if (varNum > 200) {
        console.log("varNum > 200");
      } else if (varNum > 150) {
        console.log("varNume > 150");
      } else if (varNum > 100) {
        console.log("varNum > 100");
      } else {
        console.log("varNum <= 100");
      }
  • 결과




💡 switch, case문

	var varNum = 100;
 
      switch (varNum) {
        case 200:
          console.log("varNum : 200");
          break;
        case 150:
          console.log("varNum : 150");
          break;
        case 100:
          console.log("varNum : 100");
          break;
      }
  • 결과




💡 for문


    var varNum1 = "1234";
    var varNum2 = "4321";

    var varResult =
      varNum1 > varNum2 ? "varNum1 > varNum2" : "varNum1 <= varNum2";
    console.log("varResult : " + varResult);

    for (var i = 0; i < 10; i++) {
      console.log("i : " + i);
      document.write(i);
    }

    var varArr = [1, 2, 3, 4, 5];
    for (var i = 0; i < varArr.length; i++) {
      console.log("varArr [" + i + "] : " + varArr[i]);
    }

    for (var i in varArr) {
      console.log("varArr [" + i + "] : " + varArr[i]);
    }

    var varResult = 0;
    for (var i = 1; i < 10; i++) {
      if (i % 2 == 0 || i % 3 == 0) continue;

      console.log("i : " + i);
      varResult += i;
    }
    console.log("varResult : " + varResult);
  • 결과



💡while문

      var varNum = 0;
      var varSum = 0;
      while (varNum < 10) {
        console.log("varNum : " + varNum);
        varSum += varNum;
        varNum++;

        if (varSum > 20) {
          console.log("varSum : " + varSum);
          break;
        }
      }

      for (var i = 0; true; i++) {  // 무한 반복
        console.log("i : " + i);
        if (i > 50) break;    // break 로 멈추기
      }
     ```




2. 함수

💡 명시적 함수 / 익명 함수

    <script>
     var num = 0;

     function funName() {
       // 명시적 함수 생성
       console.log("명시(선언)적 함수의 기능을 실행합니다.");
     }

     funName();

     var funAnonymous = function () {
       // 이름이 없는 함수를 funAnonymous에 넘겨주는 중
       console.log("익명 함수의 기능을 실행합니다.");
     };

     funName();
     funAnonymous();

     console.log("funName 함수 보기 : \n" + funName);
     console.log("funName 함수 실행 : \n"); // 콘솔 안에 함수를 쓰면 에러
     funName(); 

     console.log("funAnonymous 함수 보기 : \n" + funAnonymous);
     console.log("funAnonymous 함수 실행 : \n");
     funAnonymous();

   </script>
  • 결과



💡 함수 활용

<script>
      function funName(x, y, z) {
        console.log("x : " + x);
        console.log("y : " + y);
        console.log("z : " + z);

        var result = x * y + z;

        return result;
      }

      var varResult = 0;

      varResult = funName(2, 3, 4);
      console.log("varResult : " + varResult);

      varResult = funName(2, 3, 4, 5);
      console.log("varResult : " + varResult);

      varResult = funName(2, 3);
      console.log("varResult : " + varResult);
    </script>
  • 결과
    * NaN: Not A Number (z가 undefined 라서 계산할 수 없다)



2. arguments

  • 힘수에 전달된 인수에 해당하는 Array형태의 객체
  • 모든 함수 내에서 이용가능한 지역 변수
  • arguments 객체 사용 시 함수 내에서 모든 인수를 참조할 수 있고, 호출할 때 제공한 인수 각각에 대한 항목을 갖고있다. (하지만 Array는 아님!)
<script>
var varArr;

      function funName() {
        return arguments; //
      }

      varArr = funName(1, 2, 3, 4, 5, 6, 7);
      console.log("varArr : " + varArr); 
      console.log("varArr.length : " + varArr.length);

      for (var i in varArr) {
        console.log("varArr[" + i + "] : " + varArr[i]);
      }
      console.log("------------------------------------------");

      varArr = funName("A", "B", "C", "D");
      console.log("varArr : " + varArr);
</script>
  • 결과

💡 입력받은 매개변수를 모두 더하는 함수

<script>
      // 입력 받은 매개변수를 모두 더하는 함수
      function allSum() {
        var sum = 0;

        // for (var i in arguments) {
        //   sum = sum + i;
        // }

        for (var i = 0; i < arguments.length; i++) {
          sum = sum + arguments[i];
        }
        document.write(sum);
      }

      allSum(2, 5, 7);
      allSum(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);

 </script>
  • 결과



📌Hoisting 호이스팅

  • 자바스크립트 인터프리터가 코드를 해석하고 실행 콘텍스트를 만들 때, 변수 및 함수를 선언 ( ex: var name; ), 할당 ( ex: var name = "Lee"; ) 하는 부분 중 선언하는 부분을 제일 상단으로 끌어올려서 코드를 실행시키는 것

  • function 키워드로 선언을 하게 되면, 자바스크립트 인터프리터는 선언하는 코드가 호출하는 코드 보다 뒷줄에 있다고 하더라도 해석할 땐 최상단으로 끌어올려와 선언을 먼저 메모리에 저장하고 해당 참조값을 가지게 해주는 것

💡 함수 실행 순서

<script>
      // 함수 실행 순서
      fun1(); // 정상 실행
      fun2(); // 오류 발생

      function fun1() {
        console.log("fun1 run!");
      }

      var fun2 = function () {
        console.log("fun2 run!");
      };

      fun2(); // 정상 실행
    </script>
  • 함수는 위에 먼저 선언해놓고 호출하기!



💡 함수안에 또 다른 함수

    <script>
    function outFun(width, height){
      console.log("triangle : " + triangle());
      console.log("quadrangle : " + quadrangle());

      function triangle() {
        return (width * height) / 2;
      }

      function quadrangle() {
        return width * height;
      }
    }

    outFun(3, 5);
  </script>
  • 결과




3. callback 함수

  • 매개변수를 함수로 받는 함수
        <script>
    function callbackFunction(callback) {
      callback();
    }

    function eat() {
      console.log("먹숩니다.");
    }

    function drink() {
      console.log("마십니다.");
    }

    // callbackFunction(eat());   // 함수 호출 -> "먹숩니다." 실행
    callbackFunction(eat); // 함수 이름만 넘기는 거 
    callbackFunction(drink); // 함수 이름만 넘기는 거 

  </script>
  • 결과

💡 callback 구구단 활용

   <script>
      function funName(funCBF, funCBP, num) {
        for (var i = 1; i <= 10; i++) {
          console.log(num + " * " + i + " = " + num * i);
          if (i < 10) funCBP(i);
        }

        funCBF();
      }

      function funCallBackProgress(n) {
        console.log(n * 10 + "% 진행 완료!");
      }

      function funCallBackFinish() {
        console.log("서버 작업 종료!");
      }

      funName(funCallBackFinish, funCallBackProgress, 7);
    </script>
  • 결과

4. 클로저

  • 스코프(Scope): 변수 접근 규칙에 따른 유효 범위

    • 범위는 중괄호 {} (블록) 또는 함수에 의해 나눠지는데 그 범위를 스코프라고 함

  • 클로저: 함수와 함수가 선언된 어휘적 환경의 조합

  • 클로저는 스코프를 이용해서 변수의 접근 범위는 폐쇄하는 것

    • 외부함수 스코프에서 내부함수 스코프로 접근 불가능
    • 내부함수에서는 외부함수 스코프에서 선언된 변수에 접근 가능
    • 따라서 내부 함수는 외부함수에 선언된 변수에 접근 가능하다.




📌활용 예제

  • 자바스크립트로 로또번호 생성하기
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <script>
    var lotto = new Array(6);

    for (var i = 0; i < lotto.length; i++) {
      lotto[i] = Math.floor(Math.random() * 45 + 1); // Math.floor: 소수점 잘라내기

      for (var j = 0; j < i; j++) {
        if (lotto[j] == lotto[i]) {
          i--;
        }
      }
    }
    for (var i = 0; i < lotto.length; i++) {
      console.log(i + 1 + "번째 번호 : " + lotto[i]);
    }
  </script>
</head>
<body></body>
</html>
  • 결과
profile
yvonne
개발 연습장
이전 포스트

51일 차 - 자바스크립트, 데이터 타입, typeof 함수, 자료형 변환 (23.03.10)

다음 포스트

53일 차 - Window, DOM, BOM 객체, 자바스크립트 객체 생성 (23.03.14)

0개의 댓글