세 번째 Deno(JavaScript) 기초 강의에서는 연산자에 관하여 설명하겠습니다.

JavaScript에서는 흔하게 여겨지는 연산자 외의 것들도 연산자로서 문서에 포함하고 있습니다. 본 강의에서는 혼동을 방지하기 위하여 흔하게 여겨지는 연산자에 한하여 우선 다룰 예정입니다.

다음은 이번 강의에서 다루게 될 연산자입니다.

• 산술 연산자
• 관계 연산자
• 논리 연산자
• 단항 연산자
• 조건 연산자

산술 연산자

산술 연산자는 실수의 연산에 사용됩니다. 산술 연산자에는 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/), (나눗셈의 결과 중)나머지(%), 거듭 제곱(**)이 존재합니다.

산술 연산자의 사용법은 일반적인 사칙연산과 거의 일치합니다. 피연산자, 연산자, 피연산자의 순서로 작성되어야 하며 다음과 같이 사용될 수 있습니다.

1 + 1

산술 연산자를 사용하면 JavaScript는 식을 포함하지 않고 결과만을 반환합니다. 식을 출력하고자 한다면 JavaScript가 식을 문자로 인식할 수 있도록 다음과 같이 코드를 작성해야 합니다. 기초 강의 2에서 설명한 바와 같이 문자열은 따옴표로 감싸져야 합니다.

'1 + 1'

이제 각 산술 연산자의 사용 방법을 알아보겠습니다. 첫 강의에서 설정한 작업 환경에 각 사용 방법 설명에서 제공되는 코드를 입력하여 직접 실습해 보시는 것을 권장합니다.

산술 연산자별 설명

덧셈

+는 연산자의 좌, 우에 있는 피연산자의 합을 구하는 산술 연산자입니다.

아래 코드는 JavaScript 콘솔에 내용을 출력하는 console.log()를 이용하여 1 + 1이라는 산술 연산의 결과인 2를 출력하는 예제입니다.

console.log(1 + 1);
// 2

뺄셈

-는 연산자의 좌, 우에 있는 피연산자의 차를 구하는 산술 연산자입니다.

아래 코드는 console.log()를 이용하여 1 - 1이라는 산술 연산의 결과인 0을 출력하는 예제입니다.

console.log(1 - 1);
// 0

곱셈

*는 연산자의 좌, 우에 있는 피연산자의 곱을 구하는 산술 연산자입니다.

아래 코드는 console.log()를 이용하여 1 * 1이라는 산술 연산의 결과인 1을 출력하는 예제입니다.

console.log(1 * 1);
// 1

나눗셈

/는 연산자의 좌, 우에 있는 피연산자의 몫 + 나머지를 구하는 산술 연산자입니다.

아래 코드는 console.log()를 이용하여 2 / 1이라는 산술 연산의 결과인 2를 출력하는 예제입니다.

console.log(2 / 1);
// 2

나머지

%는 연산자의 좌, 우에 있는 피연산자를 나누었을 때의 나머지를 구하는 산술 연산자입니다.

아래 코드는 console.log()를 이용하여 3 % 2이라는 산술 연산의 결과인 1을 출력하는 예제입니다.

console.log(3 % 2);
// 1

거듭 제곱

**는 연산자의 좌, 우에 있는 피연산자의 거듭 제곱을 구하는 산술 연산자입니다.

아래 코드는 console.log()를 이용하여 2 ** 2라는 산술 연산의 결과인 4를 출력하는 예제입니다.

console.log(2 ** 2);
// 4

혼합 연산

JavaScript의 산술 연산에서는 혼합 연산과 혼합 연산을 위한 괄호의 사용을 지원합니다. 일반적인 사칙연산과 동일하게 괄호를 사용하여 혼합 연산을 수행할 수 있습니다.

아래 코드는 console.log()를 이용하여 (10 + 5) * (10 - 5)라는 산술 연산의 결과인 75를 출력하는 예제입니다.

console.log((10 + 5) * (10 - 5));
// 75

연산 순서

산술 연산자를 이용한 혼합 연산 시의 연산 순서는 다음과 같습니다.

1. 괄호()
2. 거듭 제곱**
3. 곱셈*
4. 나눗셈/
5. 나머지 구하기%
6. 덧셈+
7. 뺄셈-

증가, 감소 연산

앞서 기초 강의 2에서 변수를 배운 적이 있으므로 변수에 있는 Number 자료의 연산을 더 간결하게 수행할 수 있는 방법을 설명해 드리겠습니다.

• A++는 먼저 변수 A의 값을 반환하고 A에 1을 더하는 증가 연산과 출력을 수행합니다.
• ++A는 먼저 A에 1을 더하고 변수 A의 값을 반환하는 증가 연산과 출력을 수행합니다.
• A--는 먼저 변수 A의 값을 반환하고 A에서 1을 빼는 감소 연산과 출력을 수행합니다.
• --A는 먼저 A에서 1을 빼는 변수 A의 값을 반환하고 감소 연산과 출력을 수행합니다.

