산술 연산자

산술 연산자는 방금 예시로 든 사칙연산과 같은 연산을 할 수 있도록 해요. 덧셈, 뺄셈 등과 같은 계산을 할 수 있도록 하죠.

JS
12 + 5; // 17

JS
12 - 5; // 7

JS
12 * 5; // 60

JS
12 / 5; // 2.4

JS
12 % 5; // 2

JS
2 ** 4; // 16

JS
let x = 3; // x의 초기값: 3
msg.reply(++x); // x에 1을 더한 다음 값을 반환하므로 4를 출력합니다.

JS
let x = 3; // x의 초기값: 3
msg.reply(x++); // x의 값을 먼저 반환하므로 3을 출력합니다. ... 이제 x에 1을 더했습니다!
msg.reply(x); // 4를 반환합니다.

JS
let x = 3; // x의 초기값: 3
msg.reply(--x); // x에 1을 뺀 다음 값을 반환하므로 2를 출력합니다.

JS
let x = 3; // x의 초기값: 3
msg.reply(x--); // x의 값을 먼저 반환하므로 3을 출력합니다. ... 이제 x에 1을 뺐습니다!
msg.reply(x); // 2를 반환합니다.

JS
let x = 3;
let y = -5;
-x; // -3
-y; // 5

JS
+"3" // 3
+true // 1
+"string" // NaN

비교 연산자

비교 연산자는 두 값을 비교하고 비교 결과에 따른 부울 값을 반환해요. '두 값이 같은가?', '다른가?', '더 큰가?' 와 같은 의미를 지녀요.

JS
const n1 = 3;
const n2 = 5;
n1 == 3; // true
n1 == n2; // false
n1 == "3"; // true

JS
const n1 = 3;
const n2 = 5;
n1 != 3; // false
n1 != n2; // true
n1 != "3"; // false

JS
const n1 = 3;
const n2 = 5;
n1 === 3; // true
n1 === n2; // false
n1 === "3"; // false

JS
const n1 = 3;
const n2 = 5;
n1 === 3; // false
n1 === n2; // true
n1 === "3"; // true

JS
const n1 = 3;
const n2 = 5;
n1 > 1; // true
n1 > n2; // false
n1 > 3; // false

JS
const n1 = 3;
const n2 = 5;
n1 >= 1; // true
n1 >= n2; // false
n1 >= 3; // true

JS
const n1 = 3;
const n2 = 5;
n2 < 7; // true
n2 < n1; // false
n2 < 5; // false

JS
const n1 = 3;
const n2 = 5;
n2 <= 7; // true
n2 <= n1; // false
n2 <= 5; // true

정보

무엇이든 적절한 때에 적절한 연산자를 사용하는 것이 좋지만, 그 외의 상황에서는 두 값의 일치/불일치를 판단할 때 동등 연산자(==)보다 일치 연산자(===)를 사용하는 것을 권장합니다. 일치 연산자는 값 뿐만 아니라 자료형까지 고려하기 때문에 더 엄밀한 비교가 가능하기 때문입니다. 가령, 다음과 같은 상황을 생각해봅시다.

JS
if (x == 3) { // x의 값이 3일 경우
    x = x + 2; // x에 2를 더합니다! ..라고 생각하셨겠죠?
}

아마도 여러분들은 위 코드를 보고 x의 값이 3일 경우 x의 값은 5가 되리라 기대할 겁니다. 하지만 이 코드는 여러분들이 예상하지 못한 결과를 낳을 수도 있습니다.

JS
if (x == 3) { // x가 문자열 "3"일 경우에도 참입니다.
    x = x + 2; // 따라서 이 경우엔 x의 값은 5가 아니라 문자열 "32"가 됩니다!
}

JS는 다른 프로그래밍 언어에 비해 자료형에 대해 관대하지만, 이는 여러분이 예상하지 못한 결과로 빠질 가능성이 상대적으로 높다는 것을 의미하기도 합니다. 그렇기에 자료형까지 비교하는 동등 연산자를 권장하는 것이죠! 마찬가지의 이유로 부등 연산자(!=) 또한 불일치 연산자(!==)를 대신 사용하기를 권장합니다.

할당 연산자

할당 연산자는 왼쪽 피연산자에 오른쪽 피연산자의 값을 할당해요. 우리가 이전에 알아본 변수에서도 =를 이용해 값을 할당했었죠? = 또한 할당 연산자 중 하나예요. 이 외에도 여러 할당 연산자가 있으니 알아보도록 해요!

JS
let x = 12; // x에 12를 할당합니다. x의 값은 12입니다.
x = 5; // x에 5를 다시 할당합니다. 이제 x의 값은 5입니다!

JS
let x = 12; // x에 12를 할당합니다. x의 값은 12입니다.
x += 5; // x의 값(12)과 5를 더한 값을 할당합니다. 이제 x의 값은 17입니다!

JS
let x = 12; // x에 12를 할당합니다. x의 값은 12입니다.
x -= 5; // x의 값(12)에 5를 뺀 값을 할당합니다. 이제 x의 값은 7입니다!

