이번 글에서는 사칙연산을 시작으로 학교에서는 다루지 않았던 자바스크립트에서만 제공하는 연산자에 대해 다루겠다.

📌 용어 정리

✔ 피연산자 : 연산자가 연산을 수행하는 대상

✔ 단항 연산자 : 피연산자를 하나만 받는 연산자

✔ 이항 연산자 : 두 개의 피연산자를 받는 연산자

📌 수학

자바스크립트에서 지원하는 수학 연산자는 다음과 같다.

• 덧셈 연산자 +
• 뺄셈 연산자 -
• 곱셈 연산자 *
• 나눗셈 연산자 /
• 나머지 연산자 %
• 거듭제곱 연산자 **

앞의 네 연산자는 기본 사칙연산과 같고, 밑의 두 연산자에 대해서만 설명하겠다.

나머지 연산자 %

a % b는 a를 b로 나눈 후 그 나머지를 정수로 반환해준다.

거듭제곱 연산자 **

a ** b는 a를 b번 곱한 값이 반환된다.

--

이항 연산자 '+'와 문자열 연결

이항 연산자 '+'의 피연산자로 문자열이 전달되면, 덧셈 연산자는 문자열을 병합해준다.

따라서, 이항 연산자 '+'를 사용할 때는 순서에 관계없이 피연산자 중 하나가 문자열이면 다른 하나도 문자열로 자동 변환된다는 점에 주의하자.

조금 더 복잡한 예시를 살펴보자.

위의 경우 어떻게 출력될까?

221? ❌땡❌ 연산은 왼쪽에서 오른쪽으로 순차적으로 진행된다는 점을 잊지 말자.

두 개의 숫자 뒤에 문자열이 오는 경우, 숫자가 먼저 더해지고, 그 후 더해진 숫자와 문자열과의 병합이 일어난다.

⭕따라서 정답은 41⭕

이처럼 이항 덧셈 연산자 '+'는 문자열 연결과 변환이라는 특별한 기능을 제공한다.

🤷🏻‍♂️ 그럼 다른 이항 연산자도 이 특별한 기능을 제공할까? 정답은 제공하지 않는다!

이항 뺄셈 연산자 '-'나 이항 나눗셈 연산자 '/'의 피연산자 중 하나라도 문자열이 온 경우에도, 문자열이 숫자형으로 변환된 뒤 수학적 연산이 진행된다.

단항 연산자 +와 숫자형으로의 변환

덧셈 연산자 '+'는 이항 연산자 뿐만 아니라 단항 연산자로도 사용할 수 있다.

숫자에 단항 덧셈 연산자를 붙이면 이 연산자는 아무런 동작도 하지 않는다.

하지만,

피연산자가 숫자가 아닌 경우엔 숫자형으로의 변환이 일어난다.

EX.

단항 덧셈 연산자는 짧은 문법으로도 Number(...)와 동일한 일을 할 수 있게 해준다.

💡 개발을 하다보면 문자열을 숫자로 변환해야 하는 경우가 자주 생긴다. 이런 경우, 단항 덧셈 연산자를 활용하면 편하다.

🤷🏻‍♂️ 근데, 왜 이항 덧셈 연산자가 적용되기 전에 단항 덧셈 연산자가 먼저 적용될까?

그 이유는, 이제 학습하게 될 연산자 우선순위 때문!

연산자 우선순위

하나의 표현식에 둘 이상의 연산자가 있는 경우, 실행 순서는 연산자의 우선순위(precedence)에 의해 결정된다.

아래는 우선순위 테이블의 일부를 발췌한 표이다. 순서를 암기해야하는 건 아니지만, 동일한 기호의 단항 연산자가 이항 연산자보다 우선순위가 더 높다는 점에 주목하자. 우선순위의 숫자가 높을수록 먼저다.

💡 자바스크립트에서 정의한 연산자 우선순위가 맘에 안 들면?

괄호를 사용하자! 괄호는 모든 연산자보다 우선순위가 높기 때문에 자바스크립트에서 정의한 연산자 우선순위를 무력화시킨다.

값을 반환하는 할당 연산자 =

'='는 연산자이기 때문에 흥미로운 함축성을 내포하고 있다.
자바스크립트에서 대부분의 연산자들은 값을 반환한다. '+'와 '-'뿐만 아니라 '=' 역시 값을 반환한다.

x = value를 호출하면 value가 x에 쓰여지고, 이에 더하여 value가 반환된다.

할당 연산자의 이런 특징을 이용한 복잡한 표현식을 살펴보자.

위 예제에서 표현식 (a = b + 1)은 a에 값을 할당하고, 그 값인 3을 반환한다. 그리고 그 반환값은 이어지는 표현식에 사용된다.

이건 이해를 위한 표현일 뿐, 직접 코드를 작성할 땐 이렇게 쓰지 않기를 권장한다. 위 코드는 가독성도 떨어지고 코드도 명확하지 않다.

할당 연산자 체이닝

할당 연산자 여러 개를 연결하는 것을 할당 연산자 체이닝이라 한다.

이렇게 할당 연산자를 여러 개 연결한 경우, 평가는 우측부터 진행된다.

1) 2+2
2) c = 4
3) b = c
4) a = b

그런데 되도록이면, 연산자를 체이닝하는 것보다는 가독성을 위해 줄을 나눠 코드를 작성하길 권장한다.

복합 할당 연산자

프로그램을 짜다 보면, 변수에 연산자를 적용하고 그 결과를 같은 변수에 저장해야 하는 경우가 종종 생긴다.

