본문 바로가기

Javascript/Javascript초급

연산자 기초

반응형

자바스크립트의 연산자는 크게 5가지 타입의 연산자로 구분합니다.

산술, 비교, 논리, 삼항, 비트 연산자 5가이며, 비트 연산자를 제외한 나머지 4가지는 기초 중의 기초이므로 꼭 상세 부분까지 알아두는 것이 좋습니다.




산술 연산자


더하기(+), 빼기(-), 곱하기(*), 나누기(/) 의 사칙 연산을 하는 연산자를 말합니다.

문자열의 경의 더하기 연산자를 사용할 수 있습니다.


그 외에 나머지(%), 제곱(**), 음수/양수(-/+), 증가/감소(++/--) 연산자가 있습니다.


증가/감소 연산자는 숫자 변수의 값을 1 증가, 또는 1 감소합니다.

증가/감소 연산자는 변수 앞과 뒤에 모두 붙여 사용할 수 있습니다.

단, 앞에 붙이냐 뒤에 붙이냐에 따라 의미가 조금 다르게 사용되므로 사용할 때 개념을 정확히 알고 사용해야 합니다.


앞에 불일 경우 1 증가/감소 후(선 적용) 변수가 포함된 연산식에 적용됩니다. 출력문에도 동일하게 적용됩니다.

뒤에 붙일 경우 포함된 연산식의 실행이 완료된 후 1 증가/감소(후 적용)가 됩니다.


let x = 1;
console.log(x++); // 1 출력 후 1 증가
console.log(++x); // 1 증가 후 3출력
console.log(x); // 3 출력





사칙 연산자는 등호와 결합해 산술 등호 연산자(+=, *=, -=, /=)로 사용할 수 있습니다.

사칙 연산자는 반드시 등호 앞에 와야 합니다. 

사칙 연산자가 등호 뒤에 오면, 사칙 연산자는 무시되고 등호만 적용됩니다.

에러는 발생하지 않습니다.


x += 3 => x = x + 3


으로 풀어서 사용하는 것과 같습니다.



비교 연산자


두개의 값을 비교해 값이 같은지, 또는 크거나 같은지를 비교합니다.

같은지를 비교하는 일치 연산자, 크거나 작은지를 비교하는 관계 연산자로 구분합니다.


값이 같은지를 비교하는 일치 연산자는 등호와 느낌표로 여러가지 일치 여부 조건을 결정합니다.

==, !=, ===, !== 4개의 일치 연산자가 있습니다.


 일치연산자

설명 

 ==

값이 같음

비교하는 두 값이 비교가 가능하도록 같은 타입으로 캐스팅 한 후 비교합니다.

 !=

같이 다름

비교하는 두 값이 비교가 가능하도록 같은 타입으로 캐스팅 한 후 비교합니다.

 ===

값이 같고 타입이 같음

값과 타입이 모두 일치해야 합니다. 타입 캐스팅은 일어나지 않습니다.

 !==

값이 다르거나 또는 타입이 다름

값과 타입 중 하나라도 일치하지 않으면 참이 됩니다.


관계 연산자는 두 값의 크기를 비교하는 연산자입니다.

>, <, >=, <= 4개의 비교 연산자가 있습니다.


관계 연산자 비교시 숫자형 외에 문자열도 비교를 할 수 있습니다.

문자열 비교시에는 대문자보다보다 소문자가 크다는 점만 주의하면 됩니다.

아스키II 순서 기준에 따라 'Alphabet' 보다는 'alphabet' 가 더 큰 값이 됩니다. ( 숫자 < 대문자 < 소문자 )


console.log('5' == 5);
console.log('5' === 5);
console.log('5' !== 5);
console.log(null == undefined);
console.log(null === undefined);

console.log('5' > 5);
console.log('Alphabet' < 'alphabet');
console.log('abc' >= 5);
console.log('abc' < 0);
console.log('0' < 'a');




삼항 연산자


if 조건 비교 구문을 대신해 사용하며, 비교 결과에 따른 값의 대입을 간결하게 표현해주기 때문에 사용 빈도가 아주 높습니다.

자바스크립트에서 유일하게 3개의 항을 가진 연산자입니다. 나머지는 모두 이항 연산자(2개의 항을 비교)입니다.


let 변수 = 조건비교문 ? 참인 경우:거짓인경우;


구조로 사용합니다.


let result = a > b ? 1 : 2;
let canDrink = age > 19 ? 'adult' : 'kid';
let bool = friend == '라이언' ? true : false;
cond ? console.log('true') : console.log('false');


형태로 사용합니다.


반환하는 결과값이 필요 없는 경우 처리 로직을 넣을 수도 있습니다.




논리 연산자


참/거짓을 나타내는 2개의 불리언 항을 비교해 참인지 거짓인지를 판단하는 연산자입니다.

비교하는 좌우 두 항도 불리언이며, 결과도 불리언이 됩니다.

논리 연산자는 AND, OR, NOT 3개의 연산자가 있습니다.

자바스크립트에서 사용하는 논리 연산자의 실제 사용 기호는 &&(AND), ||(OR), !(NOT) 입니다.

NOT 연산자는 각 비교항의 앞에 붙일 수 있으며, AND, OR 연산자는 두 항의 사이에 위치해 참/거짓을 비교합니다.


