[Javascript] 쉽게 공부하는 자바스크립트 연산자(operator)

HTML과 자바스크립트의 차이점은 연산능력에 있습니다. 수학에서 덧셈, 뺄셈, 곱셈, 나눗셈과 같이 컴퓨터에서도 연산자(operator)를 통해 연산 작업이 가능합니다. 자바스크립트 프로그래밍에서는 산술, 문자 결합, 대입(복합 대입), 증감, 비교, 논리, 삼항 조건 연산자를 사용하여 연산 작업을 합니다. 

 

수학에서 연산할 때, 예를 들어 '5-(2+1)=2'와 같이 괄호 안의 연산을 먼저 해주는 것처럼, 자바스크립트에서도 연산을 할 때 우선순위를 고려하여 연산을 합니다. 연산자 종류에 대해 알아보기 전에 먼저 '연산자 우선순위'에 대해 알아보겠습니다.

 

* 연산자 우선순위

 

1. ( )

2. 단항 연산자 ( --, ++, !)

3. 산술 연산자 (*, /, %, +, -)

4. 비교 연산자 (>, >=, <, <=, ==, ===, !==, !=)

5. 논리 연산자 ( &&, || )

6. 대입(복합 대입) 연산자 (=, +=, -+, *=, /=, %= )

 

 

 

다음으로 연산자의 종류에 대해 알아보겠습니다.

 

 

---

 

 

 

1. 산술 연산자

산술 연산자에는 +(더하기), -(빼기), *(곱하기), /(나누기), %(나머지)가 있습니다.

종류	기본형	설명
+	a+b	더하기
-	a-b	빼기
*	a*b	곱하기
/	a/b	나누기
%	a%b	나머지

 

수학에서는 퍼센트라는 단위로 쓰이던 %라는 연산자가 보입니다. 이 연산자는 두 개의 수를 나눈 나머지를 구할 때 쓰는데요, %는 몫이 정수일 때까지 나누고 나서 남은 나머지를 구합니다.

%는 주로 순환식 로직이 필요할 때 쓰입니다.

a= 0~100까지 바뀔 때

0에서 100까지 네가지 동작만 일어나야 하는 경우,

a%4 의 값이

0일때 = A동작

1일때 = B동작

2일때 = C동작

3일때 = D동작

이렇게 정해진 패턴대로 값이 규칙적으로 나와야하면 %가 쓰일 수 있습니다.

 

산술 연산자 외의 기능들

+는 더하기 기능을 하는 산술연산자 말고도 연결 연산자로 쓰입니다.

-는 부호반전 기능이 있습니다. 예를들어, -(+5)는 -5가 되고, -(-5)는 +5가 됩니다.

*는 곱하기 외에 all(모두)라는 뜻도 있습니다. 다른 언어에서도 *는 곱하기 라는 의미와 '모든'이라는 의미로 주로 쓰입니다. 예를 들어 css에서 *{margin: 0; padding:0} 이라고 했다면 모든 태그의 마진과 태그를 없애달라는 뜻이죠. *txt 는 txt확장자를 가진 모든 파일 을 의미합니다.

 

 

 

2. 문자 결합 연산자

문자 결합 연산자는 여러 개의 문자를 하나의 문자형 데이터로 결합할 때 사용합니다.

대부분의 언어에 연결해주는 연결 연산자가 있습니다. php에서는 '.'이 그 역할을 합니다. 자바스크립트에선 '+'가 그 역할을 해줍니다. 

js에서 "점수 :"+ score +"점" 라고 표현하는 것을

php에서는 "점수 :".$score."점" 이라고 씁니다. (php에서는 변수 선언을 $(달러)로 합니다. 실제로 php 배워보면 자바스크립트와 너무너무 비슷합니다.)

*연결 연산자

+ : 연산자의 좌변과 우변의 값이 산술 연산이 불가능한 경우 두 개의 값을 이어주는 연산자.

 

ex) 1+2+3 에서 +는 산술 연산이 가능하므로 "산술 연산자"

     "a"+1 = a1  의 경우 두 개의 값을 연결하는 "연결 연산자"로 쓰임.

문자형 데이터 + 문자형 데이터 = 하나의 문자형 데이터
예) "hi new " + "world" = "hi new world";

문자형 데이터 + 숫자형 데이터 = 하나의 문자형 데이터
예) "1" + 2 = "12";

 

3. 대입 연산자

대입 연산자(=)는 연산된 데이터를 변수에 저장할 때 사용합니다. 

복합 대입 연산자(+=, -=, *=, /=, %=)는 산술 연산자와 대입 연산자가 복합적으로 적용된 것을 말합니다.

 

종류	풀이
a = b	a = b
a += b	a = a+b
a *= b	a = a*b
a /= b	a = a/b
a %= b	a = a%b

 

4. 증감 연산자

