Higher의 창작소

29강 객체 예고

객체는 영어로 Object라고 한다.

객체라고 하는 것은 함수라는 것 기반 위에서 존재하는 것이다.

객체가 무엇인가를 설명하기 위해서는 너무 많은 얘기가 필요하니 객체가 가지고 있는

여러가지 얼굴들에서 딱 하나만 알아보고 

그 하나의 객체의 특성,존재 이유,기능에 집중해서 

'아, 객체가 이런 거구나'라는 느낌을 갖고 앞으로 나아가자.

//////////////////////////////////////////////////////////////////////

객체의 얼굴 중 하나는 역시 정리 정돈의 수단이다.

코드가 많아지면 정리정돈을 위해 함수를 사용하는데

함수가 많아지면, 그 뿐만이 아니라 그 함수와 관련된 변수들이 엄청나게 많아지면 

복잡함이 한계에 달하는데

그런 상황에서 서로 연관된 함수, 서로 연관된 변수를 같은 이름으로 그룹핑해서 정리정돈 하는 도구가

객체이다.

See the Pen 객체예고 by egoing (@egoing) on CodePen.

document.querySelector()는 document라는 객체에 querySelector라는 함수가 있다는 것이다.

객체에 속해 있는 함수는 매소드(method)라고 부른다.

30강 객체 쓰기와 읽기

우리가 정보의 양이 많아졌을 때 서로 연관된 정보를 정리정돈 하기 위해 배웠던 도구가 뭐였을까?

배열이였다.

그리고 그 배열이라는 도구는 순서에 따라서 정보를 정리정돈한다는 특징이 있었다.

그러면 순서대로 정보가 저장될 수 있는 것이 있다면 

순서없이 정보를 저장할 수 있는게 있지 않을까?

그게 바로 객체다.

그렇다고 객체에 마구잡이로 데이터를 집어넣는게 아니다. (그건 쓰레기통이다)

우리는 데이터를 다시 꺼낼 필요가 있기 때문에 수납상자에 집어넣으면서 

그 데이터에 이름을 붙이는 것이다.

객체는 이름이 있는 정리정돈 상자라고 생각하면 된다.

/////////////////////////////////////////////////////////////

객체를 만들 때 사용하는 기호를 object literal이라고 하는데(몰라도 된다)

중괄호를 사용한다.

<script>
      var coworkers = {
        "programmer":"egoing",
        "designer":"leezche"
      };
</script>

egoing,leezche라는 정보를 넣었고 programmer,designer라는 이름을 붙였다.

정보를 꺼내 올 때

 document.write("programmer : "+coworkers.programmer+"<br>");
 document.write("designer : "+coworkers.designer+"<br>");

coworkers.programmer에 있는 . 점은 object access operator라고 부른다. 

즉, 이 객체에 접근하는 오퍼레이터라는 것이다.

정보를 추가할 때

coworkers.bookkeeper = "duru";
document.write("bookkeeper : "+coworkers.bookkeeper+"<br>");

coworkers["data scientist"] = "taeho";
 document.write("data scientist : "+coworkers["data scientist"]+"<br>");

coworkers.data scientist는 띄어쓰기(공백)이 들어가는데 이건 문법적으로 오류다.

이름에는 공백을 넣을 수 없다.

그러면 대신 배열에서 사용하는 [ ] 대괄호를 쓰면 똑같은 효과를 가져올 수 있다. 띄어쓰기도 쓸 수 있고.

coworkers.[data scientist]

31강 객체와 반복문

객체에 어떤 데이터가 있는지를 모조리 다 가져와야 하는 경우 반복문을 사용한다.

(배열에서 반복문을 사용했던 것처럼.)

See the Pen object iterate by Higher77 (@higher77) on CodePen.

객체에서는 for in을 사용한다.

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

Iterate는 순회한다,반복적으로 가져온다라는 뜻이다.

var key in coworkers는 coworker라는 변수가 가리키는 객체에 있는 key값들을 가져오는 반복문이다.