자바스크립트에서 Undefined, Null, 0, NaN, '' 은 false 이며, 그 외에는 모두 true로 캐스팅 됩니다.

따라서 다양한 데이터 타입과, 데이터를 논리 연산자로 비교할 수도 있습니다.

단, 두 항을 비교할 때 나중에 나오는 항의 데이터 타입은 반드시 불리언 타입이어야 합니다.

캐스팅 원칙에 따라 뒤에 나오는 항의 데이터 타입을 따라가게 됩니다.


&&(AND) 연산자는 두 항이 모두 참일때 true를 반환합니다.

||(OR) 연산자는 둘중 한 항이 참이면 true를 반환합니다. 두 항 모두 거짓이면 false를 반환합니다.


!(NOT) 연산자는 !가 붙은 항이 참이면 거짓으로, 거짓이면 참으로 변경합니다.

!! 두개를 연달아 붙이면 NOTNOT이 되어 원래의 참/거짓으로 돌아옵니다.

문자열 값의 불리언 결과를 얻어서 사용해야 하는 경우 !!으로 참/거짓 값을 가져옵니다.



OR(||) 연산자는 비교할 때 먼저 나오는 항이 참이면 뒤에 오는 항은 확인을 하지 않고 참을 반환합니다.


console.log(!!'문자열');
console.log(1<2 && 3<3);
console.log(1 && true);
console.log((!!'문자열' || false));
console.log(null || !!undefined);

console.log(false || null);
console.log(null || true);





비트 연산자


바이너리 데이터 제어 용도 외에는 사용 빈도가 높지는 않은 연산자입니다.

웹에서는 이미지 필터 적용이나, 암호화 데이터를 생성하는 용도로 많이 사용합니다.


2진수 비트 데이터를 제어하는 연산자는 총 7개가 있습니다.


비트연산자 

기호

사용법

AND

&

"a & b" 로 작성합니다.

두항의 같은 자리수 비트값 모두 1이면 1, 둘 중 하나라도 0이면 0이 됩니다.

13 | 7 의 연산 결과는 5가 됩니다. (1101 & 0111 => 0101)

OR

|

"a | b" 로 작성합니다.

두항의 같은 자리수 비트값 중 한쪽만 1이어도 1, 둘다 0이면 0이 됩니다.

13 | 7 의 연산 결과는 15이 됩니다. (1101 | 0111 => 1111)

XOR

^

 "a ^ b" 로 작성합니다.

두항의 같은 자리수 비트값 중 한쪽만 1이면 1, 아니면(둘다 1이거나 0) 0이 됩니다.

16 ^ 7 의 연산 결과는 23이 됩니다. (10000 ^ 00111 => 10111)

NOT

~

"~피연산자" 로 작성합니다.

2진수 모든 비트값을 반대로 합니다. 1->0, 0->1 로 비트값을 바꾼 값이 됩니다.

비트 연산의 결과는 -(피연산자+1) 이 됩니다.

~15 는 -16 이 됩니다.

오른쪽 시프트

>>

"피연산자 >> 자리수" 로 작성합니다.

왼쪽 피연산자 숫자를 자리수 만큼 오른쪽으로 시프트 이동하고, 오른쪽 남는 부분은 버립니다. 

부호 비트는 그대로 유지됩니다. 음수인 경우 양수 시프트 결과의 마이너스값이 됩니다.

14 << 2 는 3이 됩니다.

부호비트까지 시프트하려면 >>> 을 사용합니다.

왼쪽 시프트

<< 

"피연산자 << 자리수" 로 작성합니다.

왼쪽 피연산자 숫자를 자리수 만큼 왼쪽으로 시프트 이동하고, 오른쪽은 0으로 채웁니다.

부호비트는 그대로 유지됩니다. 음수인 경우 양수 시프트 결과의 마이너스값이 됩니다.

3 << 2 는 12가 됩니다.

0으로 채우는 오른쪽 시프트

>>>

"피연산자 >>> 자리수" 로 작성합니다.

왼쪽 피연산자를 오른쪽 자리수만큼 오른쪽으로 시프트하고 왼쪽에 생긴 자리수만큼의 공백은 0으로 채웁니다.

13 >>> 2 인 경우 10진수 13을 2진수 표현에서 오른쪽으로 2자리 만큼 시프트하고 왼쪽끝에 새로 생긴 공간은 0으로 채웁니다. 따라서 10진수 3이 됩니다.

음수의 경우는 전혀 다른 결과가 됩니다.

-13 >>> 2 인 경우 2진수 표현의 왼쪽에 붙는 부호 표시가 오른쪽으로 2자리 밀리고, 그 자리에 0이 채워지면서 양수로 바뀌게 됩니다. 따라서 10진수 1073741820 가 됩니다.



반응형

'Javascript > Javascript초급' 카테고리의 다른 글

객체 속성의 추가, 수정, 삭제  (0) 2020.05.25
객체의 이해  (0) 2020.05.25
변수와 상수의 이해 var, let, const  (0) 2020.05.24
자료형의 변환  (0) 2020.05.24
연산자 기초  (0) 2020.05.24
템플릿 리터럴의 기초  (0) 2020.05.24
Null, Undefined, 0  (0) 2020.05.24
원시형 데이터 타입과 참조형 데이터 타입의 이해  (0) 2020.05.23
함수 파라메터의 이해  (0) 2020.05.23

닫기