View
7.578
Download
4
Category
Preview:
DESCRIPTION
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로 나옵니다.
Citation preview
골때리는 자바스크립트자바스크립트가 개발자에게 객기부리기 시작한다 .
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(' 작업 끝 !');});
경험담 토론의 시간 .
질문 ?
ㄳ
합니다 .
Recommended