연산자
- 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산등을 수행해 하나의 값을 만든다. 이때 연산의 대상을 피연산자라 한다.
- 피연산자는 값으로 평가될 수 있는 표현식이어야 한다.
- 피연산자와 연산자의 조합으로 이뤄진 연산자의 표현식도 값으로 평가될 수 있는 표현식이다.
//산술 연산자
5 * 4 //20
//문자열 연결 연산자
'My name is ' + 'Lee' // 'My name is Lee'
//할당 연산자
color = 'red' //'red'
//비교 연산자
3 > 5 // false
//논리 연산자
true && false // false
//타입 연산자
typeof 'Hi' // string피연산자는 "값"이라는 명사의 역할, 연산자는 "피연산자를 연산하여 새로운 값을 만든다"라는 동사의 역할!
피연산자는 연산의 대상이 되어야 하므로 값으로 평가할 수 있어야한다!
산술 연산자
- 산술 연산자는 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만든다.
- 산술 연산이 불가능한 경우, NaN을 반환한다.
- 산술 연산자는 피연산자의 개수에 따라 이항 산술 연산자와 단항 산술 연산자로 구분할 수 있다.
이항 산술 연산자
- 이항 산술 연산자는 2개의 피연산자를 산술 연산하여 숫자 값을 만든다.
- 모든 이항 산술 연산자는 피연산자의 값을 변경하는 부수효과가 없다.
- 어떤 산술 연산을 해도 피연산자의 값이 바뀌는 경우는 없고 새로운 값을 만들 뿐.
| 이항 산술 연산자 | 의미 | 부수효과 |
|---|---|---|
| + | 덧셈 | X |
| - | 뺄셈 | X |
| * | 곱셈 | X |
| / | 나눗셈 | X |
| % | 나머지 | X |
단항 산술 연산자
- 단항 산술 연산자는 1개의 피연산자를 산술 연산하여 숫자 값을 만든다.
| 단항 산술 연산자 | 의미 | 부수효과 |
|---|---|---|
| ++ | 증가 | O |
| -- | 감소 | O |
| + | 어떠한 효과도 없다. 음수를 양수로 반전하지도 않는다. | X |
| - | 양수를 음수로, 음수를 양수로 반전한 값을 반환한다. | X |
- 이항 산술 연산자와는 달리 증가/감소 연산자는 피연산자의 값을 변경하는 부수효과가 있다는것이다!
var x = 1;
//++연산자는 피연산자의 값을 변경하는 암묵적 할당이 이뤄짐.
x++; // x = x+1;
console.log(x); // 2
//--연산자는 피연산자의 값을 변경하는 암묵적 할당이 이뤄짐.
x--; // x = x-1;
console.log(x); // 1증가/감소(++/--)연산자는 위치에 의미가 있다.
- 피연산자 앞에 위치한 전위 증가/감소 연산자는 먼저 피연산자의 값을 증가/감소시킨 후, 다른연산을 수행한다.
- 피연산자 뒤에 위치한 후위 증가/감소 연산자는 먼저 다른 연산을 수행한 후, 피연산자의 값을 증가/감소시킨다.
++/-- 예시
var x = 5, result;
//선할당 후증가
result = x++;
console.log(result, x); // 5, 6
//선증가 후할당
result = ++x;
console.log(result, x); // 7, 7
//선할당 후감소
result = x--;
console.log(result, x); // 7, 6
//선감소 후할당
result = --x;
console.log(result, x); // 5, 5+/- 예시
- 숫자 타입이 아닌 피연산자에 +단항 연산자를 사용하면 피연산자를 숫자 타입으로 변환하여 반환한다.
- 피연산자를 변경하는 것이 아닌 숫자 타입으로 변환한 값을 생성해서 반환한다! 따라서 부수효과는 없다!
var x = '1';
//문자열을 숫자로 타입 변환한다.
console.log(+x); //1
//부수효과는 없다.
console.log(x); //"1"
//불리언 값을 숫자로 타입 변환한다.
x = true;
console.log(+x); //1
//부수효과는 없다.
console.log(x); //true
//불리언 값을 숫자로 타입 변환한다.
x = false;
console.log(+x); //0
//부수효과는 없다.
console.log(x); //false
//문자열을 숫자로 타입 변환할 수 없으므로 NaN을 반환한다.
x = 'Hello';
console.log(+x); //NaN
//부수효과는 없다.
console.log(x); //"Hello"- -단항 연산자는 피연산자의 부호를 반전한 값을 반환한다.
//부호를 반전한다
-(-10); // 10
//문자열을 숫자로 타입 변환한다.
-'10'; // -10
//불리언 값을 숫자로 타입 변환한다.
-true; // -1
// 문자열은 숫자로 타입 변환할 수 없으므로 NaN을 반환한다.
-'Hello'; // NaN문자열 연결 연산자
- +연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작한다.
//문자열 연결 연산자
'1'+ 2; // '12'
1+'2'; // '12'
//산술 연산자
1 + 2; // 3
// true는 1로 타입 변환 된다.
1 + true; // 2
// false는 0으로 타입 변환된다.
1 + false; // 1
//null은 0으로 타입 변환된다.
1 + null; // 1
//undefined는 숫자로 타입 변환되지 않는다.
+undefined; //NaN
1 + undefined; // NaN자바스크립트 엔진에 의해 암묵적으로 타입이 자동변환되는것을 확인할 수 있다. 1 + true를 연산하면 자바스크립트 엔진은 암묵적으로 불리언 타입의 값인 true를 숫자 타입인 1로 타입을 강제로 변환한 후 연산을 수행한다.
이를, 암묵적 타입 변환 또는 타입 강제 변환이라고 한다.
할당 연산자
- 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당한다.
- 할당 연산자는 좌항의 변수에 값을 할당하므로 변수 값이 변화는 부수 효과가 있다.
| 할당연산자 | 예 | 동일표현 | 부수효과 |
|---|---|---|---|
| = | x = 5 | x = 5 | O |
| += | x += 5 | x = x + 5 | O |
| -= | x -= 5 | x = x - 5 | O |
| *= | x *= 5 | x = x * 5 | O |
| /= | x /= 5 | x = x / 5 | O |
| %= | x %= 5 | x = x % 5 | O |
할당문은 값으로 평가되는 표현식인 문으로서 할당된 값으로 평가된다. 이러한 특징을 활용해 여러 변수에 동일한 값을 연쇄 할당할 수 있다.
var a, b, c;
//연쇄 할당 - 오른쪽에서 왼쪽으로 진행
//1. c = 0 : 0으로 평가된다.
//2. b = 0 : 0으로 평가된다.
//3. a = 0 : 0으로 평가된다.
a = b = c = 0;
console.log(a, b, c); //0 0 0비교 연산자
- 좌항과 우항의 피연산자를 비교한 다음 그 결과를 불리언 값으로 반환한다.
- 비교 연산자는 if 문이나 for문과 같은 제어문의 조건식에서 주로 사용한다.
동등/일치 비교 연산자
- 동등 비교 연산자와 일치 비교 연산자는 좌항과 우항의 피연산자가 같은 값으로 평가되는지 비교해 불리언 값을 반환한다. 하지만 비교하는 엄격성의 정도가 다르다!!
- 동등 비교 연산자는 느슨한 비교를 하지만 일치 비교 연산자는 엄격한 비교를 한다.
| 비교 연산자 | 의미 | 사례 | 설명 | 부수 효과 |
|---|---|---|---|---|
| == | 동등 비교 | x == y | x와 y값이 같음 | X |
| === | 일치 비교 | x === y | x와 y의 값과 타입이 같음 | X |
| != | 부동등 비교 | x != y | x와 y의 값이 다름 | X |
| !== | 불일치 비교 | x !== y | x와 y의 값과 타입이 다름 | X |
- 동등 비교(==)연산자는 좌항과 우항의 피연산자를 비교할 때 먼저 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교한다. 따라서, 동등 비교 연산자는 좌항과 우항의 피연산자가 타입은 다르더라도 암묵적 타입 변환 후에 같은 값일 수 있다면 true를 반환한다.
//동등 비교
5 == 5; //true
//타입은 다르지만 암묵적 타입 변환을 통해 타입을 일치시키면 동등하다.
5 == '5'; //true
//동등 비교. 결과를 예측하기 어려움
'0' == ''; //false
0 == ''; //true
0 == '0'; //true
false == 'false'; //false
false == '0'; //true
false == null; //false
false == undefined; //false- 이처럼 동등 비교 연산자는 예측하기 어려운 결과를 만들어낸다. 따라서 동등 연산자보단 일치 비교 연산자(===)를 사용한다.
일치비교 연산자를 써야하는 이유는??
- 좌항과 우항의 피연산자가 타입도 같고 값도 같은 경우에 한하여 true를 반환한다.
- 암묵적 타입 변환을 하지 않고 값을 비교하기에 예측하기 쉽다.
// 일치 비교
5 === 5; //true;
//암묵적 타입 변환을 하지 않고 값을 비교한다.
//즉, 값과 타입이 모두 같은 경우만 true를 반환한다.
5 === '5'; //falseNaN을 주의해야한다!
- NaN은 자신과 일치하지 않는 유일한 값이다.
- 숫자가 NaN인지 조사하려면 빌트인 함수 Number.isNaN을 사용한다!
//NaN은 자신과 일치하지 않는 유일한 값이다.
NaN === NaN //false
//Number.isNaN 함수는 지정한 값이 NaN인지 확인하고 그 결과를 불리언 값으로 반환한다.
Number.isNaN(NaN); // true
Number.isNan(10); // false
Number.isNan(1 + undefined); // true
//양의 0과 음의 0비교. 일치 비교/동등 비교 모두 결과는 true다.
0 === -0; // true
0 == -0; // true- 동등과 일치 비교 연산자는 +0과 -0을 동일하다고 평가하고 동일한 값인 NaN과 NaN을 비교하면 다른 값이라고 한다. 그렇다면 어떻게 해야 예측 가능한 정확한 비교를 할수있나?
Object.is메서드
-0 === +0; //true
Object.is(-0,+0); //false
NaN === NaN; //false
Object.is(NaN,NaN); //true대소 관계 비교 연산자
- 피연산자의 크기를 비교하여 불리언 값을 반환한다.
| 대소 관계 비교 연산자 | 예제 | 설명 | 부수 효과 |
|---|---|---|---|
| > | x > y | x가 y보다 크다 | X |
| < | x < y | x가 y보다 작다 | X |
| >= | x >= y | x가 y보다 크거나 같다 | X |
| <= | x <= y | x가 y보다 작거나 같다 | X |
//대소 관계 비교
5 > 0; //true
5 > 5; //false
5 >= 5; //true
5 <= 5; //true삼항 조건 연산자
- 조건식의 평가 결과에 따라 반환할 값을 결정한다. 자바스크립트의 유일한 삼항 연산자이며, 부수효과는 없다.
조건식? 조건식이 true일 때 반환할 값 : 조건식이 false일 때 반환할 값
var result = score >= 60 ? 'pass' : 'fail';- 물음표 앞의 첫 번째 피연산자는 조건식, 즉 불리언 타입의 값으로 평가될 표현식.
평과의 결과가 불리언 값이 아니면 불리언 값으로 암묵적 타입 변환된다. 이 때 조건식이 참이면 콜론(:)앞의 두 번째 피연산자가 평가되어 반환되고, 거짓이면 :뒤의 세 번째 피연산자가 평가되어 반환된다.
var x = 2;
// 2 % 2는 0이고 0은 false로 암묵적 타입 변환된다.
var result = x % 2 ? '홀수' : '짝수';
console.log(result); //짝수- 삼항 조건 연산자는 if else와 비슷하다고 할 수 있다.
var x = 2, result;
// 2 % 2는 0이고 0은 false로 암묵적 타입 변환된다.
if(x % 2) result = '홀수';
else result = '짝수';
console.log(result); //짝수그럼 삼항 연산자랑 if else랑은 무슨 차이에요?
- 삼항 조건 연산자 표현식은 값처럼 사용할 수 있지만 if..else문은 값처럼 사용이 불가능하다!
var x = 10;
//if..else 문은 표현식이 아닌 문이다. 따라서 값처럼 사용할 수 없다.
var result = if(x%2){result = '홀수'; }else{result = '짝수'; };
//SyntaxError: Unexpected token if- 즉, 삼항 조건 연산자 표현식은 값으로 평가할 수 있는 표현식인 문이다. 따라서 삼항 조건 연산자 표현식은 값처럼 다른 표현식의 일부가 될 수 있어 매우 유용하다.
var x = 10;
//삼항 조건 연산자 표현식은 표현식인 문이다. 따라서 값처럼 사용할 수 있다.
var result = x % 2 ? '홀수' : '짝수';
console.log(result); //짝수어떤 값을 결정해야 한다면 if else문보다 삼항 조건 연산자 표현식을 사용하는 편이 유리하다. 하지만 조건에 따라 수행해야 할 문이 하나가 아니라 여러 개라면 if...else문의 가독성이 더 좋다.
논리 연산자
- 우항과 좌항의 피연산자(부정 논리 연산자의 경우 우항의 피연산자)를 논리연산한다.
| 논리 연산자 | 의미 | 부수 효과 |
|---|---|---|
| l l | 논리합(OR) | X |
| && | 논리곱(AND) | X |
| ! | 부정(NOT) | X |
//논리합(||) 연산자
true || true; //true
true || false; //true
false || true; //true
false || false; //false
//논리곱(&&) 연산자
true && true; // true
true && false; //false
false && true; //false
false && false; //false
//논리 부정(!) 연산자
!true; //false
!false; //true- 논리 부정(!) 연산자는 언제나 불리언 값을 반환한다. 단, 피연산자가 반드시 불리언 값일 필요는 없다. 피연산자가 불리언 값이 아니면 불리언 타입으로 암묵적 타입 변환이 이루어진다.
//암묵적 타입 변환
!0; //true
!'Hello'; //false- 논리합(||) 또는 논리곱(&&) 연산자 표현식의 평가 결과는 불리언 값이 아닐 수도 있다. 논리합(||) 또는 논리곱(&&) 연산자 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가된다.
//단축평가
'Cat' && 'Dog'; // Dog나중에 단축평가에 대해 자세히 살펴보기로!
드 모르간의 법칙
- 논리 연산자로 구성된 복잡한 표현식은 가독성이 좋지 않아 한눈에 이해하기 어렵다. 이러한 경우 드 모르간의 법칙을 활용하면 표현식을 좀 더 가독성 좋은 표현식으로 변환할 수 있다.
!(x || y) === (!x && !y)
!(x && y) === (!x || !y)- 이해하기 쉽게 말하면 각 조건을 부정하고 논리곱을 논리합으로 논리합을 논리곱으로 바꾸고 전체를 부정하면 원래 조건과 동일하다!
- 위의 식 !(x || y)은 (!x && !y)와 같은 값을 표현한다. 반대도 마찬가지이다.
이해가 안됐다면 해당 url에 들어가 더 자세히 알아보도록 하자!
https://ko.wikipedia.org/wiki/%EB%93%9C_%EB%AA%A8%EB%A5%B4%EA%B0%84%EC%9D%98_%EB%B2%95%EC%B9%99
쉼표 연산자
- 왼쪽 피연산자부터 차례대로 피연산자를 평가하고 마지막 피연산자의 평가가 끝나면 마지막 피연산자의 평가 결과를 반환한다.
var x, y, z;
x = 1, y = 2, z = 3; // 3그룹 연산자
- 소괄호()로 피연산자를 감싸는 그룹 연산자는 자신의 피연산자인 표현식을 가장 먼저 평가한다.
- 그룹 연산자를 사용하면 연산자의 우선순위를 조절할 수 있다.
- 연산자의 우선순위가 가장 높다.
10 * 2 + 3 //23
//그룹 연산자를 사용하여 우선순위를 조절
10 * (2+3);//50typeof 연산자
- 피연산자의 데이터 타입을 문자열로 반환한다.
- string, number, boolean, undefined, symbol, object, function
- null을 반환하는 경우는 없다.
typeof 1 //number
typeof undefined // undefined
typeof [] // object
typeof function (){} // function
//등....선언하지 않은 식별자를 typeof로 연산하면 ReferenceError가 아닌 undefined를 반환한다.
지수 연산자
- ES7에서 도입된 지수 연산자
- 피연산자를 밑(base)으로, 우항의 피연산자를 지수(exponent)로 거듭 제곱하여 숫자 값을 반환한다.
2 ** 2; // 4
2 ** 2.5; // 5.656854~~
2 ** 0; // 1- 지수 연산자가 도입되기 이전에는 Math.pow를 사용함
Math.pow(2,2) //4
Math.pow(2,2.5) // 5.656854~~
Math.pow(2,0) // 1- 지수 연산자는 아래와 같은 경우 Math.pow보다 가독성이 좋다!
//지수 연산자의 결합 순서는 우항에서 좌항이다. 즉, 우결합성을 갖는다.
2 ** (3 ** 2); //512
Math.pow(2, Math.pow(3,2)); //512- 음수를 거듭제곱의 밑으로 사용해 계산하려면 괄호로 묶어야한다!
-5 ** 2; //SystaxError
(-5) ** 2; // 25- 다른 산술 연산자와 마찬가지로 할당 연산자와 함께 사용할 수 있따.
var num = 5;
num **= 2; //25- 이항 연산자 중에서 우선순위가 가장 높다.
2 * 5 ** 2; //50그 외의 연산자들
- ?. - ?? - delete - new - instanceof - in
연산자의 부수효과
- 부수효과가 있는 연산자는 할당 연산자(=), 증가/감소 연산자(++/--), delete이다.
var x;
//할당 연산자는 변수 값이 변하는 부수 효과가 있다. 이는 x 변수를 사용하는 다른 코드에 영향을 준다.
x=1;
console.log(x); //1
//증가/감소 연산자(++/--)는 피연산자의 값을 변경하는 부수 효과가 있다.
x++;
console.log(x); //2
var o = { a: 1 };
//delete연산자는 객체의 프로퍼티를 삭제하는 부수 효과가 있따. 이는 o 객체를 사용하는 다른 코드에 영항을 준다.
delete o.a;
console.log(o); //{}연산자의 우선순위
- 연산자가 실행되는 순서로 우선순위가 높을수록 먼저 실행된다.
연산자 결합 순서
- 어느쪽부터 평가를 수행할 것인가를 나타내는 순서이다.
| 결합 순서 | 연산자 |
|---|---|
| 좌항 -> 우항 | +, -, /, %, <, <=, >, >=, &&, ll, ., [], (), ??, ?., in, instanceof |
| 우항 -> 좌항 | ++, --, 할당 연산자(=,+=,-=,...), !x, +x, -x, ++x, --x, typeof, delete, ? ... : ..., ** |
프론트엔드 공부중입니다!