Javascript

Data Type

Type Name	Type
Number	primitive
String	primitive
Boolean	primitive

Object	reference
Function	reference
Array	reference

Function Object Properties

prop	meaning
arguments	arguments.length, arguments.callee (Array like Object)
caller
length	# of arguemnts
name	function name (Deprecated)
protoype	Function Prototype (for implementation OOP)
this	When object's method or constructor, then this is own object. Otherwise, this is window or global.

Function Prototype Properties

prop	meaning
constructor	Constructor Function Object Link

Javascript Range Code

[...Array(50).keys].forEach((value, index, arr) => console.log(index));

https://c10106.tistory.com/3679

Function.prototype.method -- Add Class method

Detail

Function.prototype.method = function(methodName, methodFunc) {
  this.prototype[methodName] = methodFunc;
}

Person.method("getName", function() {
  return this.name;
};

Class by ECMAScript5

Detail

Function.inherit = function(Parent, Child) {
    // var F = function() {};
    // F.prototype = Parent.prototype;
    // Child.prototype = new F();           // Child.prototype = Object.create(Parent.prototype);

    Child.prototype = Object.create(Parent.prototype);
    Child.prototype.constructor = Child;
    Child.super = Parent.prototype;
};


function HighSchool(kor, eng) {
    this.kor = kor;
    this.eng = eng;
    this.count = 2;
}

HighSchool.prototype.sum = function() {
    return this.kor + this.eng;
}

HighSchool.prototype.avg = function() {
    return this.sum() / this.count;
}

var s1 = new HighSchool(100, 91);
console.log(s1.sum());
console.log(s1.avg());


function College(kor, eng) {
    if (arguments.callee.super && arguments.callee.super.constructor) {
        arguments.callee.super.constructor.apply(this, arguments);
    }

    // if (College.super && College.super.constructor) {
    //     College.super.constructor.apply(this, arguments);
    // }

    // HighSchool.apply(this, arguments);
}

Function.inherit(Person, Student);

College.prototype.grade = function() {
    var grade = 'F';
    var avg = this.avg();
    if (avg >= 90) {
        grade = 'A';
    } else if (avg >= 80) {
        grade = 'B';
    } else if (avg >= 70) {
        grade = 'C';
    } else if (avg >= 60) {
        grade = 'D';
    }
    return grade;
};

var s2 = new College(80, 71);
console.log(s2.sum());
console.log(s2.avg());
console.log(s2.grade());

console.log(College.prototype.constructor);
console.log(HighSchool.prototype.constructor);

console.log(College.prototype);
console.log(HighSchool.prototype);

Class by ECMAScript6

Detail

// ex06-08.js 복사


class HighSchool {
    static count = 2;
    constructor(kor, eng) {
        this.kor = kor;
        this.eng = eng;
    }

    sum() {
        return this.kor + this.eng;
    }

    avg() {
        return this.sum() / HighSchool.count;
    }
}

class College extends HighSchool {
    constructor(kor, eng) {
        super(kor, eng);
    }

    grade() {
        var grade = 'F';
        var avg = this.avg();
        if (avg >= 90) {
            grade = 'A';
        } else if (avg >= 80) {
            grade = 'B';
        } else if (avg >= 70) {
            grade = 'C';
        } else if (avg >= 60) {
            grade = 'D';
        }
        return grade;
    };
}

var s1 = new HighSchool(80, 100)
console.log(s1.sum());
console.log(s1.avg());

var s2 = new College(80, 71);
console.log(s2.sum());
console.log(s2.avg());
console.log(s2.grade());

Class by Typescript

Detail

class HighSchool {
    static count = 2;
    constructor(kor, eng) {
        this.kor = kor;
        this.eng = eng;
    }

    sum() {
        return this.kor + this.eng;
    }

    avg() {
        return this.sum() / HighSchool.count;
    }
}

class College extends HighSchool {
    constructor(kor, eng) {
        super(kor, eng);
    }

    grade() {
        var grade = 'F';
        var avg = this.avg();
        if (avg >= 90) {
            grade = 'A';
        } else if (avg >= 80) {
            grade = 'B';
        } else if (avg >= 70) {
            grade = 'C';
        } else if (avg >= 60) {
            grade = 'D';
        }
        return grade;
    };
}

var s1 = new HighSchool(80, 100)
console.log(s1.sum());
console.log(s1.avg());

var s2 = new College(80, 71);
console.log(s2.sum());
console.log(s2.avg());
console.log(s2.grade());

Convert Typescript to ECMAScript

Detail

# Install Typescript
$ npm i -g typescript

# Convert Typescript to ES5
$ tsc main.ts -t es5

# Convert Typescript to ES6
$ tsc main.ts -t es6

Synchronous, Asynchronous, Promise, await

Detail

function f1() {
    arguments && arguments.length > 0 && Array.prototype.forEach.call(arguments, v => console.log(`Argument: ${v}`));
    console.log(`${arguments.callee.name} Task Started...`);
    console.log(`${arguments.callee.name} Task Processing...`);
    var result = `${arguments.callee.name} Task Result`;
    console.log(`${arguments.callee.name} Task Complted...`);

    return result;
}

function f2() {
    arguments && arguments.length > 0 && Array.prototype.forEach.call(arguments, v => console.log(`Argument: ${v}`));
    console.log(`${arguments.callee.name} Task Started...`);
    console.log(`${arguments.callee.name} Task Processing...`);
    var result = `${arguments.callee.name} Task Result`;
    console.log(`${arguments.callee.name} Task Complted...`);

    return result;
}

// Synchronous
function test1() {
    var result1 = f1();
    var result2 = f2(result1);
    console.log(`Final Result "${result2}"`);
}
// test1();




function f1_asnyc(cb) {
    var __process_name = arguments.callee.name;

    arguments && arguments.length > 0 && Array.prototype.forEach.call(arguments, v => console.log(`Argument: ${v}`));
    console.log(`${__process_name} Task Started...`);
    console.time(__process_name);

    setTimeout(function() {
        console.log(`${__process_name} Task Processing...`);
        var result = `${__process_name} Task Result`;
        console.log(`${__process_name} Task Complted...`);

        console.timeEnd(__process_name);
        cb(result);
    }, 1000);

    // return result;
}

function f2_async(arg, cb) {
    var __process_name = arguments.callee.name;

    arguments && arguments.length > 0 && Array.prototype.forEach.call(arguments, v => console.log(`Argument: ${v}`));
    console.log(`${__process_name} Task Started...`);
    console.time(__process_name);

    setTimeout(function() {
        console.log(`${__process_name} Task Processing...`);
        var result = `${__process_name} Task Result`;
        console.log(`${__process_name} Task Complted...`);

        console.timeEnd(__process_name);
        cb(result);
    }, 1000);

    // return result;
}

// Asynchronous
function test_async() {
    f1_async(function(result) {
        f2_async(result, function(result) {
            console.log(`Final Result: ${result}`);
        });
    });
}
// test_async();

function p1(arg) {
    var __process_name = arguments.callee.name;
    arguments && arguments.length > 0 && Array.prototype.forEach.call(arguments, v => console.log(`Argument: ${v}`));
    console.time(__process_name);

    return new Promise(function(resolve, reject) {

        console.log(`${__process_name} Task Started...`);

        setTimeout(function() {
            console.log(`${__process_name} Task Processing...`);
            var result = `${__process_name} Task Result`;
            console.log(`${__process_name} Task Complted...`);

            console.timeEnd(__process_name);
            resolve(result);
        }, 1000);
    });
}

function p2(arg) {
    var __process_name = arguments.callee.name;
    arguments && arguments.length > 0 && Array.prototype.forEach.call(arguments, v => console.log(`Argument: ${v}`));
    console.time(__process_name);

    return new Promise(function(resolve, reject) {
        console.log(`${__process_name} Task Started...`);

        setTimeout(function() {
            console.log(`${__process_name} Task Processing...`);
            var result = `${__process_name} Task Result`;
            console.log(`${__process_name} Task Complted...`);

            console.timeEnd(__process_name);
            resolve(result);
        }, 1000);
    });
}

// Promise
function test2() {
    p1().then(p2).then(p1).then(p2).then(function(result) {
        console.log(`Final Result: ${result}`);
    }).catch(function(err) {
        console.error(err);
    });
}
// test2();


async function test3() {
    try {
        var result = await p1();
        result = await p2(result);

        console.log(`Final Result: ${result}`);
    } catch (error) {
        console.error(error);
    }
}
test3();
console.log("Test Completed?!");

DOM (Document Object Model)

Detail

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>쇼핑목록</title>
    <link rel="shortcut icon" href="../../img/favicon.ico">
    <script src="../../js/mylib.js"></script>
    <!-- <script src="../../js/prototype.js"></script> -->
    <script>
        window.onload = () => {
            // var btnArr = document.getElementsByTagName('button');
            var btnArr = document.querySelectorAll('button');

            // DOM Level 0
            btnArr[0].onclick = () => {
                // console.log(document.getElementById('movies').getElementsByTagName('li')[1].innerText);
                console.log(document.querySelector('#movies > li:nth-child(2)').innerText);
            };

            // DOM Level 2 (Standard)
            btnArr[1].addEventListener('click', () => {
                // var lastPurchase = document.querySelector('#purchases > li:nth-last-child(1)');
                var milk = document.createElement("li");
                var milkText = document.createTextNode("Milk");
                // milk.innerText = "Milk";

                milk.appendChild(milkText);
                document.getElementById('purchases').appendChild(milk);

                var movie = document.createElement("li");
                movie.innerText = "" + Math.round(Math.random() * (9999) + 1);
                document.querySelector('#movies').appendChild(movie);
            });

            btnArr[2].addEventListener('click', () => {
                console.log("Click!");
                var list = document.querySelectorAll('.list');
                console.log(list);
                list.forEach(l => {
                    // l.childElementCount > 0 && l.removeChild(l.children[l.childElementCount - 1]);
                    // l.firstElementChild && l.removeChild(l.firstElementChild);
                    l.firstElementChild && l.firstElementChild.remove();
                });
                // var purchases = document.querySelector('#purchases');
                // purchases.removeChild(purchases.children[0]);

                // var movies = document.querySelector('#movies');
                // movies.removeChild(movies.children[0]);
            });
        };
    </script>
</head>

<body>
    <h1>쇼핑 목록(DOM 표준 API 이용)</h1>
    <button>두번째 영화 찾기</button>
    <button>마지막에 우유 추가</button>
    <button>첫번째 삭제</button>

    <p title="mart">마트에서 사야할 목록</p>
    <ul id="purchases" class="list">
        <li>두부</li>
        <li>계란</li>
        <li>라면</li>
    </ul>
    <p>보고싶은 영화 목록</p>
    <ul id="movies" class="list">
        <li>어벤져스</li>
        <li>다크나이트</li>
        <li>미션임파서블</li>
    </ul>
</body>

</html>

jQuery

Detail

// DOM Content Loaded Event Handler
$(function() {
    $('button:first').on('click', () => {
        console.log($('#movies > li:nth-child(2)').text());
    }).next().on('click', () => {
        $('<li>Milk</li>').appendTo('#purchases');
    }).next().on('click', () => {
        $('.list > li:first-child').remove();
    });
    
    $('button').on('click', async function() {
        var time = await $.ajax('/time', {
            data: "msg=ajax-1 -- 1",
        });
        append(time);

        await $.ajax('/timejson', {
            method: "post",
            success: appendJson,
            async: true,
            // dataType: 'json',      // If there is no dataType, then dependent on Response Header Content-Type 
            data: "msg=ajax-2 -- 2"
        });

        await $.ajax('/time?msg=ajax-3');

        await $.ajax('/time?msg=ajax-4 -- 3', {
            success: append
        })

        await $.get('/time', 'msg=get-1 -- 4', append, "text");
        await $.get('/time', 'msg=get-2');
        await $.get('/time?msg=get-3 -- 5', append);
        await $.get('/time?msg=get-4');

        await $.get('/timejson', 'msg=get-5 -- 6-1', appendJson, "json");
        await $.getJSON('/timejson', 'msg=getjson -- 6', appendJson);
        await $.post('/time', 'msg=post-1 -- 7', append);

        // jQuery('#id').load(url);

        // $('').load()
        // $('#result').load('/time?msg=load');

    });
    
    function append(str) {
        document.querySelector('#result').innerHTML += str + '<br>';
    }

    function appendJson(obj) {
        document.querySelector('#result').innerHTML += obj.msg + ' ' + obj.time + '<br>';
    }
});

Ajax

Detail

window.onload = function() {
    document.querySelector('button').onclick = function() {
        // getTimeXHR();
        // getTimeJson();
        getTime3();
    };
};

// 1. XMLHttpRequest를 이용한 Ajax 요청(/time)
function getTimeXHR() {
    // 1. XMLHttpRequest 생성		
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
        // 4. 응답 데이터 처리
        var result = xhr.responseText;
        append(result);
    };

    // 2. 요청준비(open())
    xhr.open('GET', '/time?msg=time', true);

    // 3. 요청(send())
    xhr.send();
};

