function을 class로

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
    // 자바스크립트 function키워드 calss의 의미도 가지고 있음
    // 실제 class 키워드가 추가되었지만, 내부적으로 function 키워드로
    // 바뀌어 실행되기 때문에 순수 자바스크립트(바닐라)에서 그냥
    // function 키워드를 쓰는 것이 일반적!

    // 배열을 직접 한번 만들어 봅시다!

    function MyArray(){
        this.length = 0; // 초기값 0
        return this;    // 생략가능, class의 의미로 사용될 땐 요게 생량되어 있음!
    }

    // 클래스의 메소드 공유영역(prototype), 사실 속성을 넣어도 되는데 의미가 없음
    MyArray.prototype.push = function(pElem){
        this[this.length] = pElem; //
        this.length++;
        return this;   // 메소드 체이닝이 된다. 생략하면 return만 생략되서 밑에 결과는 undefined 됨
    }

    let aaa = new MyArray(); 
    aaa.push("로제").push("유이현").push("전다미").push(["구","기","현"]);
    console.log("체크", aaa);

    let bbb = new MyArray();
    aaa.push("제니");
    console.log("bbb", bbb);

</script>

Untitled

 <!DOCTYPE html>
<meta charset="UTF-8">
<script>
    // 자바스크립트 function키워드 calss의 의미도 가지고 있음
    // 실제 class 키워드가 추가되었지만, 내부적으로 function 키워드로
    // 바뀌어 실행되기 때문에 순수 자바스크립트(바닐라)에서 그냥
    // function 키워드를 쓰는 것이 일반적!

    // 배열을 직접 한번 만들어 봅시다!

    function MyArray(){
        this.length = 0; // 초기값 0
        return this;    // 생략가능, class의 의미로 사용될 땐 요게 생량되어 있음!
    }

    // 클래스의 메소드 공유영역(prototype), 사실 속성을 넣어도 되는데 의미가 없음
    MyArray.prototype.push = function(pElem){
        this[this.length] = pElem; //
        this.length++;
        return this;    // 메소드 체이닝이 된다. 생략하면 return만 생략되서 밑에 결과는 undefined 됨
    }

    MyArray.prototype.forEach = function(pCallback){
        for(let i = 0; i<this.length; i++){
            pCallback.call(this,this[i],i);
        }
    }

    let aaa = new MyArray(); 
    aaa.push("로제").push("유이현").push("전다미").push(["구","기","현"]);
    console.log("체크", aaa);

    aaa.forEach(function(pVal,pInx){
// this는 원래 window였는데 위에 콜백에서 call에 this(만든class)를 지정했기에 MyArray로 나옴
        console.log("this 체크 : ",this); 
        alert(`${pInx} ==> ${pVal}`);
    });

/*     let bbb = new MyArray();
    aaa.push("제니");
    console.log("bbb", bbb); */

</script>

Untitled

Untitled

Untitled

Untitled

map 이용

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
    // 자바스크립트 function키워드 calss의 의미도 가지고 있음
    // 실제 class 키워드가 추가되었지만, 내부적으로 function 키워드로
    // 바뀌어 실행되기 때문에 순수 자바스크립트(바닐라)에서 그냥
    // function 키워드를 쓰는 것이 일반적!

    // 배열을 직접 한번 만들어 봅시다!

    function MyArray(){
        this.length = 0; // 초기값 0
        return this;    // 생략가능, class의 의미로 사용될 땐 요게 생량되어 있음!
    }

    // 클래스의 메소드 공유영역(prototype), 사실 속성을 넣어도 되는데 의미가 없음
    MyArray.prototype.push = function(pElem){
        this[this.length] = pElem; //
        this.length++;
        return this;    // 메소드 체이닝이 된다. 생략하면 return만 생략되서 밑에 결과는 undefined 됨
    }

    // map하고 reduce는 빅데이터 처리에서많이 쓰는 메소드!(보통 맵리라고 짧게 부름);
    MyArray.prototype.map = function(pCallback){
        for(let i=0; i< this.length; i++) {
            this[i] = pCallback.call(this, this[i],i);
        }
        return this; // 메소드 체이닝
    }

    let aaa = new MyArray(); 
    aaa.push("로제").push("유이현").push("전다미").push(["구","기","현"]);
    aaa.map(function(pVal,pIndex){
        if(pVal == "유이현"){
            return pVal + " 미워";
        }
        if(pIndex == 2){
            return pVal + pIndex + " 좋아";
        }
        return pVal; // 상관없는 건 넘겨 받은 대로 가공없이 다시 되돌려줌
    })

    console.log("체크", aaa);

</script>

Untitled

delete 하기