20221029 TIL ???????
자바스크립트에서는 ?를 잘 쓰면 매우 좋다.
? 사용법이 매우 다양하기 때문에 한 번 정리를 해두면 좋을 것 같아서 정리를 해보았다.
먼저, 삼항 연산자에서 ?를 사용한다.
조건 ? 조건이 참일 때 실행할 코드 : 조건이 거짓일 때 실행할 코드;
와 같이 실행한다.
그 다음은 nullish ??이다.
보통 default value를 잡아주고 싶을 때 logical OR연산자 ||를 많이 사용한다.
그런데 logical OR연산자는 연산자 왼쪽 값이 falsy할 때 오른쪽 값을 쓰게 되는데,
왼쪽 값이 falsy이지만 의미가 있는 값일 수 있다.
예를 들어 할인율 변수에 0이 들어갈 수 있는데, 할인율에 기본 할인율을 정해주기 위해
할인율 = 할인율 || 0.1;
처럼 코드를 짠다면 할인을 안 하고 싶어서 0을 넣었는데 할인율이 0.1이 되는 현상이 나타날 수 있다.
이 때 nullish를 사용하면 된다.
nullish는 ??연산자 왼쪽 값이 undefined나 null일 때 연산자 오른쪽 값으로 평가된다.
따라서 어떤 변수가 undefined나 null일 때만 default value를 정해주고 싶다면 nullish를 사용하면 된다.
할인율 = 할인율 ?? 0.1;
을 하면 할인율이 0 값을 가질 수 있게 되고, 할인율을 정해주지 않았을 때만 기본값 0.1이 된다.
그 다음은 옵셔널 체이닝이다.
어떤 값이 null이나 undefined가 될 수 있을 때 에러 없이 값의 프로퍼티에 접근하거나 값을 실행할 때 사용한다.
값?.~~~
와 같이 생겼는데,
값이 null이나 undefined가 아닐 때 그 뒷 부분을 실행하게 되고, null이나 undefined면 undefined를 반환한다.
예를 들어 food에 항상 값이 들어있다고 확신할 수 없는데 아래와 같이 food의 id에 접근하려고 하면 에러가 발생한다.
이를 옵셔널 체이닝 없이 해결하려면 if문을 쓰거나 &&로 food가 존재하는지를 확인해야 한다.
하지만 옵셔널 체이닝을 이용하면 food가 null이나 undefined더라도 food의 프로퍼티에 접근하려고 할 때 에러 없이 undefined를 반환한다.
객체 안에 객체 안에 객체가 있고, 그 각각의 객체들 중에 없을 수도 있는 객체가 있다면
객체.(없을 수도 있는 객체)?.프로퍼티 처럼 없을 수 있는 객체에 옵셔널 체이닝 연산자 ?. 를 붙여주면 프로퍼티에 쉽게 접근할 수 있게 된다.
옵셔널 체이닝 연산자가 붙은 값이 null이나 undefined면 undefined가 반환되고, 제대로 값이 들어 있다면 원하는 값이 반환된다.
옵셔널 체이닝은 배열과 함수에도 사용할 수 있다.
따라서 어떤 객체의 프로퍼티가 배열 형태이고, 그 프로퍼티가 없을 수도 있을 때 그 프로퍼티의 첫 번째 값이 필요하다면
객체.프로퍼티?.[0] 과 같이 값을 구해올 수 있고,
객체의 메소드 또한 없을 수 있지만 있다면 실행하고 싶은 경우
객체.메소드?.();
와 같이 실행할 수 있다.
이쯤되면 모든 값에 ?. 를 붙이면 항상 에러를 방지할 수 있어 너무 좋지 않나 생각할 수도 있지만,
옵셔널 체이닝이 붙은 값은 그 값이 없을 수 있고, 그래도 괜찮다는 의미를 함축하고 있어서
옵셔널 체이닝을 값이 무조건 존재해야 하는 부분에도 넣으면 코드를 읽는 사람을 혼란스럽게 할 수 있기 때문에
존재하지 않을 수 있는 부분에 한정해서 붙여주어야 한다.
예전에 옵셔널 체이닝을 붙이기만 하면 바로 에러가 해결되길래 거의 모든 곳에 옵셔널 체이닝을 붙이려고 한 적이 있었다.
그 코드를 리뷰해주신 분께서 옵셔널 체이닝을 붙였을 때
그 코드를 읽을 사람이 그 코드를 어떻게 독해하게 될 지 고려를 해보라는 좋은 조언을 해주셨었다.
그 때 이후로 에러를 해결하는 것뿐만 아니라 내가 짠 코드가 어떤 의미를 드러내는지 고민을 하면서 코드를 짜게 됐던 것 같다.
자바스크립트의 연산자들을 잘 사용하면 길게 짜야될 코드를 매우 간결하게 작성할 수 있다.
이 연산자들을 아무렇게나 남발해서 사용하지 말고,
그 연산자가 함축하는 의미를 항상 고려해서 코드를 짜보자!