[부스트코스]자바스크립트의 시작(객체 순회, 프로퍼티와 메소드, 활용법)

네이버 부스트코스/[부스트서포터즈3기]자바스크립트의 시작

[부스트코스]자바스크립트의 시작(객체 순회, 프로퍼티와 메소드, 활용법)

mmin.h 2021. 2. 11. 14:05

안녕하세요 부스터코스 3기 서포터즈 허브입니다. 🌿

부스터코스란?

커넥트재단은 네이버가 설립한 비영리 교육 재단입니다.
소프트웨어 개발자 양성 교육 프로그램, 부스트코스와 함께
당신의 개발 커리어를 업그레이드하세요!

제 포스팅은 강의 내 생각해보기와 수업에서 다루는 코드를 직접 크롬화면에서 확인 해볼 수 있도록 진행합니다. 관련된 개념과 강의는 함께 올려드리는 링크에서 확인해보실 수 있습니다.

www.boostcourse.org/cs124/joinLectures/52258

자바스크립트의 시작

부스트코스 무료 강의

www.boostcourse.org

이번 강의에서는 객체에 있는 모든 값들을 가져오는 방법에 대해서 알아봅시다. 배열에서는 반복문을 사용했었죠. 이러한 기능을 보고 **순회(iteration)**이라고 부릅니다.

객체에서는 for in이라는 것을 사용하게 됩니다. 다음의 코드를 살펴봅시다.

var coworkers = {
  "programmer": "egoing",
  "designer": "leezche"
};

for(var key in coworkers) {
  document.write(key+'<br>');
}

for을 쓰면 coworkers에 있는 이름들을 하나씩 가져오게 됩니다. 그리고 이 이름을 차례대로 key에 넣어줍니다. 그러면 그 key들이 차례대로 출력되겠죠. 결과적으로 programmer와 designer가 출력될 겁니다.

그렇다면 이름 대신 그 이름에 해당하는 값을 출력하고 싶다면 어떻게 하면 될까요? 이 key를 이용하면 됩니다. 다음과 같이 코드를 작성하면 됩니다.

for(var key in coworkers) {
  document.write(coworkers[key]+'<br>');
}

생각해보기

지난 강의의 <생각해보기>에서 만들었던 countries라는 객체에서, 모든 객체의 이름과 값을 한 줄씩 출력하는 코드를 만들어 봅시다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>Object</h1>
    <h2>Create</h2>
    <script>
        var coworkers = {
            "programmer": "egoing",
            "desiger": "leezche"
        };
        document.write("programmer : " + coworkers.programmer + "<br>");
        document.write("designer : " + coworkers.desiger + "<br>");
        coworkers.bookkeeper = "duru";
        document.write("bookkeeper : " + coworkers.bookkeeper + "<br>");
        coworkers["data scientist"] = "taeho";
        document.write(" data scientist: " + coworkers["data scientist"] + "<br>");

        var countries = {
            "asia": "korea"
        };
        countries.europe = "england";
        document.write("asia : " + countries.asia + "<br>");
        document.write("europe  : " + countries.europe + "<br>");
    </script>
    <br>
    <!-- 객체의 순회 -->
    <script>
        for (var key in coworkers) {
            document.write(key + " : " + coworkers[key] + '<br>');
        }
        // 생각해보기
        for (var key in countries) {
            document.write(key + " : " + countries[key] + '<br>');
        }
    </script>

</body>

</html>

객체(프로퍼티와 메소드)

https://www.boostcourse.org/cs124/lecture/194641

자바스크립트의 시작

부스트코스 무료 강의

www.boostcourse.org

객체의 메소드

객체에는 다양한 것들을 담을 수 있습니다. 심지어는 함수까지 담을 수 있죠.

예를 들어서 지난 시간까지 사용했던 coworkers라는 객체를 생각해봅시다. 우리는 이 객체에 새로운 함수, 즉 메소드를 추가할 겁니다. 바로 showAll()이라는 메소드이죠. 다음과 같이 작성할 수 있습니다.

coworkers.showAll = function() {
  for (var key in coworkers) {
    document.write(key + ' : ' + coworkers[key] + '<br>');
  }
}

즉, coworkers에서만 사용할 수 있는 showAll이라는 메소드를 추가하게 된 것입니다.

