JS - 연산자

연산자 종류

연산자의 종류가 굉장히 많은데 그중 대표적인 몇개만 나열하자면
산술 / 할당 / 논리 / 비교 / 삼항조건 / 쉼표 / 그룹 / 지수 / 옵셔널체이닝 / 널병합 / 비트 / 나머지 등이 있다

• 산술(arithmetic) 연산자 : n = 1 + 5; 와 같은 이항 / 단항 ( ++,--)
• 할당(assignment) 연산자 : let {id} = user;와 같은 할당 예시는 구조분해 할당이다
• 문자열 연결 연산자 : s+'bc' 처럼 문자열에 +를 사용할경우 형변환이 필요하다면 형변환 되며 연산 위치에 따라 문자열이 합쳐진다
• 비교(comparison) 연산자 : n > 5와 같은 부등호를 이용한 연산자나 typeof / instanceof / isArray 도 이에 속한다
• 논리 비교(logical comparison) 연산자 : s ==='a'와 같은 ===,!== 등의 논리를 비교하는 연산자가 많이 쓰인다
• 주의 NaN === NaN 은 true일까? 정답은 false이다
  • NaN은 일단 Not a Number의 약자로 글로벌 오브젝트의 속성으로서 존재한다. 이 개념과 동작 자체를 Javascript에서 개발한 것은 아니다 보니 아주 정확한 이유가 궁금해서 찾아보니 부동소수점과 연관되어 있고 수학적인 관점에서 처리된다고 하니... 그냥 NaN은 자신과 같지 않다고 비교되는 유일한 값이라고 기억해두자
