SlideShare une entreprise Scribd logo
1  sur  39
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);
•
•
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
var a = new Array();
var b = [];
둘다 동일
var a = new Array(4);
var b = [,,,,];
var c = [];
c.length = 4;
console.log(c);
셋다 동일
•
•
•
•
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 = 고생 사서 왜 해 간단하게 끝내면 되는데..
0
1
+false
-true
+[]
+’10’
-’5’
0x00000000000000000000000000000000000000000001
10e10
+’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 자식 호출 오류 발생
숫자 멤버 함수 호출하기
var a = ‘string’;
!a // false
!!a //true [주로 객체부울 캐스팅에 사용]
!!!a //false
!!!!a //true
!!!!!a //false
//…
이게 다입니다.
parseInt(“fuck”, 16); // 15
parseInt(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
•
•
•
프로미즈 패턴, 당신이 직접 만드삼. (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('작업 끝!');
});
골때리는 자바스크립트 발표자료
골때리는 자바스크립트 발표자료
골때리는 자바스크립트 발표자료

Contenu connexe

Tendances

프론트엔드스터디 E04 js function
프론트엔드스터디 E04 js function프론트엔드스터디 E04 js function
프론트엔드스터디 E04 js functionYoung-Beom Rhee
 
스파르탄스터디 E04 Javascript 객체지향, 함수형 프로그래밍
스파르탄스터디 E04 Javascript 객체지향, 함수형 프로그래밍스파르탄스터디 E04 Javascript 객체지향, 함수형 프로그래밍
스파르탄스터디 E04 Javascript 객체지향, 함수형 프로그래밍Young-Beom Rhee
 
Javascript 완벽 가이드 정리
Javascript 완벽 가이드 정리Javascript 완벽 가이드 정리
Javascript 완벽 가이드 정리ETRIBE_STG
 
Startup JavaScript 5 - 객체(Date, RegExp, Object, Global)
Startup JavaScript 5 - 객체(Date, RegExp, Object, Global)Startup JavaScript 5 - 객체(Date, RegExp, Object, Global)
Startup JavaScript 5 - 객체(Date, RegExp, Object, Global)Circulus
 
Startup JavaScript 6 - 함수, 스코프, 클로저
Startup JavaScript 6 - 함수, 스코프, 클로저Startup JavaScript 6 - 함수, 스코프, 클로저
Startup JavaScript 6 - 함수, 스코프, 클로저Circulus
 
일단 시작하는 코틀린
일단 시작하는 코틀린일단 시작하는 코틀린
일단 시작하는 코틀린Park JoongSoo
 
Learning Node Book, Chapter 5
Learning Node Book, Chapter 5Learning Node Book, Chapter 5
Learning Node Book, Chapter 5Ji Hun Kim
 
자바스크립트 함수
자바스크립트 함수자바스크립트 함수
자바스크립트 함수유진 변
 
7가지 동시성 모델 4장
7가지 동시성 모델 4장7가지 동시성 모델 4장
7가지 동시성 모델 4장HyeonSeok Choi
 
자바스크립트 기초문법~함수기초
자바스크립트 기초문법~함수기초자바스크립트 기초문법~함수기초
자바스크립트 기초문법~함수기초진수 정
 
스위프트 성능 이해하기
스위프트 성능 이해하기스위프트 성능 이해하기
스위프트 성능 이해하기Yongha Yoo
 
[새차원, 코틀린(Kotlin) 강좌] 5. Control Flow
[새차원, 코틀린(Kotlin) 강좌] 5. Control Flow[새차원, 코틀린(Kotlin) 강좌] 5. Control Flow
[새차원, 코틀린(Kotlin) 강좌] 5. Control Flow정연 최
 
0.javascript기본(~3일차내)
0.javascript기본(~3일차내)0.javascript기본(~3일차내)
0.javascript기본(~3일차내)Sung-hoon Ma
 
