[JS] 자바스크립트에서 여러가지 유용한 기능들

 

자바스크립트 입문자 또는 문법에 그리 관심이 존재하지 않는 분들 위해서 해당 글에서는 알면 자바스크립트에서 유용하게 사용될 수 있는 문법들에 대해 소개합니다.

 

옵셔널 체이닝 (Optional Chaining)

객체나 배열에서 특정 속성이나 요소에 접근할 때, 해당 속성이나 요소가 존재하지 않아도 별도의 예외를 발생시키지 않고 undefined를 반환하는 기능을 제공하는 연산자입니다. 참고로 해당 연산자는 다트에서도 존재하며 별도의 null-safe 로직을 생략할 수 있는 특성때문에 많이 애용되는 연산자 중 하나입니다.

 

해당 연산자의 예시 코드를 보도록 하겠습니다.

const child = parent?.child;

child 속성이 nullable이라는 가정하에 속성 값을 참조하는 경우 . 대신 ?. 연산자를 사용하여 속성 값을 참조합니다. 다음은 기존 문법을 사용하지 않은 경우, 사용한 경우를 비교해보도록 하겠습니다.

// Optional Chaining 연산자를 사용하지 않은 경우 1
let displayName;
if (author != null) {
    displayName = user.displayName;
} else {
    displayName = "None";
}

// Optional Chaining 연산자를 사용하지 않은 경우 2
let displayName = "None";
if (author != null) {
    displayName = user.displayName;
}

// Optional Chaining 연산자를 사용하지 않은 경우 3
const displayName = author != null ? author.displayName : "None";

// Optional Chaining 연산자를 사용한 경우
const displayName = author?.displayName ?? "None";

Optional Chaining 연산자를 사용하는 것이 기존의 null 체크 문법들을 사용하는 것에 비해 매우 간결하고 가독성이 매우 뛰어나다는 것을 알 수 있습니다.

 

참고로 ?? 연산자의 경우 널리쉬 병합 연산자(Nullish coalescing operator)입니다 좌측 값이 null 이거나 undefined인 경우 우측 값을 반환합니다, 참고로 Nullish라는 단어는 null, undefined를 통틀어서 말하는 것입니다.

 

해당 연산자와 비슷한 동작을 수행할 수 있는 || 연산자도 있지만 약간의 작은 차이점이 존재합니다. null, undefined 말고 빈 문자열과 false와 같이 부정을 의미하는 값까지도 포함합니다.

 

해당 연산자들의 예시 코드도 간략하게 보도록 하겠습니다.

const nullable = '';
const value1 = nullable ?? "니코니코니~";
const value2 = nullable || "니코니코니~";

console.log(value1); // ''
console.log(value2); // "니코니코니~"

 

문자열 템플릿 (Template Literals)

