Develop my life & Enjoy my life: 12월 2019

오늘 포스팅 할 내용은 JavaScript 에서 주로 쓰이는 Array.prototype 소개 및 활용법에 대한 강좌 입니다.

Array.prototype 는 JavaScript 에서 Array 를 생성하고 사용하는 목적으로 만들어진 표준 내장 객체 입니다.

Array 라는 키워드를 가지고 있지만 Map 과 같이 key/value 를 이용하여 사용이 가능합니다.

제가 사용하는 코드 방식은 JavaScript 5 기준으로 설명을 합니다.

개발을 하면 IE11 까지 지원을 해야 하는 경우가 발생하기 때문에 JavaScript 6 의 기능을 쓸수가 없기 때문입니다.

var arrList = []; 와 같이 선언하여 씁니다.

기본 샘플은

간단히 1부터 100까지 변수를 추가하여 값을 출력하는 코드와
문자열 "A" ~ "Z" 까지 실제 ASCII 코드값을 매칭 하는 샘플을 만들어 보겠습니다.

function btnSample01()
{
    //1부터 100까지.
    var arrTest = [];
    for (var i=0; i<100; i++)
    {
        arrTest.push(i);
    }

    //일반적인 순회.
    for (var i=0; i<arrTest.length; i++)
    {
        console.log("arrTest[" + i +"]=" + arrTest[i]);
    }

    //고속순회.
    for (var value in arrTest)
    {
        console.log("arrTest value=" + value);
    }
}

function btnSample02()
{
    //1부터 100까지.
    var mapAlphaASCII = [];
    for (var i=65; i<=90; i++)
    {
        // 코드를 ASCII 문자로 변환하는 String 표준 함수.
        var sKey = String.fromCharCode(i);
        mapAlphaASCII.push({key:sKey, value:i});
    }

    //일반적인 순회.
    for (var i=0; i<mapAlphaASCII.length; i++)
    {
        console.log("N mapAlphaASCII[key:" + mapAlphaASCII[i].key + ", value:" + mapAlphaASCII[i].value + "]");
    }

    //고속순회.
    for (var ascItem in mapAlphaASCII)
    {
        console.log("F mapAlphaASCII[key:" + mapAlphaASCII[ascItem].key + ", value:" + mapAlphaASCII[ascItem].value + "]");
    }
}

< 위 코드는 크롬에서 최종 확인한 코드 입니다. IE11에서도 동작 합니다. >

Array.prototype 관련 상세한 인터페이스는 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype 여기서 확인 하실수 있습니다.

제가 여기서 추가로 설명하고자 하는것은 제가 자주 사용하던 패턴과 사용함에 있어 필요로 생각하는 요소들만 정리해서 안내 해드리겠습니다.

a. push : Array 에 멤버를 추가 해주는 메소드 입니다. (일반적 추가와 맵타입 처럼 추가하는 key/value 방식으로 쓸수 있습니다.)

b. length : Array 에 저장된 멤버에 대한 갯수를 리턴해주는 메소드 입니다.

c. splice : Array 에 멤버를 추가/지우는 메소드 입니다.

d. find : 특정 키에 해당하는 멤버를 리턴합니다. (지원 안되는 브라우져 PolyFill로 사용가능.)

e. findIndex : 특정 키에 해당하는 멤버의 인덱스를 리턴합니다. (지원 안되는 브라우져 PolyFill로 사용가능.)

find 와 findIndex는 IE11에서는 지원하지 않는 기능 입니다. 하지만 PolyFill로 구현을 하면 사용이 가능합니다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/find 와
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex 에 PolyFill 구현방법에
대해 나와 있으니 참고 하시면 됩니다.

위 설명된 항목들을 활용한 샘플 코드를 만들어 보겠습니다.
(Array 전용 샘플, Key/Value를 이용한 샘플)

function btnSample03()
{
    //1부터 100까지.
    var arrTest = [];
    for (var i=0; i<100; i++)
    {
        arrTest.push(i);
    }

    //추가된 멤버의 갯수 출력.
    console.log("arrTest Count : " + arrTest.length);

    //일반적인 순회.
    for (var i=0; i<arrTest.length; i++)
    {
        console.log("arrTest[" + i +"]=" + arrTest[i]);
    }

    //고속순회.
    for (var idx in arrTest)
    {
        console.log("arrTest value=" + arrTest[idx]);
    }

    //20번쨰 위치에 200 엠버 추가.
    arrTest.splice(20, 0, 200);

    console.log("arrTest Count : " + arrTest.length);

    //50 ~ 100 멤버 삭제.
    arrTest.splice(50, 50);

    console.log("arrTest Count : " + arrTest.length);

    //값 재확인.
    for (var i=0; i<arrTest.length; i++)
    {
        console.log("arrTest[" + i +"]=" + arrTest[i]);
    }

    //전체 멤버 삭제.
    arrTest.splice(0, arrTest.length);

    console.log("arrTest Count : " + arrTest.length);
}


