자바스크립트 연산자 활용하기

자바스크립트 연산자 어떤것들이 있을까?

자바스크립트에는 여러가지 연산자가 있다. 기본적으로 많이 사용하는 + 연산자가 있는데 개발자가 아닌 보통 사람이 생각했을 때 + 연산자의 활용 범위는 적지만 간단한 + 연산자도 코디에 다양하게 활용할 수 있다.

간단하게 활용 가능한 연산자들을 정리하고 실제 코딩에서 어떻게 활용했는지 정리하고자 한다.

Addition ( + ) 연산자

console.log(2 + 2);
// expected result: 4

console.log(2 + true);
// expected result: 3

첫번째 콘솔 로그는 다들 알겠지만 두번째 콘솔의 결과값은 의야할 수 있다. boolean 타입의 결과값이 들어오면 + 연산자와 결합하면 + 1이 되는 연산이 된다. 코딩에서 실제 코딩에서 사용하게 될지는 모르겠지만 mdn을 통해서 처음 알게된 사실이다.

코딩 강의를 하는 유튜브분이 자바스크립트 기초를 공부할 때 MDN을 활용하는걸 추천하는 이유가 이런것 때문이지 않을까 싶다.

MDN
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators

다른사람의 코드를 활용할 경우 모르는 연산자들을 활용하는 경우도 많았는데 MDN에 있는 Operators 페이지에서 검색하면 정확하게 연사자의 명칭과 해당 연산자의 예시와 코드를 볼 수 있다. 실전에서 쓰려면 꼼꼼히 내용을 파악하는 것이 중요하다고 생각이 든다.

Optional chaining (?.) 연산자

처음에 이 연산자를 봤을때는 이게 되는건가 하는 생각이 들 정도로 생소하게 느껴졌다. 현재는 null, undifined를 체크하는데 아주 유용하게 사용하고 있다. Array를 활용한 코딩은 코딩 테스트를 겪고 보니 어느정도 익숙해졌는데 state 값의 변화나 이런 것들을 함께 적용할 때 어려움이 많았다.

다음 예시는 check Box의 check 데이터를 저장하는데 사용했던 코드이다

{

  props.selections.map((selection: string, index: number) => {
    return (
      <FormControlLabel key={index}
          control={<Checkbox checked={!!survey[props.id]?.includes(selection)}
          onChange={(e) => handleSelect(selection, props.id)}/>}
          label={selection}/>
    )
  })

}

CheckBox component에 checked 된 값을 확인해야하는데 위와 같이 survey Object의 id값에 selection 값이 true, false 인지를 알아야하는데 처음 값을 정의 해주지 않아서 오류가 발생한다. 대충 값이 비어있다는 뜻이다.

처음에는 해당 id 값에 대해 일일이 false 값을 할당해서 default값을 만들어줘야하나라는 생각을 했었는데 뭔가 비효율적이라는 생각이 들었다.

서칭결과 Optional Chaining 연산자로 쉽게 체크를 해줄 수 있었다.

MDN에 있는 Optional Chaining 설명 부분이다 결국에는 null 이나 undefined를 체크해서 결과값을 리턴해주는건데 TypeScript에서 변경값이 들어오기전에 rendering 될 때 나오는 오류를 해결할 수 있다.

이와 비슷한 예시

const D = null;
const { a, b, c } = D || {};

console.log(a, b, c);
// result : undifined, undifined, undifined

참조 : https://stackoverflow.com/questions/45210111/destructuring-nullable-objects

학원 동기 slack에서 state 값이 초기에 null값을 넣어왔을 때 다른 컴포넌트에서 변동된 state값을 useEffect 의 dependency로 사용하지 못하는 문제점이 발생했는데 Object 안에 있는 값을 위 모습처럼 Destructuring 해서 Typescript 오류를 해결할 수 있었다.

결론

Typescript를 사용하는 주니어개발자들에게 빈번하게 발생하는 오류인 것 같다. 문제 해결은 역시 구글 검색이 최고다라는걸 다시 한번 느낄수 있었고 MDN 사이트 등을 활용하여 Javascript의 기본을 잘 다져놔야겠다는 생각이 들었다.