Javascript introduction, dynamic data type, operator
Javascript introduction, dynamic data type, operatorJavascript introduction, dynamic data type, operator
Javascript introduction, dynamic data type, operatorYoung-Beom Rhee
 
프론트엔드스터디 E03 - Javascript intro.
프론트엔드스터디 E03 - Javascript intro.프론트엔드스터디 E03 - Javascript intro.
프론트엔드스터디 E03 - Javascript intro.Young-Beom Rhee
 
스위프트, 코틀린과 모던언어의 특징 (Swift, Kotlin and Modern Languages)
스위프트, 코틀린과 모던언어의 특징 (Swift, Kotlin and Modern Languages)스위프트, 코틀린과 모던언어의 특징 (Swift, Kotlin and Modern Languages)
스위프트, 코틀린과 모던언어의 특징 (Swift, Kotlin and Modern Languages)Yongha Yoo
 
7가지 동시성 모델 - 3장. 함수형 프로그래밍
7가지 동시성 모델 - 3장. 함수형 프로그래밍7가지 동시성 모델 - 3장. 함수형 프로그래밍
7가지 동시성 모델 - 3장. 함수형 프로그래밍Hyunsoo Jung
 
Startup JavaScript 3 - 조건문, 반복문, 예외처리
Startup JavaScript 3 - 조건문, 반복문, 예외처리Startup JavaScript 3 - 조건문, 반복문, 예외처리
Startup JavaScript 3 - 조건문, 반복문, 예외처리Circulus
 
Angular2 가기전 Type script소개
 Angular2 가기전 Type script소개 Angular2 가기전 Type script소개
Angular2 가기전 Type script소개Dong Jun Kwon
 
Startup JavaScript 4 - 객체
Startup JavaScript 4 - 객체Startup JavaScript 4 - 객체
Startup JavaScript 4 - 객체Circulus
 

Tendances (20)

프론트엔드스터디 E04 js function
프론트엔드스터디 E04 js function프론트엔드스터디 E04 js function
프론트엔드스터디 E04 js function
 
스파르탄스터디 E04 Javascript 객체지향, 함수형 프로그래밍
스파르탄스터디 E04 Javascript 객체지향, 함수형 프로그래밍스파르탄스터디 E04 Javascript 객체지향, 함수형 프로그래밍
스파르탄스터디 E04 Javascript 객체지향, 함수형 프로그래밍
 
Javascript 완벽 가이드 정리
Javascript 완벽 가이드 정리Javascript 완벽 가이드 정리
Javascript 완벽 가이드 정리
 
Startup JavaScript 5 - 객체(Date, RegExp, Object, Global)
Startup JavaScript 5 - 객체(Date, RegExp, Object, Global)Startup JavaScript 5 - 객체(Date, RegExp, Object, Global)
Startup JavaScript 5 - 객체(Date, RegExp, Object, Global)
 
Startup JavaScript 6 - 함수, 스코프, 클로저
Startup JavaScript 6 - 함수, 스코프, 클로저Startup JavaScript 6 - 함수, 스코프, 클로저
Startup JavaScript 6 - 함수, 스코프, 클로저
 
일단 시작하는 코틀린
일단 시작하는 코틀린일단 시작하는 코틀린
일단 시작하는 코틀린
 
Learning Node Book, Chapter 5
Learning Node Book, Chapter 5Learning Node Book, Chapter 5
Learning Node Book, Chapter 5
 
자바스크립트 함수
자바스크립트 함수자바스크립트 함수
자바스크립트 함수
 
7가지 동시성 모델 4장
7가지 동시성 모델 4장7가지 동시성 모델 4장
7가지 동시성 모델 4장
 
자바스크립트 기초문법~함수기초
자바스크립트 기초문법~함수기초자바스크립트 기초문법~함수기초
자바스크립트 기초문법~함수기초
 
스위프트 성능 이해하기
스위프트 성능 이해하기스위프트 성능 이해하기
스위프트 성능 이해하기
 
