Javascript 칭찬받는 코딩 방법 / 코드 줄이는 방법

Javascript 칭찬받는 코딩 방법 / 코드 줄이는 방법

 

현업에서 Javascript로 개발할 때 칭찬받는 방법과 코드 줄이는 방법을 같이 알아보겠습니다.

'당연한건데?' 라고 느끼실 수도 있고 '오 이거 괜찮네?' 라고 느끼실 수도 있습니다.

 

■ var 사용 X  /  let, const 사용 O

아직도 변수를 선언할 때 var를 사용하시는 분이 있을지 모르겠습니다.

var는 아주 편하고 유연하게 변수를 선언, 사용할 수 있지만, 원치 않는 결과를 불러올 수도 있습니다.

let, const만을 사용하여 변수를 선언합시다.

 

Link : https://aljjabaegi.tistory.com/352

javascript var, let, const 의 차이, 차이점

 

■ 삼항연산자의 활용

 

삼항연산자는 if 조건문을 간결하게 만들어 줍니다.

너무 중복해서 사용하면 가독성을 해칠 수 있으니 적절히 활용합니다.

 

const test = function(align){
    let result = "";
    if(typeof align === "undefiend"){
         result = "center"
    }else{
    	result = align;
    }
    return align;
}

 

const test = function(align){
    return (typeof align === "undefined") ? "center" : align;
}

 

 

■ 논리연산자와 Nullish Coalescing의 활용

삼항 연산자와 같이 간결하게 코드를 작성할 수 있는

논리연산자와 Nullish Coalescing을 적절히 사용하도록 합니다.

 

Link : https://aljjabaegi.tistory.com/622

Javascript 논리연산자 (||) 와 Nullish Coalescing (??) 차이

 

 

■ optional-chaning 을 활용

Object 의 property 가 존재하는지 체크할 때는 optional-chaining을 활용합니다.

 

const obj = {
	a: {
		b : {
			c : "c"
		}
	}
}

const ocTest = function(param){
	/*Optional-Chaining*/
	if(param.a?.b?.c){
		console.log("a,b,c 다 있음");
	}else{
		console.log("a,b,c 중 없는게 있음");
	}
	
	/*if문 사용*/
	if(typeof param.a !== "undefined" && typeof param.a.b !== "undefined"
		&& typeof param.a.b.c !== "undefined"){
		console.log("a,b,c 다 있음");
	}else{
		console.log("a,b,c 중 없는게 있음");
	}
}
ocTest(obj);

 

optional chaining 내에서 동적으로 property 값을 설정할 수 있습니다.

 

const obj = {
    a: 1,
    b: 2,
    c: 3
};
["a", "b", "c", "d"].forEach(function(val){
    if(obj?.[val]){
        console.log(val + "있음");
    }else{
        console.log(val + "없음");
    }
});

 

 

Link : https://haenny.tistory.com/241

[Javascript] 알아두면 좋은 ES11 최신 문법 : Optional Chaining, Nullish Coalescing

 

 

■ 문자열의 병합은 Template Literals 를 활용

문자열을 병합할 때는 + 연산자를 사용하거나 concat 메소드를 사용사는 것보다

Template Literals를 사용하여 보다 직관적인 코드를 작성합니다.

 

Link :  https://aljjabaegi.tistory.com/581

javascript Template literals (Template strings) 문자열 병합

 

 

■ 배열의 메소드, 고차함수를 적절히 활용

무조건 반복문을 사용하지 말고 Array 객체에서 제공하는 기본 메소드와 고차함수를 적절히 활용하여 작성합니다.

 

Link : https://aljjabaegi.tistory.com/317

javascript 배열 함수 정리, 고차함수 정리 자바스크립트 배열함수 자바스크립트 고차함수

 

 

■ 최적 반복문 활용

반복문을 사용해야 한다면 최적 반복문을 활용합니다.

 

Link : https://aljjabaegi.tistory.com/584

javascript 최적 반복문 패턴 for, while, for..in, for...of, foreach

 

 

이 외에도 

최신 ECMAScript나 자료구조, 디자인 패턴, 알고리즘에 관심을 갖고 알아본다면 

더 간결하고 칭찬받을 수 있는 코드를 작성하실 수 있을 거라고 생각합니다.

모두 화이팅합시다!