IE 감지 스크립트 (IE9포함)

기존에는 ‘v’==’\v’ 썼었다.
하지만 IE가 9로 업그레이드 되면서 스크립트 엔진이 윈도우 스크립팅 엔진으로부터 완전히 분리되어 자체적인 엔진으로 나가기 시작했다. 덕분에 속도도 확실히 빨라졌다.
대신 더이상 ‘v’==’\v’ 논리식은 통하지 않게 되었다.
만약 IE8까지 감지하겠다 하면 기존 걸 쓰고, 아예 IE인지 감지하려면 이렇게 하면 된다.

(!+"\v1") === true

이 논리식은 IE 5.5 버전 이상에서 잘 인식하는 고마운 스크립트이므로 잘 알아두시길.

composite / 2011년 7월 26일 / 미분류 / 0 Comments

composite / 2011년 4월 17일 / 미분류 / 0 Comments

composite / 2011년 4월 9일 / 미분류 / 1 Comment

골때리는 자바스크립트의 세계 외전

  1. “string” instanceof String

    결과 : false

  2. [] == false;

    결과 : true

  3. “” == false;

    결과 : true

  4. null == false;

    결과 : false

  5. typeof null

    결과 : object

    뭬야? null도 object의 자손인게냐?

  6. null === Object

    결과 : false

    아버지를 아버지라 부르지 못하고,

    어머니를 어머니라 부르지 못하는 null.

  7. parseInt(’06’); //결과는 6

        parseInt(’08’); // 결과는 0?

    08를 8진수로 착각하는게 아니라 원래 약속이 그렇죠. 08은 곧 8진수니 8은 곶아가 됩니다. 당연한 결과죠.

  8. Number.MIN_VALUE > 0;

    결과 : false

    .. 무슨 십장생이 시베리아벌판에서 귤이나까는 결과가 나오는거지…

    MIN_VALUE 속성은 숫자 중 표현할 수 있는 가장 작은 값을 나타내는 상수입니다.

    근데.. 0보다 크다고? 앙?

  9. typeof NaN

    결과 : number

    숫자가 아닌녀석을 나타내는 상수인데 숫자가 아니면 숫자를 어떻게 찾겠는가?

  10. alert(111111111111111111111);

    결과 : 경고창에 111111111111111110000 이 나옴. 읭?

  11. (function(){ if(false) var window; return window }()) === window

    결과 : false

  12. (“foo” + + “bar”) === “fooNaN”

    결과 : true

    일단 먼저 + 사이에 아무것도 안들어가도 에러안나는게 신기.

  13. NaN === NaN

    결과 : false

    ………….할말이 없습니다.

  14. (x=[].reverse)() === window

    결과 : true

    …ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ


  15. NaN === ‘number’ // true

    Infinity === 1/0 // true

    0.1 + 0.2 === 0.3 // false

    1, 2 은 이해가 가는데 세번째는 뭥미?

    출처 : http://wtfjs.com/ 에서 자바스크립트의 개떡같은 결과가 커뮤니티를 통해 기재됩니다.

    제가 발견한 추가사항

  16. Number.MAX_VALUE instanceof Number

    결과 : false

    왜그럴까요?

composite / 2010년 12월 13일 / 미분류 / 0 Comments

골때리는 자바스크립트의 세계 번외편

자.. 5탄에 너무 어려워 골때리다는 분이 많아서 오늘은 그냥 번외를 준비했습니다.

오늘은 좀 재밌는 걸 준비했는데요.

자.. 먼저 이걸 보시죠.

mypage.html?page=write&where=isit

음.. 그냥 URL이죠. 그리고 ? 뒤에 질의문이 들어가있죠. 쿼리스트링이라 하지만 우리말로 하면 질의문이잖아요..ㅋㅋㅋㅋ

뭐.. 이걸 서버사이드에선 어떻게 처리할까요?

먼저 PHP요~

$_GET[‘page’];

ASP(.net)요~

VB:

Request.QueryString(“page”)

C#,JScript,J#…:

Request.QueryString[“page”]

JSP요~

…안해봐서.. 댓글로 참조부탁요.

그외에도 CF,Mac,Perl,CGI등등등.. 다채롭죠.

그렇다고 질의문을 내맘대로 꾸미고 싶다. 질의문 전체를 참조하려면 어떻게 해야합니까?

PHP요~

$_SERVER[‘QUERY_STRING’];