[새차원, 코틀린(Kotlin) 강좌] 5. Control Flow
[새차원, 코틀린(Kotlin) 강좌] 5. Control Flow[새차원, 코틀린(Kotlin) 강좌] 5. Control Flow
[새차원, 코틀린(Kotlin) 강좌] 5. Control Flow
 
0.javascript기본(~3일차내)
0.javascript기본(~3일차내)0.javascript기본(~3일차내)
0.javascript기본(~3일차내)
 
Javascript introduction, dynamic data type, operator
Javascript introduction, dynamic data type, operatorJavascript introduction, dynamic data type, operator
Javascript introduction, dynamic data type, operator
 
프론트엔드스터디 E03 - Javascript intro.
프론트엔드스터디 E03 - Javascript intro.프론트엔드스터디 E03 - Javascript intro.
프론트엔드스터디 E03 - Javascript intro.
 
스위프트, 코틀린과 모던언어의 특징 (Swift, Kotlin and Modern Languages)
스위프트, 코틀린과 모던언어의 특징 (Swift, Kotlin and Modern Languages)스위프트, 코틀린과 모던언어의 특징 (Swift, Kotlin and Modern Languages)
스위프트, 코틀린과 모던언어의 특징 (Swift, Kotlin and Modern Languages)
 
7가지 동시성 모델 - 3장. 함수형 프로그래밍
7가지 동시성 모델 - 3장. 함수형 프로그래밍7가지 동시성 모델 - 3장. 함수형 프로그래밍
7가지 동시성 모델 - 3장. 함수형 프로그래밍
 
Startup JavaScript 3 - 조건문, 반복문, 예외처리
Startup JavaScript 3 - 조건문, 반복문, 예외처리Startup JavaScript 3 - 조건문, 반복문, 예외처리
Startup JavaScript 3 - 조건문, 반복문, 예외처리
 
Angular2 가기전 Type script소개
 Angular2 가기전 Type script소개 Angular2 가기전 Type script소개
Angular2 가기전 Type script소개
 
Startup JavaScript 4 - 객체
Startup JavaScript 4 - 객체Startup JavaScript 4 - 객체
Startup JavaScript 4 - 객체
 

En vedette

시나브로 CSS3
시나브로 CSS3시나브로 CSS3
시나브로 CSS3승환 오
 
CSS3 천기누설
CSS3 천기누설CSS3 천기누설
CSS3 천기누설Toby Yun
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차Michael Yang
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료3일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료3일차처음부터 다시 배우는 HTML5 & CSS3 강의자료3일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료3일차Michael Yang
 
처음부터 다시 배우는 HTML5 & CSS3 1일차
처음부터 다시 배우는 HTML5 & CSS3 1일차처음부터 다시 배우는 HTML5 & CSS3 1일차
처음부터 다시 배우는 HTML5 & CSS3 1일차Michael Yang
 
나의 jQuery 실력 향상기
나의 jQuery 실력 향상기나의 jQuery 실력 향상기
나의 jQuery 실력 향상기정석 양
 
Html5 강좌파일_v_3.0
Html5 강좌파일_v_3.0Html5 강좌파일_v_3.0
Html5 강좌파일_v_3.0Youngjo Jang
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 2일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 2일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 2일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 2일차Michael Yang
 
ECMAScript 6의 새로운 것들!
ECMAScript 6의 새로운 것들!ECMAScript 6의 새로운 것들!
ECMAScript 6의 새로운 것들!WooYoung Cho
 
프론트엔드 개발자의 자바스크립트
프론트엔드 개발자의 자바스크립트 프론트엔드 개발자의 자바스크립트
프론트엔드 개발자의 자바스크립트 jeong seok yang
 
Top 10 Questions about HTML5
Top 10 Questions about HTML5Top 10 Questions about HTML5
Top 10 Questions about HTML5Jonathan Jeon
 

En vedette (13)

시나브로 CSS3
시나브로 CSS3시나브로 CSS3
시나브로 CSS3
 
CSS3 천기누설
CSS3 천기누설CSS3 천기누설
CSS3 천기누설
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료3일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료3일차처음부터 다시 배우는 HTML5 & CSS3 강의자료3일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료3일차
 
