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

  • 7,558 views
Uploaded on

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로 나옵니다.

More 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,558
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
77
Comments
0
Likes
73

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('작업 끝!'); });