// 2. XMLHttpRequest를 이용한 Ajax 요청(/timejson)
function getTimeJson() {
    // 1. XMLHttpRequest 생성		
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
        // 4. 응답 데이터 처리
        var result = JSON.parse(xhr.responseText);
        appendJson(result);
    };

    // 2. 요청준비(open())
    xhr.open('post', '/timejson', false);

    // 3. 요청(send())
    xhr.send('msg=timejson');
}

prototype.js

Detail

// window.$ = window.document.getElementById;
// window.$$ = window.document.getElementsByTagName;
window.onload = function() {
    $$('button')[0].on('click', function() {
        // 1. Ajax.Request
        //     new Ajax.Request('/time', {
        //         method: "GET", // Default: POST
        //         asynchronous: false, // Default: true
        //         parameters: "msg=Request",
        //         onSuccess: function(xhr) {
        //             var result = xhr.responseText;
        //             $('result').innerHTML = result;
        //         }
        //     });
        // });

        // 2. Ajax.Updater
        // new Ajax.Updater('result', '/time', {
        //     parameters: "msg=Updater",
        // });


        // 3. Ajax.PeriodicalUpdater
        new Ajax.PeriodicalUpdater('result', '/time', {
            parameters: "msg=PeriodicalUpdater",
            frequency: 10,
        });
    });
}

