if문을 이용하여 조건에 따라 변수에 값을 넣을 때는 3항연산자로 줄여쓸 수 있다.
longhand
var big; if (x > 10) { big = true; } else { big = false; }
shorthand
var big = (x > 10) ? true : false;
2. 변수에 파라미터로 넘어온 값 할당 시 null, undefined 값 체크하여 기본값 설정
longhand
if (variable1 !== null || variable1 !== undefined || variable1 !== '') { var variable2 = variable1; }
shorthand
var variable2 = variable1 || 'default value';
3. 배열 생성
longhand
var a = new Array(); a[0] = "myString1"; a[1] = "myString2"; a[2] = "myString3";
shorthand
var a = ["myString1", "myString2", "myString3"];
4. 연관 배열(associative array) 선언
기존 방식대로 먼저 배열 객체를 생성한 후, key값에 데이터를 하나하나 넣는 방식으로 생성할 수도 있지만 리터럴 형식으로 한 번에 정의할 수 있다.
longhand
var skillSet = new Array(); skillSet['Document language'] = 'HTML5'; skillSet['Styling language'] = 'CSS3'; skillSet['Javascript library'] = 'jQuery'; skillSet['Other'] = 'Usability and accessibility';
shorthand
var skillSet = { 'Document language' : 'HTML5', 'Styling language' : 'CSS3', 'Javascript library' : 'jQuery', 'Other' : 'Usability and accessibility' };
5. 변수 선언
여러 개의 변수를 선언할 때 한 변수당 각각 var 키워드를 붙여서 선언할 수 있지만 한 줄로 축약할 수도 있다.
longhand
var x; var y; var z = 3;
shorthand
var x, y, z=3;
6. 연산자 축약
자바스크립트에서도 다른 언어들처럼 연산을 축약하여 쓸 수 있다.
longhand
x=x+1; minusCount = minusCount - 1; y=y*10;
shorthand
x++; minusCount --; y*=10;
7. RegExp 객체 축약
longhand
var re = new RegExp("\d+(.)+\d+","igm"), result = re.exec("padding 01234 text text 56789 padding"); console.log(result); //"01234 text text 56789"
shorthand
var result = /d+(.)+d+/igm.exec("padding 01234 text text 56789 padding"); console.log(result); //"01234 text text 56789"
8. if문
longhand
if (likeJavaScript == true) var a; if ( a != true ) { // do something... }
shorthand
if (likeJavaScript) var a; if ( !a ) { // do something... }
9. 함수 파라미터 축약
arguments 배열은 모든 함수(function)가 가지는 로컬 변수다. 이 배열에는 함수에 넘어온 모든 파라미터 값이 할당되어 있다. (함수 파라미터를 명시하는 것이 좋아보이나, 글쓴이는 재귀함수 등에서 사용할 때 깔끔하게 표현할 수 있다고 말한다.)
longhand
function myFunction( myString, myNumber, myObject, myArray, myBoolean ) { // do something... } myFunction( "String", 1, [], {}, true );
shorthand
function myFunction() { console.log( arguments.length ); // Returns 5 for ( i = 0; i < arguments.length; i++ ) { console.log( typeof arguments[i] ); // Returns string, number, object, object, boolean } } myFunction( "String", 1, [], {}, true );
10. foreach문 축약
longhand
for (var i = 0; i < allImgs.length; i++)
shorthand
for(var i in allImgs)
11. chartAt() 축약
longhand
"myString".charAt(0);
shorthand
"myString"[0]; // Returns 'm'
12. 비교 연산 축약
2번에서 봤던 undefined, null 값 체크와 비슷한 맥락.
longhand
if (!(ret == undefined)) { return ret; } else{ return fum('g2g'); }
shorthand
return ret || fum('g2g');
13. switch case문
longhand
switch (something) { case 1: doX(); break; case 2: doY(); break; case 3: doN(); break; // And so on... }
shorthand
var cases = { 1: doX, 2: doY, 3: doN }; if (cases[something]) { cases[something](); }
14. 10진수 표기 축약
10진법에서 단위가 올라갈수록 뒤에 붙는 0이 많아지고, 이 0이 많이지면 가독성이 떨어진다. 1e7은 1다음에 0이 7개 붙음을 말하고 즉, 1000000과 같다.
longhand
for (var i = 0; i < 10000; i++) {
shorthand
for (var i = 0; i < 1e7; i++) {
15. loop문
longhand
var i=0; while (i<9) { //do stuff i++; //say }
shorthand
var i=9; while(i--) { //goes until i=0 } or var i=-9; while(i++) { //goes until i=0 }
16. Lookup table 축약
프러퍼티의 값에 따라 다르게 행동하도록 할 때, 대게는 if else문 혹은 switch case문을 사용하게 된다. 이 때 프러퍼티 값 : 수행할 행동(함수)을 매칭해둔 lookup table을 만들어 두면 간략히 표현할 수 있다.
longhand
if (type === 'aligator') { aligatorBehavior(); } else if (type === 'parrot') { parrotBehavior(); } else if (type === 'dolphin') { dolphinBehavior(); } else if (type === 'bulldog') { bulldogBehavior(); } else { throw new Error('Invalid animal ' + type); }
shorthand
var types = { aligator: aligatorBehavior, parrot: parrotBehavior, dolphin: dolphinBehavior, bulldog: bulldogBehavior }; var func = types[type]; if (!func) throw new Error('Invalid animal ' + type); func();
17. double bitwise
longhand
Math.floor(4.9) === 4 //true
shorthand
~~4.9 === 4 //true
sitepoint article “19+ JavaScript Shorthand Coding Techniques” 번역 및 정리 (원문 보기)
출처 : http://plaboratory.org/archives/3415