(key값은 programmer, designer과 같은 이름이다)

(배열에서는 순서대로 정리정돈 되어 있기 때문에 index라는 표현을 쓴다.)

For를 이용하면 coworker객체에 있는 데이터 수만큼 중괄호의 코드들이 실행된다.

실행 될 때마다 coworker안의 key값을 하나하나 변수 값으로 세팅해준다.

///////////////////////////////////////////////////////////////////////////////

coworkers["data scientist"] = "taeho";
 document.write("data scientist : "+coworkers["data scientist"]+"<br>");

coworkers에 데이터를 가져올 때 

우리가 배열의 형식을 사용해서 index가 들어가는 곳에 key값을 넣었더니 coworkers["data scientist"] 데이터를

가져올 수 있엇다.

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

그래서 coworkers[key]를 하면 첫번째의 key값으로  programmer 두번째는 designner 세번째는 ....

이렇게 되는 것이다.

(물론 순서는 다를 수 있다. key값은 순서를 보장하지 않는다)

32강 객체 프로퍼티와 메소드

객체에는 어떤 데이터를 담을 수 있다.

문자, 숫자, 배열 등등... 다 담을 수 있다.

그중에 하나 함수도 담을 수 있다.

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

var showAll = function( ) { } 은 function showAll( ) { }과 같은 표현이다.

var key in coworkers에서 coworkers라는 이름이 박혀 있기 때문에 객체의 이름이 바뀌면

데이터를 가져오지 못할 수 있다.

그런 경우를 대비해서 showAll이라는 이 함수 안에서 

이 함수가 소속된 객체를 가리키는 약속된 기호가 있는데 

'this'를 사용하면 된다.

  <h2>Property & Method</h2>
    <script>
      coworkers.showAll = function(){
        for(var key in this) {            //coworkers를 this로 바꿨다!
          document.write(key+' : '+this[key]+'<br>');
        }
      }
      coworkers.showAll();
    </script>

이렇게하면 객체의 이름이 변해도 this는 자기 자신을 가리키기 때문에 영향받지 않는다.

조금 아쉬운건 여기있는 showAll조차도 coworkers에 소속된 데이터기 때문에 showAll도 화면에 표시가 되는데

이것을 해결하기 위해선 for문 안에 if문으로 showAll을 제외한다고 코딩해야하지만 지금은 중요하지 않다.

////////////////////////////////////////////////////////////////////////////////

우리는 객체에 소속된 변수의 값으로 함수를 지정할 수 있어서

객체에 소속된 함수를 만들 수 있다.

이런 객체에 소속된 함수를 메소드(Method)라고 부른다.

그리고 변수의 값으로 함수가 아닌 문자열, 숫자, 등이 지정된 것은 프로퍼티(Property)라고 부른다.

33강 객체의 활용

25강 함수

함수는 영어로 function이라고 부른다.

함수는 코드를 잘 정리정돈 하기 위한 도구나 수납상자이다.

나중에 객체를 배우면 메소드(method)라고 부르는 경우도 있다.

See the Pen 함수 기본 by egoing (@egoing) on CodePen.

코드가 연속적으로 반복된다면 반복문을 쓰겠지만

연속적이지 않게 반복된다면 반복문을 쓸 수 없다. 

이럴 때 등장하는 것이 함수이다.

<script>
        function two(){
          document.write('<li>2-1</li>');
          document.write('<li>2-2</li>');
        }
</script>

함수를 만들 때 앞에 function이라고 적어준다.

그리고 만들려는 함수의 이름을 알려준다. 여기서는 two

괄호( )는 나중에 설명하고 그 다음 중괄호 { }에 반복되는, 재사용하고 싶은 코드를 붙여넣기 한다.

함수를 사용할 때 two(); 이렇게 적어주면 된다.

26강 함수: 매개변수와 인자

우리가 지금까지 살펴본 함수는 자판기에 제품에 하나밖에 없어서

언제나 똑같은 제품을 받을 수 있는 자판기이다.

