ZeroCho Blog

이번 시간에는 연산자에 대해서 알아보겠습니다. 전부를 다루지는 않고 자주 쓰이는 것만 다루겠습니다. 

연산자

연산자란 프로그래밍에서 쓰이는 기호들입니다. 연산자에는 산술, 문자열, 증감, 비교, 대입, 삼항, 논리, 비트연산자 등이 있습니다(스펙에 정의된 것은 아니고 임의로 분류한 것입니). 비트 연산자는 정말 고급스런 경우에만 쓰이기 때문에 다루지 않겠습니다. 그리고 비트연산자를 쓰지 않는 게 권장사항이기도 합니다.

산술연산자

덧셈, 뺄셈, 곱셈, 나눗셈이 있겠죠? 순서대로 +, -, *, / 입니다. 그리고 나누고 난 나머지를 계산해주는 %가 있습니다. 다른 언어처럼 /는 몫이고 %는 나머지인 개념이 아닙니다. /는 그냥 나누기(5 / 2 == 2.5)고요. %는 나머지(5 % 2 == 1)입니다. Mod(Modulus)라고도 하죠

var a = 1 + 2; // 3
var b = 5 - 3; // 2
var c = 2 * 4; // 8
var d = 6 / 4; // 1.5
var e = 8 % 3; // 2

참고로 -와 * 그리고 /는 문자열로 표현된 숫자도 계산("3" * "2" == 6)해줍니다. +는 안 되는데 이유가 아래 나와있습니다.

문자열연산자

하나 특이한 점은 + 연산자는 숫자만 더하는 게 아니라 문자열과 다른 데이터도 연결해줍니다.

var string = 'hello ' + 'world'; // 'hello world'
var string2 = 'hi' + 9; // 'hi9'
var string3 = 1 + 'what' + 2; // '1what2'
var string4 = 3 + 4 + 'wow'; // '7wow'

문제는 문자열과 더할 때 문자열이 아닌 데이터는 문자열로 바꿔서 연결한다는 겁니다. '문자열이 먼저다'라고 기억해두시면 쉽습니다. 따라서 string2의 숫자 9는 문자열 '9'로 바뀌어서 결과값이 'hi9'가 됩니다. string4를 보면 '34wow'가 아니라 '7wow'인데 그 이유는 왼쪽부터 더해나가기 때문입니다. 먼저 숫자 3 + 4를 해서 7이 되고, 그 후에 'wow' 문자열과 더해져서 '7wow'가 됩니다. 이 부분을 주의하셔야합니다. 왼쪽부터 계산되고, 문자열이 있을 경우는 문자열로 바뀌어서 계산됩니다.

증감연산자

++, -- 가 있습니다. 변수에 1을 더하거나 1을 빼줍니다. ++나 --를 붙이는 위치에 따라서 결과가 달라질 수 있습니다. 앞에 붙으면 전위증감연산자, 뒤에 붙으면 후위증감연산자라고 부릅니다. ++i는 i = i + 1;과 같습니다. 하지만 i++는 i = i + 1;과는 결과가 다를 수도 있습니다. (무슨 소린지...)

var i = 0;
i++; // i는 1이 됩니다.
alert(i++); // 1을 먼저 alert한 후에 ++되어 i는 2가됩니다.
alert(++i); // 먼저 ++한 후에 alert하여 3을 alert하게 됩니다.
i = i + 1; // i++과 같습니다.

콘솔에 순서대로 쳐보시면 쉽게 알 수 있을겁니다. ++가 앞에 붙으면 먼저 1을 더하고 다음 동작을 하고, ++가 뒤에 붙으면 동작을 먼저 한 후 1을 더합니다. 헷갈릴 여지가 있기 때문에 확실히 알아두고 가셔야합니다.

대입연산자

지금까지 써온 = 이 바로 대입연산자입니다. var a = 1;처럼 변수에 값을 대입하는 연산자입니다. 사실 가장 기본이죠.

줄여쓰는 연산자도 있습니다. 복합대입연산자라고 불리는 친구들인데요. +=, -=, /=, *=, %= 등이 있습니다. 단순히 코드 양만 줄여줍니다.

var i = 10;
i += 2; // 12 (i = i + 2와 같음)
i -= 3; // 9 (i = i - 3과 같음)
i *= 4; // 36 (i = i * 4와 같음)
i %= 5; // 1 (i = i % 5와 같음)

비교연산자

