골때리는 자바스크립트자바스크립트가 개발자에게 객기부리기 시작한다 .

Insert Company name here.

자기소개내가 지금 뭘 할지 모르겠고 대본도 없고 각본도 없고 ..

자바스크립트가 골때린다고 ?

• 생각치 못한 결과에 대한 대응• 자바스크립트보다 더 원론적인 원리 파악• 나도 몰랐던거 알도록 정리

골때리는 함수형생각하기도 힘든 연체동물형 문법

function caller(i){ caller.i = (caller.i || 0) + i; return arguments.callee;}console.log((caller(1)(2)(3)(4)(5), caller.i));

뭐여 이거 ..

(function(i){ console.log(i*i);})(10);

함수의 골때리는 진실

• 함수는 함수형이라면 바로 괄호를 통한 호출이 가능하다 .주로 node.js 에서 require() 함수와 같이 사용예 ) require(‘express’)();

• 함수형은 괄호로 둘려쌓아 익명 함수형으로 선언해도 바로 불러올 수 있다 .주로 Plugin/Library 에서 외부 스코프로부터 안전한 코드를 만들기 위해 사용 .

alert.call.call.call.call.call.apply(function (a) {return a}, [1,2]) // 2뭐여 이거 ..

alert.call.call.call.call.call.apply(function (a) {return a}, [1,2]) // 2

입양한 함수를 호출하는 참 이상한 재미 .

call.apply == Plain Function call!call.apply(function (a) {return a}, [1,2]);(function (a){return a}).call(1, 2);// 2

골때리는 내장객체여러분이 생각치 못했던 내장객체들의 돌발행동

Array 객체

var a = new Array();var b = [];

둘다 동일

var a = new Array(4);var b = [,,,,];var c = [];c.length = 4;console.log(c);

셋다 동일

배열 초기하는것부터 크기를 지정하는 것까지 ?

• 배열은 처음부터 자리없는 배열을 만들거나 미리 자리를 부여할 수 있다 .

• 미리 자리를 만들긴 했지만 값도 없고 자리도 없다 .

• LENGTH 속성은 설정할 수 있다 .

• 고정 크기 배열을 정의할 때 유용하게 쓸 수 있다 .

var a = [‘a’, ‘b’, ‘c’, ‘d’];delete a[1];delete a[2];console.log(a);

깜짝 문제 .

var a = [‘a’, ‘b’, ‘c’, ‘d’];delete a[1];delete a[2];console.log(a);

정답 : [‘a’, undefined x 2 , ‘d’]

깜짝 문제 .

console.log([2,,,3] == [2, undefined, undefined, 3]);

깜짝 문제 .

console.log([2,,,3] == [2, undefined, undefined, 3]);

깜짝 문제 .

정답 : false

해설 : 배열의 불능 자리와 undefined 자리는 틀리다 .배열 자리에 undefined 를 부여하면 자리가 부여되며 undefined 가 채워진다 . 배열 요소가 되는 것 .하지만 자리를 주지 않으면 값 자체가 없기 때문에 undefined 가 나오지만 요소 불능과 undefined 는 틀림 .

+[] == 0++[[]][+[]] == 1++[++[[]][+[]]][+[]] == 2…

배열로 만드는 이게 뭐하는 짓이냐 이녀석아 !

+[] == 0++[[]][+[]] == 1++[++[[]][+[]]][+[]] == 2…

배열로 만드는 이게 뭐하는 짓이냐 이녀석아 !

원리 : 객체 요소는 증감 연산자가 가능한 성질을 이용한 트릭

var fib = function (_) { for(_=[+[],++[[]][+[]],+[],_],_[++[++[++[[]][+[]]][+[]]][+[]]]=(((_[++[++[++[[]][+[]]][+[]]][+[]]]-(++[[]][+[]]))&(((--[[]][+[]])>>>(++[[]][+[]]))))===(_[++[++[++[[]][+[]]][+[]]][+[]]]-(++[[]][+[]])))?(_[++[++[[]][+[]]][+[]]]=++[[]][+[]],_[++[++[++[[]][+[]]][+[]]][+[]]]-(++[[]][+[]])):+[];_[++[++[++[[]][+[]]][+[]]][+[]]]--;_[+[]]=(_[++[[]][+[]]]=_[++[++[[]][+[]]][+[]]]=_[+[]]+_[++[[]][+[]]])-_[+[]]); return _[++[++[[]][+[]]][+[]]]; }

console.assert(fib(-1) === 0); console.assert(fib(0) === 0); console.assert(fib(1) === 1); console.assert(fib(2) === 1); console.assert(fib(3) === 2); console.assert(fib(4) === 3); console.assert(fib(5) === 5); console.assert(fib(6) === 8); console.assert(fib(7) === 13); console.assert(fib(32) === 2178309); console.assert(fib(46) === 1836311903); console.assert(fib(47) === 2971215073); console.assert(fib(63) === 6557470319842);

