5판 7장 객체(Object)와 배열(Array)

2017. 11. 13. 23:25

[ 5판 7장 객체(Object)와 배열(Array) ]

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript">
      // [ 객체(object) ]
      // 1. 빈 객체 생성
      var book = {};
      // 2. 선언과 동시에 객체 생성
      var book2 = {
        title : 'book2의 제목',
        page : 12
      };
      // 3. 세번째 객체 생성 방법
      var book3 = new Object();

// [ 동적으로 객체의 속성(프로퍼티)를 선언하기 ]
      book.title = 'book1의 제목';
      book.page = 20;
      // 동적으로 객체의 프로퍼티에 객체를 할당하기
      book2.chapter1 = {
        title : 'chapter1의 제목',
        page : 30
      };
      book.chapter1 = new Object();
      book.chapter1.title = 'book chapter1의 제목';
      book.chapter1.page = 102;
      // 이처럼 언제든지 동적으로 새로운 속성(프로퍼티)를 할당할 수 있다.
      alert("book chapter1의 제목과 페이지 : " + book.chapter1.title + " : " + book.chapter1.page);
      alert(book2["chapter1"]["title"]);

// [ 객체에 특정 속성(프로퍼티)가 존재하는지 확인하기 ]
        // "프로퍼티명" in 객체명
      if ( "title" in book ) {
        alert("book객체에 title 속성이 존재합니다.");
      }

// [ 객체가 어떤 객체인지 확인하기 ]
        // instanceof
      if ( book instanceof Object ) {
        alert("book은 Object의 객체입니다.")
      }

// [ 객체의 속성(프로퍼티) 삭제하기 ]
        // delete 객체명.프로퍼티명
      delete book.title; // delete는 아예 속성을 제거하는 것으로 빈 문자열이 들어가는게 아니라
      // 아예 사라지게 됨 따라서 아래에서 book.title을 찍어보면 undefined가 나오는 것을 알 수 있다.

// [ 배열에 접근하는 두가지 방법 ]
      // 1. 객체명.속성명
      // 2. 객체명["속성명"]
          // : 두번째 방법은 []안에 문자열이 들어오게 된다. 첫번째는 문자열이 아닌 키워드!
          // 이게 무슨 의미가 있을까?
          //  만약, 사용자나 개발자에 의해서 객체의 속성명이 정해지게 된다면 객체명.속성명으로는
          //  조회를 할 수 없을 것이다. 왜? 아직 해당 속성명이 무엇이 될지 알 수 없으니까
          //  하지만, []안에 문자열로 접근하는 이 방식은 그 것이 가능하다.
      // EX)
      var inputVar = "newProperty"; // 사용자가 속성명으로 하고 싶은 명칭을 입력 받음
      book[inputVar] = "newProperty의 값"; // book.inputVar은 불가능하지만, 이건 가능하다.
      alert(book[inputVar]);

// 이때!!!, 어떤 변수명이 넘어올지 알 수 없을 때 객체 내에 있는 속성명을 조회할 수 있는 방법은??
        // (for 변수 in 객체명) 을 사용하면 된다.
        // 그러면 객체의 속성(프로퍼티)명이 변수에 하나씩 담기게 된다.
      //EX)
      for (propertyVal in book) {
        alert(propertyVal + " 속성의 값은 : " + book[propertyVal]);
      }

// 값이 null이거나 undefined가 아닌 경우를 체크하는 코드
      if ( !book.title ) {
        alert("book.title은 null도 undefined도 아닙니다.");
      }

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

// [ 배열(Array) ]
      // JS의 배열은 자바와 달리 다양한 타입을 한 배열에 담을 수 있다.

// 1. 배열의 선언 방식
        // 1)
          var arr1 = [1,2,3,4];
        // 2)
          var arr2 = new Array(5)[1,2,3,4,5];
      // 2. 다양한 타입을 담을 수 있는 배열
        var arr3 = [1,true,false,"string",{title:'제목',page:12}]; // 객체조차 담을 수 있다.(배열안에 배열도 가능)

