By aPOST in 자바스크립트 — 2023년 12월 23일

간결한 자바스크립트 코드를 만드는 9가지 최신 방법

1. 함수 파라미터에 기본값을 표시하기

함수를 정의할 때 파라메터의 기본값을 명시하는 습관을 들입니다.

파라미터 기본값은 파라미터가 넘어왔는지를 확인하는 조건 체크를 하지 않아도 되기 때문에 더 간결하고 짧은 코드를 작성하는데 도움이 됩니다.

function myFunc1(param1){
    console.log(`param1=${param1}`);
}

function myFunc2(param1 = '기본값'){
    console.log(`param1=${param1}`);
}

myFunc1(); // undefined
myFunc2(); // '기본값'

2. 다중 비교 조건을 한번에 비교하기

여러 개의 비교 조건을 만족하는 경우가 최소 1개 이상 있는지를 확인하는 다중 비교를 할 때, 배열의 some() 메서드를 활용하면 단 1줄로 다중 비교 비교를 구현할 수 있습니다.

배열의 메서드인 some() 은 파라미터로 넘기는 조건 비교 함수를 만족하는 배열 요소가 최소 1개 이상 있는지를 확인해서 불리언 값을 반환하는 메서드입니다.

파라미터로 넘기는 조건식을 어떻게 작성하느냐에 따라 다양한 조건을 비교할 수 있습니다.

특히 조건을 충족하는 경우가 최소 1개 이상 있는지를 확인하는 다중 조건식을 간결하게 구현할 수 있습니다.

다음과 같은 문자열 다중 비교식은

function checkFunc1(str){
    if(str.includes("조건1") || str.includes("조건2")){
        return true
    }else{
        return false
    }
}

배열과 forEach(){} 루프문을 사용해 다음과 같이 구현하면 함수 코드 변경 없이 배열 요소 변경만으로 여러 가지 조건을 비교하도록 개선할 수 있습니다.

const conditions = ["조건1","조건2"];
function checkFunc2(str){
    let ret = false;
    conditions.forEach(function(cond){
        ret = str.includes(cond) ? true : ret;
    });
    return ret;
}

그리고, 배열의 some() 메서드를 사용하면, 단 한 줄로 위의 다중 비교 함수를 구현할 수 있습니다.

const conditions = ["조건1","조건2"];
function checkFunc3(str){
    return conditions.some(condition=>str.includes(condition));
}

3. 이항연산자로 if~else 비교문을 대신하기

이항 연산자는 "비교조건식 ? 참 결괏값 : 거짓 결괏값;"으로 표현되는 단순화된 조건 비교식 표현을 말합니다.

물음표(?) 왼쪽에는 참, 또는 거짓을 반환하는 조건식이, 물음표 오른쪽에는 콜론으로 구분한 2개의 결괏값이 오게 됩니다. 콜론 왼쪽에는 조건식이 참일 때의 결괏값이, 콜론 오른쪽에는 거짓일 때의 결괏값이 위치합니다.

결과 값은 같은 데이터 타입이어야 합니다.

많은 경우의 if~else 구문을 이항 연산자로 대신할 수 있습니다.

이항 연산자는 코드양을 줄여줄 뿐만 아니라 가독성을 더 높여주는 효과가 있기 때문에 전체 코드를 더 읽기 쉽고 간결하며 보기 좋게 만들어줍니다.

let val = 9;

// if~else 로 비교
if (val < 10) {
    console.log("True");
} else {
    console.log("False");
}

val < 10 ? console.log("True") : console.log("False"); // 이항 연산자로 if~else 단순화
console.log(val < 10 ? "True" : "False"); // console.log 중복 제거

4. 펼침 연산자로 배열 병합하기

마침표 3개를 붙여서 표시하는 펼침 연산자는 배열의 요소를 펼쳐서 각각의 요소로 분리해주는 기능을 하는 자바스크립트의 최신 연산자입니다.

2개의 배열을 하나로 병합할 때 원시적인 방법으로 루프 문을 돌면서 배열 요소를 한 개씩 추가할 필요 없이 펼침 연산자로 간편하게 배열을 하나로 합칠 수 있습니다.

const arr_nums1 = [1, 2, 3];
const arr_nums2 = [4, 5, 6];

const arr_marged1 = [...arr_nums1, 7, 8, 9];
console.log(arr_marged1);

const arr_marged2 = [...arr_nums1, ...arr_nums2];
console.log(arr_marged2);

