[인프런] Javascript입문 - 함수를 활용해 구구단 다시 구현(실습, 해설)

Notice

Recent Posts

Recent Comments

Link

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

Bibi's DevLog 🤓🍎

[인프런] Javascript입문 - 함수를 활용해 구구단 다시 구현(실습, 해설) 본문

프로그래밍/Javascript 자바스크립트

[인프런] Javascript입문 - 함수를 활용해 구구단 다시 구현(실습, 해설)

비비 bibi 2020. 10. 19. 00:12

* 이 글은 인프런에서 제공하는 호눅스님의 유료 강의 '쉽고 자연스럽게 배워보는 Javascript 입문 - 코드스쿼드 마스터즈 코스 레벨1'를 듣고 공부하며 정리한 글입니다. 강의 내용에 더해, 제가 필기하고 구글링한 내용이 정리되어 있습니다. 초보인 제가 이해한 대로 정리했기 때문에, 부정확한 내용이 있을 수 있음을 감안해 주시길 바랍니다. 강의를 듣고 내용을 정리한 글이기 때문에 문제가 되지 않는다는 인프런 측 답변을 받은 적이 있으나(https://bibi6666667.tistory.com/37), 저작권상 문제가 된다면 보호 모드(비공개)로 전환하겠습니다.

학습 목표

함수를 활용해 구구단을 구현하는 경험을 한다.

요구사항

함수를 활용해 반복적으로 발생하는 코드를 줄인다.
= 함수를 사용해야 하는 이유. 반복되는 코드 줄이기 위해!
함수 = function = 기능.
즉 어떤 프로그램의 "기능" 단위마다 함수를 만들면 된다.
공부를 위해 메인main함수를 사용해 본다.
메인함수를 사용하면 전역변수를 사용하는 것을 막을 수 있음.
(공부할 것: 변수, 스코프?)

결과물

개선된 구구단 프로그램
github 저장소

힌트

구구단 계산 결과를 배열에 담는 로직을 새로운 함수로 분리한다.
배열에 담은 데이터를 화면에 출력하는 로직을 새로운 함수로 분리한다.

function calculrate(num) { 
    var results = [];
    for (var i = 1; i < results.length; i++) { 
        // 계산 결과를 배열에 저장
    }
    return results 
} 

function print(results) { 
// 계산 결과를 화면에 출력 
}

function main() { 
// 나머지 코드들은 여기에 
}

main();

학습 참고자료

함수

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/%ED%95%A8%EC%88%98

함수

함수는 JavaScript에서 기본적인 구성 블록 중의 하나입니다. 함수는 작업을 수행하거나 값을 계산하는 문장 집합 같은 자바스크립트 절차입니다. 함수를 사용하려면 함수를 호출하고자 하는 범��

developer.mozilla.org

https://youtu.be/IOuePUzLdnQ

생활코딩 WEB2 Javascript - 25.함수

내가 짠 코드

(구구단_배열 정답 코드를 활용)
(출력 결과는 gugudan_re_배열 정답 과 같다)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>구구단 전체 출력</h1>
<script>
    function main() {
        var results = [];
        for (var n = 2; n <= 9; n++) {
            calculate(n, results);
            print(n, results);

        }
    }

    function calculate(n, results) {
        for (var i = 1; i <= 9; i++) {
            results[i] = n * 1;
        }
        return results;
    }

    function print(n, results) {
        document.write("<h2>" + n + "단</h2>")
        for (var i = 1; i <= 9; i++) {
            var str = "";
            str += n;
            str += " 곱하기 ";
            str += i;
            str += " 는 "
            str += results[i];
            str += "<br>";
            document.write(str)
        }
    }

    main();

</script>
</body>
</html>

해설(코딩 - 함수를 통한 구구단)

- 함수를 정의할 때는 기본적으로

function functionName(parameter) {
	// 이 함수가 수행하는 기능(처리).
    console.log("hello" + some);
    return "안녕" + some ;
}

와 같은 형태를 가진다.

함수명 functionName (필수). 함수명만으로 함수의 기능을 파악할 수 있도록 의미있게 짓는 것이 좋다.
매개변수 parameter ( 일반적으로 0개 이상. 있을 수도 있고, 없을 수도 있다 )
리턴값 return ( 0개 또는 1개. 있을 수도 있고, 없을 수도 있다 )

※ 매개변수parameter : wayhome25.github.io/etc/2017/12/31/parameter-argument/참고 (매개변수parameter와 전달인자argument의 차이)

- 함수는 ,,

코드의 중복을 피하기 위해 사용된다.
가독성을 높이기 위해 사용된다.

- 함수를 짤 때는...

하나의 함수가 한 가지 일만 하도록 할 것
함수 하나가 코드 10줄 이상이 되지 않도록 할 것

- 함수를 '정의'만 하고 '호출call'하지 않으면 당연히! 작동하지 않는다. 함수명(); 로 실행해 주어야 한다.

해설 영상의 정답코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>구구단 : 함수 사용해 보기</h1>
<script>
    // gugudan 함수 : x단을 계산하는 함수
    function gugudan(x) {
        var ret = []; // return될 배열을 만듦
        for (var i = 1; i <= 9; i++) {
            ret[i] = x * i;
        }
        return ret;
    }

    // printResult 함수 : x단을 화면에 출력하는 함수
    function printResult(n, ret){
        document.write("<h2>" + n + "단</h2>");
        for (var i = 1; i <= 9; i++) {
            var y = n * i
            document.write(n + "*" + i + "=" + y + "<br>");
        }

    }

    function main() {
        console.log("main 함수가 실행되었습니다.")
        for (var n = 2; n <= 9; n++) {
            var result = gugudan(n); // n단을 계산.
            printResult(n, result); // 계산된 단을 출력.
        }
    }
    main();
</script>
</body>
</html>

호출하는 것은 main(); 뿐!

- gugudan(x) 함수
x로 구구단(*1~*9)을 계산한 결과를 배열 ret에 넣어 리턴값으로 주는 함수.

- printResult(n, ret) 함수
화면에 n단을 출력하는 함수.

- main() 함수
gugudan(x) 와 printResult(n, ret) 을 실행하는 메인 함수.

❗ 함수의 매개변수를 불러올 때 꼭 이름이 같지 않아도 된다! 순서만 중요하다!!!
위의 코드에서..
gugudan(x)를 main()에서는 gugudan(n)으로 불러와, 반복문에 활용
printResult(n, ret)을 main()에서는 printResult(n, result)로 불러와, 반복문에 활용하고 사전에 정의한 변수를 활용

🤔 문제가 있는 것 같은데..
gugudan(x)에서 이미 계산해 ret라는 배열에 넣은 구구단 결과를 굳이 printResult(n,ret)에서 다시 계산하고 있다.
즉 printResult(n,ret)에서 기껏 불러온 ret을 결과 출력에 활용하지 않고,
gugudan(x)함수 내용과 같은 계산을 또 하고 있다.

-> 이를 개선한 코드는 아래와 같다 (인프런 질답 참고함)
반복문에서 반복할 횟수로 구구단 배열 길이를 참조하고,
화면에 출력할 때는 구구단 결과로 구구단 배열의 인덱스를 활용한다.

function printResult(x, ret){
    document.write("<h2>" + x + "단</h2>");
    for(i = 0; i < ret.length - 1; i++) {
    	document.write(x + " * " + (i+1) + " = " + ret[i+1]+ "<br>");
    }
}

👾👾 디버깅과 오답노트

오류 : n 곱하기 1은.. 은 잘 출력되는데 곱셈 결과가 제대로 출력되지 않는다.

- var results =[]; 라는 배열을 정의하는 위치는 main() 이 아니라, 구구단을 계산하는 calculate(n,results)여야 한다.
계산한 결과를 results라는 배열에 담고, 이 results를 return해야 한다.
그리고, calculate()에는 results라는 '매개변수'가 아닌 '배열'이 필요하다.

- calculate(x) 에서 ret[i] = x * i 를 해야 하는데 ret[i] = x * 1 을 하고 있었다. 🤬

저작자표시 비영리 변경금지

'프로그래밍 > Javascript 자바스크립트' 카테고리의 다른 글

[인프런] Javascript - 구구단 추가 미션, 학습 마무리 조언 (실습-나의 풀이 공유) 구구단 응용버전 : xy단 출력하기 (0)	2020.10.19
[인프런] Javascript입문 - 객체를 활용해 구구단 다시 구현(실습, 해설) (0)	2020.10.19
[인프런] Javascript입문 - 배열로 구구단 다시 구현 (실습 - 해설 및 참고자료, 배열초기화) (0)	2020.10.18
[인프런] Javascript입문 - 연습문제3 정리와 피드백 (0)	2020.10.17
[인프런] Javascript 입문 - 연습문제3-1 (0)	2020.10.16

'프로그래밍/Javascript 자바스크립트' Related Articles

Bibi's DevLog 🤓🍎

[인프런] Javascript입문 - 함수를 활용해 구구단 다시 구현(실습, 해설) 본문

[인프런] Javascript입문 - 함수를 활용해 구구단 다시 구현(실습, 해설)

학습 목표

요구사항

결과물

힌트

학습 참고자료

함수

내가 짠 코드

해설(코딩 - 함수를 통한 구구단)

해설 영상의 정답코드

👾👾 디버깅과 오답노트

'프로그래밍 > Javascript 자바스크립트' 카테고리의 다른 글

티스토리툴바