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

Notice

Recent Posts

Recent Comments

Link

« 2025/02 »
일	월	화	수	목	금	토
						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

Tags more

Archives

Today

Total

관리 메뉴

Bibi's DevLog 🤓🍎

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

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

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

비비 bibi 2020. 10. 19. 13:37

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

학습 목표

객체와 메소드를 사용해서 구구단을 구현하는 경험을 한다.
객체를 사용하고, 프로퍼티를 사용하고, 기존의 함수를 메소드로 바꿔보기.
프로퍼티(속성) = 객체의 상태를 나타냄
메소드 = 객체의 행동을 나타냄.

요구사항

main() 메소드는 프로그램을 시작하는 역할을 한다.
함수를 구구단 객체의 메소드로 변경한다.

힌트

gugudan 이라는 객체를 생성한다.
gugudan 객체에 앞 단계에서 작성한 함수를 메소드로 추가한다.
객체를 이용해서 main함수 내부를 수정한다.

gugudan = {}
gugudan.calculate = function { 
// ... 
} 
functin main()

학습 참고자료

객체 - WEB2 Javascript - 30.객체 읽기와 쓰기 / 31.객체와 반복문 / 32. 프로퍼티와 메소드

https://opentutorials.org/course/3085/18853

객체 - 생활코딩

객체 2017-11-28 23:32:58 객체의 쓰기와 읽기 변경사항 객체와 반복문 변경사항 프로퍼티와 메소드 변경사항

opentutorials.org

내가 작성한 코드

(기존의 구구단_함수 파일 내용을 활용)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>구구단 전체 출력</h1>
<script>
    var gugudan = {}

    gugudan.calculate = function (x) {
        var ret = [];
        for (var i = 1; i <= 9; i++) {
            ret[i] = x * i;
        }
        console.log(ret);
        return ret;
    }

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


    function main() {
        for (var n = 2; n <= 9; n++) {
            var results = gugudan.calculate(n);
            gugudan.print(n, results);
        }
    }

    main();

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

해설 (코딩 - 객체를 활용한 구구단 구현)

코딩을 하기 전에..

객체 만들기
var human = {};
프로퍼티 만들기 : 객체이름.프로퍼티이름 = 프로퍼티의 내용
human.name = "crong"
human.money = 10000
메소드 만들기
human.work = function(hour) {
//메소드 내용
}
this의 사용
객체의 메소드 안에서 사용해, '나' 즉 객체 자신을 가리킴.
다른 메소드나 프로퍼티를 참조할 때 사용.
human.work = function(hour) {
this.money += 8530 * hour;
}
객체를 사용하는 이유.
- 코드의 유지.보수에 좋다.
- 가독성이 높아진다.

-> 일단은 '함수'에 익숙해지는 것이 더 중요하다.

☝ 코드를 짤 때는 가로 80줄이 넘어가지 않게 하는 것이 좋다.
코드가 가로로 너무 길면 가독성이 떨어지기 때문.
변수 등을 사용해 line수를 늘리더라도, 가로 길이가 너무 길어지지 않게 해야 한다.
옛날 컴퓨터의 모니터 가로 길이가 80줄까지 출력해 준 데서 유래.

객체를 배웠으니..

console.log() -> console이라는 객체에 log라는 메소드를 사용한 것.
document.write() -> document 라는 객체에 write라는 메소드를 사용한 것이다.

👉Javascript라는 언어는 태생적으로 html문서를 조작하기 위해 만들어진 언어이다.
웹 문서들도 마찬가지로 객체, 프로퍼티, 메소드로 이루어져 있기 때문에 javascript를 통해 조작할 수 있는 것!

해설 코드 (정답)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>구구단 완결편</h1>
<script>
    gugudan = {};
    gugudan.result = [];
    gugudan.current = -1; // 여기에 마지막으로 계산한 단의 정보가 들어간다.

    gugudan.calculate = function(n) {
        this.current = n; // gugudan.current에 현재 계산하는 단의 정보를 넣는다.
        for (var i = 0; i < 9; i++) {
            this.result[i] = n * (i + 1);
        }
    }

    gugudan.print = function(){
        document.write("<h2>" + this.current + "단</h2>");
        for (var i = 0; i < 9; i++){
            var x = this.current;
            var y = i + 1;
            var z = this.result[i];
            document.write(x + "*" + y + "=" + z + "<br>");
        }
    }

    function main(){
        for (var i = 2; i <= 9; i++) {
            gugudan.calculate(i);
            gugudan.print();
        }
    }

    main();
</script>
</body>
</html>

내 코드와 다른 점

- 현재 계산중인 단의 정보를 넣는 프로퍼티 gugudan.current 가 있다.
.calculate에서 계산하기 전에 gugudan.current에 값을 넣고,
.print에서 출력할 때 현재 계산한 단의 정보를 가져와서 출력한다!

-.print에서
결과 출력에 필요한 코드가 너무 길어지자 변수 x,y,z를 활용해 코드의 가독성을 높이고 길이를 줄였다.

-.calculate에서 매번 정의해 쓰던 ret배열을 gugudan.result라는 객체 프로퍼티로 정의하고
필요할 때 this.result 로 불러와 사용한다.

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

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

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

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

Bibi's DevLog 🤓🍎

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

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

학습 목표

요구사항

힌트

학습 참고자료

객체 - WEB2 Javascript - 30.객체 읽기와 쓰기 / 31.객체와 반복문 / 32. 프로퍼티와 메소드

해설 (코딩 - 객체를 활용한 구구단 구현)

코딩을 하기 전에..

객체를 배웠으니..

해설 코드 (정답)

내 코드와 다른 점

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

티스토리툴바