5. 펼침 연산자로 배열의 중복 요소를 제거하기

펼침 연산자는 배열 뿐만 아니라 여러 가지 타입의 목록형 객체를 각각의 요소로 펼쳐주는 기능을 합니다.

배열의 중복 요소들을 제거하는 가장 단순한 방법은 루프 문을 돌면서 각 요소와 같은 요소가 있는지를 찾아서 중복되는 배열 요소를 제거하는 것입니다.

자바스크립트에서는 중복 요소를 허용하지 않는 집합 객체와 펼침 연산자를 사용해 단 한 줄만으로 중복 요소가 없는 배열을 만들 수 있습니다.

const arr_nums = [1, 2, 3, 2, 3, 3, 1, 4, 5];
const arr_unique_nums = [...new Set(arr_nums)];

console.log(arr_unique_nums);

6. 단항 연산자 "!"로 다양한 값을 불리언 값으로 만들기

단항 연산자 "!"는 true->false, false->true 로 변환을 하는 불리언 변경 연산자입니다.

다른 언어에서는 not으로도 사용합니다.

자바스크립트에서 0이 아닌 숫자는 true이고, 나머지는 모두 false가 됩니다.

자바스크립트의 다양한 기본 데이터 타입의 값은 단항 연산자를 사용해 불리언 값으로 변경할 수 있습니다.

console.log(!0); // true
console.log(!1); // false

console.log(!"string"); // false
console.log(!!"string"); // true

console.log(!!undefined); // false
console.log(!!null); // false

7. 임시 변수 없이 두 변수의 값을 서로 바꾸기

많은 언어에서 두 변수 값을 서로 바꾸려면 중간 임시 변수를 사용해서 바꾸는 다음과 같은 방식을 사용합니다.

let x = 1;
let y = 2;

let tmp = x;
x = y;
y = tmp;
console.log(x,y);

자바스크립트의 변수 값 일괄 할당 기능을 이용하면 중간 변수 없이 한번에 두 변수 값을 치환할 수 있습니다.

let x = 1;
let y = 2;

[x, y] = [y, x];
console.log(x, y);

8. 숫자를 문자열로 바꾸기

숫자 앞, 또는 뒤에 빈 문자열("")을 "+" 연산자로 더해주면 숫자가 문자열로 자동 캐스팅됩니다.

const number = 3 + "";

console.log(typeof number);
console.log(number);

9. 옵셔널 체이닝 연산자("?.")로 에러 없이 객체의 값에 접근하기

새롭게 자바스크립트에 추가된 최신의 고급 연산자입니다.

아직 한글로 정확한 이름이 정착되지는 않았으며, "옵셔널 체이닝 연산자", 또는 "선택적 연결 연산자"라고 사용합니다.

객체가 정의되지 않았거나 널인 상태일 때 객체의 속성이나 값에 접근을 하면 undefined 에러가 발생합니다.

에러가 발생하면 자바스크립트 코드 실행이 멈추기 때문에, 에러가 발생하지 않도록 객체나 객체의 속성이 있는지 먼저 조건식으로 확인한 후 객체의 값에 접근해야 합니다.

일반적으로 객체의 속성과 값에 접근할 때 다음과 같이 코드를 작성합니다. 콘솔에는 1이 표시됩니다.

만약 if문 조건을 충족하지 않으면 아무것도 출력되지 않습니다.

const data = {obj: {value: 1}}
if(data && data.obj){
    console.log(data.obj.value);
}

만약 객체나 속성의 유무를 체크하지 않고 존재하지 않는 객체나 속성에 접근하면 다음과 같은 에러가 발생합니다.

옵셔널 체이닝 연산자("?.")는 조건식으로 객체를 미리 확인하지 않아도 에러가 발생 없이 객체에 접근할 수 있는 선택적인 조건 처리를 자동으로 해줍니다.

거의 모든 데이터가 객체를 기반으로 처리되는 자바스크립트의 특성을 가장 잘 활용할 수 있는 연산자이며, 객체의 존재 여부를 if 문으로 별도 체크해야 하는 번거로움을 획기적으로 줄여줍니다.

앞의 코드는 옵셔널 체인 연산자로 다음과 같이 간결하게 표현할 수 있습니다.

const data = {obj: {value: 1}};
const val = data?.obj?.value;
console.log(val);

만약 상수 "val"이 널이면 옵셔널 체인 연산자는 undefined를 반환합니다.

const data = null;
const val = data?.obj?.value;
console.log(val);