function btnSample04()
{
    //1부터 100까지.
    var mapAlphaASCII = [];
    for (var i=65; i<=90; i++)
    {
        // 코드를 ASCII 문자로 변환하는 String 표준 함수.
        var sKey = String.fromCharCode(i);
        mapAlphaASCII.push({key:sKey, value:i});
    }

    console.log("mapAlphaASCII Count : " + mapAlphaASCII.length);

    //일반적인 순회.
    for (var i=0; i<mapAlphaASCII.length; i++)
    {
        console.log("N mapAlphaASCII[key:" + mapAlphaASCII[i].key + ", value:" + mapAlphaASCII[i].value + "]");
    }

    //고속순회.
    for (var ascItem in mapAlphaASCII)
    {
        console.log("F mapAlphaASCII[key:" + mapAlphaASCII[ascItem].key + ", value:" + mapAlphaASCII[ascItem].value + "]");
    }

    // B 값을 찾아 삭제.
    var nFind  = mapAlphaASCII.findIndex(function (x) { return x.key === 'B';});
    if (nFind != -1)
        mapAlphaASCII.splice(nFind, 1);

    console.log("mapAlphaASCII Count : " + mapAlphaASCII.length);

    //전체 멤버 삭제.
    mapAlphaASCII.splice(0, mapAlphaASCII.length);

    console.log("mapAlphaASCII Count : " + mapAlphaASCII.length);
}

강의는 여기까지 입니다.
추가로 테스트 HTML 페이지를 포함한 전체 소스를 올려 드려요. ^^

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>강좌 Array.prototype</title>
</head>
<body>
    <div>
        <input type="button" id="BtnSample01" value="Array Sample01" onclick="btnSample01()">
        <input type="button" id="BtnSample02" value="Array Sample02 Like Map" onclick="btnSample02()">
        <input type="button" id="BtnSample03" value="Array Sample03" onclick="btnSample03()">
        <input type="button" id="BtnSample04" value="Array Sample04 Like Map" onclick="btnSample04()">
    </div>
</body>

<script type="text/javascript">

    function btnSample01()
    {
        //1부터 100까지.
        var arrTest = [];
        for (var i=0; i<100; i++)
        {
            arrTest.push(i);
        }

        //일반적인 순회.
        for (var i=0; i<arrTest.length; i++)
        {
            console.log("arrTest[" + i +"]=" + arrTest[i]);
        }

        //고속순회.
        for (var idx in arrTest)
        {
            console.log("arrTest value=" + arrTest[idx]);
        }
    }

    function btnSample02()
    {
        //1부터 100까지.
        var mapAlphaASCII = [];
        for (var i=65; i<=90; i++)
        {
            // 코드를 ASCII 문자로 변환하는 String 표준 함수.
            var sKey = String.fromCharCode(i);
            mapAlphaASCII.push({key:sKey, value:i});
        }

        //일반적인 순회.
        for (var i=0; i<mapAlphaASCII.length; i++)
        {
            console.log("N mapAlphaASCII[key:" + mapAlphaASCII[i].key + ", value:" + mapAlphaASCII[i].value + "]");
        }

        //고속순회.
        for (var ascItem in mapAlphaASCII)
        {
            console.log("F mapAlphaASCII[key:" + mapAlphaASCII[ascItem].key + ", value:" + mapAlphaASCII[ascItem].value + "]");
        }
    }

    function btnSample03()
    {
        //1부터 100까지.
        var arrTest = [];
        for (var i=0; i<100; i++)
        {
            arrTest.push(i);
        }

        //추가된 멤버의 갯수 출력.
        console.log("arrTest Count : " + arrTest.length);

        //일반적인 순회.
        for (var i=0; i<arrTest.length; i++)
        {
            console.log("arrTest[" + i +"]=" + arrTest[i]);
        }

        //고속순회.
        for (var idx in arrTest)
        {
            console.log("arrTest value=" + arrTest[idx]);
        }

        //20번쨰 위치에 200 엠버 추가.
        arrTest.splice(20, 0, 200);

        console.log("arrTest Count : " + arrTest.length);

        //50 ~ 100 멤버 삭제.
        arrTest.splice(50, 50);

        console.log("arrTest Count : " + arrTest.length);

        //값 재확인.
        for (var i=0; i<arrTest.length; i++)
        {
            console.log("arrTest[" + i +"]=" + arrTest[i]);
        }

        //전체 멤버 삭제.
        arrTest.splice(0, arrTest.length);

        console.log("arrTest Count : " + arrTest.length);
    }

    function btnSample04()
    {
        //1부터 100까지.
        var mapAlphaASCII = [];
        for (var i=65; i<=90; i++)
        {
            // 코드를 ASCII 문자로 변환하는 String 표준 함수.
            var sKey = String.fromCharCode(i);
            mapAlphaASCII.push({key:sKey, value:i});
        }

        console.log("mapAlphaASCII Count : " + mapAlphaASCII.length);

        //일반적인 순회.
        for (var i=0; i<mapAlphaASCII.length; i++)
        {
            console.log("N mapAlphaASCII[key:" + mapAlphaASCII[i].key + ", value:" + mapAlphaASCII[i].value + "]");
        }

        //고속순회.
        for (var ascItem in mapAlphaASCII)
        {
            console.log("F mapAlphaASCII[key:" + mapAlphaASCII[ascItem].key + ", value:" + mapAlphaASCII[ascItem].value + "]");
        }

        // B 값을 찾아 삭제.
        var nFind  = mapAlphaASCII.findIndex(function (x) { return x.key === 'B';});
        if (nFind != -1)
            mapAlphaASCII.splice(nFind, 1);

        console.log("mapAlphaASCII Count : " + mapAlphaASCII.length);

        //전체 멤버 삭제.
        mapAlphaASCII.splice(0, mapAlphaASCII.length);

        console.log("mapAlphaASCII Count : " + mapAlphaASCII.length);
    }

</script>

</html>

Develop my life & Enjoy my life

2019년 12월 9일 월요일

JavaScript Array.prototype 소개 및 활용법.

가장 많이 본 글