한 입 크기로 잘라먹는 리액트연산자란 +, -, *, / 등과 같이 프로그래밍 언어에서 다양한 연산을 수행할 때 도움을 주는 기호 또는 문자입니다. 자바스크립트는 기본 사칙연산 외에도 여러 형태의 유용한 연산을 수행할 수 있는 다양한 연산자를 제공합니다.
대입 연산자
대입 연산자(=)는 가장 기본이 되는 연산자로서 변수에 값을 할당하는 역할을 합니다. 대입 연산자 =의 왼쪽에는 값을 저장할 변수를, 오른쪽에는 값이나 또 다른 변수를 지정합니다.
코드를 불러오는 중 입니다 ...① 변수 number에 값 1을 할당합니다
대입 연산자를 사용할 때 피 연산자의 결합 방향은 오른쪽에서 왼쪽으로 진행되므로 다음과 같이 연쇄적인 할당이 가능합니다. 다음 예를 살펴보겠습니다.
코드를 불러오는 중 입니다 ...① 대입 연산자의 결합 방향은 오른쪽에서 왼쪽이므로 수식의 계산은 numC = numA를 먼저 수행하고, 다음으로 numB = numC를 수행합니다.
모든 변수에는 값 1이 동일하게 저장됩니다.
결합 방향이란?
결합 방향이란 같은 수식 내에 우선순위가 같은 연산자가 둘 이상 있을 때, 어느 연산을 먼저 수행할지 결정하는 일입니다.
산술 연산자
산술 연산자는 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/), 나머지 연산(%)처럼 프로그래밍에 필요한 가장 기본적인 계산 기능을 수행하는 연산자입니다.
코드를 불러오는 중 입니다 ...산술 연산자는 곱셈, 나눗셈, 나머지 연산자가 덧셈, 뺄셈 연산자보다 우선순위가 더 높습니다. 만일 연산자가 동등한 우선순위를 가질 때는 왼쪽에서 오른쪽으로 차례대로 계산합니다.
소괄호를 사용하면 원하는 연산부터 먼저 수행할 수 있습니다.
복합 대입 연산자
복합 대입 연산자는 대입 연산자와 산술 연산자의 기능을 함께 이용할 때 사용합니다. 복합 대입 연산자를 사용하지 않고 값이 이미 들어 있는 어떤 변수에 10을 더하려면, 다음과 같이 코드를 작성해야 합니다.
코드를 불러오는 중 입니다 ...복합 대입 연산자를 사용하면 동일한 코드를 좀 더 간단하게 표현할 수 있습니다.
코드를 불러오는 중 입니다 ...① number의 값에 10을 더합니다.
이렇듯 복합 대입 연산자는 산술 연산자와 대입 연산자를 서로 이어 붙여(+=) 사용 합니다.
복합 대입 연산자는 모든 산술 연산자와 함께 사용할 수 있습니다.
코드를 불러오는 중 입니다 ...증감 연산자
증감 연산자는 값을 1씩 늘리거나 줄일 때 사용하는 연산자입니다. 이 증감 연산자는 다음과 같이 덧셈 또는 뺄셈 연산자를 두 개 연달아 붙여 사용합니다.
코드를 불러오는 중 입니다 ...① 변수 a에 저장된 값에 1을 더합니다. ② 변수 b에 저장된 값에서 1을 뺍니다.
a++처럼 증감 연산자를 변수 a 뒤에 두면, 증감 연산의 결과는 연산자가 있는 다음 행 부터 반영됩니다.
코드를 불러오는 중 입니다 ...피 연산자인 변수 뒤에 증감 연산자를 두는 것을 ‘후위 연산’이라고 하며, 이 연산의 결과는 다음 행 부터 적용된다는 특징이 있습니다.
만일 증감 연산을 작성한 행에서 반영하고 싶다면 증감 연산자를 변수 앞에 두면 됩니다.
코드를 불러오는 중 입니다 ...증감 연산자를 피연산자인 변수 앞에 두어 증감 연산을 작성한 행부터 적용하는 것을 ‘전위 연산’이라고 합니다.
논리 연산자
논리 연산자는 참(true)과 거짓(false)을 포함하는 불리언 값을 다룰 때 사용하는 연산자입니다.
논리 연산자에는 3종류가 있습니다.
- OR(||) : 둘 중 하나라도 참이면 참
- AND(&&) : 둘 중 하나라도거짓이면 거짓
- NOT(!) : 참이면 거짓, 거짓이면 참
OR 연산을 할 때는 키보드의 원화(\) 키와 함께 있는 | 기호를 두 개 이어 붙인 ||를 사용합니다.
OR 연산은 연산에 참여하는 두 개의 피연산자 중 하나라도 참이면 참을 반환합니다.
코드를 불러오는 중 입니다 ...AND 연산은 키보드의 숫자 7과 함께 있는 & 기호를 두 개 이어 붙인 &&를 사용합니다. AND 연산은 연산에 참여하는 두 개의 피연산자 중 하나라도 거짓이면 거짓을 반환합니다.
코드를 불러오는 중 입니다 ...NOT 연산은 느낌표 기호(!)를 사용합니다. 다른 두 논리 연산자와는 달리 피연산자가 하나뿐인 연산자로 피연산자의 값이 거짓이면 참, 참이면 거짓으로 바꾸어 반환합니다.
코드를 불러오는 중 입니다 ...토글(Toggle)
전원 스위치의 on/off처럼 참 을 거짓으로, 거짓을 참으로 바꾸는 기능을 특별히 ‘토글 (Toggle)’ 기능이라고 합니다.
비교 연산자
비교 연산자는 말뜻 그대로 두 값을 비교하는 연산자입니다. 자바스크립트에는 다양한 비교 연산자가 있습니다. 하나씩 살펴보겠습니다.
비교 연산자 | 설명 |
=== | 같다 |
!== | 같지 않다 |
> | 크다 |
>= | 크거나 같다 |
< | 작다 |
<= | 작거나 같다 |
같다
대입 연산자인 = 기호를 3개 이어 붙인 ===을 사용하며, 두 값이 같은지 확인합니다. ===을 동등 비교 연산자라고도 합니다.
코드를 불러오는 중 입니다 ...① 변수 numberA와 numberB가 같은 값을 가지므로 출력 결과는 true가 됩니다. ② 변수 numberB와 numberC의 값은 같아 보이지만 두 변수의 자료형은 숫자형과 문자형으로 각각 다릅니다. 출력 결과는 false가 됩니다.
이 코드는 C, 자바, 파이썬 등 다른 언어를 조금이라도 다뤄본 사람이라면 약간 어색할 수 있습니다. 왜냐하면 자바스크립트에서는 값이 동등한지 비교할 때 == 연산자가 아닌 === 연산자를 사용하기 때문입니다. 자바스크립트 역시 다른 언어처럼 == 연산자를 사용할 수 있지만, 그런데도 ===을 사용하는 이유는 자바스크립트의 == 연산자는 값만 비교할 뿐 자료형은 비교하지 않기 때문입니다.
코드를 불러오는 중 입니다 ...① === 연산자가 아닌 == 연산자를 사용해 두 변수의 값을 비교하고 결과를 출력합니다.
값과 자료형을 모두 비교하는
=== 연산자를 사용할 때는 거짓으로 나온 결과가 == 연산자를 사용할 때는 값만 비교하므로 참이 됩니다.같지 않다
자바스크립트에서 두 값이 다른지 비교할 때는 같은지 비교하는 동등 비교 연산자 ===에서, 맨 앞의 =를 !로 바꾼 !== 연산자를 사용합니다.
코드를 불러오는 중 입니다 ...① numberA와 numberB의 값과 자료형이 모두 일치하기 때문에 출력 결과는 거짓이 됩니다. ② numberB와 numberC의 값은 같지만, 자료형은 다르기 때문에 출력 결과는 참이 됩니다. ③ numberB와 numberC는 자료형은 다르지만, 값은 같기 때문에 출력 결과는 거짓이 됩니다.
!== 연산자는 값과 자료형 중 하나라도 다르면 참으로 판단합니다. 반면 != 연산자는 자료형은 비교하지 않고 값이 다르면 참으로 판단합니다.
대소 비교
두 값의 크고 작음을 비교할 때는 다음과 같이 부등호 모양의
코드를 불러오는 중 입니다 ...> 또는 <를 사용합니다.① numberA가 numberB보다 작기 때문에 출력 결과는 참이 됩니다. ② numberA가 numberB보다 크지 않기 때문에 출력 결과는 거짓이 됩니다. ③ numberB가 numberC보다 작기 때문에 출력 결과는 참이 됩니다. ④ numberB가 numberC보다 크지 않기 때문에 출력 결과는 거짓이 됩니다.
대소 관계 연산자 > 또는 <에 대입 연산자 =을 붙여, 두 값이 서로 ‘크거나 같다’
>= 혹은 ‘작거나 같다’ <=처럼 비교할 수 있습니다.① numberA가 numberB보다 작거나 같기 때문에 출력 결과는 참이 됩니다. ② numberA가 numberB보다 크거나 같지 않기 때문에 출력 결과는 거짓이 됩니다. ③ numberB와 numberC가 작거나 같기 때문에 참이 됩니다. ④ numberB와 numberC가 크거나 같기 때문에 참이 됩니다.
null 병합 연산자
null 병합 연산자(Nullish Coalescing Operator)는 값이 확정된 변수를 찾을 때 사용하는 연산자입니다. 자바스크립트에서는 값이 ‘없음’을 나타내는 자료형으로 null과 undefined가 있습니다. null이나 undefined가 있는 변수를 값이 확정되지 않은 변수라고 합니다. null 병합 연산자 ??을 사용하면, 값이 확정된 변수를 쉽게 찾아 낼 수 있습니다.
코드를 불러오는 중 입니다 ...① varA의 값은 10, varB의 값은 20으로 둘 다 값이 확정되었습니다. 이때 null 병합 연산에서는 ?? 연산자 기준 왼쪽의 값을 연산 결과로 반환합니다. ② varB의 값은 20, varC는 값을 할당하지 않아 undefined 값을 갖습니다. 이때 null 병합 연산에 서는 값이 확정된 변수인 varB의 값을 연산 결과로 반환합니다.
실무에서 null 병합 연산자를 이용하면 다음과 같은 상황을 간단하게 해결할 수 있습니다.
요구사항: 변수 user에 해당 사용자의 이름이 있다면 이름을, 이름이 없다면 닉네임을 저장하시오.
코드를 불러오는 중 입니다 ...① 변수 name과 nickname 중 확정된 변숫값을 user에 저장합니다. name에는 값이 없으므로 변수 user에는 nickname의 값이 저장됩니다.
결국 변수 user에는 문자열 winterlood가 저장되어 출력됩니다.
변수 name에 "이정환"이라는 문자열을 입력해 값을 확정한다면 어떻게 될까요?
코드를 불러오는 중 입니다 ...① null 병합 연산자는 두 피연산자의 값이 모두 확정되면 왼쪽의 값을 결과로 반환합니다.
따라서 변수 user에는 문자열 이정환이 저장되어 출력됩니다.
동적 타이핑과 typeof 연산자
자바스크립트는 변수에 숫자를 저장 했다가 문자로 바꿔도 오류가 발생하지 않습니다. 자바스크립트 변수는 값을 저장할 때마다 자료형이 동적으로 결정되기 때문입니다. 쉽게 말해 변수에 숫자를 저장했다면 해당 변수는 숫자 자료형이 되고, 이후 문자를 저장하면 문자 자료형으로 바뀝니다. 저장하는 변숫값에 따라 변수의 자료형도 함께 변경되는 특징을 ‘동적 타이핑(Dynamic Typing)’이라고 합니다.
자바스크립트 자료형의 이러한 유연함은 때로는 단점이 되기도 합니다. 프로그래머가 다음과 같이 변수의 자료형이 변경 되었다는 사실을 모르고 코드를 작성하면 프로그램이 의도치 않게 동작하거나 오류가 발생할 수 있습니다.
코드를 불러오는 중 입니다 ...① 변수 varA의 값을 숫자형으로 오인하고 증감 전위 연산자를 사용하였습니다. 이 경우 NaN을 출력 하여 의도한 대로 동작하지 않습니다.
이런 상황을 대비해 변수 varA의 자료형이 무엇인지 확인할 필요가 있습니다.
typeof 연산자를 이용하면 변수의 자료형을 확인할 수 있습니다.① typeof 연산자는 변수의 자료형을 문자형(string)으로 출력합니다.
typeof 연산자는 앞으로 배울 조건문에서 변수의 자료형에 따라 각기 다른 코드를 수행하도록 만들 때 사용됩니다.삼항 조건 연산자
삼항 조건 연산자(또는 삼항 연산자)는 유일하게 자바스크립트에서 3개의 피연산자를 취하는 연산자입니다. 삼항 연산자는 다음과 같이
코드를 불러오는 중 입니다 ...? 앞에 조건식을 작성하고, 콜론 :을 기준으로 앞은 조건식이 참일 때 그리고 뒤는 조건식이 거짓일 때 수행할 명령을 작성하면 됩니다.다음 예제는
코드를 불러오는 중 입니다 ...typeof와 삼항 연산자를 함께 사용하는데, 변수의 자료형에 따라 다른 동작을 수행합니다.① 변수 varA가 문자형이면 콜론:앞의 명령을 수행하고, 그렇지 않으면 뒤의 명령을 수행합니다.
계속해서 다음은 삼항 연산자를 이용해 값이 홀수인지 짝수인지 판별하는 간단한 예입니다.
코드를 불러오는 중 입니다 ...① num % 2 === 0은 삼항 연산자의 조건식입니다. 조건식은 변수 num의 값을 2로 나누었을 때 나머지가 0인지 묻고 있습니다. 나머지가 0이라는 것은 변수에 저장된 값이 짝수라는 의미입니다. 따라서 조건식이 참(짝수)이면 전반부의console.log("짝수")를 실행하고, 그렇지 않으면 후반부의console.log("홀수")를 실행합니다.
변수 num의 값을 바꿔가며 어떤 값이 나오는지 직접 확인해 보길 바랍니다.
삼항 연산자는 조건식에 따라 다른 명령을 수행할 때 사용하지만 다음과 같이 값을 반환할 수도 있습니다.
코드를 불러오는 중 입니다 ...삼항 연산자에서 참과 거짓에 따라 수행하는 명령 대신에 값을 입력하면 조건식에서 정한 값을 반환합니다. 코드에서
num % 2의 값은 0이 아니므로 변수 result에는 홀수라는 문자열이 저장됩니다.