이때, +=와 *= 연산자를 사용하면 짧은 문법으로 동일한 연산을 수행할 수 있다.

이런 복합 할당 연산자는 산술과 비트 연산자에도 적용할 수 있다.

복합 할당 연산자의 우선순위는 할당 연산자와 동일하다. 따라서 대부분 다른 연산자가 실행된 후에 복합 할당 연산자가 실행된다.

증가·감소 연산자

1. 증가 연산자 ++ : 1 증가

2. 감소 연산자 -- : 1 감소

💡 중요!! 증가/감소 연산자는 변수에만 쓸 수 있다. 값에 사용하려고 하면 에러 발생!

✔ ++와 -- 연산자는 변수 앞이나 뒤에 올 수 있다

• 전위형 (ex. ++counter) : 증가/감소 후 새로운 값 반환
• 후위형 (ex. counter++) : 연산 전의 기존값 반환 후 증가/감소

반환값을 사용하지 않는 경우라면, 전위형과 후위형엔 차이가 없다.

• 값을 증가시키고 난 후, 증가한 값을 바로 사용하려면 전위형
• 값을 증가시키지만, 증가 전의 기존값을 사용하려면 후위형

✔ 다른 연산자 사이의 증가/감소 연산자

++/-- 연산자를 표현식 중간에 사용하는 것도 가능하다. 이때, 증가/감소 연산자의 우선순위는 다른 대부분의 산술 연산자보다 높기 때문에 평가가 먼저 이뤄진다.

1)

let counter = 1;
alert(2 * ++counter);

⇛ 결과 : 4

2)

let counter = 1;
alert(2 * counter++);

⇛ 결과 : 2

💡 이것 역시, 한 줄에서 여러 가지 일을 동시에 하고 있기 때문에 가독성이 떨어진다. 코드 한 줄엔, 특정 동작 하나에 관련된 내용만 작성하는 것을 권한다.

비트 연산자

인수를 32비트 정수로 변환하여 이전 연산을 수행한다.
이런 비트 조작 관련 연산자는 자바스크립트뿐만 아니라 대부분의 프로그래밍 언어에서 지원한다.

✔ 비트 연산자 목록

• 비트 AND(&)
• 비트 OR(|)
• 비트 XOR(^)
• 비트 NOT(~)
• 왼쪽 시프트(LEFT SHIFT) (<<)
• 오른쪽 시프트(RIGHT SHIFT) (>>)
• 부호 없는 오른쪽 시프트(ZERO-FILL RIGHT SHIFT) (>>>)

비트 연산자는 저수준(2진 표현)에서 숫자를 다뤄야할 대 쓰이므로, 흔하게 쓰이진 않는다. 웹 개발 시엔 이런 일이 자주 일어나지 않기 때문에 비트 연산자를 만날 일은 거의 없다. 그래도...암호를 다뤄야할 땐 비트연산자가 유용하기 때문에 그럴 땐 MDN 문서를 참고하자.

쉼표 연산자 ,

좀처럼 보기 힘들고 우선순위가 할당 연산자보다도 낮은 특이한 연산자 중 하나다. 코드를 짧게 쓰려는 의도로 가끔 사용된다.

쉼표 연산자는 여러 표현식을 코드 한 줄에서 평가할 수 있게 해준다. 이때 표현식 각각이 모두 평가되지만, 마지막 표현식의 평가 결과만 반환되는 점에 유의하자.

위 예시에서 첫 번째 표현식 1+2는 평가는 되지만 그 결과는 버려진다.

하지만 만약, 괄호 없이 let a = 1+2, 3+4라면 a = 3, 7이 된다. 여기서는 7이 버려지고 a = 3이 된다. (a = 1+2), 3+4의 연산결과와 같다.

🤷🏻‍♂️ 이렇게 마지막 표현식을 제외한 모든 것을 버리는 연산자는 어디서 사용될까?

여러 동작을 하나의 줄에서 처리하려는 복잡한 구조에서 이를 사용한다.

쉼표 연산자를 사용한 트릭은 여러 자바스크립트 프레임워크에서 볼 수 있다. 하지만 이 역시 코드 가독성이 좋지 않다. 많이 고민해보고, 정말 필요한 경우에만 사용하자.

💻 과제

1. 전위형과 후위형

아래 코드가 실행된 후, 변수 a, b, c, d엔 각각 어떤 값들이 저장될까?

📌 답: a=2, b=2, c=2, d=1

2. 할당 후 결과 예측하기

📌 답: a=4, x=5

3. 형 변환

📌 답
1. "10"
2. -1
3. 1
4. 2
5. 6
6. "9px"
7. "$45"
8. 2
9. NaN
10. ∞
11. " -9 5"
12. -14
13. 1
14. NaN
15. -2

❗ 문자열이 숫자형으로 변할 땐 문자열 앞뒤의 공백이 삭제된다. 뺄셈 연산자 앞의 피연산자는 공백을 만드는 문자 \t와 \n, 그 사이의 "일반적인" 공백으로 구성된다. 따라서 " \t \n"는 숫자형으로 변환 시 길이가 0인 문자열로 취급되어 숫자 0이 된다.

4. 덧셈 고치기

📌 답

let a = prompt("덧셈할 첫 번째 숫자를 입력해주세요.", 1);
let b = prompt("덧셈할 두 번째 숫자를 입력해주세요.", 2);

alert(+a + +b); // 3

이 글은 https://ko.javascript.info/ 을 참고하여 작성하였습니다.