자바스크립트 연산자 이해하기: 산술, 비교, 논리 연산자까지

 

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

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

 

산술 연산자

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

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

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);

 

위 예제에서 생성된 테이블에 CSS 스타일을 적용하려면

<style> 태그를 사용하거나 별도의 CSS 파일을 활용할 수 있습니다.

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이 나옵니다. 

 

 

비교 연산자  

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

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

 

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

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

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)을 반환합니다.

 

부등 연산자(!=)

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

 값의 자료형과 상관없이, 내용이 다른 경우 참(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 && true, false && false // false
• OR 연산자 (||) - 논리합 연산자
  • true || true // true
  • true || false, false || true // true
  • false || false // false
• NOT 연산자 (!) - 논리 부정 연산자
  • !true // false
  • !false // true

 

 

 

삼항 조건 연산자 

삼항 조건 연산자는 조건식의 결과에 따라 다른 값을 반환합니다. if문의 단축 형태로 자주 사용됩니다.

조건식? 실행문 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)

 

 

 

연산자 우선순위

연산자에도 우선순위가 있어, 여러 연산자를 사용할 때 실행 순서를 결정합니다.

연산자 우선순위는 MDN 웹 문서에서 참고할 수 있습니다.

기억이 안 날 땐 괄호를 사용해 우선순위를 명확하게 지정해주는 것도 좋은 방법입니다.

연산자 우선순위 - JavaScript | MDN