표준 내장 객체의 확장

표준 내장 객체(Standard Buit-in Object)는 자바스크립트가 기본적으로 가지고 있는 객체들을 의미합니다. 내장 객체가 중요한 이유는 프로그래밍을 하는 데 기본적으로 필요한 도구이기 때문입니다. 자바스크립트가 갖는 내장 객체입니다.

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

자바스크립트가 동작하는 호스트환경이 제공하는 API는 많이 있습니다. 사용자가 직접 정의한 객체는 표준 내장 객체와 대비되는 개념입니다.

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

function getRandomValueFromArray(arr){

    var index = Math.floor(arr.length*Math.random()); //floor는 정수로 변환

    return arr[index]; //랜덤한 인덱스의 값을 리턴합니다.

}

console.log(getRandomValueFromArray(arr));

배열이 갖는 특정한 값을 랜덤하게 획득하는 기능을 모든 객체가 가질 수 있도록 코드를 변경해보겠습니다.

Array.prototype.rand = function(){

    var index = Math.floor(this.length*Math.random()); //배열 객체가 갖는 랜덤 메소드 안에서

    return this[index];                                       //this는 배열을 가리킵니다.

}

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

console.log(arr.rand());

배열에 내장된 메소드인 것처럼 기능을 사용할 수 있습니다.

rand라는 메소드가 배열에 소속되어 있는 것이 분명해집니다. 훨씬 더 코드의 가독성이 높아집니다. rand의 메소드는 인자를 받지 않기 때문에 사용자가 신경 쓸 부분이 덜어집니다.

Object

Object는 데이터를 저장하는 그릇, 컨테이너라고 합니다.

Object가 갖는 역할은 객체를 prototype을 이용해 상속할 수 있습니다.

Object의 속성은 모든 객체의 property가 됩니다. 즉 모든 객체들의 부모입니다.

Object API 사용법에 대해 알아보겠습니다.

어떤 형태의 메소드가 있고 사용법에 대해 아는 것이 중요합니다.

Object.keys() // 키 값들을 리턴해주는 메소드

Object.prototype.toString() //

Keys()메소드는 배열 안의 인덱스, 키 값을 리스트로 리턴하는 메소드입니다.

toString() 객체가 담고 있는 값이 무엇인지 보기 좋게 출력해주는 메소드입니다.

new Object(); 객체를 생성하고 생성한 객체의 메소드 형태로 사용하는 것, Array는 Object를 자식이기에 toString() 메소드를 사용할 수 있습니다.

자바스크립트의 공동적인 최초의 조상이기 때문에 prototype이 있는 메소드는 모든 객체들이 상속받고 있는 공통의 기능입니다. 자바스크립트 애플리케이션 내 모든 객체들이 공통적으로 가져야 하는 기능이 있다면 기능은 object의 prototype객체 수정을 통해 이러한 기능을 만들 수 있습니다.

Object 객체를 확장해 모든 기능을 사용하는 방법에 대해 알아보겠습니다.

기능의 원리보다 어떻게 사용되고 어떤 취지에 기능인가에 살펴보고 기능을 구현하는 것이 좋습니다

　
Object.prototype.contain = function(neddle) { //건초 속 바늘 찾기의 의미를 가진 인자
    for(var name in this){
        if(this[name] === neddle){
            return true;
        }
    }
    return false;
}
var o = {'name':'egoing', 'city':'seoul'}
console.log(o.contain('egoing')); //true
var a = ['egoing','leezche','grapittie'];
console.log(a.contain('egoing')); //false
　

Object 확장의 위험에 대해 알아보겠습니다.

확장을 하는 이유는 모든 객체에 영향을 줄 수 있기 때문입니다. 신중해야 하는 이유는 모든 객체에 영향을 주기 때문입니다.

Console.log(o[name]); 시 함수의 값까지 나오게 됩니다.

o는 object이기 때문에 contain 메소드가 포함됩니다

for(var name in o){                                           for(var name in a){

    console.log(name);  //name, city, contain            console.log(name);  //0, 1, 2 , contain

}                                                                  }

Object의 어떠한 property나 메소드를 추가하는 것은 신중해야 합니다. 공통의 로직에 최소 단위에 적용해야 합니다. Object와 같이 모든 객체에 기능을 넣으면 모든 객체가 영향을 받기 때문에 편리하지만 위험해집니다.

for(var name in o){

    if(o.hasOwnProperty(name)){ //name에 대한 프로퍼티를 갖고 있다면

        console.log(name); 

    }

}

