JavaScript 기본개념(2) 연산자의 종류

JavScript의 기본개념인 연산자의 종류를 알아볼텐데요. 연산자를 표로 정리하기보다, 실제로 연산자를 어떻게 사용하는지에 대해서 작성해보도록 하겠습니다.

서론

연산자의  종류에 대해서

연산자의 종류에는 산술 연산자(+할당연산자) 연결 연산자 논리 연산자가 있는데요. 사실 우리가 스크립트에서 많이 사용하는 것은 할당연산자 부분과 연결 연산자가 아닌가 싶습니다. 아, 물론 학원 수업의 일부분을 보았을 때 말이죠. 그래서 가장 헷갈리는 부분인 '연산자'를 정리해보기로 했습니다.

 

일단 자바에서도 그렇듯, 연산자를 사용하기 전에, 우리는 값을 할당해야하는데요. 상수는 최초 선언 시 값을 할당해놓습니다.

본론

1. 문자열 연산자

문자열연산자는 문자열을 연결할 때 사용하는 연산자로, 두 문자열의 값을 서로 연결한 새로운 문자열을 반환해줍니다.
console.log("'my' + 'cat' = " + 'my' + 'cat');
console.log("'5' + 2 = " + '5' + 2);
console.log('string literals: 1 + 2 = ' + (1 + 2));
console.log('string literals: 1 + 2 = ${1 + 2}');
console.log(`string literals: 1 + 2 = ${1 + 2}`); // ${ ~ }를 사용하려면 `(그레이브)를 써야한다.
console.log('=================================');

 

2. 산술 연산자

 '+'를 제외한 나머지 산술 연산자(-, *, /, %)는 문자와 숫자를 연산하면 숫자로 계산한다.
console.log("'5' + 2 = " + '5' + 2); // 덧셈은 문자열 연결
console.log("'5' + 2 = " + (parseInt('5') + 2)); // parseInt() => 정수화 함수
console.log("'5' - 2 = " + '5' - 2); // NaN
console.log("'5' - 2 = " + ('5' - 2)); // 2
console.log("'5' * 2 = " + '5' * 2); // 10
console.log("'5' / 2 = " + '5' / 2); // 2.5, 정수와 정수의 연산도 결과는 실수가 나온다.
console.log("'5' / 2 = " + Math.ceil('5' / 2)); // ceil() => 올림 함수
console.log("'5' / 2 = " + Math.floor('5' / 2)); // floor() => 내림 함수
console.log("'5' / 2 = " + Math.round('5' / 2)); // round() => 반올림 함수
console.log("'5' / 2 = " + parseInt('5' / 2));
console.log("'5' % 2 = " + '5' % 2); // 1
console.log("'5' ** 2 = " + '5' ** 2); // 25
console.log("'5' ** 2 = " + Math.pow('5', 2)); // pow() => 거듭제곱 함수

3. 증감 연산자

let counter = 2;

const preIncrement = ++counter;
console.log(`preIncrement: ${preIncrement}, counter: ${counter}`);
const postIncrement = counter++;
console.log(`postIncrement: ${postIncrement}, counter: ${counter}`);
console.log('=================================');

4. 관계 연산자

관계 연산자는 피연산자를 서로 비교하고, 비교 결과가 참인지에 따라서 불리언 값을 반환해주는 연산자입니다.

 

console.log(`10 < '6' = ${10 < '6'}`);
console.log(`10 <= '6' = ${10 <= '6'}`);
console.log(`10 > '6' = ${10 > '6'}`);
console.log(`10 >= '6' = ${10 >= '6'}`);
console.log(`10 == '6' = ${10 == '6'}`);
console.log(`10 != '6' = ${10 != '6'}`);
console.log('=================================');

5. 대입 연산자

let x = 6;
let y = 3;
console.log(`x += y => x: ${x += y}`);
console.log(`x -= y => x: ${x -= y}`);
console.log(`x *= y => x: ${x *= y}`);
console.log(`x /= y => x: ${x /= y}`);
console.log(`x %= y => x: ${x %= y}`);
console.log('=================================');

자바스크립트는 비교를 할 때 "==" "!=" 는 데이터타입을 구별하지 않고 값만 비교함.
'===' 과 '!==' 데이터 타입 및 값을 비교합니다.
console.log(`10 == 10 = ${10 == 10}`);
console.log(`10 == '10' = ${10 == '10'}`);
console.log(`10 === '10' = ${10 === '10'}`);
console.log('=================================');

6. 논리 연산자

논리연산자는 보통, 불리언 값과 함께 사용하게 됩니다. 아래의 표를 참고해주세요

[표]
console.log(`true && true = ${true && true}`);
console.log(`true && false = ${true && false}`);
console.log(`false && true = ${false && true}`);
console.log(`false && false = ${false && false}`);

console.log(`true || true = ${true || true}`);
console.log(`true || false = ${true || false}`);
console.log(`false || true = ${false || true}`);
console.log(`false || false = ${false || false}`);

console.log(`!false = ${!false}`);

7. 그 외의 정보

자바 스크립트도 0을 제외한 모든 숫자를 true로 인식합니다. 그리고 0은 모두 거짓으로 취급합니다.
console.log(`!1 = ${!1}`);
console.log(`!0 = ${!0}`);
console.log(`!!3 = ${!!3}`);