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. 수소
    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배열이라는걸 알 수 있는건가요?
  2. 버미
    랜덤함수는 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 자세히 보기