WEB(5) : Java Script - 배열, 함수, 객체

 

정리정돈의 도구들 : 배열, 함수, 객체

 

시간이 지날수록 집에 살림은 늘어난다. 그러면 책장이나 수납상자와 같은 물품들을 구매하게 된다.
집에 있는 사물이 많아질수록 그 사물들을 정리정돈 할 필요성이 생기고, 그 필요성에 따라 여러 수납공간들을 마련하게 된다. 
프로그래밍도 마찬가지이다. 프로그래밍을 하게 되면 굉장히 많은 데이터를 다루게 되고, 데이터는 제각각 성격도 다르다. 데이터가 많아짐에 따라 코드가 감당하지 못할만큼 복잡해지면 우리는 수납상자를 통해 정리정돈을 한다.
이렇게 서로 연관된 데이터를 정리정돈에서 담아두는 수납상자를 배열, 함수, 객체라고 한다.
그 중 가장 작은 배열 수납상자부터 알아보자.

 

배열

문자가 따옴표로 시작해서 따옴표로 끝나듯이, 배열은 대괄호로 시작해서 대괄호로 끝난다.

대괄호 안에는 여러 개의 값을 적을 수가 있으며 값과 값 사이는 콤마로 구분한다. 

배열 안의 값들을 원소(element)라고 부른다. 새로운 수납상자를 만들어 물건을 그 안에 넣은 것이라고 볼 수 있다.

이렇게 만들어진 배열은 쓰고 편함을 위에 변수 안에 담는다. 새로운 데이터 타입이 변수 안에 담긴 것이다.

<script>
//변수 coworkers 안에 egoing, leezche로 이루어진 수납상자 배열이 담겼다
var coworkers = ["egoing", "leezche"];
</script>

<script>
//수납상자 안의 첫번째 물건을 꺼내온다.
document.write(coworkers[0]); //egoing 출력

//안에 들어있는 값이 몇개인지 체크한다.
document.write(coworkers.length); //2 출력

//새로운 값을 추가한다.
coworkers.push('taeho');
</script>

 

배열과 반복문의 합성

<!-- 4가지 항목으로 이루어진 리스트 -->
<ul>
        <li>egoing</li>
        <li>leezche</li>
        <li>duru</li>
        <li>taeho</li>
</ul>

<!-- 위의 문장은 아래와 같이 바꿀 수 있음 -->
<ul>
<script>
        var coworkers = ['egoing','leezche','duru','taeho'];
        var i = 0;
        while(i < coworkers.length) {
        document.write('<li>'+coworkers[i]+'</li>');
        i++;
	}
</script>
</ul>

아래와 같이 코드를 수정하면 while문 안에 (i < coworkers.length)에 의해 coworkers 배열 안에 원소를 추가하거나 삭제해도 자동으로 반영되는 탄력적인 로직을 가질 수 있다. 

컴퓨터는 많은 경우에 서로 연관된 데이터를 배열로 돌려주기 때문에 배열과 반복문은 무척 중요하다.

 

 

함수

코드가 많아지면 그 코드를 정리정돈하는 것이 필요해진다. 이 때 반복되는 문장은 함수라는 도구로 묶어서 정리정돈 할 수 있다. 

함수란 문장들의 집합이며, 문장을 묶어서 이름을 붙여놓은 것이다.

<ul>
        <script>
            document.write('<li>1</li>');
            document.write('<li>2-1</li>');
            document.write('<li>2-2</li>');
            document.write('<li>3</li>');
            document.write('<li>2-1</li>');
            document.write('<li>2-2</li>');
            document.write('<li>2-1</li>');
            document.write('<li>2-2</li>');
        </script>
    </ul>

위의 리스트에는 2-1과 2-2가 반복적으로 등장하고 있다. 그렇다면 아래와 같이 함수 안에 코드를 담아

중복되는 문장을 제거할 수 있다.

<ul>
     <script>
        //two()함수를 만든다
        function two(){
        document.write('<li>2-1</li>');
        document.write('<li>2-2</li>');
        }
        document.write('<li>1</li>');
        //two()함수를 사용한다
        two();
        document.write('<li>3</li>');
        two();
        two();
	 </script>