처음부터 다시 배우는 HTML5 & CSS3 1일차
처음부터 다시 배우는 HTML5 & CSS3 1일차처음부터 다시 배우는 HTML5 & CSS3 1일차
처음부터 다시 배우는 HTML5 & CSS3 1일차
 
나의 jQuery 실력 향상기
나의 jQuery 실력 향상기나의 jQuery 실력 향상기
나의 jQuery 실력 향상기
 
Html5 강좌파일_v_3.0
Html5 강좌파일_v_3.0Html5 강좌파일_v_3.0
Html5 강좌파일_v_3.0
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 2일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 2일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 2일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 2일차
 
ECMAScript 6의 새로운 것들!
ECMAScript 6의 새로운 것들!ECMAScript 6의 새로운 것들!
ECMAScript 6의 새로운 것들!
 
프론트엔드 개발자의 자바스크립트
프론트엔드 개발자의 자바스크립트 프론트엔드 개발자의 자바스크립트
프론트엔드 개발자의 자바스크립트
 
Java script ppt
Java script pptJava script ppt
Java script ppt
 
Top 10 Questions about HTML5
Top 10 Questions about HTML5Top 10 Questions about HTML5
Top 10 Questions about HTML5
 
reveal.js 3.0.0
reveal.js 3.0.0reveal.js 3.0.0
reveal.js 3.0.0
 

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

파이썬2.7 기초 공부한 것 정리
파이썬2.7 기초 공부한 것 정리파이썬2.7 기초 공부한 것 정리
파이썬2.7 기초 공부한 것 정리Booseol Shin
 
EcmaScript6(2015) Overview
EcmaScript6(2015) OverviewEcmaScript6(2015) Overview
EcmaScript6(2015) Overviewyongwoo Jeon
 
[ES6] 9. Iterator
[ES6] 9. Iterator[ES6] 9. Iterator
[ES6] 9. IteratorHan JaeYeab
 
Javascript개발자의 눈으로 python 들여다보기
Javascript개발자의 눈으로 python 들여다보기Javascript개발자의 눈으로 python 들여다보기
Javascript개발자의 눈으로 python 들여다보기지수 윤
 
읽기 좋은 코드가 좋은 코드다 Part one
읽기 좋은 코드가 좋은 코드다   Part one읽기 좋은 코드가 좋은 코드다   Part one
읽기 좋은 코드가 좋은 코드다 Part oneJi Hun Kim
 
ECMA Script 5 & 6
ECMA Script 5 & 6ECMA Script 5 & 6
ECMA Script 5 & 6sewoo lee
 
파이썬 Collections 모듈 이해하기
파이썬 Collections 모듈 이해하기파이썬 Collections 모듈 이해하기
파이썬 Collections 모듈 이해하기Yong Joon Moon
 
Javascript - Array
Javascript - ArrayJavascript - Array
Javascript - Arraywonmin lee
 
PostgreSQL로 배우는 SQL 기초
PostgreSQL로 배우는 SQL 기초PostgreSQL로 배우는 SQL 기초
PostgreSQL로 배우는 SQL 기초Jiho Lee
 
Linq to object using c#
Linq to object using c#Linq to object using c#
Linq to object using c#병걸 윤
 
스칼라와 스파크 영혼의 듀오
스칼라와 스파크 영혼의 듀오스칼라와 스파크 영혼의 듀오
스칼라와 스파크 영혼의 듀오Taeoh Kim
 
파이썬+함수이해하기 20160229
파이썬+함수이해하기 20160229파이썬+함수이해하기 20160229
파이썬+함수이해하기 20160229Yong Joon Moon
 
R 스터디 첫번째
R 스터디 첫번째R 스터디 첫번째
R 스터디 첫번째Jaeseok Park
 
나에 첫번째 자바8 람다식 지앤선
나에 첫번째 자바8 람다식   지앤선나에 첫번째 자바8 람다식   지앤선
나에 첫번째 자바8 람다식 지앤선daewon jeong
 