JS
let x = 12; // x에 12를 할당합니다. x의 값은 12입니다.
x *= 5; // x의 값(12)에 5를 곱한 값을 할당합니다. 이제 x의 값은 60입니다!

JS
let x = 12; // x에 12를 할당합니다. x의 값은 12입니다.
x /= 5; // x의 값(12)에 5를 나눈 값을 할당합니다. 이제 x의 값은 2.4입니다!

JS
let x = 12; // x에 12를 할당합니다. x의 값은 12입니다.
x %= 5; // x의 값(12)에 5를 나눴을 때 나머지가 되는 값을 할당합니다. 이제 x의 값은 2입니다!

JS
let x = 2; // x에 2를 할당합니다. x의 값은 2입니다.
x **= 4; // x의 값(2)에 5를 거듭제곱한 값을 할당합니다. 이제 x의 값은 16입니다!

논리 연산자

논리 연산자는 '그리고', '또는', '아니다'를 연산으로 제공하며, 피연산자들의 부울(Boolean)값을 이용해요. 논리 연산자는 개수가 적지만, 이를 잘 활용하면 더 좋은 코드를 작성할 수 있어요.

JS
0 && 1; // 0 (0은 false로 볼 수 있습니다.)
1 && 2; // 1 (1은 0이 아니므로 true로 볼 수 있습니다.)
3 && ""; // "" (빈 문자열 ""는 false로 볼 수 있습니다.)

JS
0 || 1; // 1 (1은 true로 볼 수 있습니다.)
1 || 2; // 1 (1은 true로 볼 수 있습니다.)
3 || ""; // 3 (3은 true로 볼 수 있습니다.)

JS
!true // false
!0 // true
!(23 > 10) // false

하나의 케이스: if문

조건문의 기본 키워드는 if예요. if 키워드는 특정 조건을 만족할 때에만 코드를 실행하는데 사용해요. 아래의 예제를 볼까요?

JS
if (condition) { // condition이 true이면
    // 중괄호 내부의 코드를 실행
}

if문은 condition의 값이 true이면 중괄호 내부의 코드들을 실행해요. 만약 condition 자리에 10 > 2(10은 2보다 크다. 즉, true)이 들어가면 if문 내의 코드가 실행될 거예요. 반면, condition 자리에 32 < 4(32는 4보다 작다. 즉, false)이 들어가면 if문 내의 코드를 실행하지 않아요.

이제 이를 이용해 특정 메시지에만 반응하는 소스코드를 작성해볼까요?

JS
const bot = BotManager.getCurrentBot();

function onMessage(msg) {
    if (msg.content === "안녕") { // 메시지 내용이 '안녕' 이면
        msg.reply("안녕하세요!"); // '안녕하세요!' 라고 메시지 수신
    }
}
bot.addListener(Event.MESSAGE, onMessage);

function onCommand(msg) {}
bot.setCommandPrefix("@");
bot.addListener(Event.COMMAND, onCommand);

onMessage 함수 내의 코드를 수정했어요. 위 코드를 차근차근 살펴볼까요?

msg.content는 사용자가 보낸 메시지의 내용이예요. 사용자가 '안녕' 이라는 메시지를 보내면 msg.content는 안녕 이라는 문자열 값을 가지게 되죠.

=== 는 일치 연산자라는 연산자예요. A === B 라는 코드는 A와 B가 같은 값을 가지는지를 검사하죠. 만약 두 값이 같으면 true를, 같지 않으면 false를 반환해요. 즉, msg.content === "안녕"은, 사용자가 보낸 메시지의 내용이 '안녕'인가? 를 의미해요.

사용자가 보낸 메시지가 '안녕'이면 msg.content === "안녕"는 true가 되겠죠? 그러므로 카카오톡봇은 '안녕하세요!' 라는 메시지를 보내게 될 거예요.

주의

이 편의 예제 소스는 채팅을 방해하는 등 피해를 줄 수 있으므로 실제 채팅방에는 적용하지 않는 것을 권장합니다. 메신저봇 앱 내 디버깅룸에서만 테스트하세요.

if-else문

else 키워드는 주어진 조건이 거짓일 경우의 행동을 작성하기 위해 사용돼요. 일단 예제를 통해 천천히 이해해볼까요?

사용자가 보낸 메시지가 '안녕'이면 '안녕하세요!'라고 답장하고 사용자가 보낸 메시지가 '안녕'이 아니면 '메시지가 감지되었어요.'라고 답장하는 코드를 한번 작성해볼꺼예요.
논리NOT 연산자(!) 또는 불일치 연산자(!==)를 이용해 아래와 같이 작성할 수 있어요.

JS
const bot = BotManager.getCurrentBot();

function onMessage(msg) {
    if (msg.content === "안녕") { // 메시지 내용이 '안녕' 이면
        msg.reply("안녕하세요!"); // '안녕하세요!' 라고 메시지 수신
    }
    if (!(msg.content === "안녕")) { // 메시지 내용이 '안녕'이 아니면
        msg.reply("메시지가 감지되었어요."); // '메시지가 감지되었어요.' 라고 메시지 수신
    }
}
bot.addListener(Event.MESSAGE, onMessage);