</ul>

위와 같이 중복을 제거한 함수는 함수 안에 내용을 그대로 찍어내주기 때문에 언제나 똑같은 제품을 받을 수 있는 자판기이다. 원하는 제품을 선택하면 자판기가 그 제품에 해당되는 구체적인 제품을 제공해줄수는 없을까?

즉, 함수의 입력에 따라 다른 결과를 출력하게 만들고 싶다면?

제품을 선택한다는 건 입력이라고 할 수 있고, 해당 입력에 따라 자판기가 제품을 제공하는 것을 출력이라고 할 수 있다. 그 입력과 출력에 해당하는 것이 수학에서는 함수 이다.

함수는 입력과 출력으로 이루어져 있으며, 입력에 해당되는 것이 파라미터(매개변수)라고 부르는 인자이다.

출력에 해당되는 것은 리턴이다.

<script>
//left와 rigth 이름으로 입력값을 받는다
function sum(left,right) {
  document.write(left+right)
 }
        sum(2,3); //5
        sum(3,4); //7
</script>

위의 sum() 함수는 left와 right를 입력값으로 받아서 그 둘을 더한 값을 결과로 출력해준다.

(함수에 값을 입력하면 left와 right 라는 이름으로 저장되는 것이다)

• 여기에서 함수로 전달하는 2와 3, 3과 4와 같은 값을 인자, argument라고 부르고
• 이 값을 받아 함수 안으로 매개해주는 left와 right를 매개변수, parameter라고 부른다.

 

리턴(return)이란?

1+1이란 2에 대한 표현식, 2-1은 1에 대한 표현식이다. 1===1은 true에 대한 표현식이다.

sum(2,3)을 실행시키면 5가 되는 표현식을 만들고 싶다. 이런 경우 리턴이라는 것을 사용한다.

실행하는 것이 아니라 돌려주는 것을 원한다 ⇒ return

<h2>Return</h2>
    <script>
        function sum2(left,right) {
            return left+right;
        }
        document.write(sum2(2,3)) //숫자 5에 대한 표현식
        document.write('<div style="color:red">'+sum2(2,3)+'</div>');
        document.write('<div style="font-size:3rem;">'+sum2(2,3)+'</div>');
    </script>

계산이라는 기능만을 sum2()라는 함수가 구현함으로서 원자화된 기능을 다양한 맥락에서 활용할 수 있는 자유도가 생긴다.

 

 

객체

중복된 코드는 함수로 독립한다. 함수 역시 중복되는 경우에는 어떻게 해야할까?

 

앞서 우리는 변수를 정리정돈하는 도구인 배열과, 함수를 정리정돈하는 도구인 함수에 대해서 배웠다.

객체란 앞서 배운 배열, 함수와 마찬가지로 정리정돈하기 위한 수납상자이다.

코드가 많아지면 함수라는 것을 쓰고, 함수가 많아지면 함수와 연관된 변수들도 많아지면서

서로 연관된 함수와 변수를 그룹핑해서 잘 정리정돈 하기 위해 객체라는 도구를 사용한다.

객체에 속해있는 함수는 메소드라고 부른다.

 

앞서 배운 배열이라는 도구는 정보를 담는 그릇이면서 정보가 순서대로 저장되는 특징이 있다.

순서없이 정보를 저장하는 것이 객체이며, 데이터를 무작위로 집어넣는 것이 아닌

우리가 수납상자에 물건을 넣었다가 꺼낼 필요가 있다면 물건이나 사물에 이름을 붙여

그 이름을 통해 물건을 꺼내게 된다.

즉, 객체란 이름이 있는 정리정돈 상자이다.

 

객체를 만들 때는 중괄호 { }를 쓴다.

<h2>Create</h2>
    <script>
        var coworkers = {
            "programmer" : "egoing",
            "disigner" : "leezche"
        };
        document.write("programmer : " +coworkers.programmer);
    </script>

coworkers라는 객체에 “egoing”이라는 정보를 “programmer”라는 이름을 붙여 저장한 것이고,

“leezche”라는 정보를 “disigner”라는 이름을 붙여 저장한 것이다.

여기서 왼쪽의 이름은 프로퍼티의 이름, 오른쪽의 정보는 프로퍼티의 값이라고 한다.

