JS 깔끔한 코드 작성을 위한 몇가지 문법(nullish-coalescing, object-destructuring, spread-syntax-object)

nullish-coalescing

// 에구디러 코드 💢
function 메세지(text) {
let message = text;
if (text == null || text == undefined) {
	message = '암 것도 없다리';
    }

이런 경우

// 깔끔깔끔 코드 ✅
function 메세지(text) {
const message = text ?? '암 것도 없다리';

이렇게 이쁘게 코드정리 가능
위의 경우 디폴트 파라미터와 약간은 다르다.
디폴트 파라미터는 nudefined의 경우에만 값이 할당되며
Nullish coalescing의 경우는 null과 undefined 둘 다에 대해 값이 할당 된다.
즉 Nullish coalescing의 경우 아래와 같이 작동한다

왼쪽코드 ?? 오른쪽코드
//왼쪽코드가 null 혹은 undefined 일경우 오른쪽 코드가 실행

위와 같이 값을 직접적으로 할당할 때도 많이 사용되지만 실행함 함수를 할당할 때도 많이 사용한다

logical OR operator

이미 자주 쓰긴하지만 nullish coalescing과 차이를 설명하기 위해 작성

왼쪽코드 ?? 오른쪽코드
//왼쪽코드가 falsy(null, undefined , 0, -0, "", '', NaN) 일경우 오른쪽 코드가 실행

object-destructuring

const person = {
  name: '춘식',
  age: 3,
  frined: '라이언'
};

위 같은 객체가 있을 경우

// 에구디러 코드 💢
function displayPerson(person){
	displayAvatar(person.name);
    displayName(person.name);
    displayProfile(person.name, person.age);
}

이렇게 사용하는 경우가 많은데 person.name이나 age를 지역변수로 만들어 코드를 줄이거나 하지만 boject-destructuring을 이용하면 좀 더 깔끔하게 만들 수 있다.

// 깔끔깔끔 코드 ✅
function displayPerson(person){
  const { name, age } = person;
  displayAvatar(name);
  displayName(name);
  displayProfile(name, age);
}

위와 같이 변수 선언을 할경우 name과 age에 person이 자동으로 할당되어 name = person.name이랑 같게 된다.

spread-syntax-object

어레이와 오브젝트에서 자주 사용하는 ... 딥카피 할 때도 주로쓰고 React덕에 이미 엄청 익숙한 개념이다.
사실 이미 엄청 많이 쓰고 있다. 쉽게 말하면 복사해서 괄호를 푼다는 개념으로 생각하면 쉽다.