배열 트릭을 이용한 파보니치 함수 구현

[1,2,3] < [1,2,4] // true

배열도 비교 연산이 가능하다 ?

JS 는 String 사전적 정렬을 이용해 비교 연산을 수행한다 .근거 : ECMAScript 5th 11.8.5 The Abstract Relational Comparison Algorithm (NOTE 2)

[1,2,3] === [1,2,3] // false[1,2,3] <= [1,2,3] // true

배열도 비교 연산이 가능하다 ?

참조 주소가 틀리니 익명 배열에게는 참조 동일이 먹히지 않는다 .

[,,,].join() // “,,”

Join 메소드의 위엄

[,,,].join() // “,,”[[], null, undefined, null] == “,,,” //true

Join 메소드의 위엄 ??

배열의 문자열 표현은 빈 객체 계열에는 빈 문자로 변한다 .( 단 , NaN 은 제외 )근거 : ECMAScript 5th (final draft) 11.9.3 추상 동일 비교 알고리즘

Function strCheck(a){ if(![a].join()) return a; else return a+’ is good string.’;}

function fnEval(a){ var Z = ‘constructor’; return Z[Z][Z](a)();}

jQuery.globalEval = 고생 사서 왜 해 간단하게 끝내면 되는데 ..

숫자 NUMBER

01+false-true+[]+’10’-’5’0x0000000000000000000000000000000000000000000110e10+’0x0001’++[5][-false]

숫자를 선언하는 너무나 다양한 방법

참 쉽죠 ?

~~3.2393895638945 == 3

Math.floor 보다 더 짧은 소수점 버리기 함수

비트 부정 연산자 (~) 는 자바스크립트에서 2 개가 먹히다니…숫자 연산 시 – (n+1) 되는건 아실테고…

indexOf 로 참 거짓 판별하는 쉬운 방법

if(~“I’m a banana”.indexOf(‘apple’)){ alert(‘ 바나나’ );}else{ alert(‘ 사과’ );}

(42).toFixed(2); //’42.00’42.toFixed(2); // 구문 오류42.888.toFixed(2); //’42.89’42..toFixed(2); //’42.00’42…toFixed(2); // 불여우에서 XML 자식 호출 오류 발생

숫자 멤버 함수 호출하기

부울 BOOLEAN

var a = ‘string’;!a // false!!a //true [ 주로 객체부울 캐스팅에 사용 ]!!!a //false!!!!a //true!!!!!a //false//…

이게 다입니다 .

함수와 지시자

parseInt(“fuck”, 16); // 15parseInt(null, 24); === 23//24 진수부터 숫자가 나옴 . 30 까지 23 이였다가 31 부터 갑자기 확 뛰어오름 .

parseint 함수

typeof 지시자

"Why am I a " + typeof + ""; // "Why am I a number"

isNaN 응용하기 = ID 입력 유효성 검사

If(!isNaN(parseInt(value))){ alert(‘ 첫글자는 영문부터 해주삼 .’);}If(!isNaN(+value)){ alert(‘ 영문자는 포함해주삼 .’);}

// => value 가 영문과 숫자만 입력 가능하다고 가정할 때 ,If(isNaN(+value) || isNaN(parseInt(value))){ alert(‘ID 형식에 맞춰 영문자부터 시작한 ID 로 넣어주삼 .’);}

Eval 이 위험한 이유 이것만 알면 끝 .

var a = ‘x-=2’;

function b(s){ var x = 4; eval(s); return x;}

b(a) == 2

WTFJS.COM

• 자바스크립트의 생각치 못한 현상과 원리 공유를 위한 사이트 .

• 몇몇 기법은 이미 실무에서도 사용될 만큼 유용한 정보 .

• 로우 레벨로 자바스크립트를 연구할 수 있는 최적의 사이트 .

프로미즈 패턴 , 당신이 직접 만드삼 . (http://jsfiddle.net/3epwX/)

function MyDefferd(){ this.fn={}; // 초기화 할거 있음 하덩가 . }MyDefferd.prototype.done=function(func){ this.fn.done=func; };function Deffer(delay){ var deff=new MyDefferd();// 아까 만든 지연객체를 동적으로 하나 불러와 주시고 . alert(' 작업 시작 !'); setTimeout(function(){ if(typeof(deff.fn.done)=='function') deff.fn.done();//done 함수를 끌어다 씁니다 . },delay*1000);// 몇초 후에 ? 님이 쓴 초 후에 . return deff;}Deffer(3).done(function(){ alert(' 작업 끝 !');});

경험담 토론의 시간 .

질문 ?

ㄳ

합니다 .