1. 연산자란?
연산자는 하나 이상의 피연산자를 대상으로 각종 연산을 수행하여 값을 반환하는 주체를 의미합니다.
연산자의 종류는 기본적으로 사칙 연산을 제외하고도 대입, 할당, 비교 연산자 등이 존재하며 연산자들 마다 처리되는 과정에서 기존의 값이 변화하는 '부수 효과(side effect)'의 여부 또한 다르기도 합니다.
- 산술 연산자 : 피연산자를 대상으로 수학적 계산을 수행하고 새로운 값을 반환하는 연산자이며, 피연산자의 수에 따라 단항, 이항 연산자로 나뉩니다. (부수 효과 O)
// 단항 산술 연산자 예시) 단일 피연산자를 산술 연산하여 값을 반환하며, 증감 연산자 또한 엄밀히 따지고 보면 단항 산술 연산자의 범주에 포함됩니다. let value = 5; // 변수에 5로 초기화 후 console.log (++value); // 전위 연산자 | 값을 먼저 1 증가시키고 console.log에 출력) console.log (value++); // 후위 연산자 | console.log를 먼저 수행 후 1 증가한 7의 값 저장.) console.log (value); -> 후위 연산자에 의해 변화 된 value의 값 7을 출력. console.log (+value); -> 값의 상태 변화 없음) console.log (-value); -> 원 값이 음수면 양수로, 양수면 음수로 반전시키는 효과.) //이항 산술 연산자 예시) 둘 이상의 피연산자를 산술 연산하여 값을 반환합니다. console.log (10+5); // 더하기 연산) 15 반환 console.log (10-5); // 뺴기 연산) 5 반환 console.log (10*5); // 곱하기 연산) 50 반환 console.log (10**5); // 거듭 제곱 연산) 10의 5제곱인 100000 반환, 특히 제곱 연산자(**)의 경우 ES7에 추가된 연산자로 그 이전까지는 Math.pow() 메서드를 사용하여 값의 제곱을 구했습니다. console.log (10/5); // 나누기 연산) 2 반환 console.log (10%5); // 나머지 연산) 0 반환
- 할당 연산자 : 할당 연산자는 오른쪽에 있는 피연산자(통상 R-value라고 부름)의 반환 결과를 왼쪽에 있는 피연산자(통상 L-value)라고 부름에 할당합니다. (부수 효과 O)
let thisNumber; -> 값 초기화 후 thisNumber = 5; -> 5를 대입한 5 저장. thisNumber += 5 -> thisNumber = thisNumber(5) + 5의 값을 수행한 10이 thisNumber에 저장 thisNumber -= 5 -> thisNumber = thisNumber(10) - 5의 값을 수행한 5가 thisNumber에 저장 thisNumber *= 5 -> thisNumber = thisNumber(5) * 5의 값을 수행한 25가 thisNumber에 저장 thisNumber /= 5 -> thisNumber = thisNumber(25) / 5의 값을 수행한 5가 thisNumber에 저장 thisNumber %= 5 -> thisNumber = thisNumber(5) % 5의 값을 수행한 0이 thisNumber에 저장
- 비교 연산자 : 좌항과 우항을 비교하여 그 결과값을 Boolean 값으로 반환하는데 동등 비교 연산자, 대소 비교 연산자 등이 있으며, 자바스크립트에서는 동등 비교 연산자의 경우 느슨한 동등 비교 연산자(동등 연산자)와 엄걱한 동등 비교 연산자(일치 연산자), 이 두개를 사용하여 값들의 비교를 진행합니다. (부수 효과 X)
이 두 동등 비교 연산자의 차이점은 한마디로 암묵적 타입 변환의 유무 여부라고 할 수 있는데, 느슨한 동등 비교 연산자는 타입이 같을 수 있다는 가능성이 있다면 true값을 반환하는 반면, 엄격한 동등 비교 연산자는 암묵적 타입 변환을 무시하고 각 피연산자들의 타입이나 메모리 주소(이 경우 배열이나 객체에 적용하므로 지금은 알 필요가 없습니다)가 똑같아야 true를 반환합니다.
그래서 자바스크립트에서는 상황에 따라 두 비교 방식을 선택해서 사용을 하지만, 특별한 경우를 제외하고는 엄격한 동등 비교 연산자를 사용함을 권장하고 있습니다.
console.log(5=="5") -> 문자열 5와 숫자 5는 다르지만 암묵적 형변환 후 true 반환) console.log(5==="5") -> 문자열과 숫자는 엄연히 다르므로 false를 반환) console.log(5===5) -> 값과 타입까지 같으므로 true를 반환) console.log(5!='5') -> 동등 불일치 비교 연산자도 마찬가지 이유로 false 반환) console.log(5!=='5') -> 같은 이유로 true를 반환.) // ★ 특히 NaN 키워드는 비교 연산자로 타입 판별이 어려우므로 Number.isNaN() 함수를 사용하여 해당 변수가 NaN 값인지를 알아보아야 합니다. let isThisNumber = NaN; console.log(Number.isNaN(isthisNumber)) // isThisNumber 변수에는 NaN이 담겨 있으므로 True를 반환.) // 대소 비교 연산자 console.log(3>1) -> 3은 1보다 크므로 true를 출력 console.log(3<1) -> 1은 3보다 크지 않으므로 false를 출력 console.log(3<=3) -> 좌항 값 3은 우항 값 3보다 크지는 않지만 같기도 하기에 true를 반환 console.log(3<=1) -> 1은 3보다 크지도 않고, 같디조 않으므로 false를 반환.⭐ 자바스크립트에서는 해당 비교연산자를 이용하여 두 데이터를 비교하는 방법 뿐만 아니라 Object 전역 메서드인 Object.is를 이용해서도 두 데이터의 타입을 좀 더 명확히 비교가 가능합니다. 하지만 여전히 업계에서는 엄격한 비교 연산자(===)가 통용되고 있습니다.
- 삼항 조건 연산자 : 자바스크립트에서는 if 키워드와 같은 조건문을 통해 값의 조건 여부를 따져 그에 따른 코드를 수행하게 할 수도 있지만, 간단한 조건 여부를 따지는 간결한 조건문에서는 삼항 조건 연산자를 사용하기도 합니다.(부수 효과 X)
사용법은 (조건문) ? (참일 경우 반환 값) | (거짓일 경우 반환 값) 으로서 조건문에 따라 참일 경우의 값, 혹은 거짓일 경우의 값을 반환하게 하거나 콜백함수를 실행하게 할 수도 있습니다.
또한 중첩 조건문의 경우처럼 삼항 조건 연산자 또한 거짓일 경우에 반환되는 값에 다시 삼항 연산자를 작성하여 중첩 조건문의 효과를 내게 할 수 있습니다.
// 기본적인 비교 let a = 5; let b = 10; console.log(((a>b)?"a가 더 큽니다!" | "b가 더 큽니다!")) // 해당 조건식에 따라 값이 true일 경우 앞의 문구를, false일 경우 뒤의 문구를 실행하기 때문에 여기서는 "b가 더 큽니다!" 문구가 콘솔에 출력됩니다. // 비교하는 함수 제작시 중첩 삼항 연산자 사용 예시 function compareValues(a, b) { const resultMessage = a > b ? "a가 더 큽니다!" : a < b ? "b가 더 큽니다!" : "둘 다 같습니다!"; console.log(resultMessage); } compareValues(10, 10); // "둘 다 같습니다!" compareValues(5, 10); // "b가 더 큽니다!"
- 논리 연산자 : 논리합(AND)과 논리곱(OR), 논리 부정(NOT)의 원리를 이용하는 조건문으로서 좌항과 우항의 상태에 따라 true와 false를 반환합니다. (부수 효과 X)
- 논리합 예시
true && true는 true를 반환합니다.
true && false는 false를 반환합니다.
false && true는 false를 반환합니다.
false && false는 false를 반환합니다.
- 논리곱 예시
true || true는 true를 반환합니다.
true || false는 true를 반환합니다.
false || true는 true를 반환합니다.
false || false는 false를 반환합니다.
- 단축 평가 (단락 평가)
단축 평가란 논리 연산자 중 '&&' 기호와 '||' 기호를 사용할 때 발동되며, 자바스크립트에서 연산 과정을 효율적으로 관리하기 위해 단축 평가를 실시하여 두개의 피연산자의 true와 false 값에 따라 반환 되는 값 또한 달라지게 됩니다.
단축 평가의 네 가지 표현식은 다음과 같습니다.
true || anything = true :
OR 논리 연산자에서 앞의 값이 true이면 뒤의 값이 무엇이든 앞의 값 true를 반환합니다.fasle || anything = anything :
OR 논리 연산자에서 앞의 값이 false이면 뒤의 값을 반환합니다.true && anything = anything :
AND 논리 연산자에서 앞의 값이 true 더라도 뒤의 값까지 본 후 뒤의 값을 반환합니다.false && anything = false :
AND 논리 연산자에서 앞의 값이 false라면 뒤의 값을 보지 않고 그대로 false를 반환합니다.이러한 단축 평가는 다양한 방식에서 코드의 효율을 올리게 할 수 있습니다.
// if문의 조건을 활용한 간단한 단축 평가 예시 let done = true; // done 변수 상태를 boolean으로 할당 후 let message = done ? '완료' : ''; //삼항 연산자를 활용해 done의 상태가 정상(true)일 경우 '완료' 를 ,비정상(false)일 경우 빈 문자열(변화 없음)이 출력되는 코드입니다. console.log(message) // message 출력 // 위의 코드를 아래의 코드로 대체 할 수 있습니다. let done = '완료'; let message = done || ''; // 위의 삼항연산자 대신 단축 평가를 활용해 done이 true일때 뒤의 미완료를 무시하고 done(true)를 반환, 만약 done이 false라면 뒤의 빈 문자열을 message에 반환 합니다. console.log(message) // message 출력
- 논리 부정 연산자 : boolean 및 다른 타입의 값(Truthy와 Falsy로 취급되는 값들)의 참, 거짓 여부를 반전시키는데 사용됩니다.
이 부정 연산자는 특이하게도 부수 효과를 일으키지 않는 연산자인데, 이는 단순히 기존의 값을 바꾼다는 개념이 아니라 새로운 값을 반환하는 것이기 때문입니다.
!true는 false를 반환합니다.
!false는 true를 반환합니다.
- null 병합 연산자 : ES11부터 도입된 null 병합 연산자(??)로좌항의 피연산자의 값이 null이나 undefined인 경우 우항의 피연산자를, 그렇지 않다면 좌항의 피연산자를 반환합니다.
이 연산자의 메커니즘은 단축 평가 중 false || anything 표현식을 적용한 사례입니다.
// ?? 연산자 이전 let myName = "Re_Go" console.log(myName || 'nameless') // 단축 평가에 의해 좌항(true)의 myName 값이 출력 let yourName = undefined console.log(yourName || 'nameless') // 단축 평가에 의해 우항의 'nameless'가 출력 //?? 연산자 적용시 let name = "Re_Go" console.log(name ?? 'nameless') // 좌항이 null이나 undefined가 아니라면 해당하는 좌항의 값을, null이나 undefined라면 우항의 값을 출력.
2. 연산자의 우선순위
연산자의 우선순위는 그 양이 생각보다 많고 복잡하기 때문에 어려울 수도 있으나, 이것 하나만 기억하면 됩니다.
우선적으로 처리되어야 하는 연산이라면 무조건 괄호() 로 감싸주면 됩니다.
또 연산자 결합 순서 또한 좌항에서 우항으로의 순서를 가지는 대입 연산자를 제외하면 거의 연산의 진행 방향이 왼쪽에서 오른쪽이라는 점을 기억해두시면 됩니다.