ASP(.net)요~

VB:

Request.ServerVariables(“QUERY_STRING”)

C#,JScript,J#…:

Request.ServerVariables[“QUERY_STRING”]

JSP요~

…………………몰라요.

이상 서버단이었습니다.

근데 자바스크립트 강좌인데 왜 난데없이 질의문 가지고 난리입니까?

오늘은 자바스크립트로 질의문 다루는 걸 하겠다는겁니다.

헐..자스도 질의문 다루는 기능이 있습니까?????????????????????????

아뇨. 없어요..자체적으론 없습니다..ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

하지만 URL을 가공해서 처리는 할 수 있습니다.

location 객체. 음.. URL을 얻어올때 주로 쓰는 객체이죠. 네..

이 location에 href 속성으로 전체 URL을 얻어올 수 있죠? 파일명부터 질의문까지.

근데.. 이걸 가공하기엔 좀 귀찮고.. 하지만 하늘은 우릴 버리지 않으셧습니다.

앵커를 참조하라고 location 객체에 search 속성을 내려주셨습니다.

이 속성에는 # 뒤에 들어간 앵커. 우리말로하면 책갈피를 보여주지만 ?을 붙인 그 뒤에 질의문도 보여주는 친절함을 선보이고 있죠.

결국 location.search는 server variables의 query_string인 셈이죠.

이제 이걸 다룰 줄 알면 오늘 골때리는 강좌는 여기서 끝입니다…

자.. 먼저, search 속성의 ?부터 제거해보기로 합시다.

var qs=location.search.replace(‘?’,”);

자스의 replace는 기본적으로 정규식의 global 속성을 주지 않는 이상 첫번째 단어만 검색하면 그걸 대체하고 끝내버리는 속성이 있습니다. 하지만 서버단의 replace는 그 반대죠.

어쨌든 substring을 쓰던 replace를 쓰던 ?을 제거하면 일단 질의문을 가공할 준비는 끝입니다. 어떻게 가공할건지는 여러분의 자유에 맡기겠지만, 저는 split을 통해 그냥 쉽게 처리할 생각입니다.

먼저 &가 들어간 단어를 기준점으로 문자를 나눕니다.

qs=qs.split(‘&’);

이렇게 되면 질의문의 갯수만큼 나눠지겠죠. 단순히 &만 나누기때문에 &남용하면 물론 & 갯수만큼
나눠지겠지만 그건 큰 문제가 없습니다. 키=값 쌍만 있는넘만 등록하게 하면 되니까요. 그런다음에 = 기준으로 키=값을 분리해서
왼쪽은 키, 오른쪽은 값 이런식으로 하면 되죠. 그다지 어렵지는 않죠?

split 써도 되고. 정규식씨를 섭외해도 되고… 여러분이 원하는 방식으로 가공해서 처리하면 됩니다. 어때요. 쉽죠?

이렇게해서 querystring 값을 받아오는 함수는 다음과 같습니다.

function getQueryString(key){

  var qs=location.search.replace(‘?’,”);

  if(!key) return qs;

  qs=qs.split(‘&’);

  var qsr=”;

  for(i=0;i<qs.length;i++){

    if(!!qs[i]&&qs[i].indexOf(‘=’)>-1){

      var qv=qs[i].split(‘=’);

      if(qv[0]==key) qsr+=qv[1]+’|’;

    }

  }

  qsr=qsr.replace(/|$/,”);

  return qsr.indexOf(‘|’)>-1?qsr.split(‘|’):qsr;

}

만약 하나만 나오면 하나나온 값 문자열을, 복수면 배열로 리턴하게 친절하게 꾸몄습니다.

저 잘했죠?

만약 location과 같이 기억해두고싶다면 Location.queryString을 만들고 내용을 저걸로 집어넣어도 무관합니다.

만약 RewriteMod와 같이 쓰고 싶다면 자스는 ReWrite와 무관하게 URL을 수집하기 때문에 그에 맞게 꾸미면 되겠습니다.

오늘은 그냥 골때리다기보기엔 그냥 그렇다 하겠지만 자스로도 질의문을 받아 처리할 수 있다는 사실에 오늘 재밌는 감동을 얻었군요.

번외편은 여기까지구요. 다음엔 약속대로 골때려서 돌아가시게 해드리겠습니다.

각오하고 그럼 즐코딩하셈.

