[자바스크립트] 코드 줄여쓰기(shorthand)

 

 

1. if else문

- 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"

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'); }

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();

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

출처: https://cmykrgb.tistory.com/entry/javascript-–-코드-줄여쓰기shorthand [일상속으로]