on
[Javascript]연산자(Operator)
타입이 서로 다른 값을 연산할 수 있다고 놀라지 마십시오.
연산자(operator)
연산자는 하나 이상의 표현식을 대상으로 연산을 수행해 하나의 값을 만든다. 연산의 대상을 피연산자라고 하고, 피연산자가 될 수 있는 것은 값으로 평가될 수 있는 표현식이어야 한다. 또한 연산자와 피연산자로 이루어진 표현식도 값으로 평가될 수 있는 표현식이다.
1. 산술 연산자(Arithmetic operator)
피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만든다. 산술 연산이 불가능한 경우(피연산자가 숫자가 아닌 경우) NaN을 반환한다.
1) 이항 산술 연산자
2개 이상의 피연산자를 산술하여 새로운 숫자 값을 만든다. 덧셈(+), 뺄셈(-), 곱하기(*), 나누기(/), 나머지(%) 연산자가 있다.
1 + 2; // 3
2 + 127; // 129
5 % 5; // 0
5 % 1; // 0
5 % 2; // 1
2) 단항 산술 연산자
1개의 피연산자를 연산하여 숫자 값을 만든다.
증가 연산자, 감소 연산자
let x = 1;
x++; // x = x + 1와 같은 의미, 피연산자 x의 값을 변경 시킨다(부수효과)
console.log(x); // 2
x--; // x = x = 1와 같은 의미, 피연산자 x의 값을 변경 시킨다(부수효과)
console.log(x); // 1
증가 감소 연산자는 피연산자의 값을 변화 시키는 부수 효과가 있으니 주의한다. 또한 위치에 따라 의미가 다른 것도 주의하자.
++/--피연산자 : (전위증감연산자: prefix~)먼저 피연산자의 값을 증감시킨후 다른 연산을 수행
피연산자++/-- : (후위증감연산자:postfix) 먼저 다른 연산을 수행한 후, 피연산자의 값을 증감
let x,
y = 5;
let resultX, resultY;
resultX = x++; //resultX에 x값 할당을 먼저하고 x값을 증가시킴
console.log(resultX, x); // 5, 6
resultY = ++y; //y를 먼저 증가시키고 resultY에 y값을 할당
console.log(resultY, y); // 6, 6
+,- 단항 연산자
+ 피연산자: 피연산자가 숫자 타입이라면 아무 일도 일어나지 않음. 숫자 타입이 아니라면 숫자로 변환한 새로운 값을 반환(피연산자 값이 변경되지 않음)
- 피연산자 : ‘+ 피연산자’와 같은 효과에, 숫자타입의 경우 양수를 음수로, 음수를 양수로 반전한 값을 반환한다(부호 반전).
let x = "1";
console.log(+x, typeof +x, x); // 1, Number, "1"
x = true;
console.log(+x, typeof +x, x); // 1, Number, true
x = false;
console.log(+x, typeof +x, x); // 0, Number, false
x = "string";
console.log(+x, typeof +x, x); // NaN, Number, "string"
문자열 연결 연산자 +
+가 하나 이상의 문자열 피연산자와 다른 타입의 피연산자를 연산하는 경우 +는 문자열 연결 연산자로 작동한다. 타입도 당연히 string타입이 된다.
console.log("1" + 2); // '12'
console.log(1 + 2); // 3
2. 할당 연산자
우항(=의 오른쪽)에 있는 피연산자의 평가 결과(값)를 좌항(=의 왼쪽)에 있는 변수에 할당한다. 모든 할당 연산자는 변수에 할당함으로 변수가 변하는 부수효과가 있다.
let x;
//연산자 =
x = 3;
console.log(x); // 3
//연산자 +=
x += 5; // x = x + 5
console.log(x); // 8
//연산자 -=
x -= 4; // x = x - 4
console.log(x); // 4
//연산자 *=
x *= 2; // x = x * 2
console.log(x); // 8
//연산자 /=
x /= 4; // x = x / 4
console.log(x); // 2
//연산자 %=
x %= 2; // x = x % 2
console.log(x); // 0
할당문은 값으로 평가되는 표현식인 문으로서 할당된 값으로 평가되고, 이 특징을 이용해 연쇄 할당도 가능하다.
let x;
console.log((x = 5)); // 5
let a, b, c;
a = b = c = 1;
console.log(a, b, c); // 0, 0, 0
3. 비교 연산자
연산자의 좌항과 우항의 피연산자를 비교한 다음 그 결과를 boolean값으로 반환한다
==과===,!=과!==의 차이는 타입까지 비교하느냐의 차이다(타입까지 비교하는게 오류를 줄일 수 있다). 자바스크립트는 암무적 타입변환을 하는데,===과!==는 암묵적 타입 변환 이전의 값으로 비교한다.
//5와 '5'가 같니?
5 == "5"; // true
5 === "5"; // false
//0과 false가 다르니?
0 != false; //false
0 == false; //true
NaN는 예외이다. 자신과 일치되지 않는 버그가 있다. 아래 코드를 참조하여 Number.isNaN 함수와 Object.is메서드를 이용하자.
NaN === NaN; // false ????? 😰😰😰😰
Number.isNaN(NaN); // true
Number.isNaN(10); //false
Object.is(NaN, NaN); //true
+0과 -0도 예외다.
-0 === +0; //true
Object.is(-0, +0); //false
4. 대소 연산자
일반적인 수학의 비교 연산자와 동일하다.
let x = 10;
console.log(x > 5); // true x는 5보다 크다.
console.log(x >= 10); // true x는 10보다 크거나 같다.
5. 삼항 조건 연산자
조건식의 평가 결과에 따라 반환할 값을 결정하는 연산자 (반환이 기본적으로 된다)
const pass = score >= 80 ? true : false;
//const 변수 = 조건식 ? 조건식이 참이면 여길 반환 : 조건식이 거짓이면 여길 반환
if else문으로 바꿔서 처리할 수 있다. 다만, 할당을 표현하는 식에서 if else문을 표현식으로 쓸수 없으므로, if와 else 조건 이후에 할당을 따로 처리해줘야한다.
let pass;
if (score >= 80) pass = true;
else pass = false;
6. 논리 연산자
연산자의 좌우항의 피연산자의 논리를 연산하여 결과값을 반환하는 연산자이다.
||: OR, 둘중 하나라도 만족하면 true&&: AND, 둘다 만족해야 true!: NOT, 논리를 반전
const time = 130;
const score = 3;
let result;
if (time > 140 && score > 2.5) result = true; // 두 조건을 만족시키지 못함
else result = false;
console.log(result); // false
if (time > 140 || score > 2.5) result = true;
else result = false;
console.log(result); // true
result = !result; // 논리 값을 뒤집음
console.log(result); // false
논리 연산자에서 피연산자의 값이 불리언이 아닐 경우 boolean으로 암묵적 타입 변환을 실행하고 연산한다. 논리 연산자의 평가 결과는 boolean이 아닐 수도 있다. ||와 && 연산자 표현식의 평가 값은 한쪽의 값으로 단축평가된다.
7. 쉼표 연산자
쉼표 연산자는 왼쪽부터 오른쪽으로 차례대로 피연산자를 평가하고, 마지막 피연산자의 평가가 끝나면 그 값을 반환한다.
let a, b, c;
(a = 0), (b = 1), (c = 2); // 2
console.log((a = 0), (b = 1), (c = 2)); // 0 1 2, 각각의 값을 할당하고 console.log 실행
8. 그룹 연산자
소괄호()로 피연산자와 연산자를 감싸면 실행 우선 순위가 소괄호 안의 표현식을 먼저 평가한다.
5 * 5 + 3; // 28
5 * (5 + 3); // 75;
9. typeof 연산자
피연산자의 데이터 타입을 문자열로 반환한다.
typeof ""; //'string'
typeof 1; //'number'
typeof NaN; //'number'
typeof true; //'boolean'
typeof undefined; //'undefined'
typeof Symbol(); //'symbol'
typeof null; //'object'!!!!!!!!!!!!!
typeof []; //'object'
typeof {}; //'object'
typeof new Date(); //'object'
typeof function () {}; //'function'
다만 null의 경우 “object”를 반환하니 주의, null의 경우 일치 연산자(===)을 사용!
let foo = null;
typeof foo === "null"; //false ???? wtat the...😰
foo === "null"; // true
자바스크립트 왜 이렇게 이상한게 많아ㅎㅎ….🤬🤬🤬🤬🤬