아참, 덧붙여서 검색창에 js querystring 쳐보셈. 즐비하게 나오는 팁입니다..

composite / 2010년 12월 13일 / 미분류 / 0 Comments

골때리는 자바스크립트의 세계 완결

실무에서 .NET과 자바스크립트의 조합으로 아주 뻘짓을 하고 있습니다.

닷넷한다면서 왜 별명이 JSPSCHOOL이냐면 ASPSCHOOL 보고 그냥 따라한것 뿐입니다.ㅋ

닷넷한다면서 태요에서 놀지 왜 여기서 노냐고 물으신다면. 지금 이 사이트를 방문하시덩가.

http://www.php-compiler.net/

대망도 아닌 대망의 골때리는 자바스크립트가 오늘로써 마지막 탄이 됐습니다.

오늘 그래서 아주 스펙터클하게 막을 내릴까 합니다. 아주 스펙터클하게 허무한 팁이죠.ㅋ

자바스크립트에서 많이들 다루는 부분은 어느 언어나 마찬가지겠지만 바로 타입이죠.

그러면서 암시적 변환할 때도 있고 명시적 변환할때도 있고 뭐.. 있죠.

오늘은 실무에서 알면 좋은 형변환 팁을 알려드리고자 합니다.

내용의 일부는 여기서도 소개된 팁이기도 합니다. 되새기는 느낌도 되겠죠?

먼저 문자열부터 다뤄보도록 하겠습니다.

일단 문자열은 뭐 많이들 쓰죠.어느 타입이나 문자열로 얼마든지 형변환 가능하죠.

그렇다고 해서 bool.replace(‘fa’,’tu’) 이렇게 하면 당연히 메서드 없다고 오류 납니다.

문자열은 암시적 변환은 불가능하니 당연히 명시적으로 형변환을 해야겠죠.

일단 자바스크립트에서 문자열로 형변환하는 내장 메서드는 toString() 입니다.

네. 문자열 클래스에도 toString()이 있습니다. 그래서…

‘string’.toString().toString().toString().toString().toString().toString().toString() …

이렇게 하면 변함없이 ‘string’이 출력되죠.

자바스크립트에서는 + 연산자에 앞 또는 뒤에 문자열이 들어가면 게임오버입니다. 바로 문자열로 변환해버리죠. 그래서 + 연산자를 숫자와 혼용하려 쓰려면 괄호를 씌워줘야 합니다.

이건 당연한 규칙이니 다들 주의하고 있겠죠. 그래서 이렇게 형변환하면 되겠습니다.

var a=false;

var b=a+”;

이렇게 하면 a는 어쩔수없이 toString() 메서드를 작동시켜 해당 타입에 맞는 문자열 값을 보내줍니다.

var a;

var b=a+”;

이렇게 하면 어떻게 될까요? 따로 무슨 말이 필요할까요. 그냥 undefined 나오는거죠. 거기서 undefined 란 이 문자열을 이제 문자열로 취급하여 컨트롤을 시작합니다. 그래서!

var a;

var b=a+”;

alert(b==undefined);//false

즉, 아무리 null이던 정의 안하던 문자열로 변환하는 순간 신세계(?)가 펼친다는 점 유의하시고 형변환을 하시기 바랍니다.

참, 그리고 가장 원시적인 객체 object 객체에는 toString 메서드가 있습니다. 그래서 어떤 타입이나 클래스던
모두 문자열로 표현하는 toString 메서드가 있죠. 익명 객체(JSON) 같은거? 일단 toString()의 기본 본문은
[object]를 출력하는게 그 목적입니다. 하지만 재정의를 하면 원하는 문자열로 출력할 수 있습니다. 내장객체는 대부분 재정의를
해놨죠. Date 객체 생성 후 toString 하면 날짜가 나오는 식으로요. 물론 직접 정의하거나 만든 객체도 재정의
가능합니다. 그냥 toString 멤버를 붙이고 함수로 만든 다음에 원하는 문자열 값으로 반환하면 됩니다. 별거 아니죠?

부울값

부울값은 true와 false 둘뿐입니다. 참과 거짓을 따지는 원시적인 타입이죠.

자바스크립트에서는 다른 타입을 부울로 따지려면 어떻게 해야 하는지 먼저 알아볼까요?

String : 빈 문자열이나 null은 false, 값있으면 true

Number : null이나 0이면 false, 그 외 숫자는 true, NaN이면 false, 하지만 무한상수 Infinity는 true.

