Javascript - etc

|


// 출처 : http://programmingsummaries.tistory.com/

// 추천 링크

// https://developer.mozilla.org/ko/docs/A_re-introduction_to_JavaScript

// https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures

// https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain

// https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Closures




// 재귀함수와 arguments.callee

// arguments.callee는 스스로의 함수를 호출

function factorial(x) {

    if(x<=1) {

        return 1;

    }

    else {

        return x*arguments.callee(x-1);

    }

}

console.log(factorial(5))



// 멤버 관리 구조와 prototype

function Person(name) {

    var firstName = "홍";

    this.name = name;

    this.speak = function(){ console.log(firstName + this.name); }

}


console.log(Person.firstName); //undefined 접근할 수 없다.


var p = new Person("길동"); //객체 생성

console.log(p.firstName); //undefined 역시 접근할 수 없다.

console.log(p.name); //"길동" 접근 가능하다.


Person.prototype.tellme = function(){ console.log('zzz'); }; //메서드 추가!!

console.log(p.tellme()); //zzz라는 팝업이 뜬다!! 즉 객체 프로토타입 변경 가능!!


console.log(p["firstName"]); //undefined 마찬가지로 접근할 수 없다.

console.log(p["name"]); //"길동" 접근 가능하다.



// 멤버 확장

Object.prototype.extend = function(parent) {

    for(var property in parent) {

        this[property] = parent[property];

    }

};



// Max & min

var test = [0, 77, 33, 11, 99, 88, 55];

console.log(Math.max.apply(null, test)); //결과값은 99

console.log(Math.min.apply(null, test)); //결과값은 0


var max = test.reduce( function (previous, current) {

    return previous > current ? previous:current;

});

//최소값

var min = test.reduce( function (previous, current) {

    return previous > current ? current:previous;

});

console.log("max :", max, "| min :", min)



// 배열 복사, 객체를 가진 경우엔 조심해야 함

var aaa = [0, 1, 2, 3, 4, 5];

var bbb = JSON.parse(JSON.stringify( aaa )); //참조없는 복사

var aaaa = [0, 1, 2, 3, 4, 5];

var bbbb = aaaa.slice(); //indexOf 혹은 contains로 검색 가능



// 배열 함수 : http://programmingsummaries.tistory.com/357

// Array.forEach

var testArray = ["aaa", "bbb", "ccc", "ddd"];

//배열의 모든 요소에 EDIT라는 문자열을 더하기

//메서드 수행 후 리턴값은 undefined

testArray.forEach(function (item, index, array) {

    array[index] = item + "EDIT";

});

console.log(testArray);


// Array.some

var testArraySome = ["aaa", "bbb", "ccc", "ddd"];

//배열의 중에서 "bbb"가 있으면 true를 리턴

//메서드 수행 중 true가 리턴되면 메서드 수행을 중단하고 true를 리턴

console.log(testArraySome.some(function (item, index, array) {

    console.log(index + "번째 요소 : " + item);

    return !!~item.search("bbb");

}));

//true를 리턴하는 콜백이 있었으므로 리턴값은 true


// Array.every

var testArray = ["aaa", "bbb", "ccc", "ddd"];

//배열의 모든 요소에 "aaa"가 있으면 true를 리턴

//메서드 수행 중 false가 리턴되면 메서드 수행을 중단하고 false를 리턴

console.log(testArray.every(function (item, index, array) {

    console.log(index + "번째 요소 : " + item);

    return !!~item.search("aaa");

    // return !!~item.search(/[a-z]+/);  -> true

}));

//false를 리턴하는 콜백이 있었으므로 리턴값은 false


// Array.filter

var testArray = ["aaa", "bbb", "ccc", "ddd"];

//배열의 요소가 a 또는 b로 이루어져 있으면 추출

//메서드가 종료되면 추출된 요소로만 이루어진 새로운 배열을 리턴

var newArray = testArray.filter(function (item, index, array) {

    return !!~item.search(/[ab]+/);

});

console.log(testArray);

console.log(newArray);


// Array.reduce

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

//각 콜백마다의 리턴값을 previousItem 으로 넘겨받아 어떤 작업을 수행

//메서드가 종료되면 마지막 콜백의 리턴값을 리턴

var result = testArray.reduce(function (previousItem, currentItem, index, array) {

    //반환된 결과는 다음번 콜백의 첫번째 파라메터로 다시 전달된다.

    return previousItem + currentItem;

}, 0);

console.log(testArray);

console.log(result);



// setTimeout function