먼저 반환하고 연산을 수행하는 A++와 A--에도 출력하고 증가 연산을 한다는 표기 대신 증가 연산과 출력을 수행한다는 표기를 사용한 이유는 다음 강의에서 설명드릴 예정입니다. 이는 다음 강의에서 설명드릴 함수의 특성과 관련이 있습니다.

let a = 10;
console.log(a++);
// 10
console.log(a);
// 11

let b = 10;
console.log(++b);
// 11
console.log(b);
// 11

관계 연산자

관계 연산자는 피연산자의 관계를 보고 true 또는 false의 Boolean 데이터를 반환합니다. “1은 2보다 작다” 라는 것이 참인지 거짓인지 알아낸다는 점에서는 수학에서의 명제와도 같다고 볼 수 있습니다.

관계 연산자를 작성하는 방법은 연산자가 피연산자 사이에 위치하도록 하는 것입니다. 피연산자, 연산자, 피연산자의 순서대로 작성되어야 하며 다음과 같이 사용될 수 있습니다.

1 == 1

관계 연산자의 종류

==

==는 피연산자가 서로 같다는 명제의 참, 거짓 여부를 반환하는 관계 연산자입니다.

아래 코드는 console.log()를 이용하여 1 == 1이라는 관계 연산의 결과인 true(참)을 출력하는 예제입니다.

1 == 1은 1과 1이 서로 같다는 명제입니다.

console.log(1 == 1);
// true

===

다른 언어를 공부해 보신 분 중 누군가는 1 == '1'이라는 관계 연산의 결과가 무엇인지 확인해 보셨을 것 같습니다. 정수 1과 문자 ‘1’은 의미하는 바가 같지만 원칙적으로 컴퓨터에서는 서로 다름에도 JavaScript는 위 관계 연산의 결과를 true라고 주장합니다. 지난 시간인 기초 강의 #2에서는 JavaScript는 자료형을 명시하지 않지만 실질적으로는 존재한다고 설명드렸었는데요. ==는 자료형을 비교하지 않지만 ===는 자료에 대하여 실질적으로는 존재하는 자료형까지도 철저하게 비교합니다.

아래 코드는 console.log()를 이용하여 1 === '1'이라는 관계 연산의 결과인 false(거짓)을 출력하는 예제입니다.

1 === '1'은 정수 1과 문자 1이 서로 같다는 명제입니다.

console.log(1 === '1');
// false

!=

!=는 피연산자가 서로 다르다는 명제의 참, 거짓 여부를 반환하는 관계 연산자입니다.

아래 코드는 console.log()를 이용하여 1 != 1이라는 관계 연산의 결과인 false를 출력하는 예제입니다.

1 != 1은 1과 1은 서로 다르다는 명제입니다.

console.log(1 != 1);
// false

!==

===와 마찬가지로 자료형의 비교를 포함하여 피연산자를 비교하는 관계 연산자입니다.

아래 코드는 console.log()를 이용하여 1 !== '1'의 관계 연산의 결과인 true를 출력하는 예제입니다.

1 !== '1'은 정수 1과 문자 1이 서로 다르다는 명제입니다.

console.log(1 !== '1');
// true

<, >, <=, >=

<, >, <=, >=는 Number인 피연산자의 대소관계를 확인하는 관계 연산자입니다.

• <은 좌항보다 우항이 더 크다는(초과) 명제의 참, 거짓 여부를 반환하는데 사용되는 관계 연산자입니다.
• >은 좌항이 우항보다 더 작다는(미만) 명제의 참, 거짓 여부를 반환하는데 사용되는 관계 연산자입니다.
• <=은 좌항보다 우항이 더 크거나 같다는(이상) 명제의 참, 거짓 여부를 반환하는데 사용되는 관계 연산자입니다.
• >=은 좌항보다 우항이 더 작거나 같다는(이하) 명제의 참, 거짓 여부를 반환하는데 사용되는 관계 연산자입니다.

아래 코드는 console.log()를 이용하여 1 < 2의 관계 연산의 결과인 true를 출력하는 예제입니다.

1 < 2는 1보다 2가 더 크다는 명제입니다.

console.log(1 < 2);
// true

<=는 =<로 사용될 수 없으며 마찬가지로 >=는 =>로 사용될 수 없습니다. ===와 같이 자료형을 포함하여 비교하는 관계 연산자는 없습니다. 따라서 1 < '2'는 true입니다.

이 관계 연산자를 사용할 때 문자열을 사용하면 피연산자로 16진수의 대소관계도 확인할 수 있습니다.

논리 연산자

논리 연산자를 활용하면 피연산자가 모두 true인지(AND), 피연산자 중 하나 이상이 true인지(OR) 등을 확인할 수 있습니다.

논리 연산자 또한 산술 연산자, 관계 연산자와 마찬가지로 피연산자, 연산자, 피연산자의 순서로 다음과 같이 작성합니다.

true && true

논리 연산자의 종류

AND