• 쉼표+그룹 : 쉼표와 그룹(( ))을 통해서도 연산과정을 나눌 수 있다
  q= ( p = x = 1, y = 2, z = 3)의 결과값은 어떻게 될까? `x:1,y:2,z:3,p:1,q:3)
  • 순서대로 계산된 것을 살펴보면 할당은 해당 할당의 마지막부터 살펴봐야 하는데 일단 ( )가 씌워져 있는 부분은 독립적으로 실행된다 생각해야 한다.
  • q=부분의 할당이 ( ) 괄호가 계산된 값이 들어오는 것이다
    고로 ( )괄호 안의 계산은 ,단위로 끊어서 앞에부터 확인하자면 p = x = 1부터 살펴봐야한다
  • p가 들어가기전 x=1부터 실행후 x=1을 통해 1이란 값을 얻었으니 그 1을 p에 할당한다.
  • 이후 y=2와 z=3을 할당한다
  • 그럼 ,순서대로 모두 할당했으니 아까 x=1이란 마지막 할당값이 붙은 것처럼 ( )안의 연산은 마지막 할당인 z=3에서의 3을 가져오게 된다
  • 마지막으로 q는 3이란 값을 가지게 되는 것
• 제곱 : **을 사용해도 되고 Math.pow()를 사용해도 된다
  • 2**3 === Math.pow(2,3)
• ?,?? : 널병합(Nullish) 연산자가 존재하는데 해당 연산자는 ECMA 2020 부터 사용할 수 있게 되었는데 ?? 앞의 식이 undefined와 null일 경우 falsy로 처리되게 해준다
  • var arr이란 변수에 arr.length는 당연히 undefined일 것이다 그럼 만약 arr이 어떤 값인지 모르고 배열이 올때 length를 부를 수 있도록 하려면 어떻게 해야할까?
  • arr?.length를 사용하면 된다. ?연산자를 통해 arr안에 length라는 프로퍼티가 있는지 확인하고 ? 연산 특성을 확인하여 undefined나 null이면 무시하게 된다
  • 해당과 똑같이 ??또한 동일하게 사용하면 된다. arr = arr ?? []처럼 넣게 되면 arr이 truety한 값이라면 그대로 arr이 들어오겠지만 undefined나 null이라면 뒤에 들어온 []이 할당될 것이다

산술 연산자

산술 연산자엔 +, -, *, /, %, 부호, ++, -- 등이 있는데

console.log(1 + true) // 2
console.log(1 + null) // 1
console.log(1 + undefined) // NaN

JS의 형변환으로 인해 nall과 false 같은 falsy한 값들은 0으로 형변환 되고 true와 같은 truety한 값들은 1로 형변환 된다.
다만 undefined는 NaN을 반환하게 되니 조심하자
이는 문자를 숫자로 형변환 하려 할때도 NaN을 반환하게 된다+"s"

++와 --같은 증감 연산자를 사용할 때도 조심해야 하는 부분이 있다

let x = 1;
console.log(++x) // 2
console.log(x++) // 2
console.log(x) // 3

연산자가 붙은 위치에 따라 먼저 실행되고 연산되는지 연산되고 실행되는지 각각 다르기 때문에 이런 되도록이면
x += 1이나 x = x+1과 같이 직관적으로 바로 알 수 있게끔 사용하는 것이 가독성에도 훨씬 좋다

그리고 가능한 Math 함수를 사용하는 것이 좋고, 괄호를 이용하여 연산식끼리 구분이 될 수 있도록 해주는 것이 훨씬 클린코드스럽다

조건(3항)/쉼표/ void 연산자

조건(3항) 연산자는 조건 ? (true) : (false)로 조건을 ?앞에 입력하고 :을 기준으로 각각 true 일때의 값 false일때의 값을 넣는다면 좋다
값식문을 잘 따져서 식이 들어가야한다면 if문을 활용하는 것이 좋고 각각 값이 들어가야 한다면 3항을 사용하는 것이 좀 더 깔끔해 보이는 것 같다.

const x = 5;
console.log(x > 1 ? 'Plural' : 'Singular'); // Plural

void연산자는 평가/실행 후 undefined를 반환하게 해주는 연산자이다
예전엔 html에서 a태그의 href속성에 자주 사용했다고 한다

let a = 1,b = 2
let d = void(c = a + b);

console.log(a,b,c,d) // 1, 2, 3, undefined

이렇 듯 아까 사용했떤 ,연산을 통해 let 선언문 하나에 a와 b 변수선언을 한꺼번에 하였고 void연산자를 이용해 c를 넣었다
void연산자는 ()안을 평가 실행한 후 undefined를 반환한다고 했으니 ( ) 괄호 안의 c = a+b는 평가 실행이 되었기에 c라는 변수가 생겨난 것이고 반환은 undefined가 된 것이니 d라는 변수엔 undfined가 할당된것이다

논리 비교 연산자

truthy 와 falsy한 값들이 있는데 실제 if문이나 삼항연산자등 논리 연산자를 사용할 때 사용하면 좀 더 깔끔하게 할 수 있다
falsy한 값들을 알아놓고 나머지는 웬만하면 truthy한 값에 들어온다고 생각하면 좋다.
어떠한 값이 있다는 것 자체가 truthy하게 보기 때문이다

• falsy : undefined, null, false, 0, NaN, ""...

다만 조심할 건 truty 값을 볼때

• truety : let a = [], b = " ", c = 'false', d = '0' ...

과 같은 falsy처럼 보이지만 truty한 값인 것들이 있으니 조심하자

비트 연산자

비트 연산자는 간단하게 개념만 배우고 가면 좋을 것 같다
AND(&), OR(|), XOR(^), NOT(~)

let a = 0b1010, b = 0b1100;
console.log(a & b, a | b, a ^ b, ~b) // '1000', '1110', '110', '-1101'

조심해야할 것

우리가 현재 일상에서 사용하는 숫자는 10진수들로 이루어져 있지만 컴퓨터는 모든 언어를 2진수로 이해한다.
그렇기에 항상 정확하게만 움직이는 것은 아니기에 몇가지를 알아두어야 한다

• 아까 다루었던 NaN === NaN과 Number.isNaN(Infinity)는 false다
• 정수 비교 : Number.MIN_SAGE_INTEGER ~ Number.MAX_SAFE_INTEGER
• Math.round()는 언제나 정수를 준다. // 정수 확인은 Number.isInterger
• .toFixed(자릿수)는 해당 자릿수 반올림
• Math.trunc(f) === Math.floor(f) round는 반올림이기에 음수에선 결과값이 다르다. trunc는 아예 소수점 이하를 절삭하는 것
• Number.EPSILON을 활용할 수 있다 // 1에 더했을 때 1과 구분되는 가장 작은 값이다
• 0.1 + 0.2 === 0.3 <-- false다. 부동소수점 개념을 이해하고 보면 10진수의 소수점들을 2진수로 표현하려고 하면 무한 소수가 생기는 부분이 있는데 무한하다 보니 어느정도 절삭해서 보여줄 뿐 실제론 그만큼의 차이가 존재한다