그 외 객체 : 객체 본문이거나 객체 인스턴스가 생성되면 true. null이거나 선언 안되면 false.

뭐.. 그닥 흔히 쓰고 중요한 약속인거죠. 이걸 암시적으로 형변환을 해도 상관은 없습니다.

이런식으로요.

var a=’b’;

if(a){alert(a);}else{alert(‘뭥미’);}

네. 맞습니다. 기본적으로 그렇게 되있긴 하죠.

하지만 이건 약속에 의한 조건식일 뿐, 그대로 다른 곳에 갔다 쓰기엔 좀 그렇죠.

자바스크립트에서의 암시적 변환은 “잠시뿐” 이란 성격입니다. if문 같은 곳에는 위와 같은 약속을 정의해서 참과 거짓을 따지고 그 후로는 다시 자신의 타입으로 작동을 하기 때문이죠.

그렇다면 참과 거짓의 여부를 재대로 저장할 수 없나요? 당연하죠.

그래서 요리왕 비룡에서 요리를 맛볼때의 느낌을 살려서 명시적으로 형변환을 하면 됩니다.

var a=’b’;

if(!!a){alert(a);}else{alert(‘뭥미’);}

이렇게 하면 완전한 부울값으로 조건식을 체크합니다. 그리고 부울 변수에도 당연히 써먹을 수 있고, == 같은 논리
연산자에서 부울값으로 작용합니다. 그래서 피연산자가 어떤 타입이던 일단 잠시동안 부울값으로 암시적 변환 후 논리를 계산하게
되는거죠.

숫자

변수로 태어나서 재대로된 형을 만나보지 못하고 활동하다 지는게 바로 자바스크립트 변수입니다. 문자열로 갔다가 숫자로 갔다가 배열로 갔다가 왔다갔다 할수 있으니까요.

뭐.. 그런 등의 지나친 유연성이 자바스크립트의 매력이기도 하죠.

문자열 안에 있는 숫자를 변환하려면 parseInt나 parseFloat을 씁니다. 일단 문자열이 숫자로 시작하면 해석을
시작해 숫자로 변환해주죠. 중간에 문자가 들어가면 거기까지 해석합니다. 만약 문자가 첫글자부터 있다? 그럼 없는줄 알고 NaN이
나옵니다. 문자열 없으면 당연히 해석 못하죠.

그래서 ID 체크에 영문자가 먼저 들어갔는지 여부를 체크하는 조낸 간단한 식이 여기있습니다.

if(parseInt(value)!=NaN){

    alert(‘첫번째 문자는 반드시 영어로 해 주삼.’);

}

숫자는 여러가지 연산자를 쓸 수가 있습니다. 기본적인 사칙연산부터 증감 연산자도요.ㅋ

그 중에서 + 연산자는 문자열에도 써먹기 때문에 문자열이 중간에 들어가면 문자열이 우선적으로 먹혀들면서 피연산자가 모두 문자열로 변환하죠. 그렇게 되면 연산은 개뿔이 되는 거죠.

하지만 + 외의 연산자는 숫자에만 있습니다. 그래서 –/ 이 세개의 연산자가 들어가면 문자열이 아닌 숫자가 우선시
되는겁니다. 그래서 문자열이 들어가면 그 문자열을 숫자로 해석하는 시도를 합니다. 숫자가 아니면? 당연히 NaN이 나옵니다. 만약
문자가 숫자 연산에 중간에 들어갔다? 연산 다 집어치우고 NaN이 나옵니다. 숫자는 암시적 형변환은 없습니다. 명시적으로
해줘야죠. 이렇게요.

‘123’-0 //123

‘456’
1 //456

‘789’/0 //Infinity

쉽죠? parseInt 언제 다씁니까?

그리고 숫자는 양수와 음수가 있죠. 피연산자가 없는 + – 연산자는 곧 이넘은 숫자니 숫자로 양수와 음수로 표현해달라
입니다. + 연산자의 경우 피연산자가 문자열이면 문자열부터 합쳐버리지만, 피연산자가 없으면 얘는 그때부터 숫자인생을 펼칠 수
있습니다.

그래서 이렇게 명시적 형변환을 해도 되는거죠.

+’123′ //123

-‘456’ //-456

그리고 부울값. 아까도 말했듯이 0이면 false, 그 외 숫자는 true인거 아시죠?