따옴표(") 대신 백틱(`)으로 문자열을 정의하는 경우 간단하게 특정 위치에 변수를 삽입할 수 있습니다. 이는 기존에 두 개의 문자열을 더 하는 것보다 더 가독성이 뛰어나고 코드를 더 읽기 쉽게 만들 수 있습니다.

 

해당 문법을 사용한 예시 코드를 보도록 하겠습니다.

// 문자열 템플릿을 사용한 경우.
const message = `${user.displayName} 오니짱~`

// 문자열 템플릿을 사용하지 않은 경우
const message = user.displayName + " 오니짱~"

문자열의 특정 자리에 어떠한 데이터가 들어갈지 특별한 문법을 통해서 문자열 내용에 이를 정의하는 것을 흔히 플레이스 홀더(Place Holder) 방식이라고 부르는데, 해당 경우도 비슷한 경우라고 볼 수 있습니다.

const message = `\`{user.displayName}\`님이 접속하였습니다.`

참고로 백틱으로 문자들을 랩핑한다면 문자열 내용에서 백틱을 사용할 수 없는 문제가 발생합니다 이런 경우 해당 코드와 같이 기존 문자열에서 해결할 때와 동일하게 백슬러쉬(\)를 이용하면 됩니다.

 

구조 분해 할당 (Destructuring assignment)

객체나 배열에서 특정 속성 값을 상수나 변수에 재할당하려는 경우에서 비교적 간단하고 깔끔한 코드를 작성할 수 있게 도와주는 기능입니다.

 

해당 문법을 사용한 예시 코드를 보도록 하겠습니다.

// 배열의 경우
const values = [ 1, 2, 3, 4, 5 ];
const [ one, two ] = values;

// 객체의 경우
const user = {
   id: number = 1,
   name: string = "hello world",
}

const { id, name } = user;

기존 원시적 방식에 비해서 비교적 짧게 코드를 작성할 수 있다는 것을 알 수 있습니다, 하지만 개인적으로 경우에 따라서 가독성을 해칠 수 있다는 생각이 가끔 들지만 간결하게 코드를 작성해야 될 경우 매우 유용한 기능이라는 것은 변함이 없으므로 되도록이면 상황에 따라서 많이 응용하시는 것이 좋을 것 같습니다.

 

참고로 리액트의 useState 기능을 사용할 때는 거의 반드시 사용되는 기능 중 하나입니다.

const { id : identifier, name : displayName } = user;

선택 사항이지만 특정 속성 값을 별도의 식별자 이름으로 정의해야 하는 경우 해당 코드와 같이 작성하여 문제를 해결할 수 있습니다. (우측 식별자가 이름을 재정의하는 쪽입니다.)

 

전개 연산자 (Spread Operator)

배열이나 객체를 복사하거나 병합하는 데 주로 사용되는 연산자입니다. 3개의 점 (...) 으로 표현되는데, 해당 연산자의 경우 코드를 더 간결하고 효율적으로 만들 수 있도록 하는 기능을 제공합니다.

 

해당 문법을 사용한 예시 코드를 보도록 하겠습니다.

const numbers1 = [1, 2, 3];
const numbers2 = [4, 5, 6];

const newArray = [...numbers1, 7, 8, ...numbers2];
console.log(newArray); // [1, 2, 3, 7, 8, 4, 5, 6]

해당 코드와 같이 여러 개의 배열을 하나의 배열로 병합시킬 수 있습니다, 이를 좀 더 쉽게 이해하기 위해서 추가적으로 더 설명하자면 묶음으로 되어있던 아이템들을 모두 펼친다라고 생각하면 됩니다. (즉 "전개" 연산자라는 이름에 걸맞는 기능을 수행합니다.)

const userA = { name: "Dev Ttangkong", age: 18 };
const userB = { description: "Amm...", language: "ko-kr" };

const newUser = { ...userA, ...userB, favorite: "코딩" };

// { name: "Dev Ttangkong", age: 18, description: "Amm...", language: "ko-kr", favorite: "코딩" }
console.log(newUser);

해당 코드도 이전과 마찬가지로 여러 개의 객체를 하나의 객체로 병합시킬 수 있습니다. 참고로 동일한 키가 존재하면 당연하게도 뒤의 객체의 속성 값이 앞의 객체의 속성 값을 덮어씁니다.

// in https://github.com/MTtankkeo/web_touch_ripple/edit/main/src/gestures/gesture_arena.ts

constructor(
    public option?: GestureArenaOption
) {
    this.option = {
        ...{ isKeepAliveLastPointerUp: true }, // default
        ...this.option
    };
}

해당 코드는 실제로 해당 연산자를 응용한 두 객체간의 병합의 적절한 예시라고 볼 수 있습니다.

 

모든 상황에서 앞서 설명드린 기능들이 항상 유용하지는 않겠지만 알고 있다고 해서 나쁜 것은 없다고 생각합니다, 해당 글을 읽어주셔서 감사드립니다.

 

Happy coding in the another world!