220613) 자바스크립트(5)

김인경·2022년 6월 13일

학습한 내용

실습 1. 함수 선언과 호출

<script>
        //1-1

        var num1 = 10;
        var num2 = 20;
        var sum = num1 + num2;
        alert("result : " + sum);

        //1-2 함수 호출 (다음에 쉽게 불러올 수 있다)
        function addNumber(){
            var num1 = 10;
            var num2 = 20;
            var sum = num1 + num2;
            alert("result : " + sum);
        }
        addNumber(); //호출하는 갯수마다 창이 뜸
</script>

let 과 const

• let, const - ES6 버전 이후에 변수를 선언하는 예약어
• var가 있는데 왜 let과 const라는 예약어가 필요할까?

var 변수의 스코프(scope)

변수 이름 앞에 var를 붙이면 지역 변수 ---- > 함수 안에서만 사용할 수 있는 변수

var가 없으면 전역 변수 ---- > 프로그램 전체에서 사용할 수 있는 변수
->실수로 var를 빼먹었다면?

var 변수의 호이스팅

변수를 선언하기 전에 변수를 사용하면?
-> 오류가 생기지 않는다
-> 변수 선언이 앞에 있는 것처럼 끌어올려(hoisting) 인식한다.

실습 2. 호이스팅

<script>
        var x = 100;

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

        test();
</script>

var 변수의 재선언

이미 있는 변수를 다시 선언할 수 있다
-> 실수로 서로 다른 위치에서 같은 변수를 선언할 수 있다는 것은 문제
-> 재선언하면 이전 변수를 덮어쓰기 때문에 예상하지 못한 오류가 생길 수 있음.

let - 프로그램 안에서 값이 변하는 변수
const - 프로그램 안에서 값이 변하지 않는 변수

[변수의 스코프]
let 변수와 const 변수는 블록 영역의 스코프

[호이스팅 없음]
변수를 선언하지 않고 사용하면 오류 발생

[변수의 재선언 불가]
같은 변수를 다시 선언하면 오류 발생

실습 3. let 과 const

<script>
		//3-1 let 과  const
        function calcSum(n){
            let sum = 0;
            for(let i = 1; i < n + 1; i++){
                sum += i;
            }
            document.write(sum);
        }
        calcSum(10);
</script>

변수는 이렇게 사용하세요

전역 변수는 최소한으로 사용한다
var 변수는 함수의 시작 부분에서 선언한다 (호이스팅 방지)
for문의 카운터 변수는 블록 변수(let)를 사용하는게 좋다
ES6를 사용한 프로그램이라면 var보다 let을 사용한다

여러 번 사용할 수 있는 함수 만들기
매개변수(parameter)

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

인수 (argument)

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

return 문

함수를 실행한 결과값을 함수 밖으로 넘기는 문
반환된 값은 함수를 실행한 소스 위치로 넘겨짐.

<script>
        //3-2 return 문

        function calcSum(n){
            let sum = 0;
            for(let i = 1; i < n + 1; i++){
                sum += i;
            }
            return sum;
        }
        // calcSum(10);
        // document.write(sum);
        var result = calcSum(10)
        document.write(result)
</script>

실습 4. min max

<script>
        // 4-1 최소값 구하기

        function  minvalue(a,b){
            var min = 0;
            if(a<b){
                min = a;
            }else{
                min = b;
            }
            return min;
        }
        var min = minvalue(121,67) //비교할 값 입력
        document.write(min)

        // 4-2 최대값 구하기
        function  maxvalue(a,b){
            var max = 0;
            if(a>b){
                max = a;
            }else{
                max = b;

            }
            return max;
        }
        var max = maxvalue(221,67) //비교할 값 입력
        document.write(max)
</script>

실습 5. 값 비교하기

<script>
        var su1 = parseInt(prompt("첫 번째 숫자 : "));
        var su2 = parseInt(prompt("두 번째 숫자 : "));

        function compreNumber(su1, su2){
            if(su1 == su2){
                alert(su1 + "과 " + su2 + "는 같다");
            }else if(su1 > su2){
                alert(su1 + "이 " + su2 + "보다 크다");
            }else{
                alert(su2 + "가 " + su1 + "보다 크다");
            }
        }
        compreNumber(su1, su2)
</script>

실습 6. 홀수짝수구분

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

실습 7. 구구단 만들기

<script>
        //7-1
        var dan = parseInt(prompt("출력할 단을 입력하세요"));
        function displaygugudan(todan){
            for(let i = 1; i <= 9; i++){
                document.write(todan + "*" + i + "=" + todan*i + " ") ; 
            }
        }
        displaygugudan(dan);

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