하지만 이 방법은 그렇게 좋은 방법은 아닙니다. 왜냐하면 cowerkers라는 변수 이름이 바뀌면 함수를 수정해야 하기 때문이죠. 이 때 사용하는 것이 바로 this입니다. coworkers 대신에 이 메소드가 쓰인 객체를 가리키는 this를 사용해주면 됩니다. 다음과 같이 수정할 수 있겠죠.

coworkers.showAll = function() {
  for (var key in this) {
    document.write(key + ' : ' + this[key] + '<br>');
  }
}

객체의 프로퍼티

이렇게 객체에 해당하는 함수들은 메소드라고 부릅니다. 그리고 객체에 해당하는 변수들도 있죠. 예를 들면 coworkers.programmer에서 programmer에 해당하는 것들입니다. 이런 변수들은 **프로퍼티(property)**라고 부릅니다.

생각해보기

조건문을 사용해서 key가 programmer일 때만 출력하는 메소드 printProgrammer()을 만들어 봅시다.

cowerkers.printProgrammer = fucntion(){ 
	for(var key in this){ 
	if(key == 'programmer'){
		document.write(this[key] + '<br>');
	}
}

객체의 활용

https://www.boostcourse.org/cs124/lecture/194642/

자바스크립트의 시작

부스트코스 무료 강의

www.boostcourse.org

객체의 활용

객체 첫 강의에서 봤던 예제를 다시 한 번 살펴봅시다. 첫 강의에서 우리는 많은 함수들을 만들었고, 이 함수들의 이름이 겹치지 않도록 하기 위해서 많은 노력을 기울였습니다. 이번 강의에서는 객체를 활용해서 이런 문제점들을 해결해 봅시다.

먼저 Body라는 이름의 객체를 다음과 같이 만들어 봅시다.

var Body = {
  setColor: function (color) {
    document.querySelector('body').style.color = color;
  },
  setBackgroundColor: function (color) {
    document.querySelector('body').style.backgroundColor = color;
  }
}

링크에 대해서도 이러한 작업을 하기 위해서 Links라는 객체를 만들어 봅시다.

var Links = {
  setColor: function (color) {
    var alist = document.querySelectorAll('a');
    var i = 0;
    while (i < alist.length) {
      alist[i].style.color = color;
      i = i + 1;
    }
  }
}

이렇게 만들면 Body와 Links에 모두 setColor이라는 함수가 존재하게 됩니다. 하지만 이 둘을 사용할 때에는 다음과 같이 다르게 사용하게 됩니다.

Body.setColor('black');
Links.setColor('powderblue');

함수의 이름이 같아도 다른 객체에 소속된 메소드이기 때문에 충돌이 일어나지 않는 것이죠.

<script>
        var Links = {
            setColor:function(color){
                var alist = document.querySelectorAll('a');
                var i = 0;
                while (i < alist.length){
                    alist[i].style.color = color;
                    i = i + 1; 
                }
            }
        }
        var Body = {
            setColor: function(color){
                document.querySelector('body').style.color = color;
            },
            setBackgroundColor:function (color){
                document.querySelector('body').style.backgroundColor = color;
            }
        }
        function nightDayHandler(self) {
            var target = document.querySelector('body');
            if (self.value === 'night') {
                Body.setBackgroundColor('black');
                Body.setColor('white');
                Links.setColor('powderblue');
                self.value = 'day';
            }else {
                Body.setBackgroundColor('white');
                Body.setColor('black');
                Links.setColor('blue');
                self.value = 'night';
                
            }
        }
        
    </script>

생각해보기

이번 강의에서 수정한 코드가 이전의 코드에 비해서 더 좋아진 점은 무엇일까요?

객체마다 서로 연관된 메소드들을 정리해놓아 보기 깔끔해졌다. 서로 다른 객체 내의 메소드 이름은 중복되어도 되기 때문에 이름이 간단해졌다.

퀴즈도 손쉽게 쓱쓱~! 여러분들도 얼마 남지 않았으니 빠르게 따라옵시다~!

www.boostcourse.org/

다 함께 배우고 성장하는 부스트코스

부스트코스(boostcourse)는 모두 함께 배우고 성장하는 비영리 SW 온라인 플랫폼입니다.

www.boostcourse.org

github.com/hhhminme

hhhminme - Overview

꾸준히 공부중인 초보 개발자지망생 hub@kakao.com. hhhminme has 12 repositories available. Follow their code on GitHub.

github.com