개발자를 희망하는 초보의 자기개발 이야기

JavaScript 연산자(operator) 본문

프론트엔드(Front-end)/JavaScript

JavaScript 연산자(operator)

클라우드아실 2020. 12. 20. 11:46
반응형

JavaScript 연산자(operator)

 : 연산자란 말 그대로 연산. 즉 계산을 위한 기호들을 의미합니다. 주로 조건문과 결합해 사용합니다. 기본적인 사칙연산을 다루는 +, -, *, /, % 등을 가리켜 산술연산자라 합니다. = 의 경우 대입연산자라 하며 오른쪽의 값을 왼쪽으로 대입해 줍니다.

let i = 10;
i = i + 2; // 12
i = i - 2; // 8
i = i * 2; // 20
i = i / 2; // 5

 : 사칙연산 기호 이외에 %는 나누고 난 나머지를 계산해 줍니다. 조건문에서 짝수인지 홀수인지를 판단할 때 자주 사용하니 이 기호에 익숙해져야 합니다. 아래 예시처럼 2로 나눠서 0이 남으면 짝수, 1이 남으면 홀수로 판단할 수 있습니다.

let i = 10;
if(i % 2 === 0){
  console.log("짝수!")
}

let j = 11;
if(j % 2 === 1){
  console.log("홀수!")
}

 : 줄여쓰는 복합대입연산자도 있는데 +=, -=, /=, *=, %= 등이 있습니다. 코드의 양을 줄일 수 있지만 팀내 코딩컨벤션에 따라 가독성 차원에서 사용하지 않도록 협의하는 경우도 있습니다.

let i = 10;
i += 2 // 12
i -= 2 // 8
i *= 2 // 20
i /= 2 // 5
i %= 2 // 0

 : 크고 작음, 작거나 같은 등 부등호를 이용하는 것을 비교연산자라고 합니다. >, <, >=, <=, ==, ===, !=, !== 등이 있습니다. ()를 넣지 않아도 결과는 같지만 ()를 넣으면 가독성이 좋아지고 명확하게 우선처리 됩니다. 
비교의 결과는 앞서 자료형에서 봤던 boolean의 형태로 true 와 false 로 반환됩니다. 비교는 좌항과 우항에 대해서만 진행되며 3가지를 동시에 비교하지는 못합니다.

a = 10 >= 3; // ture
b = (10 >= 3); // ture
c = (3 >= 10); // false
d = (3 => 10); // 문법 오류. >=를 =>로 표기하면 오류가 발생합니다.
30 > 20 > 10 // false. 30 > 20은 참입니다. 참은 숫자 1로도 표현됩니다. 1 > 10 은 false가 됩니다.
30 > 20 < 10 // true. 마찬가지 결국 1 < 10 이 되므로 이건 true로 반환됩니다.

 : ==(동등연산자)의 경우 같은 값인지 비교하는 것이지만 아래 예시에 a는 true로 , b는 false로 결과가 다른 것을 볼 수 있습니다. 자세히 보면 앞의 10은 숫자고 뒤의 '10'은 문자열입니다. ==의 경우 자료형은 비교하지 않고 값만 비교하기 때문에 같다고 판단합니다.  ===의 경우는 자료형까지 비교하기 때문에 false가 됩니다. 따라서 자바스크립트는 정확한 비교를 위해서 ===(일치연산자)만 사용할 것을 권장합니다.

a = (10 == '10'); // true
b = (10 === '10'); // false

 : !=(부등연산자)도 마찬가지로 값만 비교합니다. 자료형까지 비교하려면 b처럼 !==(불일치연산자)를 사용할 것을 권장합니다. 

a = (10 != '10'); // false
b = (10 !== '10'); // true

 : 두가지 조건을 한 번에 비교하는 경우는 논리연산자를 사용합니다. &&, ||, !가 있습니다. &&(AND연산자) 값이 모두 참이면 true를 반환합니다. 하나라도 false값이 있으면 false를 반환합니다.

true && true = true;
true && false = false;
false && true = false;
false && false = false;

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

let i = 1, b = 2;

i = a < b ; // true
j = a > b ; // false

i && j; // true && false. 결과는 false

 : ||(OR연산자)는 비교하는 값 중 1개라도 true인 값이 있는 경우 true를 반환합니다. 키보드 자판 위치는 엔터키(Enter)와 삭제하는 백스페이스(backspace) 사이에 있습니다. Shift와 같이 누르면 됩니다.

true || true = true;
true || false = true;
false || true = true;
false || false = false;

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

let i = 1, b = 2;

i = a < b ; // true
j = a > b ; // false

i || j; // true && false. 결과는 true

 : !(NOT연산자)는 원래의 truthy, falsy값을 true는 false로, false는 true로 반대로 반환합니다.

let i = 1, b = 2;

i = a < b ; // true
j = a > b ; // false

!i || j; // i의 반전으로 false로 변환. false || false. 결과는 false

 : 증감연산자는 1씩 더하거나 뺄 수 있습니다. ++나 -- 기호를 사용하며, 앞에 붙으면 전위증감연산자라고 합니다. 반복문에서 자주 활용하게 됩니다. 

let i = 0; 

a = i; // 0
a = i++; // 0 
a = i; // 1
//먼저 할당되었던 값 0을 출력하고 값을 1로 수정 할당함.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
let i = 0; 

a = i; // 0
a = i--; // 0 
a = i; // -1
//먼저 할당되었던 값 0을 출력하고 값을 -1로 수정 할당함.

 : 뒤에 붙으면 후위증감연산자라 부릅니다. 용어보다 처리 방식에 대한 이해가 필요합니다.

let i = 0; 

a = i // 0
a = ++i; // 1
//1 증가부터 해서 1이 출력됨.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
let i = 0; 

a = i // 0
a = --i; // -1
// 1 감소부터 해서 -1이 출력됨.
반응형

'프론트엔드(Front-end) > JavaScript' 카테고리의 다른 글

JavaScript 문자열(String)  (0) 2020.12.20
JavaScript 조건문(Condition)  (0) 2020.12.20
JavaScript 함수(Function)  (0) 2020.12.14
JavaScript 자료형(Data Type)  (0) 2020.12.13
JavaScript 변수(Variable)  (0) 2020.12.13