// 3. 배열에서 제공하는 다양한 메서드 및 리터럴
        // 1) length : 배열의 element 갯수를 반환하는 리터럴이다.
            alert("arr3배열의 element개수는 : " + arr3.length);

// 2) join() : 배열의 각 element를 합쳐서 한 문자열로 반환한다.
            // join() 은 기본형으로 [1,2,3,4].join()시 => "1,2,3,4"를 반환하고
            // join("-")은 [1,2,3,4].join('-') => "1-2-3-4";를 반환한다.
            alert([1,2,3,4].join('-'));

// 3) split('') : join과 반대로 특정 단위를 기준으로 배열을 반환한다.
            var arrString = "1,2,3,4";
            var arrSplit = arrString.split(",");
            alert(arrSplit.toString()); // 배열의 toString()은 각 배열원소를 ,로 묶어 문자열로 반환한다.

// 4) concat() : 현재 배열에 특정 element를 추가한다.
            var arr4 = [1,2,3,4];
            arr4 = arr4.concat(5,6,7);
            alert(arr4.toString());

// 5) slice(startIndex, lastIndex+1) : 시작인덱스 ~ 끝인덱스 하나 전까지 배열을 잘라낸다.
            var arr5 = [1,2,3,4,5,6];
            arr5 = arr5.slice(2,4); // 3,4
            alert(arr5.toString());

// 6) splice(startIndex, lastIndex+1, 추가할 값들...)
            // : 시작인덱스 ~ 끝인덱스 까지는 배열의 값을 잘라내고 해당 배열에는 잘래내진 값들을 뺀 값들이 들어있다.
            // 만약, 3번째 인자를 입력시 startIndex부터 3번째 인덱스에 입력한 값들이 추가되게 된다.
            // EX)
            var arr6 = [1,2,3,4,5,6,7];
            var arr7 = arr6.splice(1,4); // arr7에는 2,3,4가 들어가게 되고, arr6에는 1,5,6,7이 남아 있게 된다.
            alert("arr6 : " + arr6.toString());
            alert("arr7 : " + arr7.toString());

var arr8 = [1,2,3,4,5,6,7];
            arr8.splice(2,0,true,false,"string"); //2번 인덱스부터 0개 빼지 안하겠다는 거고 2번인덱스부터 true, false, String을 추가한다.
            alert("arr8 : " + arr8.toString()); // 1,2,true,false,String,3,4,5,6,7

// 7) sort() : 배열의 정렬
            // : default는 문자열 오름차순이다. 따라서, 숫자를 정렬하고 싶을 땐 익명 함수를 이용해야한다.
            // EX)
              // 1) default
                var arr9 = [3,4,7,6,9,2,1];
                alert("sort : " + arr9.sort().toString());
              // 2) 숫자 기준
                var arr10 = [3,4,12,5,22];
                arr10 = arr10.sort(function(a,b){
                  return (a-b);
                });
                alert("sort : " + arr10.toString());

// 8) push()와 pop()
              // push() : 마지막 배열요소에 새 element 값을 추가한다.
              // pop() : 마지막 배열요소를 꺼낸다.
            var arr11 = [1,2,3,4];
            arr11.push("true");
            alert("push : " + arr11.toString());
            var arr12 = [1,2,3,4];
            arr12 = arr12.pop();
            alert("pop : " + arr12);
    </script>
  </head>

저작자표시 비영리

'스터디 > 자바스크립트 완벽 가이드 정리' 카테고리의 다른 글

Text Node 제어와 Document 및 스크린, 스크롤 위치 제어 (0)	2017.12.05
Node 객체에 대하여(NODE 객체와 NODE객체 컨트롤하기) (0)	2017.12.03
이벤트 및 우클릭 방지 (0)	2017.11.28

악덕고용주의 개발 일기

5판 7장 객체(Object)와 배열(Array)

'스터디 > 자바스크립트 완벽 가이드 정리' 카테고리의 다른 글

+ Recent posts

티스토리툴바