JavaScript

표준 내장 객체의 확장

표준 내장 객체(Standard Built-in Object)는 자바스크립트가 기본적으로 가지고 있는 객체들을 의미한다. 내장 객체가 중요한 이유는 프로그래밍을 하는데 기본적으로 필요한 도구들이기 때문에다. 결국 프로그래밍이라는 것은 언어와 호스트 환경에 제공하는 기능들을 통해서 새로운 소프트웨어를 만들어내는 것이기 때문에 내장 객체에 대한 이해는 프로그래밍의 기본이라고 할 수 있다. 

자바스크립트는 아래와 같은 내장 객체를 가지고 있다. 

  • Object
  • Function
  • Array
  • String
  • Boolean
  • Number
  • Math
  • Date
  • RegExp

이제 우리는 내장객체라는 하늘에서 뚝떨어진 이것들이 무엇인지를 보다 잘 이해할 수 있게 되었다. new가 무엇인지, 함수가 객체를 어떻게 만드는지도 알았다. 또 원한다면 자바스크립트의 내장 객체와 같은 것을 우리도 만들 수 있다는 것도 알았다. 이러한 지식을 바탕으로 좀 더 멋진 일을 해보자.

배열을 확장

배열을 확장해보자. 아래 코드는 배열에서 특정한 값을 랜덤하게 추출하는 코드다. 

var arr = new Array('seoul','new york','ladarkh','pusan', 'Tsukuba');
function getRandomValueFromArray(haystack){
    var index = Math.floor(haystack.length*Math.random());
    return haystack[index];	
}
console.log(getRandomValueFromArray(arr));

이렇게 작성해도 된다! 잘못한 것이 아니다. 하지만 조금 더 세련된 방법은 이 함수를 배열 객체에 포함시키는 것이다. 그렇게하면 마치 배열에 내장된 메소드인 것처럼 위의 기능을 사용할 수 있다.

Array.prototype.rand = function(){
    var index = Math.floor(this.length*Math.random());
    return this[index];
}
var arr = new Array('seoul','new york','ladarkh','pusan', 'Tsukuba');
console.log(arr.rand());

댓글