증감 연산자에는 숫자형 데이터를 1씩 증가시키는 증가 연산자(++)와 반대로 1씩 감소시키는 감소 연산자(--)가 있습니다. 증감연산자는 피연산자가 한 개만 필요한 단항 연산자 입니다. 

1) 변수의 값을 1만큼 감소시키기
변수--; 
또는 --변수;

2) 변수의 값을 1만큼 증가시키기
변수++;
또는 ++변수;

여기서 주의해야할 점은 증감 연산자는 변수의 어느 위치에 오는가에 따라 결과값이 달라진다는 것입니다.

var num = 10;
var result;

result = num++;
document.write(result, "<br>");

result = ++num;
document.write(result, "<br>");

<결과 화면>

 

 

 

5. 비교 연산자

두 데이터를 '크다, 작다, 같다'와 같이 비교할 때 사용하는 연산자 입니다. 

 

종류	설명	비고
a > b	a가 b보다 크다.
a < b	a가 b보다 작다.
a >= b	a가 b보다 크거나 같다.
a <= b	a가 b보다 작거나 같다.
a == b	a와 b는 같다.	숫자를 비교할 경우자료형(type)은 숫자형이든 문자형이든 상관하지 않고 표기된 숫자만 일치하면 true를 반환합니다. 가령, 숫자형 10과 문자형 "10"은 같은 것으로 인식되어 true를 반환합니다.
a != b	a와 b는 다르다.	숫자를 비교할 경우 자료형은 숫자형이든 문자형이든 상관하지 않고 표기된 숫자만 다르면 true를 반환합니다. 가령, 숫자형 10과 문자형 "10"은 같은 것으로 인식되어 a!=b에 대해 false를 반환합니다.
a === b	a와 b는 같다.	숫자를 비교할 경우 반드시 표기된 숫자와 자료형도 일치해야만 true를 반환합니다. 10과 "10"을 비교했을 경우 표기된 숫자는 같지만 하나는 숫자형 10이고 하나는 문자형 "10"이므로 false를 반환합니다.
a !== b	a와 b는 다르다.	숫자를 비교할 경우 반드시 표기된 숫자 또는 자료형이 일치하지 않을 때 true를 반환합니다. 가령, 10과 "10"을 비교했을 경우 표기된 숫자는 같지만 하나는 숫자형 10이고 하나는 문자형 "10"이므로 이때는 true를 반환합니다.

 

여기서 주의해야 할 점은 =< 와 =>는 비교연산자 같아 보이지만 아니라는 사실입니다. 프로그래밍 언어에서는 너무 사소한 실수, 기호 때문에 실행이 안될 수도 있기 때문에 자만은 금물! 아는 것도 한번 더 깊이 있게 공부해야 합니다. 비교연산자를 쓸 때 '크거나 같다', '작거나 같다'를 표시할 경우 반드시 등호를 뒤에 붙이도록 합니다.

 

 

6. 논리 연산자

논리 연산자는 피연산자가 논리형 데이터인 true 또는 false로 결과값을 반환합니다. 

 

종류	설명
||	or 연산자라고 부르며, 피연산자 중 값이 하나라도 true가 존재하면 true로 결과값을 반환합니다.
&&	and 연산자라고 부르며, 피연산자 중 값이 하나라도 false가 존재하면 false로 결과값을 반환합니다.
!	not 연산자라고 부르며, 단항 연산자입니다. 피연산자의 값이 true이면 반대로 false로 결과값을 반환합니다.

 

 

7. 삼항 조건 연산자

삼항 조건 연산자는 조건식(true 또는 false의 결과값을 반환)의 결과에 따라 실행 결과가 달라지는 삼항 연산자입니다. 삼항 조건 연산자는 연산한 결과 조건식에 만족 여부에 따라 실행하는 코드를 다르게 실행하고자 할 때 사용합니다. 연산을 위해서는 피연산자가 3개 필요합니다. 

조건식 ? 자바스크립트 코드1 : 자바스크립트 코드2;
예) 
var a = 10;
var b = 3;

var result = a>b ? "javascript" : "oh";
document.write(result); 

결과) a는 b보다 크다는 true이므로 "javascript"가 result에 저장됩니다.

javascript

 

 

 

 

 

 

 

 

여기까지 자바스크립트의 연산자(operator)에 대해 공부해보았습니다.

 

 

자바스크립트에 대한 공부이지만 기본적으로 웹 프로그래밍 언어는 원리가 똑같아서 하나를 잘 이해하면 다른 언어를 공부할 때에도 굉장히 도움이 됩니다. 언어마다 할 수 있는 일이 다르고, 표현상의 차이가 있을 뿐이죠. 특히 자바스크립트와 php는 싱크가 95%라고 해도 과언이 아닐 정도여서 자바스크립트를 배운 뒤 php를 공부해도 할만 합니다.