==, !=, >, <, >=, <= 순서대로 같음, 같지 않음, 큼, 작음, 크거나같음, 작거나같음입니다. 프로그래밍에서는 ==가 같다는 뜻이고, =는 대입연산자입니다. 변수에 값을 대입하는 역할이죠. 자바스크립트에서 ==와 !=는 조심해서 써야합니다. 이유는 마지막에 알려드릴게요.

100 == 10 * 10; // true
6 != 2 * 2; // true
2 * 5 > 3 * 3; // true
6 * 3 <= 2 * 9; // true

삼항연산자

삼항 연산자는 (조건 ? 참 : 거짓)으로 구성되어 있습니다.

var ternary = i > 10 ? 15 : 6

여기서 i > 10 == true면 ternary 변수는 15가 되고, false면 6이 됩니다.

논리연산자

&&, ||, !인데요. 순서대로 그리고, 또는, 아닌이란 뜻을 갖고 있습니다. &&는 앞의 값이 참인 값일 때 다음 값로 넘어가고요. ||는 앞의 값이 거짓인 값일 때 다음 값로 넘어갑니다. 넘어가지 못한다면 넘어가기 전의 값을 반환합니다. !는 참인 값이면 false로, 거짓인 값이면 true로 바꿔줍니다.

제가 true, false라고 표현을 안 하고, 참인 값과 거짓인 값이라고 표현했습니다. 거짓인 값에는 '', 0, false, NaN, undefined, null, document.all이 있습니다. 이외에는 모두 참인 값입니다. 논리연산자는 true, false를 연산하는 게 아니라, 참인 값과 거짓인 값들을 연산하는 겁니다.

이제 여러 논리연산자를 조합해서 해보죠.

var a = 10;
var b = 20;
(a < b) && (a * 2 == b); // true
(a > b) || (a * 2 <= 20); // true
!(a < b); // false

(a < b)는 true(참)이고 (a * 2 == b)도 참입니다. 따라서 참 && 참이므로 true입니다. (a > b)는 false(거짓)이고 (a * 2 <= 20)은 참입니다. 거짓 || 참이므로 true입니다.

논리 연산자는 코드를 줄일 때도 자주 사용합니다. 앞으로 다음과 같은 코드를 봐도 당황하지 마세요.

var j = k && l; // k가 참인 값이면 j = l, 거짓인 값이면 j = k;
var m = n || p; // n이 참인 값이면 m = n, 거짓인 값이면 m = p;

j의 경우를 보죠. 만약 k값이 존재(true인 값)한다면 k && l에 의해 l값도 검사합니다. 그리고 l도 있으면 j는 l이 됩니다. 하지만 k가 없으면(false인 값) k && l은 false이기 때문에 j는 undefined가 됩니다. k가 false면 무조건 k && l도 false이므로 l은 검사하지도 않습니다.

m의 경우는 n이 있으면 n || p가 true가 되기 때문에 p는 검사하지도 않고 바로 m = n이 됩니다. 만약 n이 없으면 이제 p를 검사해서 m = p가 됩니다. 무슨 소린지 잘 모르겠죠? 링크에 자세히 설명되어 있습니다.

=== 비교연산자

마지막으로 소개할 연산자는 === 입니다. =가 세 개나 있네요. 이 연산자에 대해서는 할 얘기가 많습니다. 자바스크립트는 변수에 자료형(문자열, 숫자, 불린, 객체 등등)을 나타내는 부분이 없다고 했죠? var 하나뿐이라고요. 그래서 편할 것 같지만 오히려 불편한 점이 많다고 했었는데 바로 이런 경우입니다.

0 == ''
0 == false
0 == []

위의 세 개 모두 true입니다. 황당하죠? 숫자 0이 false도 되고 빈 문자열도 되고, 빈 배열도 됩니다. 자바스크립트에서 ==으로 비교연산을 할 때 자동으로 자료형을 바꿔버리고 값만 비교해서 이런 일이 일어납니다.

이런 경우를 방지하고자 자바스크립트에는 === 연산이 있습니다. 값 뿐만 아니라 자료형까지 같아야 true가 됩니다.

0 === '' // false
0 === false // false
0 === [] // false

이제 셋 다 false가 뜨네요. 자바스크립트에서 같은 값인지 비교할 때는 꼭 ===를 써야함을 잊지 마세요. ==를 쓰는 것은 추천하지 않습니다. 아, 자료형까지 다른지 비교할 때는 != 대신에 !==를 씁니다. ===와 !==를 기억하세요.

다음 시간에는 조건문에 대해서 알아보겠습니다.