전에는 무슨 얘긴지 이해도 안되고 어떻게 사용해할지도 몰랐다. 이제 조금 알게 되었으니, 다시 한번 도전해본다. 자바스크립트와 친해지기. 과거에 지나치듯 보게 되고 이해되지 않았던 내용들 그리고 애매했던 내용을 정리한다.
👨🏻💻 기본 연산자와 수학
-
할당 연산자 체이닝
let a, b, c; c = 2 + 2; b = c; a = c; alert( a ); // 4 alert( b ); // 4 alert( c ); // 4
-
복합 할당 연산자
let n = 2; n += 5; // n은 7이 됩니다(n = n + 5와 동일). n *= 2; // n은 14가 됩니다(n = n * 2와 동일). alert( n ); // 14
-
비트 연산자
// 비트 연산자는 암호를 다뤄야 할 때 유용하다. 비트 AND ( & ) 비트 OR ( | ) 비트 XOR ( ^ ) 비트 NOT ( ~ ) 왼쪽 시프트(LEFT SHIFT) ( << ) 오른쪽 시프트(RIGHT SHIFT) ( >> ) 부호 없는 오른쪽 시프트(ZERO-FILL RIGHT SHIFT) ( >>> )
-
쉼표 연산자
-
// 쉼표 연산자는 여러 표현식을 코드 한 줄에서 평가할 수 있게 해준다. // 표현식 각각이 모두 평가되지만 마지막 표현식의 평가 결과만 반환된다. let a = (1 + 2, 3 + 4); alert( a ); // 7 (3 + 4의 결과) // 하지만 여러동작을 하나의 줄에서 처리할 때 용이하다. // 한 줄에서 세 개의 연산이 수행됨 for (a = 1, b = 3, c = a * b; a < 10; a++) { ... }
👨🏻💻 비교연산자
-
동등 연산자 && 일치 연산자
a == b // 동등 연산자 : 비교할 피연산자를 다른 자료형으로 변경하여 비교한다. 값만 비교 a === b // 일치 연산자 : 형 변환 없이 값을 비교한다. 엄격한 동등 연산자.
👨🏻💻 if와 "?"를 사용한 조건 처리
-
불린형으로의 변환
falsy값 = [숫자 0, 빈 문자열"", null, undefined, NaN] Truthy값 = 위와 반대같은 값은 불린 형으로 변환할 때, truthy가 된다 -
조건부 연산자 '?'
// 조건에 따라 다른 값을 변수에 할당해줘야 할때 // '물음표 연산자' / '조건부 연산자' // 피연산자가 세 개이기 때문에 '삼항 연산자'라고 부르기도 한다. // 피연산자가 세 개인 연산자는 조건부 연산자가 유일하다
👨🏻💻 논리 연산자
-
OR 연산자 체이닝의 추가기능 + 단락평가
result = value1 || value2 || value3; // 이렇게 작성하게 되면 자바스크립트는 어떻게 작동하는가? // 왼쪽부터 오른쪽으로 피연산자 평가 // 각 피연산자를 불린 형변환 - 변환한 값이 true면 stop - 해당 피연산자의 변환 전 값을 반환 // 피연산자 모두를 평가한 경우(모든 연산자가 false) - 마지막 피연산자를 반환 alert( 1 || 0 ); // 1 (1은 truthy임) alert( null || 1 ); // 1 (1은 truthy임) alert( null || 0 || 1 ); // 1 (1은 truthy임) alert( undefined || null || 0 ); // 0 (모두 falsy이므로, 마지막 값을 반환함) // 이러한 기능을 아래의 예제와 같이 사용 가능하다 // 1. 변수 또는 표현식으로 구성된 목록에서 첫 번째 truthy 얻기 let firstName = ""; let lastName = ""; let nickName = "바이올렛"; alert( firstName || lastName || nickName || "익명"); // 바이올렛 // 2. 단락 평가 (short circuit evaluation) // 단락 평가는 truthy를 만나면 나머지 값들을 건드리지 않은 채 평가를 멈추는 평가이다. // 동작 방식은 두 번째 피연산자가 변수 할당과 같은 부수적인 효과(side effect)를 가지는 표현식 일때 명확히 볼수 있다. true || alert("not printed"); // 작동안함 false || alert("printed"); // "printed" 작동함 // 첫 번째 OR연산자는 true를 만나자마자 평가를 멈춤 // 그렇기에 연산자의 왼쪽 조건이 falsy일때만 명령어를 실행하고자 할 때 자주 사용된다. -
AND연산자 + NOT연산자
// 위에서 OR연산자를 정리하였기에 비교하여 정리합니다. // AND 연산자는 첫 번째 falsy를 반환한다. // OR 연산자는 첫 번째 truthy를 반환한다. // + 프로젝트 기간중에 && 연산자를 state값의 변경에 따라 나타나게 할 때, 사용했다. {state === 1 && alert("abc")} // state값이 1이면 "abc"가 실행된다. ++++ // NOT연산자(!)의 우선순위는 모든 논리 연산자중 가장 높아서 가장 먼저 실행된다 -
null병합연산자 ??
null병합연산자(nullish coalescing operator)는 '확정되어있는' 변수를 찾을 수 있다.
- ?? 과 ||의 차이
- OR연산자는 첫 번째 truthy 값을 반환한다.
- null병합연산자는 첫 번째 정의된(defined) 값을 반환한다.
- null / undefined 등의 아직 정의되지 않은 값은 지나간다.
height = height ?? 100; let height = 0; alert(height || 100); // 100 alert(height ?? 100); // 0??의 연산자 우선순위는 ?와 = 보다만 높다
괄호 없이 ??를 ||나 &&와 함께 사용하는건 금지되어있다
👨🏻💻 결론
연산자에만 해도 내가 명확하게 설명할 수 없는 내용이 이만큼이나 있었다... 너희를 위해 자주 돌아오겠다.
느려서 바쁘다