댓글 본문
작성자
비밀번호
  1. BANIP
    제이쿼리 플러그인을 어떻게 만들지만 생각하고 있었는데 빌트인 객체를 대상으로 prototype이 사용이 가능하다니..
    오늘도 생각의 폭을 넓혀주는 강좌 감사합니다
  2. 전성욱
    전에 동네 도서관에서 이고잉님이 쓰신 자바입문책을 봤었습니다. 반가워서 들고 술술 훑어보니 동영상강의를 책으로 옮겨놓은것같이 쉽게 풀어서 설명하셨더라구요
    읽기슆고 이해하기 쉽고 이만한 코딩책도 없다 싶었지만 조금 이해가 안되는 부분이 class A extends B(){}와 같이 클래스명, 변수명을 아무 의미도 없는 값으로 넣으시는 습관이었습니다.
    제가 생각하기에는 개발자 언어를 배우는데 있어서 초보자티를 막 땐 아마추어가 맞닥드리는 가장 큰 난관이, 의미가 무엇인지 어떻게 쓰는지는 이해가 되는데 어디서 어떻게 활용해야되느냐라는 문제입니다
    특히 객체지향이나 클로저같이 복잡한 개념은 열심히 익히고 배워놔도 실전에서 이게 객체지향을 써야 이쁘게될지 함수지향으로 작성해야 칭찬받을지 감이 안잡히는 경우가 많습니다
    API인지 변수명인지 헷갈리는걸 염두에 두어 일부러 의미없는 문자를 변수명으로 삼은 이고잉님의 사려깊은 뜻은 알겠지만 활용법을 모르면 삼일만에 까먹는 경우도 다반사입니다 ㅠㅠ
    biheanggi나 yongdon과 같은 변수명이라도 사용하시는게 어떨까 싶습니다
  3. 신입1
    감사합니다
  4. 괜찮아
    이런 실용적인 예제도 재미있는 것 같아요.
    prototype의 중요성에 대해서 실감이 나네요!
  5. 임지호
    표준 내장 객체 : 자바스크립트가 기본적으로 제공하는 객체.
    - 표준 내장 객체에 우리가 필요로 하는 기능이 없을 수도 있다. 그럴 때 그 함수를 직접 만들 수도 있지만
    객체에 메소드로 확장시키는 방법도 있다.
    - 객체.prototype.메소드이름 = function() {}하게 되면 그 객체의 prototype에 메소드가 추가되면서 객체를 사용
    할 때도 메소드를 사용할 수 있게 된다.
  6. codegrow
    수소님 이고잉님은 아니지만 답변드립니다.
    this 관련 수업영상 보시면 아실텐데요.

    [this란?]
    "함수에서의 this는 그 함수가 속한 객체를 가리킨다." (웹브라우저라면 전역객체인 window를 nodejs면 global 이겠지요)
    "생성자를 통해 만들어진 객체에서의 this 는 그 만들어진 객체 자신을 가리킨다."
    "해당 메서드에 연결된 객체를 가리킨다" - (여기서 이 말이 적용됩니다.)

    arr.rand() 에서
    arr은 객체이고 , rand()는 해당 메서드 입니다.
    즉, rand()라는 Array.prototype에 정의된 메서드에 들어있는 this는 ~~ arr이라는 객체를 가리키게 됩니다.
    그래서 return this[index]가 arr[index]가 되어 랜덤하게 결과가 나오는 것이지요~
    대화보기
    • 수소
      Array.prototype.rand = function(){
      var index = Math.floor(this.length*Math.random());
      return this[index];
      }
      var arr = new Array('seoul','new york','ladarkh','pusan', 'Tsukuba');
      console.log(arr.rand());

      1~4번 라인에서 arr에 연결?시키는 부분이 없는것같은데 어떻게 this가 arr배열이라는걸 알 수 있는건가요?
    • 버미
      랜덤함수는 0보다 크고 1보다 작은 값을 랜덤으로 출력합니다. 그럼 배열의 크기가 5일때 배열의 크기 * 랜덤함수출력값이 5인경우는 없겠죠.
      대화보기
      • 감사합니다. 1보다 작은값이라면..납득이가요
        대화보기
        • 완료!
          완료! 감사합니다~
        • 카구
          length가 5라는 것은 배열의 인덱스 0, 1, 2, 3, 4 에 대한 "길이에 대한 크기 5" 를 리턴하는거에요~!!
          대화보기
          • minkim
            저도 처음에는 그렇게 생각했는데 0보다는 크고 1보다는 작은수가 나오는 것 같습니다. console을 해보니..
            그래서 Math.floor로 인해 5를 곱하면 0~4까지 골고루 나오는 것이지요.
            대화보기
            • Math.random메소드에 1이 포함되면, this.length가 5니까, index값도 5까지 나오는 거 아닌가요?그치만
              0~4까지 필요한거 아닌가요?
            • 취준생1
              감사합니다!
            • Tae-Hee Kang
              "프론트엔드 개발자를위한 자바스크립트 프로그래밍" - 저자 니콜라스 자카스지음
              책에서는 "0과 1 사이의 난수를 반환하되 0이나 1을 반화하지는 앖습니다." 라고 되어있는데 아무래도 잘못된 번역인가 봅니다.
              mdn을 확인해보니 0(inclusive) 이라고 되어있네요.
              감사합니다
              대화보기
              • 0은 반환합니다.
                대화보기
                • 초보!
                  0부터 라는 말은 0도 반환하는거 아닌가요
                  0은 반환하는걸로 알고있었는데...
                  대화보기
                  • yihsang
                    많이 감사드립니다.
                  • 카스테라는없다
                    와 ㅋㅋㅋ 스크립트 언어라 그런지 정말 자유롭네요
                  • Harry S. Hur
                    실용적인 예제를 안쓰시는 대신 동영상 마지막 부분에 어떤식으로 웹개발업무에서 쓰여질 수 있는지 말로만 설명해주시면 더 도움이 될 듯 하네요~ 항상 감사합니다
                  • Tae-Hee Kang
                    random()메서드는 0과1사이의 난수를 반환하되 0이나 1을 반환하지는 않습니다.
                  • 이주환
                    2016. 04. 25

                    잘보고갑니다.
                  • JustStudy
                    고맙습니다
                  • 화니
                    아래 코드가 말이 되는 건가요?

                    function MyArray() {
                    for(var i=0; i < arguments.length; i++) {
                    this[i] = arguments[i];
                    }
                    this.length = arguments.length;
                    }

                    MyArray.prototype = new Array();
                    MyArray.prototype.rand = function(){
                    var index = Math.floor(this.length*Math.random());
                    return this[index];
                    }

                    var arr = new MyArray('seoul','new york','ladarkh','pusan', 'Tsukuba');

                    arr.rand();
                  • sugarui
                    아하 감사합니다.
                    대화보기
                    • 베리스트롱
                      궁금한게 생겼는데요
                      세번째 동영상에서 arr 변수에 담긴 배열을 this와 prototype을 활용해서 불러 오는 것 까지는 알겠는데요
                      만약 배열이 여러개라면 this 하나 가지고는 구분해서 가져 올수 없지 않나요?

                      this.[변수이름] 요런식으로 구분해서 가져오는건가요?
                    • JuWon Seong
                      Math.random()은 0에서 0.9999999999... 사이의 실수가 반환되니 그래서 5나올 확률은 0 입니다.
                      floor시키면 인덱스 값으로 0~4까지만 나오는 것이지요.
                      대화보기
                      • 임성국
                        아닌듯하네요.
                        0 ~ 0.9 => 0
                        1 ~ 1.9 => 1
                        ...
                        4 ~ 4.9 => 4
                        같습니다.
                        대화보기
                        • 삽질중
                          마지막 인덱스가 나올 확율이 낮네영
                        • 이현진
                          new Array() 나 Array()나 상관 없는듯하네요;;
                        • 포티와일라
                          예에 왜 new Array()를 사용하나요? Array()로도 되는데..
                        • 에르메스
                          Math.random ( ) 은 0부터 1미만의 수를 반환합니다. 1은 포함이되지 않기때문에 위와같이 사용이 가능해요 ^^
                        • 엠제이
                          var index = Math.floor(this.length*Math.random());

                          여기에 오류가 있는거 같습니다.
                          이렇게 하면 index에 5도 담길 수 있어 에러가 날거 같네요.
                        • 조신부리
                          감사합니다
                        • T-BONE Steak
                          개념이 착착 감깁니다. ㅎ
                        • 송js
                          최곱니다!
                        • 나무마루
                          감사합니다.
                        • 코난도일
                          "표준 내장 객체(Standard Built-in Object)는 자바스크립트가 기본적으로 가지고 있는 객체들을 의미한다. 내장 객체가 중요한 이유는 프로그래밍을 하는데 기본적으로 필요한 도구들이기 때문에다."

                          '때문에다' -> '때문이다', 오타입니다. :)
                        • egoing
                          (1)은 전역변수이고 (2)는 함수 내에서만 사용할 수 있는 지역변수입니다.
                          서로 다른 arr입니다. haystack을 기준으로 생각해보시면 이해할 수 있을꺼예요.
                          대화보기
                          • cloud9osh
                            2번 영상과 텍스트 내용을 비교해 보면 영상에서는 함수를 정의할때에도 파라미터로 arr을 사용하였으나
                            텍스트에서는 haystack이라고 사용을 하였는데요.
                            영상을 기준으로 질문을 드리면,
                            var arr(1) = new Array('seoul','new york','ladarkh','pusan', 'Tsukuba');
                            function getRandomValueFromArray(arr(2)){
                            var index = Math.floor(arr(2).length*Math.random());
                            return arr(2)[index];
                            }
                            console.log(getRandomValueFromArray(arr(1)));
                            (1)과 (2)는 서로 다른 arr인가요? 같은 arr인가요?

                            그리고 텍스트 부분에서 마지막 줄 함수명에 get이 빠졌습니다^^
                          버전 관리
                          egoing
                          현재 버전
                          선택 버전
                          graphittie 자세히 보기