이걸 역이용해서 숫자로 표현할 수 있습니다. 명시적 형변환을 이렇게 합니다.

+true //1

+false //0

-true //-1

-!false //-1(==-true)

이렇게 허무해서 골때리는 팁을 마무리로 골때리는 자바스크립트의 세계 이것으로 마치도록 하겠습니다.

1탄부터 나오고 머리 지끈거리면 번외편 나오다가 며칠 꿇다가 이렇게 10탄까지 여기 사이트에 게시를 하고 나니까 속이 후련한건지 아닌건지.

지금까지 골때리는 자바스크립트를 봐주셔서 감사합니다. 많이 골때리셨나요? 아니라구요? 그러면 저한테 오시면 제가 골을 때려 드립니다.

너무나도 획기(?)적인 스크립트 언어인 javascript. 이녀석이 Ajax(AJAX로 쓰면 바보취급받습니다.
그럼나도여태까지 바보였음ㅋ) 기법이 소개된 이후 이 녀석이 겨우 부가적인 언어에서 어플리케이션을 만드는 하나의 언어로 순식간에
격이 올라간 언어도..ㅋㅋ 그래서 응용 프로그램에서도 가끔 스크립팅 언어로 쓰기도 하며(그렇다고 ActionScript는
아닙니다. 자바 기반이죠.) JSON이 XML보다 간단하고 가독성이 쉬운 하나의 데이터 체계를 만들어서 웹과 응용의 벽을 깨고 참
위대한 스크립트 언어로 급부상한 javascript는 언제 끝나냐구요? 웹이 사라지지 않는 이상 이녀석도 사라지지 않을겁니다.
그렇구말구요.

이글쓰느라 제가 골때립니다.ㅋ

composite / 2010년 12월 13일 / 미분류 / 0 Comments

골때리는 자바스크립트의 세계 9탄

오랜만이군요. 자. 다시 골때리는 자바스크립트의 세계가 돌아왔습니다.

오랜만에 돌아온 만큼 오늘은 조금 골이 살짝 때리는 팁을 드리도록 하겠습니다.

HTML5가 성행하기 시작하면서 새로운 태그와 새로운 속성이 우후죽순 나오고 있습니다. 그런 만큼 크로스 브라우저에 대한 노력은…

굳이 안해도 될것같긴 하겠지만ㅋ

배열에 push란 함수가 있는지 없는지 확인해보기 위해서는 몇가지 방법이 있겠죠.

!![‘my’,’name’,’is’,’array’].push

!!Array.prototype.push

‘push’ in [‘me’,’too’]

‘push’ in Array.prototype

1번꺼는 만들어진 배열에 push란 메서드가 있나 확인해보는 거고

2번꺼는 배열 동적 메서드에 push가 있는지 확인해보는 거고,

3번꺼는 만들어진 배열에 push란 메서드가 있나 확인해보는 거고

4번꺼는 배열 동적 메서드에 push가 있는지 확인해보는 거죠.

어때요. 참 쉽죠?

다들 표정이 왜그래요? 자바스크립트로 배열만드는게 쉼표하나빠져서 배열 다뒤지는사람처럼?

‘push’ in [‘me’,’too’] 이건 뭥미?

in 연산자가 무엇일까요?

in 키워드는 해당 객체에 키 또는 하위 요소가 있는지 알아내주는 녀석입니다.

in 키워드는 주로 이럴때 쓰죠.

for(var x in object) …

자바스크립트를 시작할때쯤 반복문 배울때 한번씩은 배워봤을겁니다.

여기서 주로 JSON 키를 얻거나 특정 객체의 속성을 검색하는데 주로 쓰였죠.

네 맞습니다. 반복문 외에도 쓸거리는 있죠.

근데 왜 쓰는 방법이 ‘string’ in object 인데 속성이름을 문자열로 할까요?

반복문을 쓰다보면 받아오는 변수는 키를 문자열로 받죠? 그거와 똑같은 효과입니다.

그럼 어떨때 쓰는 게 좋을까요?

일단 !![‘array’].push 보다는 ‘push’ in [‘array’] 이게 거 가독성이 있어보이죠.

거기다가 반환되는값은 bool값이라 true나 false기 때문에 속성 찾는데 있어서 안전하죠.

즉, 속성 검색하다 쓸데없는 현상으로 오류날걱정은 전혀 안해도 된다는 겁니다.