원하는 제품을 선택하면 해당되는 구체적인 제품을 제공해 주는 자판기가 있다면 훨씬 더 효용이 있을 것이다.

제품을 선택하는 것은 '입력'

자판기가 그 입력에 대해 해당된느 제품을 제공하는 것은 '출력'이라고 할 수가 있다.

입력과 출력에 해당되는 것이 수학적으로는 함수라는 것이다.

//////////////////////////////////////////////////////////

함수는 입력과 출력으로 이어져 있는데

입력에 해당되는 것이 '파라미터(parameter)' 한국어로는 '매개변수'

                             '어규먼트(argument)' 한국어로는 '인자'이다.

See the Pen 매개변수와 인자 by egoing (@egoing) on CodePen.

 <script>
      function onePlusOne(){
        document.write(1+1+'<br>');
      }
      onePlusOne(); // 2
      
      function sum(left, right){
        document.write(left+right+'<br>');
      }
      sum(2,3); // 5
      sum(3,4); // 7
 </script>

onePlusOne은 언제나 똑같이 동작하는 함수다.

sum은 입력값이 무엇이냐에 따라 다른 결과를 화면에 출력하는 함수이다.

sum(left, right)에서 left와 right는 한국어로는 매개하는 변수라고 해서 매개변수(parameter)라고 부른다.

sum(2,3)에서 2와 3이라는 값을 한국어로는 인자(argument)라고 부른다.

그리고 이 값을 받아서 함수 안으로 매개해주는 변수를 매개변수라고 하는 것이고.

27강 함수: 리턴

출력은 리턴(return)이라고 부른다.

리턴을 하기전에 표현식(expression)이라는 것이 무엇인지를 알아보자.

console

>1+1                  1+1은 2에 대한 표현식이다.

<2

>2-1                    2-1은 1에 대한 표현식이다.

<1

>1===1               1===1은 true에 대한 표현식이다.

<true

함수도 마찬가지다.

/////////////////////////////////////////

 <script>
      function sum(left, right){
        document.write(left+right+'<br>');
      }
      sum(2,3); // 5
      sum(3,4); // 7
 </script>

이전에 만든 sum함수를 실행시키면 

1.좌항가 우항을 더한다.

2.<br>태그를 뒤에 추가해서 줄바꿈을 해준다.

3.화면에 써 준다.

이렇듯 여러가지 기능이 있지만 

이제는 전부 다 빼고 sum을 실행시키면 나오는 값인 '5가 되는 표현식'을 만들고 싶다.

그걸 위해서 return이 필요하다.

See the Pen 함수 - 리턴값 by egoing (@egoing) on CodePen.

<h2>Return</h2>
    <script>
      function sum2(left, right){
        return left+right;
      }
      
      document.write(sum2(2,3)+'<br>');
      document.write('<div style="color:red">'+sum2(2,3)+'</div>');
      document.write('<div style="font-size:3rem;">'+sum2(2,3)+'</div>');
    </script>

sum2를 실행한 결과가 sum처럼 무언가를 실행하는 것이 아니라

left+right를 더한 값을 돌려 준다면 sum2(2,3)이 5에 대한 표현식이 된다.

'돌려준다' 즉, return이다.

계산이라는 기능만을 이 sum2라는 함수가 구현함으로써 

우리는 저 원자화된 기능을 다양한 맥락에서 활용할 수 있는 자유도가 생기게 되었다!

28강 함수의 활용

함수를 이용해서 코드를 효율적으로 바꾸는 리팩토링 작업이다.

See the Pen 함수의 활용 by egoing (@egoing) on CodePen.

nightDayHandler라는 함수 안에 onclick의 자바스크립트를 담아서 효율성을 높였다.