객체에서 가져오고 싶은 정보에 도달하는 열쇠이기 때문에 왼쪽을 key, 오른쪽을 value라고 부르기도 한다.

이 정보를 꺼내올때는 coworkers.programmer와 같이 객체와 정보를 가리키는 이름(key)를 쓴다.

var 객체이름 = {

    프로퍼티1이름 : 프로퍼티1의값,

    프로퍼티2이름 : 프로퍼티2의값,

    ...

};

//예제
var kitty = {

    name: "나비",

    family: "코리안 숏 헤어",

    age: 1,

    weight: 0.1

};

document.write("우리 집 새끼 고양이의 이름은 " + kitty.name + "이고, 종은 " + kitty.family + "입니다.");

각각의 프로퍼티는 이름과 값을 콜론(:)으로 연결하고, 쉼표(,)를 사용해 다른 프로퍼티와 구분한다.

http://www.tcpschool.com/javascript/js_object_create

코딩교육 티씨피스쿨

<script>
//객체 안에 새로운 정보를 추가하는 방법
      coworkers.bookkeeper = "duru";
      document.write("bookkeeper : "+coworkers.bookkeeper+'<br>');
      coworkers.data_scientist = "taeho";
      document.write("data scientist : "+coworkers.data_scientist);
</script>

<h2>Iterate</h2>
    <script>
        //coworkers 객체의 모든 정보를 꺼내오기
        for(var key in coworkers) {
        //객체에 있는 key값을 가져오는 반복문 
        document.write(key+'<br>');    
        }
        for(var key in coworkers) {
        //객체에 있는 value값을 가져오는 반복문
        document.write(coworkers[key]+'<br>');    
        }

    </script>

 

객체 안에는 메소드도 포함시킬 수 있다.

객체에 소속된 함수를 메소드라고 부르고, 객체에 소속된 변수는 프로퍼티라고 부른다.

<h2>property & method</h2>
    <script>
        //coworkers 객체에 showAll() 메소드를 추가하고 싶다
        coworkers.showAll = function() {
        for(var key in coworkers) {
            document.write(key+':'+coworkers[key]+'<br>');    
            }
        }
        coworkers.showAll();

    </script>

 

 

 

jQuery, UI & API

자바스크립트 라이브러리 중 가장 유명한 것은 jQuery 라이브러리이다. 이것을 사용하면 직접 코딩하는 것보다 생산성이 훨씬 더 높아진다.

jQuery의 CDN을 통해 자기 서버에 파일을 보관해놓고, 스크립트 src를 통해 간편하게 사용 가능하다.

 

 

UI vs API

UI는 유저 인터페이스의 약자, API는 애플리케이션 프로그래밍 인터페이스의 약자이다.

누르면 경고창이 뜨는 버튼이 있다. 이 버튼은 앱을 사용하려는 사용자가 사용하는 버튼이다.

사용자가 시스템을 제어하기 위해 사용하는 조작장치를 유저 인터페이스(UI)라고 부른다.

버튼을 눌렀을 때 뜨는 경고창은 우리가 만든 것일까? 아닌 것일까? 

경고창에 표시되는 텍스트는 우리가 만든 것이지만, 경고창의 기능이나 모양은 우리가 만든 것이 아니다.

경고창은 웹브라우저를 만든 사람들이 미리 만들어놓은 것으로, alert 함수를 실행하면 경고창을 띄워주겠다고 약속한 것이다. 

함수 alert은 경고창을 실행하는 조작장치이며 이 조작장치는 일반인이 사용하는 것이 아닌 프로그래머가 애플리케이션을 만들기 위해 프로그래밍 할 때 사용하는 것이다. 

이렇게 애플리케이션을 만들기 위해 프로그램을 할 때 사용하는 조작장치를 애플리케이션 프로그래밍 인터페이스(API)라고 한다.

 

 

 

 

 

 

 

해당 게시글은 '생활코딩' 님의 자바스크립트 강의를 참고하였습니다.

출처 https://www.youtube.com/watch?v=dPRtcRwKo-Y&list=PLuHgQVnccGMBB348PWRN0fREzYcYgFybf