이상입니다. 오늘은 경험자들에게 골때려서 되새기고, 초보에게는 골때려서 또다른 기능을 얻어가는 골때리는 자바스립트의 세계.

다음에는 더욱더 골때려서 머리 깨지는데 더욱 더 도움이 될 수 있는 컨텐츠로 찾아뵙겠습니다.

composite / 2010년 12월 13일 / 미분류 / 1 Comment

골때리는 자바스크립트의 세계 8탄

뭐. 8탄이라. 점점 골때려져 가겠는데 이게 웬 8탄이냐..

이번엔 어려워서 골때릴 것 같다구요?

뭐.. 아무렴 어때요.ㅋㅋ

제가 6탄에서 스크립트 난독화에 대해 설명을 한 적이 있었습니다.

그기서 난독화 테크닉에 괄호한테 십쇼키라고 욕했죠.

ㅋㅋ 근데 가끔씩 유용합니다. 왜그럴까요?

그전에 있어서 괄호가 어디어디 쓰이는지부터 보도록 하죠.

var s=0;

for(i=1;i<=100;i++){

  s+=i;

}

alert(s);

뭐. 일단 쉽게 1부터 100까지 더하는 반복문입니다.

그렇다면 이걸 일반적인 다른 방법이 있다면,

var s=0,i=1;

while(i<=100)

  s+=i++;

alert(s);

그럼 함수는..

function(a,b){

  return a+b;

}

그리고 또는 1탄에서 언급한 기술..

(function(a){alert(a);})(‘안녕’);

아니면

alert(({a:’b’,c:’d’}).a);

괄호는 우리 코딩이나 프로그래밍 생활에 정말 유용하게 쓰이는 녀석입니다.

자 그렇다면, 6탄에서 본적 있죠?

var a=(b=’이런’,b+’젠장’);

alert(a);

이 스크립트를 실행하면 이런젠장이란 글씨가 뜹니다.

a는 함수인가요? 아닌뎁쇼.

그럼 뭡니까? 몰라요. 그렇다는데요?

저보다 자스천재님이 가르쳐주실지도…ㅋ

어쨌든, 난독화에 쓰이기도 하고, 일회성도 있기 때문에 잠시 써먹는 식으로도 그만이죠.

예를 들어,

while(Math.round(Math.random())){

  a=1;

  window.status+=a;

}

이 a는 어자피 while 문 안에서만 쓸 거 아닙니까? 그럼 그냥 이렇게 하세요.

while(a=1,Math.round(Math.random())){

  window.status+=a;

}

어째보면 좀 의미가 있군요. 여기서 지역변수 a는 1로 정의했다고 보이기도 하고,

그리고 조건문은 뒤에 썼죠. 실제로 while 문이 인식할 건 마지막 인자니까요.

6탄에서도 말했지만 (1,2,…,n) 이런 괄호 연산자 실행시 결과는 무조건

마지막에 쓴 n이 나옵니다.

그래서 이걸 활용한 별 희한한 식이 나오기도 하죠.

v.push((c=arguments[i],l=c.length>4?2:1,parseInt((h=c.substr(1+j*l,l),h+(l>1?”:h)), 16)));

이걸 제가 직접 작성했다고 자랑하긴 좀 뭐하죠.

이걸 풀어보면 어떻게 될까요? 풀어봅시다.

c = arguments[i];

l = c.length > 4 ? 2 : 1;

h = c.substr(1 + j * l, l);

h = h + (l > 1 ? ” : h);

v.push(parseInt(h,16));

이렇게 나오는군요.

오늘 골때리는 자바스크립트는 여기까집니다.

괄호 연산자로 잠시동안 쓸 지역변수를 정의하거나, 아니면 잠시 해야 할 연산을 한 다음에, 마지막에 진짜 연산식을 넣는 가방 역할을 하는 이 괄호 연산자.

그다지 쓸데는 없습니다. 왜냐하면 이건 코드 축소하거나 난독화에 쓰이거든요.

거기다가 이건 고급 테크닉입니다. 이거 작성하는데 에러 잡기 정말 힘들겁니다.

먼저 코드를 어떻게 진행해 나갈지부터 확실히 잡힌 다음에 리팩토링하는 게 좋겠죠.

composite / 2010년 12월 13일 / 미분류 / 0 Comments

골때리는 자바스크립트의 세계 7탄

