Javascript 문법 요약 정리 (2편. 연산자)

안녕하세요, 왕초보 코린이를 위한 코딩유치원에 오신 것을 환영합니다.

 

 

오늘 부터는 항상 다뤄오던 파이썬을 잠시 미뤄두고, 자바스크립트를 빠르게 공부해보려합니다. 빠른 시간 안에 최대한 핵심만 짚고 넘어가는 식으로 정리하였으며, 왕초보를 위한 Javascript 관련 글은 다음에 여유가 될 때 꼭 쓰도록 하겠습니다.

 

공부는 TCP스쿨의 JavaScript 글을 참고하여 진행하였으니, 세부적인 내용을 알고 싶으시면 TCP 스쿨을 참고해주세요.

 

2021.03.21 - [코딩 공부 사이트] - [코딩유치원] 파이썬 독학으로 공부할 때 유용한 사이트 5가지

 

 

<자바스크립트 관련 글>

 

2021.04.21 - [웹 개발/프론트앤드] - Javascript 문법 요약정리 (1편. 자료형과 기초 문법)

2021.04.22 - [웹 개발/프론트앤드] - Javascript 문법 요약 정리 (2편. 연산자)

2021.04.23 - [웹 개발/프론트앤드] - Javascript 문법 요약 정리 (3편. 제어문_if/switch/while/for 문)

 

---

 

주요 연산자

 

산술 연산자(arithmetic operator)

 

가장 기본적인 연산자입니다.

 

부호	기능
+	더하기
-	빼기
*	곱하기
/	나누기
%	나눈 후 나머지 반환

 

 

대입 연산자(assignment operator)

 

대입 연산자는 변수에 값을 대입할 때 사용하는 연산자며, 앞에서 배운 산술 연산자와 함께 사용하면 아래와 같은 기능을 합니다.

 

부호	기능
=	대입
+=	더하여 대입
-=	빼서 대입
*=	곱하여 대입
/=	나누어 대입
%=	나눈 후 나온 나머지를 대입

 

var a = 10, b = 10

a -= 5; // a = a - 5와 같음

b =- 5; // b = -5와 같음

 

증감 연산자(increment and decrement operator)

 

증감 연산자는 변수의 값을 1씩 증가 혹은 감소시킬 때 사용합니다.

증감 연산자는 변수의 왼쪽에 있는지, 오른쪽에 있는지에 따라서 그 기능이 달라집니다.

 

부호	기능
++x	먼저 x의 값을 1 증가시킨 후에 연산
x++	먼저 연산 후, x의 값을 1 증가시킴
--x	먼저 x의 값을 1 감소시킨 후에 연산
x--	먼저 연산 후, x의 값을 1 감소시킴

 

아래의 코드가 모두 실행된 후, 각 변수들에 어떤 값이 들어가있는지 보면서 증감 연산자를 이해해봅시다.

 

var a = 5, b = 5
var c,d

c = ++a + 2
d = 2 + b++

<최종적으로 각 변수에 들어가 있는 값>
a = 6
b = 6
c = 8
d = 7

 

3번째 줄의 코드를 보시면 a를 2와 더해주기 전에 1 증가 시켜서 6으로 만든 후, 계산을 진행하여 c에는 8이 대입됩니다.

반면에, 4번째 줄의 코드를 보시면 먼저 계산을 해서 2+5의 값인 7을 d에 대입한 후, b의 값을 1증가 시켜서 6으로 만들어줍니다.

 

비교 연산자(comparison operator)

 

비교 연산자는 두 값의 상대적인 크기를 판단하여, 참(true)과 거짓(false)을 반환합니다.

문자열의 경우엔 크기 비교를 알파벳 순서(a가 b보다 작음)로 한다고 하네요. 그리고 두 값의 자료형이 다르면 무조건 False를 돌려줍니다.

 

부호	기능
==	값이 같으면 True
===	왼쪽 값과 오른쪽 값이 같고, 같은 타입이면 True
!=	값이 같지 않으면 True
!==	왼쪽 값과 오른쪽 값이 같지 않거나, 다른 타입이면 True
>	왼쪽 값이 오른쪽 값보다 크면 True
>=	왼쪽 값이 오른쪽 값보다 크거나 같으면 True
<	왼쪽 값이 오른쪽 값보다 작으면 True
<=	왼쪽 값이 오른쪽 값보다 작거나 같으면 True

 

논리 연산자(logical operator)

 