function onCommand(msg) {}
bot.setCommandPrefix("@");
bot.addListener(Event.COMMAND, onCommand);

JS
const bot = BotManager.getCurrentBot();

function onMessage(msg) {
    if (msg.content === "안녕") { // 메시지 내용이 '안녕' 이면
        msg.reply("안녕하세요!"); // '안녕하세요!' 라고 메시지 수신
    }
    if (msg.content !== "안녕") { // 메시지 내용이 '안녕'이 아니면
        msg.reply("메시지가 감지되었어요."); // '메시지가 감지되었어요.' 라고 메시지 수신
    }
}
bot.addListener(Event.MESSAGE, onMessage);

function onCommand(msg) {}
bot.setCommandPrefix("@");
bot.addListener(Event.COMMAND, onCommand);

하지만 비슷한 식을 여러 번 쓰니 조금 복잡하죠? 게다가 조건이 달라지면 하나하나 수정해야 하기 때문에 코드를 관리하거나 수정할 때도 불편할 거예요. 그래서 이러한 상황에선 else 키워드가 유용할 수 있어요.

JS
const bot = BotManager.getCurrentBot();

function onMessage(msg) {
    if (msg.content === "안녕") { // 메시지 내용이 '안녕' 이면
        msg.reply("안녕하세요!"); // '안녕하세요!' 라고 메시지 수신
    }
    else { // 메시지 내용이 '안녕'이 아니면
        msg.reply("메시지가 감지되었어요."); // '메시지가 감지되었어요.' 라고 메시지 수신
    }
}
bot.addListener(Event.MESSAGE, onMessage);

function onCommand(msg) {}
bot.setCommandPrefix("@");
bot.addListener(Event.COMMAND, onCommand);

if문에 작성된 조건이 참일 경우 if의 중괄호 내의 코드들을 실행하고, 조건이 거짓일 경우 else의 중괄호 내의 코드들을 실행해요. else 키워드는 반드시 if로 시작하는 조건문의 맨 마지막에 붙어야 해요. if문에 제시된 조건이 아닐 경우를 고려하기 위한 키워드니까요!

여러 케이스: else if문

하나의 메시지에만 대응하는 카카오톡봇을 만들지는 않을 거잖아요? 예를 들면, '안녕'이라는 메시지에는 '안녕하세요!'라고 답장하고, '너는 누구니?'라는 메시지에는 '저는 카카오톡봇이예요.'라고 답장하는 코드를 작성해볼꺼예요.

JS
const bot = BotManager.getCurrentBot();

function onMessage(msg) {
    if (msg.content === "안녕") { // 메시지 내용이 '안녕' 이면
        msg.reply("안녕하세요!"); // '안녕하세요!' 라고 메시지 수신
    }
    else if (msg.content === "너는 누구니?") { // 메시지 내용이 '너는 누구니?' 이면
        msg.reply("저는 카카오톡봇이예요."); // '저는 카카오톡봇이예요.' 라고 메시지 수신
    }
}
bot.addListener(Event.MESSAGE, onMessage);

function onCommand(msg) {}
bot.setCommandPrefix("@");
bot.addListener(Event.COMMAND, onCommand);

else if 키워드는 맨 처음 if에서 제시된 조건이 거짓일 때, 추가로 조건을 검사하기 위해 사용해요. 저 예제를 이용해 설명하자면, if (msg.content === "안녕") {...}에서 제시된 조건 msg.content === "안녕"이 거짓일 경우 else if (msg.content === "너는 누구니?") {...}에서 제시된 조건 msg.content === "너는 누구니?"를 검사해요. 사용자가 보낸 메시지가 '안녕'도 아니고, '너는 누구니?'도 아니면 카카오톡봇은 아무런 행동도 하지 않겠죠?

더 많은 케이스에 대응하고 싶으면 아래와 같이 else if를 여러 개 사용하면 돼요.

JS
const bot = BotManager.getCurrentBot();

function onMessage(msg) {
    if (msg.content === "메시지1") {
        msg.reply("답장1");
    }
    else if (msg.content === "메시지2") {
        msg.reply("답장2");
    }
    else if (msg.content === "메시지3") {
        msg.reply("답장3");
    }
    else if (msg.content === "메시지4") {
        msg.reply("답장4");
    }
    // ...
}
bot.addListener(Event.MESSAGE, onMessage);

function onCommand(msg) {}
bot.setCommandPrefix("@");
bot.addListener(Event.COMMAND, onCommand);

else if문은 if로 시작하는 조건문 다음에 붙을 수 있어요. 또한, else보다 먼저 등장해야해요. 지금까지 알아본 조건문을 정리해보면 아래와 같아요.

JS
if (condition1) {
    // toDo: condition1이 true일 때의 코드
}
else if (condition2) {
    // toDo: condition1은 false, condition2은 true일 때의 코드
}
else if (condition3) {
    // toDo: condition1, condition2는 false, condition3은 true일 때의 코드
}
// ...
else if (conditionN) {
    // toDo: condition1, condition2, ..., condition(N-1)은 false, conditionN은 true일 때의 코드
}
else {
    // toDo: condition1부터 conditionN까지 모두 false일 때의 코드
}