세 번째 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
산술 연산자를 이용한 혼합 연산 시의 연산 순서는 다음과 같습니다.
()
**
*
/
%
+
-
앞서 기초 강의 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 논리 연산자는 양 쪽의 피연산자가 모두 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 논리 연산자는 하나 이상의 피연산자가 true
인 경우에 true
를 반환합니다. 반대로 모든 피연산자가 false
일 경우에만 false
를 반환한다고 설명할 수 있습니다.
다음은 console.log()
를 이용하여 1 < 1 + 1
관계 연산의 결과인 true
와 1 === '1'
관계 연산의 결과인 false
를 OR 연산한 결과인 true
를 출력하는 예제입니다.
console.log(1 < 1 + 1 || 1 === '1');
// true
논리 연산자에서는 다음의 순서대로 연산을 수행합니다.
&&
||
다음 예를 통하여 위 연산 순서의 유효성을 증명할 수 있습니다.
console.log(true && false || true && true || false);
// true
Mozilla 재단에서 제시하는 단항 연산자는 여러가지가 있습니다만 실질적으로 연산과 관련이 있는 단항 연산자인 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의 함수를 알아보겠습니다.
질문이 있으시면 아래 댓글을 이용해 주세요. 감사합니다.