AND 논리 연산자의 기호는 &&입니다. AND 논리 연산자는 양 쪽의 피연산자가 모두 true인 경우에만 true를 반환합니다. 그 외에는 모두 false를 반환합니다.

다음은 console.log()를 이용하여 1 < 2 관계 연산의 결과인 true와 2 < 3 관계 연산의 결과인 true를 AND 연산한 결과인 true를 출력하는 예제입니다.

console.log(1 < 2  && 2 < 3);
// true

AND 연산에서는 피연산자 중 하나 이상이 false인 경우 예외없이 false를 반환합니다. 다음의 예시를 참고하세요.

console.log(2 < 1 && 2 < 3);
// false

console.log(2 < 1 && 3 < 2);
// false

OR

OR 논리 연산자의 기호는 ||입니다. OR 논리 연산자는 하나 이상의 피연산자가 true인 경우에 true를 반환합니다. 반대로 모든 피연산자가 false일 경우에만 false를 반환한다고 설명할 수 있습니다.

다음은 console.log()를 이용하여 1 < 1 + 1 관계 연산의 결과인 true와 1 === '1' 관계 연산의 결과인 false를 OR 연산한 결과인 true를 출력하는 예제입니다.

console.log(1 < 1 + 1 || 1 === '1');
// true

연산 순서

논리 연산자에서는 다음의 순서대로 연산을 수행합니다.

1. AND 연산&&
2. OR 연산||

다음 예를 통하여 위 연산 순서의 유효성을 증명할 수 있습니다.

console.log(true && false || true && true || false);
// true

단항 연산자

Mozilla 재단에서 제시하는 단항 연산자는 여러가지가 있습니다만 실질적으로 연산과 관련이 있는 단항 연산자인 NOT에 대해서만 설명하겠습니다. 그 외 단항 연산자는 나중에 설명드릴 예정입니다.

단항 연산자는 하나의 피연산자만을 다룹니다.

NOT

NOT 단항 연산자는 주어진 Boolean에 속하는 피연산자를 true에서 false로, false에서 true로 바꿉니다. 연산자의 이름과 같이 논리학에서의 부정과 같은 개념입니다.

다음은 console.log()를 이용하여 1 < 5 관계 연산의 결과인 true에 부정을 취하여 false를 출력하는 예제입니다.

console.log(!(1 < 5));
// false

다른 연산자와 함께 사용할 때는 먼저 수행되어야 하는 연산 식을 괄호로 감싼 다음 NOT 단항 연산자를 사용해야 합니다. 괄호를 사용하지 않고 !1 < 5라는 식을 작성하면 컴퓨터는 !1을 1의 부정인 0으로 해석하므로 0은 5보다 더 작다고 해석하여 true라는 결과를 반환합니다.

조건 연산자

조건 연산자는 주어진 명제가 참일 경우와 거짓일 경우에 대하여 각각 정해진 값을 반환합니다.

조건 연산자는 다음과 같은 형태로 작성할 수 있습니다.

1 < 2 ? '맞아요' : '틀려요'
// <명제> ? <참일 경우> : <거짓일 경우>

다음은 console.log()를 이용하여 1 < 5 && 5 < 2 || 1 === 1라는 명제가 참일 경우 ‘맞아요’ 라고, 거짓일 경우 ‘틀려요’ 라고 출력하도록 설정하고 주어진 명제가 참이므로 최종적으로 ‘맞아요’ 라고 출력하는 예제입니다.

console.log(1 < 5 && 5 < 2 || 1 === 1 ? '맞아요' : '틀려요');
// 맞아요

혼합 연산

연산자를 이용한 모든 식은 혼합하여 연산할 수 있습니다.

쉬운 이해를 돕기 위하여 설명 대신 몇 가지 예시를 제시하여 드리니 참고하시기 바랍니다.

console.log((1 < 10 || 1 < 2 && 5 < 2 && 10 < 15) && true || false ? '맞아요' : '틀려요');
// 맞아요

console.log(
    16 <= (2 + 2) ** 2
    || '내 이름은?' === '홍길동'
    || '내 나이는?' === 20
);
// true(코드의 가독성을 향상시키기 위하여 여러 줄로도 작성할 수 있습니다.)
// OR 논리 연산자로 나눠진 세 명제 중 첫 번째 명제가 true이므로 결과는 true

연산 결과의 저장

모든 연산 결과는 변수에 저장할 수 있습니다.

쉬운 이해를 돕기 위하여 설명 대신 몇 가지 예시를 제시하여 드리니 참고하시기 바랍니다.

let now = 2020;

const birthYear = 1900;

const ageAdditionPerYear = 1;

let nowAge = (now - birthYear + 1) * ageAdditionPerYear;

console.log(nowAge);
// 121

위 코드는 현재 년도, 태어난 년도, 1년이 지날 때마다 늘어나는 나이의 수를 입력받고 한국식 세는 나이로 현재 몇 살인지 출력합니다.

다음 강의 예고

다음 강의에서는 JavaScript ES6의 함수를 알아보겠습니다.

질문이 있으시면 아래 댓글을 이용해 주세요. 감사합니다.