function nightDayHandler(self){
    var target = document.querySelector('body');
    if(self.value === 'night'){          // this를 self로 바꿨다.
      target.style.backgroundColor = 'black';
      target.style.color = 'white';
      self.value = 'day';
      var alist = document.querySelectorAll('a');
      var i = 0;
      while(i < alist.length){
        alist[i].style.color = 'powderblue';
        i = i + 1;
      }
    } else {
      target.style.backgroundColor = 'white';
      target.style.color = 'black';
      self.value = 'night';
      var alist = document.querySelectorAll('a');
      var i = 0;
      while(i < alist.length){
        alist[i].style.color = 'blue';
        i = i + 1;
      }
    }
  }

onclick이라는 이벤트 안에서 this는 input태그를 가르키고 있었지만 

우리가 독립된 함수(function)를 만들게 되면 this는 더 이상 input이 아니라 

전역객체를 가리키게 된다.

웹브라우저에서는 윈도우를 가리키게 된다. (이건 지금은 이해하지 못한다. 넘어가야한다.)

그래서 this의 값을 input을 가리키게 하기 위해서 매개변수를 이용해야한다.

<input id="night_day" type="button" value="night" onclick="
    nightDayHandler(this);
  ">

input태그 안의 nightDayHandler에 this인자 값을 주고 function에는 self라는 매개변수를 주는 것이다.

20강 배열

데이터가 많아짐에 따라서 

그 많은 데이터를 그냥 둘 수 없기 때문에

그 데이터 중에 서로 연관된 데이터를 잘 정리정돈해서 담아 두는 

일종의 수납상자를 배열이라고 생각하면 된다.

See the Pen 배열 by egoing (@egoing) on CodePen.

배열은 대괄호로 시작해서 대괄호로 끝난다. 

ex) ["egoing", "leezche"]

var coworkers = ["egoing", "leezche"];

coworkers라는 변수에 배열이라는 새로운 데이터 타입을 담았다.

데이터 타입에  cowerkers라는 이름을 붙인 거라고도 얘기 할 수 있다.

지금 우리는 새로운 수납상자를 집에 갖다 놓고서 그 안에 물건을 2개 넣은 것과 같은 상황인 것이다.

//////////////////////////////////////////////////

수납상자를 만들었으니 물건을 꺼내는 방법을 알아보자.

<script>
  document.write(coworkers[0]); // egoing
  document.write(coworkers[1]); // leezche
</script>

이렇게 하면 0번은 egoing 1번은 leezhe가 나온다.

즉, 첫번째 자리는 0번째이다.

egoing이나 leezhe를 인덱스(index)라고 하는데 egoing은 index 0번째 leezhe는 index 1번째라고 하는 것이다.

//(추가) 21강 //배열에서 각각의 항목들을 원소(element)라고 부른다.

///////////////////////////////////////////////////

들어가 있는 값이 몇 개인가를 확인하는 방법

<script>
  document.write(coworkers.length);    // 2
</script>

우리가 인덱스를 정할 때는 0은 첫 번째고, 1은 두 번째가 된다.

그런데 개수를 셀 때는 1부터 세기 때문에 length의 값은 2가 된다.

///////////////////////////////////////////////////

데이터를 추가하는 방법.

<script>
  coworkers.push('duru');
  coworkers.push('taeho');
  
  document.write(coworkers.length); // 4
</script>

push를 이용해서 duru,taeho를 추가한 후 lenght값을 확인하니 4가 되어있다.

21강 반복문

반복문은 영어로 루프(Loop)라고 부른다.

See the Pen 반복문 by egoing (@egoing) on CodePen.

while이라고 하는 것은 반복문의 키워드다.

for문 같은 것이 있는데 여기서는 while만 다룬다.

while의 괄호( ) 안에는 if문처럼 불이언 데이터 타입인 true나 false가 들어간다.

true인 동안은 중괄호{ } 안에 있는 코드들이 반복적으로 실행되고 

false가 되면 멈춘다.

false가 되면 while문 바깥쪽에 있는 코드가 그때서야 실행되는 것이다.

즉, 반복문 이라는 것은 순서대로 실행되는 프로그램의 실행 순서의 흐름을 제어하는 제어문이라고 할 수 있다.

+if문... 조건문도 제어문이다.

