생산성있는 Javascript 코드 작성 | longhand, shorthand

 

 

---

개요

개발에서 longhand(긴 형식)과 shorthand(짧은 형식)는 같은 작업을 수행하지만 코드 길이나 표현 방식이 다릅니다. shorthand는 더 간결한 코드 스타일을 의미하며, 특히 CSS, JavaScript, 객체 표현 등에서 많이 사용됩니다.

 

1. 조건문 (Control Statements)

if 문

longhand

if (likeJavaScript == true)

var a;
if ( a != true ) {
// do something...
}

 
shorthand

if (likeJavaScript)

var a;
if ( !a ) {
// do something...
}

 

if else 문

longhand

var big;
if (x > 10) {
    big = true;
}
else {
    big = false;
}

 
shorthand

var big = (x > 10) ? true : false;

 

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

 

2. 데이터 처리 및 기본값 설정

변수 선언

longhand

var x;
var y;
var z = 3;

 
shorthand

var x, y, z=3;

 

null, undefined 값 체크, 기본값 설정

longhand

if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
     var variable2 = variable1;
}

 
shorthand

var variable2 = variable1  || 'default value';

 

배열 생성

longhand

var a = new Array();
a[0] = "myString1";
a[1] = "myString2";
a[2] = "myString3";

shorthand

var a = ["myString1", "myString2", "myString3"];

 

연관 배열(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'
};
// 리터럴 형식

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

 

3. 반복문 (Looping Statements)

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
}

 

foreach문 축약

longhand

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

 
shorthand

for(var i in allImgs)

 

4. 연산 및 비교

연산자 축약

longhand

x=x+1;
minusCount = minusCount - 1;
y=y*10;

shorthand

x++;
minusCount --;
y*=10;

 

비교 연산 축약

longhand

if (!(ret == undefined)) {
    return ret;
} else{
    return fum('g2g');
}

 
 shorthand

return ret || fum('g2g');

 

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과 같다.

 

정수, 숫자 비교 

longhand

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

 
shorthand

~~4.9 === 4  //true

 

 

5. 정규 표현식 (Regular Expressions) 관련

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"

 

 

6. 함수 및 코드 재사용

함수 파라미터 축약

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

 

함수 재사용

// 2개의 숫자를 더하는 add() 함수를 사용하고 있는데 3개의 숫자를 더해야하는 경우가 생긴다면?
func add(n1, n2){
	retrun n1 +n2
}
add(10, 10)

// 1) 기존 사용하는 함수를 이건 기존에 사용하는 함수들의 파라미터를 다 확인해줘야한다.
func add(n1, n2, n3){
	retrun n1 +n2 + n3
}
add(10, 10, 0)
add(10, 10, 10)

// 2) 추후 더하는 숫자의 갯수가 변경된다면 추가 함수가 필요하다.
func add2(n1, n2, n3){
	retrun n1 +n2 + n3
}
add(10, 10)
add2(10, 10, 10)

// 3) 나는 파라미터를 배열로 받으면 된다고 생각했다.
// 하지만 이런 경우, 더 복잡한 로직이 있는경우 명확성과 반복문을 통한 성능이슈가 있다.
// 그리고 가장 중요한 차이는, 비용이 더 드는 일이라는 것이다..
func add(arr){
	let sum = 0;
	if(arr.length){
    	arr.map(v => sum += (v typeof number ? v : 0);
    }
	retrun sum
}
add([10, 10])
add([10, 10, 10])

// 4)
func add(n1, n2){
	retrun n1 +n2
}
add(10, 10)
add(add(10, 10), 10)

// 1,2,3)도 같은 결과를 얻지만
// 4)처럼 사용하면 기존 코드를 그대로 유지하며 가장 빠르게 같은 결과를 만들 수 있다.

 

7. 문자열 처리

chartAt() 축약

longhand

"myString".charAt(0);

 
shorthand

"myString"[0]; // Returns 'm'