setTimeout(console.log("setTimeoutTest - Start"), 1000);

console.log("setTImeoutTest - End")

/**

1초 후에 "setTImeoutTest - End" 이 뜰 것 같지만 그렇지 않다.

*/




'Language > Javascript' 카테고리의 다른 글

Javascript - Generator  (0) 2015.10.16
Javascript - Function, Module  (0) 2015.10.16
javascript 문서 맨 위에 'use strict'; 를 쓰자.  (0) 2015.10.16
Javascript 정리 - Advanced  (0) 2015.10.15
Javascript 정리 - Basic  (0) 2015.10.15
And


Javascript 정리 - Advanced

|


// 모듈, module

var circle = require('./node.circle.js');

console.log( 'The area of a circle of radius 4 is ' + circle.area(4));



// 정규표현식, regular expression

// 시각화 해주는 사이트 : http://regexper.com/

// 정규표현식 실습 : http://www.regexr.com/

var pattern = /a/

// var pattern = new RegExp('a');

console.log(pattern.exec('abcdef')); // ["a"]

console.log(pattern.exec('bcdefg')); // null

console.log(pattern.test('abcdef')); // true

console.log(pattern.test('bcdefg')); // false

console.log('abcdef'.match(pattern)); // ["a"]

console.log('bcdefg'.match(pattern)); // null

console.log('abcdef'.replace(pattern, 'A'));  // Abcdef


var xi = /a/;

console.log("Abcde".match(xi)); // null

var oi = /a/i;

console.log("Abcde".match(oi)); // ["A"];


var xg = /a/;

console.log("abcdea".match(xg));

var og = /a/g;

console.log("abcdea".match(og));


var pattern = /(\w+)\s(\w+)/;

var str = "coding everybody";

var result = str.replace(pattern, "$2, $1");

console.log(result);


var urlPattern = /\b(?:https?):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*/gim;

var content = '생활코딩 : http://opentutorials.org/course/1 입니다. 네이버 : http://naver.com 입니다. ';

var result = content.replace(urlPattern, function(url){

    return '<a href="'+url+'">'+url+'</a>';

});


console.log(result);




// 함수, function, 유효 범위

for(var i = 0; i < 1; i++){

    var name = 'coding everybody';

}

console.log(name);


var i = 5;

function a(){

    var i = 10;

    b();

}

function b(){

    console.log(i);

}

a();



// function, value, 값으로서의 함수, 콜백, callback

function cal(func, num){

    return func(num)

}

function increase(num){

    return num+1

}

function decrease(num){

    return num-1

}

console.log(cal(increase, 1));

console.log(cal(decrease, 1));


function cal(mode){

    var funcs = {

        'plus' : function(left, right){return left + right},

        'minus' : function(left, right){return left - right}

    }

    return funcs[mode];

}

console.log(cal('plus')(2,1));

console.log(cal('minus')(2,1));


var process = [

    function(input){ return input + 10;},

    function(input){ return input * input;},

    function(input){ return input / 2;}

];

var input = 1;

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

    input = process[i](input);

}

console.log(input);


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

console.log(numbers.sort(function (a, b){

    return b-a;

})); // array, [20,10,9,8,7,6,5,4,3,2,1]



// 클로저, closure

function outter(){

    var title = 'coding everybody';

    return function(){

        console.log(title);

    }

}

inner = outter();

inner();


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');


console.log(ghost.get_title());     // Ghost in the shell

console.log(matrix.get_title());    // Matrix


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

console.log(ghost.get_title());     // 공각기동대

console.log(matrix.get_title());    // Matrix


var movies = {

    'title' : null,

    'get_title' : function (){

        return this.title;

    },

    'set_title' : function(title){

        this.title = title;

    }

}

m1 = movies;

m1.set_title("m1")

console.log(m1.get_title())

console.log(movies.get_title())


var arr = []

for(var i = 0; i < 5; i++){

    arr[i] = function(id) {

        return function(){

            return id;

        }

    }(i);

}

for(var index in arr) {

    console.log(arr[index]());

}



// arguments, 아규먼트

function sum(){

    var _sum = 0;

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

        // console.log(i+' : '+arguments[i]);

        _sum += arguments[i];

    }

    return _sum;

}

console.log('result : ' + sum(1,2,3,4));



// 매개변수

function zero(){

    console.log(

        'zero.length', zero.length,

        'arguments', arguments.length

    );

}

function one(arg1){

    console.log(

        'one.length', one.length,

        'arguments', arguments.length

    );

}

