자바스크립트-5일차

이주열·2022년 6월 13일

학습한 내용

JavaScript - 함수

함수

각 명령의 시작과 끝을 명확하게 구별할 수 있음
함수에 별도의 이름을 붙이면 같은 기능이 필요할 때마다 호출하여 실행할 수 있음

var 변수의 스코프(scope)

함수 안에서 sum을 선언했기에, sum의 영역은 함수안에서만 영향이 있음.
벗어나는 곳에서는 영향을 주지 않음

        function addNumber(){
            var num1 = 10;
            var num2 = 20;
            var sum = num1 + num2;
        }
        addNumber();
            alert("result : " + sum);

var 변수의 호이스팅(hoisting)

변수 선언을 하지 않았는데, 선언한 것처럼 끌어올려 인식함.

        var x = 100;
        function test(){
            document.write("x is " + x + " y is " + y);
            var y = 200;
        }
        test();

결과 값 :

y를 선언하지 않았지만, 컴파일 과정에서 var y;로 착각을 한다. var의 디폴트 값이 undefined를 가져서 y의 결과 값이 undefined로 출력

let과 const

위와 같은 문제점(스코프, 호이스팅, 재선언 불가)를 해결
let : 값이 변하는 변수
const : 값이 변하지 않는 변수

변수 사용 시

전역 변수는 최소한으로 사용
var 변수는 함수의 시작 부분에서 선언
for문의 카운터 변수는 let을 사용
var보다 let을 사용 권장.

매개변수(parameter)

함수를 실행하기 위해 필요하다고 지정하는 값
함수를 선언할 때 함수 이름 옆의 괄호 안에 매개변수 이름을 넣음

인수(argument)

함수를 실행하기 위해 필요하다고 지정하는 값
함수를 실행할 때 매개변수로 넘겨주는 값

익명 함수

이름이 없는 함수
함수 자체가 식이기 때문에 함수를 변수에 할당하거나 다른 함수의 매개변수로 사용할 수도 있음

// ex
var add = function(a,b){
return a + b;
}

즉시 실행 함수

함수를 정의함과 동시에 실행하는 함수
즉시 실행 함수는 변수에 할당할 수 있고, 함수에서 반환하는 값을 변수에 할당할 수도 있음

// ex
(function(){
	......
})();
// 또는 
(function(){
	......
    }());

실습 1. 최대, 최소 찾기
최솟 값

        function minvalue(a, b){
            var min = 0;
            if(a<b){
                min = a;
            }else{
                min = b;
            }
            return min;
        }
        var result = minvalue(10, 20);
        document.write(result);

결과 : 10
최댓 값

        function maxvalue(a, b){
            var max = 0;
            if(a>b){
                max = a;
            }else{
                max = b;
            }
            return max;
        }
        var result = maxvalue(10, 20);
        document.write(result);

결과 : 20

실습 2. 두 수 비교

        var num1 = parseInt(prompt("첫번 째 숫자 : "))
        var num2 = parseInt(prompt("두번 째 숫자 : "))
        function compareNumber(su1, su2){
            if(su1== su2){
                alert(su1 + "과 " + su2 + "는 같다");
            }else if(su1 > su2){
                alert(su1 + "이 " + su2 + "보다 크다");
            }else{
                alert(su1 + "이 " + su2 + "보다 작다");
            }
        }
        compareNumber(num1, num2);

실습 3. 홀수, 짝수 구분

        var su = parseInt(prompt("판별할 수를 입력하세요"));
        function evenodd(num){
            if(num % 2 ==0){
                alert(num + "은 짝수");
            }else{
                alert(num + "은 홀수");
            }
        }
        evenodd(su);

실습 4. 구구단

        var dan = parseInt(prompt("단을 입력하세요"));
        function displaygugudan(todan){
            for(let i=2; i<=todan; i++){
                for(let j=1; j<= 9; j++){
                    document.write(i + "*" + j + "=" + i*j); 
                    document.write("<br>");
                }
            }
        }
        displaygugudan(dan);

중첩 반복문을 통해, 2단부터 내가 입력하는 단 까지의 구구단을 보여준다.
첫 번째 for문을 통해 2단 부터 내가 입력하는 단까지 증가시키는 반복문
두 번째 for문을 통해 1부터 9까지의 곱셈