[Javascript] 생산성 코드 작성 방법 - 코드 줄여쓰기

 

 

---

1. if else 문

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) 선언

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. 변수 선언

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. 함수 파라미터 축약

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. 비교 연산 축약

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진수 표기 축약longhand

for (var i = 0; i < 10000; i++) {

 
shorthand

for (var i = 0; i < 1e7; i++) {
// 10진법에서 단위가 올라갈수록 뒤에 붙는 0이 많아지고, 이 0이 많이지면 가독성이 떨어진다. 
// 1e7은 1다음에 0이 7개 붙음을 말하고 즉, 1000000과 같다.

 

 

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 축약

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. 정수, 숫자 비교 

longhand

Math.floor(4.9) === 4  //true

 
shorthand

~~4.9 === 4  //true

 

 

 

 

출처

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