/////////////////////////////////////////////////////////

코드가 몇 번 실행됐는지 어딘가에 적어 놓을 필요가 있다.

그걸 하기 좋은 것은 변수인데 

관습적으로 i라는 변수에 그런 역할을 시킨다.

 var i = 0;
    while(i < 3){
      document.write('<li>2</li>');
      document.write('<li>3</li>');
      i = i + 1;
    }

i = i +1; 이라는 것은 반복문이 실행될 때마다

'기존의 i의 값에 1을 더한 결과를 i의 새로운 값으로 준다'라는 뜻이다.

그러면 i가 0부터 시작해서 이 코드가 실행될 때마다 값이 1씩 증가한다.

만약 반복문을 3번 실행시키고 싶다면 i < 3 라고 하면 되는 것이다.

21강 배열과 반복문

See the Pen 반복문과 배열 by egoing (@egoing) on CodePen.

배열에서 각각의 항목들을 원소(element)라고 부른다.

   <script>
        var i = 0;
        while(i < coworkers.length){
          document.write('<li>'+coworkers[i]+'</li>');
          i = i + 1;
        }
   </script>

다음과 같은 결과가 나온다.

22강 배열과 반복문의 활용

See the Pen 배열과 반복문의 활용 by egoing (@egoing) on CodePen.

querySelector라고 하는 저 메소드, 함수, 명령(다 같은 말이다)은 a태그에 해당되는 태그 중 

첫 번째 등장하는 것 하나만 가져오는 특성을 가지고 있다.

그래서 

querySelectorAll을 사용하는데 그럼 대괄호 안에 a태그를 모두 가져온다.

대괄호는? 배열이다.

물론, 정확한 배열은 아니고 노드 리스트라는 걸 출력하긴 하지만 배열이라고 생각하면 된다.

리팩토링(Refactoring)이라는 것은 

re 다시 factory 공장에 보낸다

공장으로 다시 보내서 좀 더 개선한다, 이런 느낌으로 생각하면 된다.

비효율적으로 코드를 효율적으로 만들어서

가독성을 높이고, 유지보수를 하기 편하게 만들고, 중복된 코드를 낮추는 이러한 

방향으로 코드를 다시 개선하는 작업을 리팩토링이라고 한다.

 <input id="night_day" type="button" value="night" onclick="
    if(document.querySelector('#night_day').value === 'night'){
      document.querySelector('body').style.backgroundColor = 'black';
      document.querySelector('body').style.color = 'white';
      document.querySelector('#night_day').value = 'day';
    } else {
      document.querySelector('body').style.backgroundColor = 'white';
      document.querySelector('body').style.color = 'black';
      document.querySelector('#night_day').value = 'night';
    }
  ">

만약에 저 버튼을 다른 곳에도 넣고 싶어서 코드를 그대로 복사 붙여넣기 하면

night_day라는 id가 중복되버려서 제대로 작동하지 않는다.

night_day2이런식으로 id를 바꿔야지만 작동한다. 

이것은 너무 불편하고 손이 많이 가니 좀 더 효율적으로 바꿔보자.

See the Pen 리팩토링 by egoing (@egoing) on CodePen.

이 코드가 속해 있는 태그는 input태그다.

그 태그를 가리키도록 약속되어 있는 특수한 키워드가 있는데 바로

this다.

그러면 id="night_day"를 지우고 document.querySelector('#night_day')를 this로 바꿔주면 된다.

이렇게하면 다른 곳에 이 버튼을 넣고 싶으면 그냥 복사 붙여넣기 하면 된다.

///////////////////////////////////////////

document.querySelector('body')라고 되어 있는 부분이 중복해서 등장하고 있다.

이 중복을 없애기 위해서 target이라는 변수를 만들고

var target = document.querySelector('body');

document.querySelector('body')을 target으로 대체한다. 

그러면 코드의 양이 줄었고 target만 바꾸면 target변수를 사용하는 모든 코드가 한 번에 변하는

폭발적인 효과를 갖게 된다.