JS) 연산자

이번 글에서는 MDN에서 제공하고있는 10가지 연산자를 정리해보려 한다.
그 전에 javascript.info의 기본 연산자와 수학 파트를 읽으면 많은 도움이 된다.
레퍼런스는 아래와 같다.

javascript.info 기본 연산자와 수학
https://ko.javascript.info/operators

MDN 표현식과 연산자
https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Expressions_and_Operators

🔍 연산자

---

mdn에서 제공하는 10개 연산자는 아래와 같으며, 동일한 순서로 정리해보자.

1. 할당 연산자
2. 비교 연산자
3. 산술 연산자
4. 비트 연산자
5. 논리 연산자
6. 문자열 연산자
7. 조건(삼항) 연산자
8. 쉼표 연산자
9. 단항 연산자
10. 관계 연산자
    
    
    
    
    
    

1. 할당(assignment) 연산자

---

오른쪽 피연산자의 값을 왼쪽 피연산자에 할당한다.
기본적인 할당 연산자는 오른쪽의 피연산자 값을 왼쪽 피연산자 값에 할당하는 등호(=)로, x = y 는 y의 값을 x에 할당한다.

x = y
//y값을 등호(=)를 통하여 x에 할당함.

내가 자주 본 할당 연산자 중 연산과 할당을 동시에 수행하는 복합 할당 연산자가 있는데,
지금 정리하며 보니 더하기 할당이었다.

x += y
//위,아래는 같은 값이다.
x = x + y

2. 비교 연산자

---

비교 연산자는 피연산자를 서로 비교하고, 비교 결과가 참인지에 따라 논리 값을 반환한다.

//값을 비교하기 위한 변수 선언
const var1 = 3;
const var2 = 4;

//동등: 피연산자가 같으면 true 반환
3 == var1 //true
4 == var1 //false

//부등: 피연산자가 다르면 true 반환
var1 != 4 //true
var2 != "3" //true

//일치: 두 피연산자의 값과 타입이 모두 같은 경우 true를 반환
3 === var1 //true

//불일치: 피연산자의 값 또는 타입이 서로 다를 경우 true를 반환
var1 !== "3" //true
3 !== '3' //true

//큼: 왼쪽 피연산자가 오른쪽 피연산자보다 크면 true를 반환
var2 > var1 //true
"12" > 2 //true

//크거나 같음: 왼쪽 피연산자가 오른쪽 피연산자와 같거나 크면 true를 반환
var2 >= var1 //true
var1 >= 3 //true

//작음: 왼쪽 피연산자가 오른쪽 피연산자보다 작으면 true를 반환
var1 < var2 //true
"2" < 12 //true

//작거나 같음: 왼쪽 피연산자가 오른쪽 피연산자와 같거나 작으면 true를 반환
var1 <= var2 //true
var2 <= 5 //true

3. 산술 연산자

---

산술 연산자는 두 개의 숫자 값(리터럴 또는 변수)을 피연산자로 받아서 하나의 숫자 값을 반환한다.

1) 덧셈 연산자 +
2) 뺄셈 연산자 -
3) 곱셈 연산자 *
4) 나눗셈 연산자 /
5) 나머지 연산자 %
6) 거듭제곱 연산자 **

1) ~ 4)번 연산자는 우리가 흔히 알고 있는 수학 연산이다. 5), 6)번 연산자는 아래의 코드를 참고하면 된다.

1 / 2; // 0.5
1 / 2 == 1.0 / 2.0; // 참

//나머지 연산자 (%)
alert( 5 % 2 ); // 5를 2로 나눈 후의 나머지인 1을 출력
alert( 8 % 3 ); // 8을 3으로 나눈 후의 나머지인 2를 출력

//거듭제곱 연산자(**)
alert( 2 ** 2 ); // 4  (2 * 2)
alert( 2 ** 3 ); // 8  (2 * 2 * 2)
alert( 2 ** 4 ); // 16 (2 * 2 * 2 * 2)

4. 비트 연산자

---

비트 연산자(bitwise operator)는 인수를 32비트 정수로 변환하여 이진 연산을 수행한다.

a & b
15 & 9 //9

a | b
15 | 9 //15

a ^ b
15 ^ 9 //6

~ a
~15 //-16
~9 //-10

a << b
9<<2 //36

a >> b
9>>2 //-3

