자바스크립트의 핵심 연산자 이해하기

안녕하세요 찐망고입니다.

오늘은 자바스크립트의 연산자에 대해서 포스팅하도록 하겠습니다.

 

산술 연산자

자바스크립트의 산술 연산자에는 표준 산술 연산자(덧셈, 뺄셈, 곱셈, 나눗셈)가 있습니다.

수학에서 배웠던 것처럼 숫자형 값을 계산할 수 있습니다.

20 + 10; // 30
20 - 10; // 10
20 * 10; // 200
20 / 10; // 2

let subject = 'javascript';
let score = 100;
console.log(subject + '과목 성적은 ' + score + '점 입니다.');
// javascript 과목 성적은 100점 입니다.

let cal = 3 - 5 * 6 / 2 + 3;
console.log(cal) // -9

덧셈(+) 연산자인 경우에만 문자형에도 사용 가능 하며, 이때는 두개이상의 문자열을 이어 붙일 수 있습니다.

문자형과 숫자형을 덧셈(+)연산자 사용 시 문자형 데이터 타입으로 변경됩니다.

let num = 10;
let str = '10';
let result = num + str;
console.log(result, typeof result); // 1010 string

 

대입 연산자 (산술 등호 연산)

산술 연산자에 = 연산자를 함께 사용하는 산술 등호 연산도 가능합니다.

var x = 10;
x += 5; // x = x + 5
x *= 2; // x = x * 2
console.log(x); // 30
var y = 10;
y -= 5; // y = y - 5
y /= 5; // y = y / 5
console.log(y); // 1

let table = "<table>"
    table += "<tr>"
    table += "<td>javascript</td><td>jQuery</td>"
    table += "</tr>"
    table += "</table>"

console.log(table); 
// <table><tr><td>javascript</td><td>jQuery</td></tr></table>
document.write(table);

table { width: 100%; }
table, td { border: 1px solid darkmagenta; }
td { padding: 10px; }

1줄 2칸 테이블

 

 

증감 연산자 (증가 연산자, 감소 연산자)

let num1 = 10;
let result1 = ++num1; //전치연산자
console.log(result1, num1); // 11, 11

let num2 = 10;
let result2 = num2++; //후치연산자
console.log(result2, num2); // 10, 11

증감 연산자는  ++연산자(증가)와 --연산자(감소)로 나뉩니다.

++num1은 result1 = num1 + 1로 연산되고,

10 + 1의 결과로 11을 봔환하여 result1에 할당됩니다. 

반대로 num2++은 result2 = num2을 대입한 후에 num2 + 1로 연산됩니다.

그래서 결과가 num2을 대입한 값인 10과, num2 + 1인 11이 나옵니다. 

 

비교 연산자  

const comp1 = (5 > 5);
console.log(comp1); // false
const comp2 = (5 >= 5);
console.log(comp2); // true
const comp3 = (5 == 5);
console.log(comp3); // true
const comp4 = (5 == '5');
console.log(comp4); // true
const comp5 = (5 === '5');
console.log(comp5); // false
const comp6 = (5 != '5');
console.log(comp6); // false
const comp7 = (5 !== '5');
console.log(comp7); // true
const comp8 = (5 != 5);
console.log(comp8); // false

비교 연산자는 두 개의 값을 비교하여 true와 false의 결괏값을 반환합니다.

비교 연산자의 종류는 값이 동등한 지 비교하는 일치 연산자와 값의 관계를 비교하는 관계 연산자가 있습니다.

일치 연산자는 값의 일치 여부를 확인하며,

종류에는 동등 연산자(==), 부등 연산자(!=), 일치 연산자(===)와 불일치 연산자(!==)가 있습니다.

 

동등 연산자(==)

 비교 대상 값의 자료형이 서로 다르면 강제로 형을 바꾼 뒤에 비교합니다.

 값의 자료형과 상관없이, 내용이 같은 경우 참(true)을 반환합니다.

 

부등 연산자(!=)

 동등 연산자와 마 친가지로 비교 대상 값의 자료형이 서로 다르면 강제로 형을 바꾼 뒤에 비교합니다.

 값의 자료형과 상관없이, 내용이 다른 경우 참(true)을 반환합니다.

 

일치 연산자(===)

 값의 내용을 비교하면 것뿐만 아니라, 자료형까지 일치하는지 비교합니다.

 자료형을 임의로 변환하지 않습니다. 

 

불일치 연산자(!==)

값의 불일치 여부를 확인하는 연산자입니다.

같은 자료형에서 값의 내용이 다르거나 다른 자료형인 경우 참(true)을 반환합니다.

 

관계 연산자는 두 개의 값 간의 크기 비교를 통해 관계를 확인하는 연산자입니다.

산술식에서 사용되는 비교 연산자와 동일한 의미로 이해하면 쉽게 접근할 수 있습니다.

 

 

논리 연산자 

논리 연산자는 어떠한 명제에 대한 논리적인 판단을 내리는 연산자입니다.

참 또는 거짓의 값을 받아 논리적 연산의 결과로 true, false를 반환합니다.

연산자 종류로는 AND연산자 &&, OR연산자 ||, NOT연산자! 가 있고 결괏값을 true, false로 반환합니다.

let logic1, logic2, logic3, logic4;

logic1 = (3 > 2) && (5 < 3)
console.log(logic1) // false

logic2 = (3 > 2) || (5 < 3)
console.log(logic2) // true

logic3 = !(3 > 2);
console.log(logic3) // false

logic4 = !(3 < 2);
console.log(logic4) // true

AND연산자 (&&) - 논리곱 연산자

 - true && true  // true

 - true && false, false && false, false && true // false

 

OR연산자 (||) - 논리합 연산자

 - true || true  // true

 - true || false, false || true // true

 - false || false // false

 

NOT연산자 (!) - 논리 부정 연산자

 -! true  // false

 -! false  // true

 

 

삼항 조건 연산자 

삼항 조건 연산자는 JavaScript에서 세 개의 피연산자를 취할 수 있는 유일한 연산자입니다.

조건식? 실행문 1 : 실행문 2;

조건식이 true인 경우 실행문 1이 false인 경우 실행문 2가 실행되고, 보통 if문의 단축 형태로 쓰입니다.

var num = -10;
var result = num > 0 ? '양수' : '음수'; // -10 > 0 false
console.log(result) // 음수  

var age = 26;
var beverage = (age >= 20) ? '술' : "우유"; // 26 >= 20 true
console.log(beverage); // 술

let userH = prompt('당신의 키는?', '');
let userW = prompt('당신의 몸무게는?', '');
// 적정체중 = (본인신장 - 100) * 0.9;
let normalW = (userH - 100) * 0.9; // 적정체중

let result1 = normalW <  userW ? '몸무게가 초과' : '몸무게가 미달';
document.write(result1);
console.log(normalW < userW)

 

 

마지막으로 연산자끼리는 우선순위가 있어요.

연산자를 하나만 쓰는 경우도 있지만 여러 연산자를 섞어서 사용하는 경우도 많거든요.

그래서 연산자에도 우선순위를 매겨 연산자의 실행 순서를 지정해야 합니다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

연산자 우선순위 - JavaScript | MDN

뭐... 제 머리로는 저걸 다 외울 순 없고..

필요한 상황에 따라 기억이 안 나면 우리 괄호로 묶어버리기로 해요..^^