function two(arg1, arg2){

    console.log(

        'two.length', two.length,

        'arguments', arguments.length

    );

    return arg1 + arg2

}

zero(); // zero.length 0 arguments 0

one('val1', 'val2');  // one.length 1 arguments 2

two('val1');  // two.length 2 arguments 1



// 함수의 호출, call function

o1 = {val1:1, val2:2, val3:3}

o2 = {v1:10, v2:50, v3:100, v4:25}

function sum2(){

    var _sum = 0;

    for(name in this){

        _sum += this[name];

    }

    return _sum;

}

console.log(sum2.apply(o1)) // 6

console.log(sum2.apply(o2)) // 185


o1.sum2 = sum2;

console.log(o1.sum2()); // sum 중간에 객체의 타입을 검사하는 과정이 필요





'Language > Javascript' 카테고리의 다른 글

Javascript - Generator  (0) 2015.10.16
Javascript - Function, Module  (0) 2015.10.16
javascript 문서 맨 위에 'use strict'; 를 쓰자.  (0) 2015.10.16
Javascript - etc  (0) 2015.10.15
Javascript 정리 - Basic  (0) 2015.10.15
And


Javascript 정리 - Basic

|


// 변수, variable

var aaa = 2; //숫자

var bbb = "2"; //문자

var bbb = '2'; //얘도 문자

var ccc = true; //얘는 불린

var ddd = [1, 2, 3, 4]; //얘는 배열

var eee = { p1 : 2, p2 : '2' }; //얘는 객체

var fff = null; //null

var ggg = undefined; //undefined

var hhh = function(){ console.log('ㅋㅋㅋ'); } //얘는 함수!!

hhh()



// 수학, 정수, math

console.log(

    Math.pow(3,2),       // 9,   3의 2승

    Math.round(10.6),    // 11,  10.6을 반올림

    Math.ceil(10.2),     // 11,  10.2를 올림

    Math.floor(10.6),    // 10,  10.6을 내림

    Math.sqrt(9),        // 3,   3의 제곱근

    Math.random()       // 0부터 1.0 사이의 랜덤한 숫자

);



// 속성, type, typedef

console.log(

    typeof 1,

    typeof "1"

);



// 문자열, string

console.log(

    'kanziw\'s javascript\n',

    "javascript\nworld\n",

    "have a " + "nice day\n",

    'hihello'.length

);



// 비교, equal

console.log(

    1 == 1,             // true

    1 == "1",           // true

    1 === "1",          // false


    null == undefined,  // true

    null === undefined, // false

    true == 1,          // true

    true === 1,         // false

    true == '1',        // true

    true === '1',       // false

    0 === -0,           // true

    NaN === NaN        // false

);



// if, while, for

var a;

if(!'' && !undefined && !a && !null && !NaN){

    console.log('조건문의 경우가 모두 false임');

}


var i = 0;

var sum = 0;

while(i < 10){

    sum += ++i;

}

console.log(sum);


sum = 0;

for(i = 1; i <= 10; i++){

    if(i == 2) continue;

    sum += i;

    if(i == 5) break;

}

console.log(sum);



// function numbering(){

var numbering = function (){

    i = 0;

    while(i < 10){

        console.log(i);

        i += 1;

    }

}

numbering();



// list, 배열

var li = ['a', 'c', 'z'];

li.push('d');

li.concat('e', 'f');

li.unshift('-a');

console.log(li);

li.splice(2, 1, 'B');   // 2번째부터 1개를 삭제 후 'B'를 삽입

console.log(li);


console.log(

    li.shift(),

    li.pop(),

    li.sort()

);

console.log(li.reverse());



// 객체, object

var grades = {};

grades['egoing'] = 10;

grades['k8805'] = 6;

grades['sorialgi'] = 80;

// var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80}


for(key in grades) {

    console.log("key : "+key+" | value : "+grades[key]);

}


grades = {

    'list': {'egoing': 10, 'k8805': 6, 'sorialgi': 80},

    'show' : function(){

        for(var name in this.list){

            console.log(name+':'+this.list[name]);

        }

    }

};

grades.show();




'Language > Javascript' 카테고리의 다른 글

Javascript - Generator  (0) 2015.10.16
Javascript - Function, Module  (0) 2015.10.16
javascript 문서 맨 위에 'use strict'; 를 쓰자.  (0) 2015.10.16
Javascript - etc  (0) 2015.10.15
Javascript 정리 - Advanced  (0) 2015.10.15
And


prev | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | ··· | 62 | next