불어오는 변화의 바람, From c++98 to c++11, 14
불어오는 변화의 바람, From c++98 to c++11, 14 불어오는 변화의 바람, From c++98 to c++11, 14
불어오는 변화의 바람, From c++98 to c++11, 14 명신 김
 
Es2015 Simple Overview
Es2015 Simple OverviewEs2015 Simple Overview
Es2015 Simple OverviewKim Hunmin
 
Swift3 subscript inheritance initialization
Swift3 subscript inheritance initializationSwift3 subscript inheritance initialization
Swift3 subscript inheritance initializationEunjoo Im
 
Functional programming
Functional programmingFunctional programming
Functional programmingssuserdcfefa
 

Similaire à 골때리는 자바스크립트 발표자료 (20)

파이썬2.7 기초 공부한 것 정리
파이썬2.7 기초 공부한 것 정리파이썬2.7 기초 공부한 것 정리
파이썬2.7 기초 공부한 것 정리
 
EcmaScript6(2015) Overview
EcmaScript6(2015) OverviewEcmaScript6(2015) Overview
EcmaScript6(2015) Overview
 
[ES6] 9. Iterator
[ES6] 9. Iterator[ES6] 9. Iterator
[ES6] 9. Iterator
 
Javascript개발자의 눈으로 python 들여다보기
Javascript개발자의 눈으로 python 들여다보기Javascript개발자의 눈으로 python 들여다보기
Javascript개발자의 눈으로 python 들여다보기
 
함수적 사고 2장
함수적 사고 2장함수적 사고 2장
함수적 사고 2장
 
읽기 좋은 코드가 좋은 코드다 Part one
읽기 좋은 코드가 좋은 코드다   Part one읽기 좋은 코드가 좋은 코드다   Part one
읽기 좋은 코드가 좋은 코드다 Part one
 
ECMA Script 5 & 6
ECMA Script 5 & 6ECMA Script 5 & 6
ECMA Script 5 & 6
 
파이썬 Collections 모듈 이해하기
파이썬 Collections 모듈 이해하기파이썬 Collections 모듈 이해하기
파이썬 Collections 모듈 이해하기
 
Javascript - Array
Javascript - ArrayJavascript - Array
Javascript - Array
 
PostgreSQL로 배우는 SQL 기초
PostgreSQL로 배우는 SQL 기초PostgreSQL로 배우는 SQL 기초
PostgreSQL로 배우는 SQL 기초
 
Linq to object using c#
Linq to object using c#Linq to object using c#
Linq to object using c#
 
스칼라와 스파크 영혼의 듀오
스칼라와 스파크 영혼의 듀오스칼라와 스파크 영혼의 듀오
스칼라와 스파크 영혼의 듀오
 
파이썬+함수이해하기 20160229
파이썬+함수이해하기 20160229파이썬+함수이해하기 20160229
파이썬+함수이해하기 20160229
 
Javascript
JavascriptJavascript
Javascript
 
R 스터디 첫번째
R 스터디 첫번째R 스터디 첫번째
R 스터디 첫번째
 
나에 첫번째 자바8 람다식 지앤선
나에 첫번째 자바8 람다식   지앤선나에 첫번째 자바8 람다식   지앤선
나에 첫번째 자바8 람다식 지앤선
 
불어오는 변화의 바람, From c++98 to c++11, 14
불어오는 변화의 바람, From c++98 to c++11, 14 불어오는 변화의 바람, From c++98 to c++11, 14
불어오는 변화의 바람, From c++98 to c++11, 14
 
Es2015 Simple Overview
Es2015 Simple OverviewEs2015 Simple Overview
Es2015 Simple Overview
 
Swift3 subscript inheritance initialization
Swift3 subscript inheritance initializationSwift3 subscript inheritance initialization
Swift3 subscript inheritance initialization
 
Functional programming
Functional programmingFunctional programming
Functional programming
 

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

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