안녕하십니까? 먼저 누구누구의 결혼을 축하드립니다. 낄낄.

자, 오늘 알아보는 골때리는 녀석은 바로… 이번에도 프로토타입입니다.

내장 객체들. Date, String, Function, Number…등등

이들은 객체 자체도, 그리고 그 안에 프로토타입도 모두 “원시 객체”죠.

저놈과, 그리고 저 프로토타입을 텍스트로 뜯으면 이렇게 나오죠.

function(){

    [native code]

}

이거 뭔 개소리야?

어쨌든, 이녀석들이 어떻게 되있는지는 알 바는 아니지만,

하지만 이 원시객체도 복사해서 쓸 수 있는 기적을 우리에게 선사해 줬습니다.

먼저, 함수를 만들때부터 보도록 하겠습니다.

함수를 만들다 보면 여러개의 인자를 받아서 처리해야 하는 경우가 생기겠죠.

뭐 예를들어 add(1,2,3,4,5,…,100); 이런 함수가 있다고 칩시다.

1부터 100까지 인자로 작성하는 병맛은 없겠지만, 가정입니다.ㅋㅋ

그러면 이렇게들 작성하겠죠.

var a=0;

for(var i=0;i<arguments.length;i++){

  a+=arguments[i];

}

return a;

네. 정석입니다. 뭐 희한하게 코드를 작성해도 되지만, 정석은 정석입니다.

하지만 이런 경우로 작성하다 보면 아마 대부분 이렇게들 생각할 겁니다.

“아하, arguments 지역변수는 배열이었구나…”

이렇게 하면서 arguments instanceof Array 해봤더니 false.

굳이 그거 안해도 arguments.concat(new Array(101,102)); 해봤더니 에러.

정작 length 속성은 있는데.. 이게 다… 뭐야 이거.

배열인지 꼽사리객체인지 이거 영.. 이렇게 실망하셨던 분들 많으실 겁니다.

하지만 요즘 그런걸로 머리아파할 필요 없잖아요.

우리 마음속에 라이브러리가 있잖아요~

라이브러리로 한줄 코드하는 시대에 사는게 우리가 행복한겁니다~

YMCA~

prototype 에는 Object.extend 함수로,

jQuery에는 $.extend 함수를 통해 객체를 확장합시다.

Object.extend(arguments,Array.prototype);

이렇게 하면 Array의 동적 멤버들을 arguments로 옮겨지게 됩니다.

이렇게 하면 arguments는 배열의 역할을… 수행할 수 있을까?

아래에 제가 콜백함수로 댓글을 단 거 보셨습니까?

여기 그 증명이 있습니다.

function callback(a, b) {

    alert(a + b);

}

function caller(func) {

    this.called = ‘you’;

    if (func.apply === Function.prototype.apply) {

        arguments.shift = Array.prototype.shift;

        arguments.shift().apply(this, arguments);

    }

}

caller(callback, 1, 2);

어자피 shift 함수만 쓸거니까 이 경우는 shift 멤버에 배열 shift 동적 함수를 넣었습니다.

예. 이건 분명히 원시 객체죠. 제가 아까 말했지만 원시객체는 복사 됩니다.

이미 많은 분들이 알고 있겠죠? 많이들 원시객체들 맘대로 조종 가능하다는거.

그래봤자 해당 페이지 또는 그 자바스크립트 파일 내에 한정된다는 거지만.

배열 shift 함수는 배열의 첫 자리 객체를 빼서 밀고 그 첫자리 객체를 반환하는 함수입니다.

만약 shift 함수의 리턴값을 못받았다면 그때부터는 배열 첫자리에 있던 객체는 영영 안녕~ 이렇게 되는거죠.

어쨌든, 이 객체에 shift 함수를 실행하니까.. 되네요?

이거 뭐.. 너 배열이었어?

결국 arguments 변수는 배열이긴 합니다. 배열 역할은 하지만…

배열아닌 배열… 헐… 뭐지…

자, 결론적으로 말하자면 원시 객체를 활용해서 부족한 객체를 2% 채울 수 있다는

이 엄청나지도 않은 별거 아닌 사실이 골때리기 때문에 이렇게 팁으로 올렸습니다.

다음 골때리는 자스는 어떻게 해면 골때릴까 연구하는 쪽으로 해보도록 하겠습니다.

composite / 2010년 12월 13일 / 미분류 / 0 Comments