Your SlideShare is downloading. ×
  • Like
골때리는 자바스크립트 발표자료
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

골때리는 자바스크립트 발표자료

  • 7,691 views
Published

Sorry. for koreans only. I'll add english short description. or just visit http://wtfjs.com …

Sorry. for koreans only. I'll add english short description. or just visit http://wtfjs.com
아오 썅.

정정사항입니다.
객체 동일비교는 항상 valueOf 결과물로 나온 비교로 하는 데다가,
객체와 배열은 valueOf 해봐야 객체로 나오기 때문에
객체와 배열은 == 하나 === 하나 같은 비용으로 비교합니다.
[1,2,3]==[1,2,3] 은 false가 되므로
[1,,,2]==[1,undefined,undefuned,2] 는 무조건 false로 나옵니다.

Published in Internet
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
7,691
On SlideShare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
84
Comments
0
Likes
74

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Insert Company name here.
  • 2. • • •
  • 3. 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);
  • 4. • •
  • 5. alert.call.call.call.call.call.apply(function (a) {return a}, [1,2]) // 2 뭐여 이거..
  • 6. 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
  • 7. var a = new Array(); var b = []; 둘다 동일 var a = new Array(4); var b = [,,,,]; var c = []; c.length = 4; console.log(c); 셋다 동일
  • 8. • • • •
  • 9. var a = [‘a’, ‘b’, ‘c’, ‘d’]; delete a[1]; delete a[2]; console.log(a); 깜짝 문제.
  • 10. var a = [‘a’, ‘b’, ‘c’, ‘d’]; delete a[1]; delete a[2]; console.log(a); 정답 : [‘a’, undefined x 2 , ‘d’] 깜짝 문제.
  • 11. console.log([2,,,3] == [2, undefined, undefined, 3]); 깜짝 문제.
  • 12. console.log([2,,,3] == [2, undefined, undefined, 3]); 깜짝 문제. 정답 : false 해설 : 배열의 불능 자리와 undefined 자리는 틀리다. 배열 자리에 undefined 를 부여하면 자리가 부여되며 undefined 가 채워진다. 배열 요소가 되는 것. 하지만 자리를 주지 않으면 값 자체가 없기 때문에 undefined가 나오지만 요소 불능과 undefined 는 틀림.
  • 13. +[] == 0 ++[[]][+[]] == 1 ++[++[[]][+[]]][+[]] == 2 … 배열로 만드는 이게 뭐하는 짓이냐 이녀석아!
  • 14. +[] == 0 ++[[]][+[]] == 1 ++[++[[]][+[]]][+[]] == 2 … 배열로 만드는 이게 뭐하는 짓이냐 이녀석아! 원리 : 객체 요소는 증감 연산자가 가능한 성질을 이용한 트릭
  • 15. 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); 배열 트릭을 이용한 파보니치 함수 구현
  • 16. [1,2,3] < [1,2,4] // true 배열도 비교 연산이 가능하다? JS는 String 사전적 정렬을 이용해 비교 연산을 수행한다. 근거 : ECMAScript 5th 11.8.5 The Abstract Relational Comparison Algorithm (NOTE 2)
  • 17. [1,2,3] === [1,2,3] // false [1,2,3] <= [1,2,3] // true 배열도 비교 연산이 가능하다? 참조 주소가 틀리니 익명 배열에게는 참조 동일이 먹히지 않는다.
  • 18. [,,,].join() // “,,” Join 메소드의 위엄
  • 19. [,,,].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.’; }
  • 20. function fnEval(a){ var Z = ‘constructor’; return Z[Z][Z](a)(); } jQuery.globalEval = 고생 사서 왜 해 간단하게 끝내면 되는데..
  • 21. 0 1 +false -true +[] +’10’ -’5’ 0x00000000000000000000000000000000000000000001 10e10 +’0x0001’ ++[5][-false] 숫자를 선언하는 너무나 다양한 방법 참 쉽죠?
  • 22. ~~3.2393895638945 == 3 Math.floor 보다 더 짧은 소수점 버리기 함수 비트 부정 연산자(~)는 자바스크립트에서 2개가 먹히다니… 숫자 연산 시 –(n+1) 되는건 아실테고… indexOf 로 참 거짓 판별하는 쉬운 방법 if(~“I’m a banana”.indexOf(‘apple’)){ alert(‘바나나’); }else{ alert(‘사과’); }
  • 23. (42).toFixed(2); //’42.00’ 42.toFixed(2); //구문 오류 42.888.toFixed(2); //’42.89’ 42..toFixed(2); //’42.00’ 42…toFixed(2); //불여우에서 XML 자식 호출 오류 발생 숫자 멤버 함수 호출하기
  • 24. var a = ‘string’; !a // false !!a //true [주로 객체부울 캐스팅에 사용] !!!a //false !!!!a //true !!!!!a //false //… 이게 다입니다.
  • 25. parseInt(“fuck”, 16); // 15 parseInt(null, 24); === 23 //24진수부터 숫자가 나옴. 30까지 23이였다가 31부터 갑자기 확 뛰어오름. parseint 함수
  • 26. typeof 지시자 "Why am I a " + typeof + ""; // "Why am I a number"
  • 27. isNaN 응용하기 = ID 입력 유효성 검사 If(!isNaN(parseInt(value))){ alert(‘첫글자는 영문부터 해주삼.’); } If(!isNaN(+value)){ alert(‘영문자는 포함해주삼.’); } // => value 가 영문과 숫자만 입력 가능하다고 가정할 때, If(isNaN(+value) || isNaN(parseInt(value))){ alert(‘ID 형식에 맞춰 영문자부터 시작한 ID로 넣어주삼.’); }
  • 28. Eval 이 위험한 이유 이것만 알면 끝. var a = ‘x-=2’; function b(s){ var x = 4; eval(s); return x; } b(a) == 2
  • 29. • • •
  • 30. 프로미즈 패턴, 당신이 직접 만드삼. (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('작업 끝!'); });