7월 18일_JAVA Script(함수, 배열, 매개변수, 호이스팅 등)

# 함수(function)

• 함수(function)란 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록
• 함수는 필요할 때마다 호출하여 해당 작업을 반복해서 수행

function 함수이름(매개변수1, 매개변수2,...) {
    함수가 호출되었을 때 실행하고자 하는 실행문;
}

 

# 반환(return)문

• 자바스크립트에서 함수는 반환(return)문을 포함
• 반환문은 함수의 실행을 중단하고, return 키워드 다음에 명시된 표현식의 값을 호출자에게 반환

function myfunction(p1, p2) {
      return p1 * p2;
    }
    let result = myfunction(27, 3);

    document.getElementById("demo").innerHTML = "<h1>" + result + "</h1>";

 

# 계산을 수행하고 결과를 반환하는 함수 호출

<script>
    // 매개 변수 2개 포함
    function myfunction(p1, p2) {
      return p1 * p2;
    }
    let result = myfunction(27, 3);
    document.getElementById("demo").innerHTML = "<h1>매개변수 2개 포함: " + result + "</h1>";
    
    // 매개변수 (인수 없는 것)
    function myfunction2() {
      document.write("<h1 style='color:green;'>환영합니다</h1>");
    }
    myfunction2();

    // 익명의 함수(함수 이름없이 호출) ES5
    const x = function(a, b) {
      return a * b;
    }
    document.getElementById("demo1").innerHTML = x(5, 9);

    // 화살표 함수 ES6
    const c = (c, d) => c * d;
    document.getElementById("demo3").innerHTML = c(8, 5);

    // 화살표 함수 개선 ES6 (안될 때) * 추천 방법
    const e = (e, f) => {return e * f};
    document.getElementById("demo4").innerHTML = e(12, 5);

    //자체 호출 함수
    (function() {
      document.getElementById("demo2").innerHTML = "Hello! 자제호출 함수"
    })();

  </script>

 

# 함수에 매개변수 기본값 설정

<script>
    // 매개 변수가 2개로 선언된 함수에서 하나의 값만 할당하고자 할때 
    // if 조건문으로 하나의 값에 기본값을 설정
    function myfunction(x, y) {
      if (y === undefined) {
        y = 2;
      }
      return x * y;
    }
    document.getElementById("demo").innerHTML = myfunction(4);

    // 매개 변수 중에서 하나의 값을 알고 있을 때 기본 값으로 설정하는 방법
    function myfunction(x, y = 10) {
      return x * y;
    }
    document.getElementById("demo1").innerHTML = myfunction(7);
  </script>

 

# 배열의 생성

<script>
    // 배열 리터럴을 이용하는 방법
    let arrLit = [1, true, "JavaScript"];
    // Array 객체의 생성자를 이용하는 방법
    let arrObj = Array(1, true, "JavaScript");
    // new 연산자를 이용한 Array 객체 생성 방법
    let arrNewObj = new Array(1, true, "JavaScript");

    document.write(arrLit + "<br>");
    document.write(arrObj + "<br>");
    document.write(arrNewObj + "<br>");
    // 위의 3가지 방법은 모두 같은 결과의 배열을 생성

    document.write("배열의 첫번째 값: " + arrLit[0] + "<br>");
    
    arrLit.push("사과");  // 배열에 추가
    document.write(arrLit + "<br>");  // 추가된 배열 출력

    document.write(arrLit[8] + "<br>");   // 없는 배열 출력 시 undefined
    
    delete arrObj[2]; // 배열 삭제하기
    document.write(arrObj + "<br>");  // 삭제한 배열 제외하고 출력

    // 배열의 타입 확인하는 방법
    document.write((typeof arrLit) + "<br>");
    document.write((typeof arrObj) + "<br>");
    document.write((typeof arrNewObj) + "<br>");
    document.write((typeof arrLit[1]) + "<br>");
    document.write((typeof arrObj[0]) + "<br>");
    document.write((typeof arrNewObj[2]) + "<br>");
    
  </script>

 

# 예약어로 지역변수 선언

<script>
    let sum;
    // sum을 전역 변수로 선언

    function addNumber()  {
      sum = 10 + 20;  // sum에 값을 할당
    }
    
    addNumber();
    // sum 변수 값 출력
    document.write(sum);

  </script>

 

# 변수 호이스팅

• 변수 선언이 식 아래 있으면 값이 출력되지 않음
• 변수를 먼저 선언해 주고 식을 작성해야 값이 정상적으로 출력

  *console 창에서 확인

<script>
    var x = 10;
    var y = 20;
    
    function displayNumber() {
      console.log("x is " + x);
      console.log("y is " + y);
    }

    displayNumber();
    
    var name = "홍길동";
    console.log(name);

</script>

 

# var 변수 

• 재선언 : 이미 선언한 변수를 다시 선언할수 있음
• 재할당 : 같은 변수에 다른 값을 할당할 수 있음

*console 창에서 확인

  <script>
    function addNumber(num1, num2) {
      return num1 + num2;
    }

    var sum = addNumber(10, 20);
    console.log(sum);   // 30 출력

    sum = 50;   // 할당 (변수의 값을 변경)
    console.log(sum);   // 50 출력

    var sum = 100;  // 재선언 (변수를 재선언)
    console.log(sum);   // 100 출력


</script>