논리 연산자는 주어진 논리식을 판단하여, 참(true)과 거짓(false)을 반환합니다.

참고로 OR 연산자인 | 는 엔터키 위쪽에 위치합니다. Shift + \(역슬래쉬)로 입력가능한 점 참고하세요.

 

부호	기능
&&	논리식이 모두 참이면 참을 반환함. (논리 AND 연산)
||	논리식 중에서 하나라도 참이면 참을 반환함. (논리 OR 연산)
!	논리식의 결과가 참이면 거짓을, 거짓이면 참을 반환함. (논리 NOT 연산)

 

아래의 표를 참고하셔서 각 연산자들에 따라 리턴되는 값이 무엇인지 보시면 이해가 쉬우실겁니다.

 

A	B	A&&B	A||B	!A
true	true	true	true	false
true	false	false	true	false
false	true	false	true	true
false	false	false	false	true

 

비트 연산자(bitwise operator)

 

비트 연산자는 논리 연산자와 비슷하지만, 비트(bit) 단위로 논리 연산을 수행합니다. 또한, 비트 단위로 전체 비트를 왼쪽이나 오른쪽으로 이동시킬 때도 사용합니다.

 

1Byte는 8bit를 뜻하며, 아래와 같이 8개의 0/1로 구성되어 있는 자료형을 말합니다. 여기서 말하는 비트 연산자는 비트끼리 논리 연산을 수행하는 것을 말합니다. 이 0/1로 표현하는 방식을 이진법이라고 하는데, 오른쪽 끝부터 2의 0승, 2의 1승, 2의 2승으로 올라갑니다.

 

예를 들어 아래의 이진수는 2의 3승인 8과 2의 2승인 4가 더해져서 10진수로 12를 뜻합니다.

 

0

0

0

0

1

1

0

0

 

부호	기능
&	대응되는 비트가 모두 1이면 1을 반환함. (비트 AND 연산)
|	대응되는 비트 중에서 하나라도 1이면 1을 반환함. (비트 OR 연산)
^	대응되는 비트가 서로 다르면 1을 반환함. (비트 XOR 연산)
~	비트를 1이면 0으로, 0이면 1로 반전시킴. (비트 NOT 연산)
<<	지정한 수만큼 비트를 전부 왼쪽으로 이동시킴. (left shift 연산)    ex) << 2
>>	부호를 유지하면서 지정한 수만큼 비트를 전부 오른쪽으로 이동시킴. (right shift 연산)    ex) >>1
>>>	지정한 수만큼 비트를 전부 오른쪽으로 이동시키며, 새로운 비트는 전부 0이 됨.

 

---

 

기타 연산자

 

삼항 연산자

 

물음표(?) 앞의 표현식에 따라 결괏값이 참이면 반환값1을 반환하고, 결괏값이 거짓이면 반환값2를 반환합니다.

 

// 삼항 연산자 문법
표현식 ? 반환값1 : 반환값2

//예시
var x = 3, y = 5;

var result = (x > y) ? x : y   // x가 더 크면 x를, 그렇지 않으면 y를 반환함.

 

삼항 연산자는 짧은 if / else 문 대신 사용할 수 있으며, 코드를 간결하게 만들어 준다고 합니다.

왠지 코딩테스트에 잘 사용하면 좋을 것 같은 느낌이 드네요.

 

 

쉼표 연산자

 

쉼표 연산자를 for 문에서 사용하면, 루프마다 여러 변수를 동시에 갱신할 수 있습니다.

예제 코드에 아직 배우지 못한 개념들이 많으니 느낌만 알고 넘어가도록 하겠습니다.

 

// 루프마다 i의 값은 1씩 증가하고, 동시에 j의 값은 1씩 감소함.

for (var i = 0, j = 9; i <= j; i++, j--) {

    document.write("i의 값은 " + i + "이고, j의 값은 " + j + "입니다.<br>");

}

 

 

typeof 연산자

 

이 연산자는 변수의 type을 확인하는 연산자입니다.

 

값	typeof 결과값
숫자, NaN	"number"
문자열	"string"
true, false	"boolean"
null	"object"
undefined	"undefined"
함수	"function"
함수가 아닌 객체	"object"

 

---

다음 시간에는 모든 프로그래밍 언어에 존재하는 제어문에 대해서 공부해보겟습니다.

자바스크립트의 for문, if/else문, while문은 어떨지 기대가 되네요.