hasOwnProperty는 인자로 전달된 속성의 이름이 객체의 속성인지 여부를 판단합니다. prototype으로 상속 받은 객체라면 false가 됩니다.

출처 : 생활코딩 강의

값으로서의 함수와 콜백(함수의 용도)

자바스크립트에서도 함수는 객체입니다. 즉, 함수 자체가 값이 될 수 있습니다.

var a = function(){ } a라는 변수에 함수가 담길 수 있습니다.

객체의 속성 값으로 담겨진 함수를 메소드(method)라고 부릅니다.

함수는 인자로 전달될 수 있고 리턴값(반환값)으로도 사용 가능합니다.

함수는 배열의 값으로 사용할 수 있습니다.

var process = [

    function(input){ return input + 10;},   //input[0] = 11

    function(input){ return input * input;}, //input[1] = 121

    function(input){ return input / 2;}    //input[2] = 60.5

];

var input = 1;

for(var i = 0; i < process.length; i++){

    input = process[i](input);

}

alert(input);

콜백

function sortNumber(a,b){

    // 위의 예제와 비교해서 a와 b의 순서를 바꾸면 정렬순서가 반대가 됩니다.

    return b-a;

}

var numbers = [20, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1];

alert(numbers.sort(sortNumber)); // array, [20,10,9,8,7,6,5,4,3,2,1]

콜백함수란 ? sort 기본적인 동작 방법을 변경할 수 있습니다. 즉 값으로서 함수를 사용할 수 있기 때문에 오리지널 함수의 동작방법을 값을 전달하는 것을 통해 완전히 바꿀 수 있는 것입니다.

콜백이 가능한 이유는 자바스크립트에서 함수가 값이기 때문에 콜백이 가능합니다.

비동기 처리

콜백은 비동기처리에서도 유용하게 사용됩니다. 시간이 오래 걸리는 작업이 있을 때 이 작업이 완료된 후에 처리해야 할 일을 콜백으로 지정하면 해당 작업이 끝났을 때 미리 등록한 작업을 실행하도록 할 수 있습니다. 다음 코드는 일반적인 환경에서는 작동하지 않고 서버 환경에서만 동작합니다.

대표적인 예로 AJAX(Asynchronous Javascript And XML) : 자바스크립트를 이용해 html코드를 이용해 화면에 출력

클릭 시 웹 페이지가 변경되지 않고 서버와 웹 브라우저가 내부적으로 조용히 통신하는 기법

Ajax는 웹이 단순히 문서에서 벗어나 이런 동작을 할 수 있는 애플리케이션으로 발전하게 한 단서입니다.

클로저

클로저(closure)는 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것입니다. 클로저는 자바스크립트를 이용한 고난이도의 테크닉을 구사하는데 필수적인 개념으로 활용됩니다.

function outter(){

    function inner(){

        var title = 'coding everybody';

        alert(title);

    }

    inner(); //'coding everybody' 출력

}

outter(); //'coding everybody' 출력

내부함수에서 외부함수의 지역변수에 접근 가능한 것이 클로저입니다.

function outter(){

    var title = 'coding everybody'; 

    return function(){       

        alert(title);

    }

}

var inner = outter();

inner(); //'coding everybody' 출력

외부함수의 지역변수에 접근 할 수 있는데 외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근 할 수 있습니다. 이러한 메커니즘을 클로저라고 합니다. 결과는 경고창으로 coding everybody를 출력할 것입니다.

private variable

객체 안의 함수가 있는 상태, 첫 번째 매개변수는 title, 매개변수는 함수 안에서 지역변수로 사용

get_title 메소드를 호출하면 title을 리턴합니다.

set_title 메소드는 _title이 title값을 변경합니다.

function factory_movie(title){

    return {

        get_title : function (){

            return title;

        },

        set_title : function(_title){

            title = _title

        }

    }

}

ghost = factory_movie('Ghost in the shell');

matrix = factory_movie('Matrix');

alert(ghost.get_title()); //'Ghost in the shell'

alert(matrix.get_title());//'Matrix'

ghost.set_title('공각기동대');

alert(ghost.get_title()); //'공각기동대'

alert(matrix.get_title()); //'Matrix'

ghost와 matrix는 private 변수에 객체를 담았습니다

private변수가 필요한 이유는 소프트웨어의 규모가 커질수록 많은 데이터가 존재하게 됩니다.

그 데이터를 누구나 수정 가능하다면 소프트웨어가 쉽게 망가질 수 있기 때문입니다.

출처 : 생활코딩 강의