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. GoldPenguin
    완료했습니다.
  2. 송성태
    정말 감사합니다.
    거인의 어깨에 올라선다는 느낌이 듭니다.
    내장표준 함수를 이용해서 사용자의 힘을 한층 키우는 것 같습니다.
    처음에는 어려웠는데 객체, 정말 재미있네요.
    이제 시작이지만 최선을 다하겠습니다.
    다시 한번 감사합니다!
  3. 신시내티
    감사합니다. 굽신굽신..ㅎㅎ

    변수, 객체, 배열, 생성자 함수 다시 한번 쭉 봐야겠네요. 들을땐 다 이해한것 같은데, 조금만 변형을 주면 헷갈려서요;;
    대화보기
    • epsxk82
      네.
      var arr = new Array('seoul', 'new york', 'ladrkh', 'pusan', 'tsukuba');
      var arr = ['seoul', 'new york', 'ladrkh', 'pusan', 'tsukuba'];
      둘다 배열 객체입니다.

      var arr = new Array {Korea:'seoul', USA: 'new york', India: 'ladrkh', Korea: 'pusan', India:'tsukuba'};
      이것도 배열객체맞습니만.
      위의 문장은 문법에러인걸로 알고 있습니다.^^;
      생성자 함수와 객체 리터럴 표현식( {Korea:'seoul', USA: 'new york', India: 'ladrkh', Korea: 'pusan', India:'tsukuba'})이 같이 오는 것은 문법 에러로 알고 있습니다^^;

      변수, 객체의 개념을 아직 햇갈리시는 거 같습니다... 이는 시간이 되면 따로 설명을 드릴께요.^^
      대화보기
      • epsxk82
        네.
        var arr = new Array('seoul', 'new york', 'ladrkh', 'pusan', 'tsukuba');
        var arr = ['seoul', 'new york', 'ladrkh', 'pusan', 'tsukuba'];
        둘다 배열 객체입니다.

        var arr = new Array {Korea:'seoul', USA: 'new york', India: 'ladrkh', Korea: 'pusan', India:'tsukuba'};
        이것도 배열객체맞습니만.
        위의 문장은 문법에러인걸로 알고 있습니다.^^;
        생성자 함수와 객체 리터럴 표현식( {Korea:'seoul', USA: 'new york', India: 'ladrkh', Korea: 'pusan', India:'tsukuba'})이 같이 오는 것은 문법 에러로 알고 있습니다^^;

        변수, 객체의 개념을 아직 햇갈리시는 거 같습니다... 이는 시간이 되면 따로 설명을 드릴께요.^^
        대화보기
        • 신시내티
          var arr = new Array('seoul', 'new york', 'ladrkh', 'pusan', 'tsukuba');
          var arr = ['seoul', 'new york', 'ladrkh', 'pusan', 'tsukuba'];

          아! 그럼 위의 두가지 모두 배열객체라는 건가요? ^////////^

          var arr = new Array {Korea:'seoul', USA: 'new york', India: 'ladrkh', Korea: 'pusan', Japan:'tsukuba'};
          그럼 얘는 일반객체(?)인거예요? 아닌가 변수인가...

          질문할수록 지식의 엉성함이 탄로가 나네요 하하. 아무튼 감사합니다.
          대화보기
          • epsxk82
            질문내용을 잘 이해를 못하겠네요.
            문제가 있는 코드를 올려봐주세요.
            대화보기
            • epsxk82
              잘못이해하신거 같습니다.

              객체를 생성하는 선언은 두가지가 있다고 두가지가 있다고 말씀드렸죠?
              1> var v = new 생성자 함수이름();
              또는
              2> var v = 리터럴 값 표현;

              배열객체 생성의 경우,
              var arr = new Array('seoul', 'new york', 'ladrkh', 'pusan', 'tsukuba');
              은 1>에 해당하는 거고
              var arr = ['seoul', 'new york', 'ladrkh', 'pusan', 'tsukuba'];
              은 2>에 해당하는 겁니다. 배열의 경우, 리터럴 값 표현에 특수하게 대괄호[]를 쓰는 겁니다.

              참고로, 사용자가 정의하는 객체의 경우, 2>번 즉 리터럴 값 표현으로 객체를 생성할 경우에
              var custuomObj = {'firstField':1, 'secondField':'second};
              중괄호{}을 쓰는데, 배열의 대괄호[]과 햇갈리시지 마세요.
              대화보기
              • 신시내티
                표준내장객체는 각자에게 맞는 메쏘드나 객체타입을 따로 가지고 있나요?
                Array 자리에 다른 표준내장객체인 Object 를 넣어봤더니 오류가 나서요.
              • 신시내티
                var arr = new Array('seoul', 'new york', 'ladrkh', 'pusan', 'tsukuba');

                아하 저는 언뜻보고 Array가 있어서 배열객체로 잘못 본거네요.
                arr는 새로 만들어진 변수 객체이니까 () 를 쓰는군요.

                감사합니다 epsxk82님. 정말 이해가 쉽게 가도록 설명해주셨어요!
                대화보기
                • 신시내티
                  "this라는 키워드는 함수가 정의된 위치에서의 문맥이 아닌 그 함수가 실행되는 시점에서의 문맥과 연관된 키워드입니다."

                  아. 그렇군요. 저는 this가 가르키는 대상을 무조건 그걸 품고 있는 함수에서만 찾았는데, 예제에선 그게 익명함수여서 혼란스러웠거든요.

                  epsxk82님 정말 감사합니다. 갑자기 코드가 확 보이네요!! ^_______^
                  대화보기
                  • epsxk82
                    this가 포함된 표현식이 var arr.. 이부분 보다 위에 위치해 있어서 햇갈리시는 거 같습니다만.^^
                    아마도 this가 windows객체가 아니냐 생각하실 수 있겠습니다만.

                    Array.prototype.rand = function(){
                    var index = Math.floor(this.length*Math.random());
                    return this[index];
                    }
                    이 이야기는 'Array객체가 rand라는 이름의 멤버 메소드(함수)를 가지고 있고, 그 함수의 정의는 다음과 같다'라고 선언하는 겁니다.
                    그럼 arr.rand()를 실행하면 어떤일이 벌어질까요? rand라는 함수는 Array객체의 멤버이기 때문에 rand함수 본문의 this객체는 전역객체 windows객체가 아닌 Array객체인 arr을 가르키게 되는 겁니다.(메소드의 경우 메소드 정의 안에 this키워드는 그 메소드가 소속된 객체를 가르키게 된다고 앞 수업에서 배웠습니다.^^)

                    this라는 키워드는 함수가 정의된 위치에서의 문맥이 아닌 그 함수가 실행되는 시점에서의 문맥과 연관된 키워드입니다.

                    function f()
                    {
                    return this;
                    }

                    function obj()
                    {
                    this.value = 1;
                    }

                    1> var x = f() ---> x는 전역객체 window
                    var v = new obj();
                    2> var x2 = f.apply(v); ---> x2는 obj

                    위의 2>의 this는 obj객체를 나타냅니다. apply라는 함수가 함수f를 v라는 obj객체의 메소드로 잠시동안 등록시키고 f()라는 함수를 obj객체의 메소드로서 실행시키고 f를 obj의 메소드에서 제외시킵니다. 현재 f라는 함수는 obj의 메소드로서 실행되고 있으니 this는 obj가 됩니다.
                    대화보기
                    • epsxk82
                      egoing님께서 언급하셨던거 같습니다만, 우리는 객체를 생성하는 두가지 방법을 알고 있습니다.
                      1> var v = new 생성자 함수이름();
                      또는
                      2> var v = 리터럴 값 표현;

                      신시내티님이 이야기 하시는 괄호()를 쓴 경우는, 생성자 함수를 호출해서 (배열)객체를 생성한 1번째 경우입니다.
                      위의 예를 들면,
                      var arr = new Array('seoul', 'new york', 'ladrkh', 'pusan', 'tsukuba');
                      배열객체의 생성자 함수를 호출하여 배열객체를 생성하였습니다.

                      신시내티님이 이야기 하시는 대괄호[]를 쓴 경우는, 배열의 리터럴값을 표현하는 2번째 경우에 해당합니다.
                      즉,
                      var arr = ['seoul', 'new york', 'ladrkh', 'pusan', 'tsukuba'];
                      배열의 리터럴 값을 명시하여 (배열)객체를 생성했습니다.
                      리터럴 값이란 (변수도 아니고, 함수도 아닌) 실제 객체에 저장될 데이터 값 그 자체를 이야기 하는 것입니다.(var a = 1이면 1이 리터럴 값, var b = "string"이면 string이 리터럴 값입니다)

                      근데 생성자 함수에 []를 쓰게되면

                      var arr = new Array['seoul', 'new york', 'ladrkh', 'pusan', 'tsukuba'];
                      이것은 문법에러입니다.
                      생성자 함수도 함수의 일종이고 자바스크립트에서는 함수를 호출할때 ()를 쓰라고 우리는 이미 배웠지요^^
                      정리하자면,
                      생성자함수를 호출해서 배열객체를 생성할 때는 괄호()를 쓰셔야 하고 대괄호[]는 안되며,
                      리터럴값을 표현하여 배열객체를 생성할 때에 대괄호[]를 쓰시는 겁니다.
                      대화보기
                      • 신시내티
                        3/3번째 동영상 4:30 쯤에 this를 쓰고 이것이 함수 밖 객체인 array를 가르킨다는게 잘 이해가 안가요...
                      • 신시내티
                        배열객체를 쓸때 ( ) 나 [ ] 이 두가지 괄호를 다 쓸수 있는거예요?
                      • 더나은삶
                        잘 보고 있습니다. 감사합니다.
                      • sealwind
                        간단한 로또 번호 생성기 ㅡ ㅡ;;
                        for (var i = 0; i < 6; i++) {
                        document.write(Math.floor(Math.random()*45)+1+'<br />');
                        }
                      • Seo Yun Seok Tudoistube
                        마치 자바스크립트 내장객체의 메서드인것처럼 사용한다면, 훨씬 간결하고 재사용성도 높아져서 좋으네요.
                        감사합니다^_____^!!!
                      • crable
                        감사합니다.
                      • 제이쿼리 플러그인을 어떻게 만들지만 생각하고 있었는데 빌트인 객체를 대상으로 prototype이 사용이 가능하다니..
                        오늘도 생각의 폭을 넓혀주는 강좌 감사합니다
                      • 전성욱
                        전에 동네 도서관에서 이고잉님이 쓰신 자바입문책을 봤었습니다. 반가워서 들고 술술 훑어보니 동영상강의를 책으로 옮겨놓은것같이 쉽게 풀어서 설명하셨더라구요
                        읽기슆고 이해하기 쉽고 이만한 코딩책도 없다 싶었지만 조금 이해가 안되는 부분이 class A extends B(){}와 같이 클래스명, 변수명을 아무 의미도 없는 값으로 넣으시는 습관이었습니다.
                        제가 생각하기에는 개발자 언어를 배우는데 있어서 초보자티를 막 땐 아마추어가 맞닥드리는 가장 큰 난관이, 의미가 무엇인지 어떻게 쓰는지는 이해가 되는데 어디서 어떻게 활용해야되느냐라는 문제입니다
                        특히 객체지향이나 클로저같이 복잡한 개념은 열심히 익히고 배워놔도 실전에서 이게 객체지향을 써야 이쁘게될지 함수지향으로 작성해야 칭찬받을지 감이 안잡히는 경우가 많습니다
                        API인지 변수명인지 헷갈리는걸 염두에 두어 일부러 의미없는 문자를 변수명으로 삼은 이고잉님의 사려깊은 뜻은 알겠지만 활용법을 모르면 삼일만에 까먹는 경우도 다반사입니다 ㅠㅠ
                        biheanggi나 yongdon과 같은 변수명이라도 사용하시는게 어떨까 싶습니다
                      • 신입1
                        감사합니다
                      • 괜찮아
                        이런 실용적인 예제도 재미있는 것 같아요.
                        prototype의 중요성에 대해서 실감이 나네요!
                      • 임지호
                        표준 내장 객체 : 자바스크립트가 기본적으로 제공하는 객체.
                        - 표준 내장 객체에 우리가 필요로 하는 기능이 없을 수도 있다. 그럴 때 그 함수를 직접 만들 수도 있지만
                        객체에 메소드로 확장시키는 방법도 있다.
                        - 객체.prototype.메소드이름 = function() {}하게 되면 그 객체의 prototype에 메소드가 추가되면서 객체를 사용
                        할 때도 메소드를 사용할 수 있게 된다.
                      • 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인경우는 없겠죠.
                          대화보기
                          • hyuna
                            감사합니다. 1보다 작은값이라면..납득이가요
                            대화보기
                            • 완료!
                              완료! 감사합니다~
                            • 카구
                              length가 5라는 것은 배열의 인덱스 0, 1, 2, 3, 4 에 대한 "길이에 대한 크기 5" 를 리턴하는거에요~!!
                              대화보기
                              • minkim
                                저도 처음에는 그렇게 생각했는데 0보다는 크고 1보다는 작은수가 나오는 것 같습니다. console을 해보니..
                                그래서 Math.floor로 인해 5를 곱하면 0~4까지 골고루 나오는 것이지요.
                                대화보기
                                • hyuna
                                  Math.random메소드에 1이 포함되면, this.length가 5니까, index값도 5까지 나오는 거 아닌가요?그치만
                                  0~4까지 필요한거 아닌가요?
                                • 취준생1
                                  감사합니다!
                                • Tae-Hee Kang
                                  "프론트엔드 개발자를위한 자바스크립트 프로그래밍" - 저자 니콜라스 자카스지음
                                  책에서는 "0과 1 사이의 난수를 반환하되 0이나 1을 반화하지는 앖습니다." 라고 되어있는데 아무래도 잘못된 번역인가 봅니다.
                                  mdn을 확인해보니 0(inclusive) 이라고 되어있네요.
                                  감사합니다
                                  대화보기
                                  • jelly
                                    0은 반환합니다.
                                    대화보기
                                    • 초보!
                                      0부터 라는 말은 0도 반환하는거 아닌가요
                                      0은 반환하는걸로 알고있었는데...
                                      대화보기
                                      • yihsang
                                        많이 감사드립니다.
                                      • 카스테라는없다
                                        와 ㅋㅋㅋ 스크립트 언어라 그런지 정말 자유롭네요
                                      • Harry S. Hur
                                        실용적인 예제를 안쓰시는 대신 동영상 마지막 부분에 어떤식으로 웹개발업무에서 쓰여질 수 있는지 말로만 설명해주시면 더 도움이 될 듯 하네요~ 항상 감사합니다
                                      • 이주환
                                        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은 포함이되지 않기때문에 위와같이 사용이 가능해요 ^^
                                            버전 관리
                                            egoing
                                            현재 버전
                                            선택 버전
                                            graphittie 자세히 보기