(JS) Operator

Mirrer·2022년 5월 1일
0

JavaScript

목록 보기
3/24
post-thumbnail

연산자(Operators)란?

처리(Process)작업에 필요한 산술, 논리등의 연산과정을 도와주는 것

프로그래밍 언어에서 연산자는 변수 또는 값 사이의 산술을 수행하는 데 사용된다.

이 중 값으로 평가될 수 있는 것들은 리터럴(Literal), 문(Statement), 표현식(Expressions)등이 있다.


값으로 평가될 수 있는 것

  • 리터럴(Literal) : 코드에서 특정한 값을 나타내기 위해 사용되는 각각의 표현식

  • 문(Statement) : 코드에서 실핼할 수 있는 최소 실행 단위 (ex. 선언문, 할당문, 조건문, 반복문), 문의 마지막은 세미콜론(;)을 입력한다.

  • 표현식(Expressions) : 값으로 평가 될 수 있는 문

1; // 숫자 리터럴 표현식
1 + 1; // 연산자 표현식
call(); // 함수 호출 표현식

let b; // 선언문
b = 2; // 할당문, 할당 표현식인 문

let c; // 선언문
d = 2; // 표현식, 할당문
let a = (b = 2); // b = 2가 실행이 되어 2라는 리터럴이 변수 a에 저장

연산자의 종류

산술 연산자

산술 연산자 (Arithmetic Operators)숫자 또는 문자열에 관한 연산을하는데 사용하는 연산자이다.

우리가 흔히 알고있는 수학에서의 산술 연산자와 비슷하지만 문자열에 관해서도 연산을 수행하는 차이점이 있다.

  • + (덧셈) : 숫자를 더하고 문자열을 연결하는데 사용
console.log(5 + 2); // 7

let text = '두개의' + '문자를';
console.log(text); // 두개의문자를

// 문자열과 숫자를 더하면 문자열로 변환
text = '1' + 1;
console.log(text); // '11'
  • - (뺄셈) : 숫자의 뺄셈 연산을 수행할 때 사용
console.log(5 - 2); // 3
  • * (곱셈) : 숫자의 곱셉 연산을 수행할 때 사용
console.log(5 * 2); // 10
  • / (나눗셈) : 숫자의 나눔 연산을 수행할 때 사용
console.log(5 / 2); // 2
  • % (나머지) : 숫자의 나머지 연산을 수행할 때 사용
console.log(5 % 2); // 1
  • ** (거듭제곱) : 숫자의 거듭제곱 연산을 수행할 때 사용
console.log(5 ** 2); // 25
console.log(Math.pow(5, 2)); // 25

단항 연산자

단항연산자 (Unary Operators)** 단항 연산자는 하나의 항을 대상으로 연산_이 이루어지는 연산자이다.

  • + (양) : 값을 더하거나 숫자가 아닌 타입의 변환값을 확인
// 값을 더하는것
let a = -5;
a = +a; // +(-5)
console.log(a); // -5

// 숫자가 아닌 타입의 변환값을 확인
console.log(+false); // 0
console.log(+null); // 0
console.log(+''); // 0
console.log(+true); // 1
console.log(+'text'); // NaN
console.log(+undefined); // NaN
  • - (음) : 값의 부호를 반대로 변경
let a = 5;
a = -a; // -1 * 5
console.log(a); // -5
  • !, !! (부정연산자) : !는 값을 반대로 변경하는 부정연산자이고 !!는 값을 Boolean 타입으로 변환
let boolean = true;
console.log(!boolean ); // false
console.log(!!boolean ); // true

console.log(!!1); // true

할당 연산자

할당연산자 (Assignment Operators)** 변수에 값을 할당_해주는 연산자이다.

let a = 1;
a = a + 2;
console.log(a); // 3

산술연산의 축약 표현으로 사용할 수도 있다.

a = 3;
a += 2; // a = a + 2;
console.log(a); // 5

a -= 2; // a = a - 2;
console.log(a); // 3

a *= 2; // a = a * 2;
console.log(a); // 6

a /= 2; // a = a / 2;
console.log(a); // 3

a **= 2; // a = a ** 2;
console.log(a); // 9

증감 연산자

증가 & 감소 연산자 (Increment & Decrement Operators)는 피연산자를 1씩 증가 혹은 1씩 감소시킬 때 사용하는 연산자이다.

  • ++ (증가 연산자) : 값을 1 증가
let a = 0;
console.log(a) // 0

a++ // a = a + 1;
console.log(a) // 1
  • -- (감소 연산자) : 값을 1 감소
let a = 0;
console.log(a) // 0

a-- // a = a - 1;
console.log(a) // -1
  • 증감 연산자의 전위, 후위식 : 증감 연산자의 위치에 따라 각각 다른 연산을 수행
// a++ -> 필요한 연산을 하고, 그 뒤 값을 증가시킴

let a = 0;
let b = a++;
console.log(b) // 0
console.log(a) // 1

// ++a -> 값을 먼저 증가하고, 필요한 연산을 함

let a = 0;
let b = ++a;
console.log(b) // 1
console.log(a) // 1
// a-- -> 필요한 연산을 하고, 그 뒤 값을 감소시킴

let a = 0;
let b = a--;
console.log(b) // 0
console.log(a) // -1

// --a -> 값을 먼저 감소하고, 필요한 연산을 함

let a = 0;
let b = --a;
console.log(b) // -1
console.log(a) // -1

비교 연산자

대소 관계 비교 연산자 (Relational Operators)는 2개의 값을 대소 관계로 표현하여 나타내는 연산자이다.

  • > (크다)++, < (작다) : 값을 초과, 미만의 개념으로 비교
console.log(2 > 3); // false
console.log(2 < 3); // true
  • >= (크거나 같다)++, <= (작거나 같다) : 값을 이상, 이하의 개념으로 비교
console.log(3 >= 3); // true
console.log(2 <= 3); // true

동등 비교 연산자

동등 비교 관계 연산자 (Equality Operators)는 2개의 값 또는 값, 데이터 타입을 _** 비교하여 일치 여부를 나타내는 연산자이다.

  • == (값이 같다)++, != (값이 다르다) : 값만 비교
console.log(2 == 2); // true
console.log(3 != 2); // true
  • === (값, 타입 둘다 같다)++, !== (값, 타입 둘다 다르다) : 값과 데이터 타입을 비교
console.log('2' === '2'); // true
console.log('3' !== 2); // true

연산자 우선순위

프로그래밍 언어에서 연산자들은 각각의 우선순위가 존재

연산자 우선순위란 연산자를 여러개 사용할 때 먼저 실행될 연산자의 순서를 말한다.

연산자의 종류가 많기 때문에 모든 연산자의 우선순위를 외우는 것에는 무리가 있다. 또한 이 방법은 효율적이지 않다.

그래서 연산과정에서 우선순위를 부여하고 싶다면 우선순위가 가장 높은 괄호 ( )를 사용하는것이 일반적이다.

let a = 1;
let b = 2;
console.log(a + 1 * b); // 3

// 강제적으로 연산자의 우선순위를 설정하려면 괄호()를 사용
console.log((a + 1) * b); // 4

연산자 우선순위를 확인하고 싶다면 MDN공식 홈페이지에 나와있는 순위표를 참고하면 된다.


참고 자료

JavaScript Operator - MDN Web Docs
모던 자바스크립트 Deep Dive
모던 JavaScript 튜토리얼

profile
memories Of A front-end web developer

0개의 댓글