Curry, Partial (Closure, Function Programming)

Detail

Function.prototype.curry = function() {
    var fn = this;
    var args = Array.prototype.slice.call(arguments);

    return function() {
        return fn.apply(this, args.concat(Array.prototype.slice.call(arguments)));
    }
}

Function.prototype.partial = function() {
    var fn = this,
        args = Array.prototype.slice.apply(arguments);

    return function() {
        let argIndex = 0;

        for (let i = 0; i < args.length && argIndex < arguments.length; i++) {
            if (args[i] === undefined) {
                args[i] = arguments[argIndex++];
            }
        }

        return fn.apply(this, args.concat(Array.prototype.slice.call(arguments, argIndex)));
    }
}

function caculate(a, b, c) {
    return a * b + c;
}

console.log(caculate.curry(1)(2, 3));
console.log(caculate.curry(1, 2)(3));
console.log(caculate.curry(1, 2, 3)());
console.log(caculate.partial(1)(2, 3));
console.log(caculate.partial(1, 2)(3));
console.log(caculate.partial(1, 2, 3)());
console.log(caculate.partial(1, undefined, 3)(2));
console.log(caculate.partial(undefined, 2)(1, 3));
console.log(caculate.partial(undefined, 2, 3)(1));

Function Scope, Block Scope, var, let, const

