W' page

출처

http://blog.aliencube.org/ko/2014/01/02/reasons-behind-using-strict-mode-while-coding-javascript/

Strict Mode는 ECMAScript 5 버전에 있는 새로운 기능으로써,

당신의 프로그램 또는 함수를 엄격한 운용 콘텍스트 안에서 실행시킬 수 있게끔 합니다.

이 엄격한 콘텍스트는 몇가지 액션들을 실행할 수 없도록 하며, 좀 더 많은 예외를 발생시킵니다.

Strict Mode는 몇가지 면에서 도움이 되는데:

  흔히 발생하는 코딩 실수를 잡아내서 예외를 발생시킵니다.

  상대적으로 안전하지 않은 액션이 발생하는 것을 방지하거나 그럴 때 예외를 발생시킵니다.

  예를 들자면 전역객체들에 접근하려 한다거나 하는 것들이겠지요.

  혼란스럽거나 제대로 고려되지 않은 기능들을 비활성화시킵니다.

이 strict mode는 파일 전체에 적용시킬 수도 있고,

아니면 특정한 함수 안에서만 적용시킬 수도 있습니다.

따라서, 기존의 자바스크립트 코드에 대해 좀 더 엄격한 검사를 실행시키고 싶다면 문서의 첫 줄에 "use strict";를 추가한다.

기존의 것은 그대로 놔두고, 새로운 코드에 대해서만 추가하고 싶다면 각각의 함수 블록 처음에 추가하는 것이 좋겠다.

// 출처 : 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" 이 뜰 것 같지만 그렇지 않다.

*/

// 모듈, 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 중간에 객체의 타입을 검사하는 과정이 필요