a >>> b
19>>>2 //4

5. 논리 연산자

---

어떠한 명제에 대한 논리적인 판단을 내리는 연산자다.
논리 연산의 결과로 true 또는 false를 반환한다.

AND 논리 연산자
expr1 && expr2

var a1 = true && true;      // t && t는 true 반환
var a2 = true && false;     // t && f는 false 반환
var a3 = false && true;     // f && t는 false 반환
var a4 = false && (3 == 4); // f && f는 false 반환
var a5 = 'Cat' && 'Dog';    // t && t는 Dog 반환
var a6 = false && 'Cat';    // f && t는 false 반환
var a7 = 'Cat' && false;    // t && f는 false 반환

OR 논리 연산자
expr1 || expr2

var o1 = true || true;      // t || t는 true 반환
var o2 = false || true;     // f || t는 true 반환
var o3 = true || false;     // t || f는 true 반환
var o4 = false || (3 == 4); // f || f는 false 반환
var o5 = 'Cat' || 'Dog';    // t || t는 Cat 반환
var o6 = false || 'Cat';    // f || t는 Cat 반환
var o7 = 'Cat' || false;    // t || f는 Cat 반환

NOT 논리 연산자
!expr

var n1 = !true;  // !t는 false 반환
var n2 = !false; // !f는 true 반환
var n3 = !'Cat'; // !t는 false 반환

6. 문자열 연산자

---

두 문자열의 값을 연결한 새로운 문자열을 반환한다.

console.log('나만의 ' + '문자열'); // 나만의 문자열

var mystring = '한';
mystring += '글'; // 한글
//'한'에 '글'이 합쳐져 '한글'로 연결되어 나온다.

alert(2 + 2 + '1' ); // '221'이 아니라 '41' 출력

7. 조건(삼항) 연산자

---

JavaScript에서 세 개의 피연산자를 받는 유일한 연산자다.
조건 연산자는 주어진 조건에 따라 두 값 중 하나를 반환한다.
주어진 조건문의 결과는 반드시 참/거짓으로 반환되어야 한다.

//구문
condition ? exprIfTrue : exprIfFalse
condition ? val1 : val2;
조건문 ? 표현문 1 : 표현문 2;

//결과가 true면 표현문1을, false면 표현문2를 실행함

var age = 26; //나이는 26
var beverage = (age >= 21) ? "Beer" : "Juice"; //26 >= 21이므로 표현식1 실행
console.log(beverage); // Beer

8. 쉼표 연산자

---

쉼표 연산자는 각각의 피연산자를 왼쪽에서 오른쪽 순서로 평가하고, 마지막 연산자의 값을 반환한다.

x = (2, 3);

console.log(x);
// expected output: 3

9. 단항 연산자

---

delete연산자는 객체의 속성을 삭제한다.

 delete expression

var Employee = {
  age: 28,
  name: 'abc',
  designation: 'developer'
}

console.log(delete Employee.name);   // returns true
console.log(delete Employee.age);    // returns true

// 존재하지 않는 속성을 삭제하려하면
// true를 리턴합니다.
console.log(delete Employee.salary); // returns true

10. 관계 연산자

---

관계 연산자는 피연산자를 서로 비교하고, 비교 결과가 참인지에 따라 불리언 값을 반환한다.

propNameOrNumber in objectName

// 배열
var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple'];
0 in trees;        // true 반환
3 in trees;        // true 반환
6 in trees;        // false 반환
'bay' in trees;    // false 반환 (인덱스에 위치한 값이 아니라
                   // 인덱스 자체를 지정해야 함)
'length' in trees; // true 반환 (length는 Array의 속성임)

// 내장 객체
'PI' in Math;         // true 반환
var myString = new String('coral');
'length' in myString; // true 반환

// 사용자 정의 객체
var mycar = { make: 'Honda', model: 'Accord', year: 1998 };
'make' in mycar;  // true 반환
'model' in mycar; // true 반환

10가지 연산자 중에서 여태껏 내가 가장 많이 봤던걸 꼽으라면
접근을 위한 '.' / '[]' 이나
조건문 사용시 자주 썼던 논리연산자, 반복문에서 맨날 봤던 ++ 정도였다.
이 외에도 꽤나 많은 연산자가 있었구나를 느끼며
오늘도 블로그를 잘 시작했다는 뿌듯함이 생긴다. (^人^)