Detail

var funcs = [];

// 함수의 배열을 생성하는 for 루프의 i는 for 루프의 코드 블록에서만 유효한 지역 변수이면서 자유 변수이다.
// for (var i = 0; i < 3; i++) {
for (let i = 0; i < 3; i++) {

    funcs.push(function() { console.log(i); });
}

// 배열에서 함수를 꺼내어 호출한다
for (var j = 0; j < 3; j++) {
    console.dir(funcs[j]);
    funcs[j]();
}

for of, for in

Detail

foreach 반복문 foreach 반복문은 오직 Array 객체에서만 사용가능한 메서드입니다.(ES6부터는 Map, Set 등에서도 지원됩니다) 배열의 요소들을 반복하여 작업을 수행할 > 수 있습니다. foreach 구문의 인자로 callback 함수를 등록할 수 있고, 배열의 각 요소들이 반복될 때 이 callback 함수가 호출됩니다. callback 함수에> 서 배열 요소의 인덱스와 값에 접근할 수 있습니다.

var items = ['item1', 'item2', 'item3'];

items.forEach(function(item) {
    console.log(item);
});
// 출력 결과: item, item2, item3

for …in 반복문 for in 반복문은 객체의 속성들을 반복하여 작업을 수행할 수 있습니다. 모든 객체에서 사용이 가능합니다. for in 구문은 객체의 key 값에 접근할 수 있> > 지만, value 값에 접근하는 방법은 제공하지 않습니다. 자바스크립트에서 객체 속성들은 내부적으로 사용하는 숨겨진 속성들을 가지고 있습니다. 그 중 하> > 나가 [[Enumerable]]이며, for in 구문은 이 값이 true로 셋팅되어 속성들만 반복할 수 있습니다. 이러한 속성들을 열거형 속성이라고 부르며, 객체의 모> 든 내장 메서드를 비롯해 각종 내장 프로퍼티 같은 비열거형 속성은 반복되지 않습니다.

var obj = {
    a: 1, 
    b: 2, 
    c: 3
};

for (var prop in obj) {
    console.log(prop, obj[prop]); // a 1, b 2, c 3
}
for …of 반복문
for of 반복문은 ES6에 추가된 새로운 컬렉션 전용 반복 구문입니다. for of 구문을 사용하기 위해선 컬렉션 객체가 [Symbol.iterator] 속성을 가지고 있어야만 합니다(직접 명시 가능).

var iterable = [10, 20, 30];

for (var value of iterable) {
  console.log(value); // 10, 20, 30
}
for in 반복문과 for of 반복문의 차이점
for in 반복문 : 객체의 모든 열거 가능한 속성에 대해 반복
for of 반복문 : [Symbol.iterator] 속성을 가지는 컬렉션 전용
Object.prototype.objCustom = function () {};
Array.prototype.arrCustom = function () {};

var iterable = [3, 5, 7];
iterable.foo = "hello";

for (var key in iterable) {
  console.log(key); // 0, 1, 2, "foo", "arrCustom", "objCustom"
}

for (var value of iterable) {
  console.log(value); // 3, 5, 7
}

Lodash 라이브러리

Detail

const filtered = orderedContactCardList.filter((contact, idx, arr) => (
  arr.findIndex(origin => origin.UserID === contact.UserID) === idx
));

const filtered = uniqBy(orderedContactCardList, 'UserID');

rolroralra/Javascript.md

Data Type

Function Object Properties

Function Prototype Properties

Javascript Range Code

Function.prototype.method -- Add Class method

Class by ECMAScript5

Class by ECMAScript6

Class by Typescript

Convert Typescript to ECMAScript

Synchronous, Asynchronous, Promise, await

DOM (Document Object Model)

jQuery

Ajax

prototype.js

Curry, Partial (Closure, Function Programming)

Function Scope, Block Scope, var, let, const

for of, for in

Lodash 라이브러리