07 연산자
📍 연산자 : 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만듦
📍 피연산자 : 연산의 대상, 값으로 평가될 수 있는 표현식
- 피연산자는 '값'이라는 명사역할, 연산자는 '피연산자를 연산해 새로운 값을 만든다'라는 동사역할을 함
- 피연산자는 연산의 대상이 되어야 하므로 값으로 평가할 수 있어야 한다.
💡산술 연산자
: 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만듦
*산술연산이 불가능한 경우 NaN을 반환함
-
이항 산술 연산자
-
2개의 피연산자를 산술 연산해 숫자 값을 만든다
-
모든 이항 산술 연산자는 피연산자의 값을 변경하는 부수효과(side effect)가 없음 -> 어떤 산술 연산을 해도 피연산자의 값이 바뀌지 않고 언제나 새로운 값을 만듦
-
종류 : +, -, *, /, %
example 5 + 2; // 7 5 - 2; // 3 5 * 2; // 10 5 / 2; // 2.5 5 % 2; // 1
-
-
단항 산술 연산자
-
1개의 피연산자를 산술 연산해 숫자 값을 만든다
-
증가(++)/감소(--)연산자는 피연산자의 값을 변경하는 부수효과가 있음(+,- 연산자는 부수효과X) -> 피연산자의 값을 변경하는 암묵적 할당 이루어짐
-
종류 : +, -, ++, --
example var x = 1; x++; // x = x+1 console.log(x); // 2 x--; // x = x-1 console.log(x); // 1 -
증가/감소 연산자는 위치에 따라 연산이 달라진다
-
피연산자 '앞'에 위치해 전위 증가/감소 연산을 하면 : 먼저 피연산자의 값을 증가/감소 시킨 후, 다른 연산을 수행
-
피연산자 '뒤'에 위치해 후위 증가/감소 연산을 하면 : 먼저 다른 연산을 수행한 후, 피연산자의 값을 증가/감소시킴
example 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
-
-
+단항 연산자는 어떠한 효과도 없고, 숫자 타입이 아닌 피연산자에 사용하면 숫자타입으로 변환해 반환 -> 피연산자를 변경하는 것이 아니고 숫자 타입으로 변환한 값을 생성해서 반환(=부수효과X)
example 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; x = 'Hello'; console.log(+x); // NaN console.log(x); // Hello -
-단항 연산자는 피연산자의 부호를 반전한 값으로 반환하는데 숫자타입으로 변환해 반환 -> 피연산자를 변경하는 것이 아니라 부호를 반전한 값을 숫자타입으로 생성해 반환(=부수효과X)
example -(-10); // 10 -'10'; // -10 -true; // -1 -'Hello' // NaN
-
-
문자열 연결 연산자
-
+연산자는 피연산자 중 하나 이상이 문자열인 경우, 문자열 연결 연산자로 동작함 (그 외의 경우는 산술 연산자로 동작)
example '1' + 2; // 12 1 + '2'; // 12 1 + 2; // 3 1 + true; // 2 1 + false; // 1 1 + null; // 1 +undefined; // NaN 1 + undefined; // NaN -
위의 예시를 보면 불리언값, null, undefined가 자동으로 숫자타입으로 변환되는데, 이는 자바스크립트 엔진에 의해 암묵적으로 타입을 자동변환시키는 것이다. 이를 '암묵적 타입 변환' or '타입 강제 변환'이라고 한다.
-
💡할당 연산자
: 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당
-
할당 연산자는 좌항의 변수에 값을 할당하므로 변수값이 변하는 부수효과가 있다
-
종류 : =, +=, -=, *=, /=, %=
example var x; x = 10; console.log(x); // 10 x += 5; console.log(x); // 15 x -= 5; console.log(x); // 10 x *= 5; console.log(x); // 50 x /= 5; console.log(x); // 10 x %= 5; console.log(x); // 0 var str = 'My name is '; str += 'Lee'; console.log(str); // My name is Lee -
할당문은 '표현식인 문' -> 값으로 평가되는 표현식인 문으로써 할당된 값으로 평가됨 -> 다른변수에도 사용가능
var x; console.log(x = 10) // 10 // x에 할당된 숫자 값 10으로 평가되므로 할당문을 다른 변수에도 할당 할 수 있음 var a, b, c; a = b = c = 0; console.log(a, b, c); // 0 0 0
💡비교 연산자
: 좌항과 우항의 피연산자를 비교한 다음 그 결과를 불리언값으로 반환 (if문, for문과 같은 제어문에서 주로 사용)
- 동등/일치 비교 연산자
- 동등 비교 연산자 : 좌항과 우항의 피연산자를 비교할때 먼저 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교(=값만 비교)
-
종류 : ==, !=
-
편리하지만 결과를 예측하기 어렵고 실수하기 쉬움 -> 사용하지 않는 것이 좋음
example 5 == 5; // true 5 == '5'; // true
-
- 일치 비교 연산자 : 좌항과 우항의 피연산자가 타입도 같고 값도 같은 경우에 한하여 암묵적 타입 변환을 하지않고 값을 비교(=값과 타입 비교)
-
종류 : ===, !==
example 5 === 5; // true 5 === '5'; // false -
일치 비교 연산자에서 주의할 것은 NaN
: 자기 자신과 일하지 않는 유일한 값 / 숫자가 NaN인지 알고 싶으면 Number.isNaN()을 사용한다
example NaN === NaN; // false Number.isNaN(NaN); // true Number.isNaN(10); // false Number.isNaN(1 + undefined); // true -
숫자 0도 주의 -> 양의 0과 음의 0이 있는데 이들을 비교하면 true반환
example 0 === -0 // true 0 == -0 // true
-
- 동등 비교 연산자 : 좌항과 우항의 피연산자를 비교할때 먼저 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교(=값만 비교)
💡대소 관계 비교 연산자
: 피연산자의 크기를 비교해 불리언값을 반환
-
종류: >, <, >=, <=
example 5 > 0 // true 5 > 5 // false 5 >= 5 // true 5 <= 5 // true
💡삼항 조건 연산자
: 조건식의 평가 결과에 따라 반환할 값 결정
-
부수효과X
-
형태 : 조건식 ? 조건식이 true일때 반환할 값 : 조건식이 false일때 반환할 값
example var result = score > 60 ? 'pass' : 'fail'; -
? 앞의 첫번째 피연산자는 불리언 타입의 값으로 평가될 표현식임
-
if else문과 비슷하지만 중요한 차이가 있음
- 삼항 조건 연산자 표현식은 값처럼 사용할 수 있지만, if ... else문은 값처럼 사용할 수 없음 (표현식이 아닌 문)
- 삼항 조건 연산자 표현식은 값으로 평가할 수 있는 표현식인 문 -> 값처럼 다른 표현식의 일부가 될 수 있어 매우 유용!
- 따라서, 조건에 따라 어떤 값을 결정해야 한다면 삼항 조건 연산자가 유리하고, 조건에 따라 수행해야 할 문이 여러개라면 if ... else문의 가독성이 더 좋음
example var x = 10; var result = if ( x % 2 ) { result = '홀수'; } else { result = '짝수';}; // syntax error: unexpected token if var y = 12; var resultt = y % 2 ? '홀수' : '짝수'; console.log(resultt); // 짝수
💡논리 연산자
: 우항과 좌항의 피연산자를 논리 연산(부정논리연산자는 우항의 피연산자를 연산)
- 종류: ||, &&, !
example true || tue; // true true || false; // true false || true; // true false || false; // false true && true; // true true && false; // false false && ture; // false false && false; // false !ture; // false !false; // true - 논리부정(!)연산자는 암묵적타입변환을해 언제나 불리언값을 반환
- 논리합(||) 또는 논리곱(&&) 연산자 표현식의 평가 결과는 불리언 값이 아닐 수 도 있음 (언제나 2개의 피연산자 중 어느 한쪽으로 평가됨 -> 단축평가)
- 논리 연산자로 구성된 복잡한 식은 드 모르간의 법칙 사용해 좀 더 가독성 좋은 표현식으로 변환 가능
example !0; // true !'Hello'; // false // 부정연산자 'Cat' && 'Dog'; // Dog // 단축 평가 // 드모르간법칙 !(x || y) === (!x && !y) !(x && y) === (!x || !y)
💡쉼표 연산자
: 쉼표(,) 연산자는 왼쪽 피연산자부터 차례대로 피연산자를 평가하고 마지막 피연산자의 평가가 끝나면 마지막 피연산자의 결과를 반환
example
var x, y, z;
x = 1, y = 2, z = 3; // 3💡그룹 연산자
: 소괄호('()')로 피연산자를 감싸는 그룹 연산자는 자신의 피연산자인 표현식을 가장 먼저 평가한다. 그룹 연산자를 사용하면 우선순위를 조절 할 수 있다. 또한 그룹 연산자가 연산자 우선 순위 중 가장 높다.
example
10 * 2 + 3; // 23
10 * (2 + 3); // 50💡typeof 연산자
: 피연산자의 데이터타입을 문자열로 반환해 타입을 알려줌
-
string, number, boolean, undefined, symbol, object, function 중 하나를 반환
-
주의할 점 : null 값은 object를 반환하는데 주의 (자바스크립트의 첫번째 버그) -> 값이 null 타입인지 확인할 때는 일치 연산자(===)사용할 것
-
주의할 점 : 선언하지 않은 식별자를 typeof 연사자로 연산하면 ReferenceError가 발생되지 않고 undefined반환
example typeof '' // string typeof 1 // number typeof NaN // number typeof true // boolean typeof undefined // undefined typeof Symbol() // symbol typeof null // object typeof [] // obejct typeof {} // object typeof new Date() // obejct typeof /test/gi // object typeof function() {} // function var foo = null; typeof foo === null; // false (object 반환함) foo === null; // true typeof undelcared; // undefined
💡지수 연산자
: ES7에서 도입된 지수 연산자는 좌항의 피연산자 밑으로, 우항의 피연산자를 지수로 거듭제곱해 숫자로 반환
- 형태: 피연산자 ** 피연산자
example 2 ** 2; // 4 2 ** 2.5; // 5.656854240238 2 ** 0; // 1 2 ++ -2; // 0.25 - 지수 연산자가 도입되기이전에는 Math.pow 메서드 사용 but 지수연산자가 가독성이 더 좋음
example Math.pow(2, 2); // 4 Math.pow(2, 5); // 5.656854240238 Math.pow(2, 0); // 1 Math.pow(2, -2); // 0.25 - 음수를 거듭제곱의 밑으로 사용해 계산하려면 괄호로 묶어야함
example (-5) ** 2; // 25 -5 ** 2; // Syntax error - 할당 연산자와 함께 사용 가능
example var num = 5; num ** 2; // 25
💡 그 외의 연산자
- 종류
- ?. : 옵셔널 체이닝 연산자
- ?? : null 병합 연산자
- delete : 프로퍼티 삭제
- new : 생성자 함수를 호출할때 사용해 인스턴스 생성
- instance of : 좌변의 객체가 우변의 생성자 함수와 연결된 인스턴스인지 판별
- in : 프로퍼티 존재 확인
💡연산자 부수효과
: 대부분의 연산자는 다른 코드에 어떤 영향을 주지 않고 새로운 값 생성시킴
- 부수효과가 있는 연산자 -> 할당연산자(=), 증가/감소연산자(++/--), delete연산자
example
var x;
x = 1;
console.log(x); // 1
// 할당 연산자는 변수 값이 변하는 부수효과가 있음. 이는 x 변수를 사용하는 다른 코드에 영향을 줌
x++;
console.log(x); // 2
// 증가/감소 연산자(++/--)는 피연산자의 값을 변경하는 부수 효과가 있음
// 피연산자 x의 값이 재할당되어 변경됨. 이는 x 변수를 사용하는 다른 코드에 영향을 줌
var o = { a:1 };
delete o.a;
console.log(o); // {}
// delete 연산자는 객체의 프로퍼티를 삭제하는 부수 효과가 있음. 이는 o 객체를 사용하는 다른 코드에 영향을 줌💡 연산자 우선순위
: 여러 개의 연산자로 이뤄진 문이 실행될떄 연산자가 실행되는 순서 = 우선순위가 높을수록 먼저 실행됨
1. ()
2. new(매개변수 존재), ., [](프로퍼티 접근), ()(함수호출), ?.(옵셔널 체이닝 연산자)
3. new(매개변수 미존재)
4. x++, x--
5. !x, +x, =x, ++x, --y, typeof, delete
6. **(이항 연산자 중 우선순위 가장 높음)
7. *, /, %
8, +, -
9. <, <=, >, =>, in, insteadof
10. ==, !==, ===, !==
11. ??(null 병합 연산자)
12. &&
13. ||
14. ? ... : ...
15. 할당 연산자(=,+,+=,-=, ...)
16. ,
💡 연산자 결합순서
: 어느 쪽 (좌항 or 우항)부터 평가를 수행할 것인지를 나타내는 결합순서
-
결합순서
- 좌항 -> 우항 : +, -, /, %, <, <=, >, >=, &, ||, ., [], (), ??, ?., in, instanceof
- 우항 -> 좌항 : ++, --, 할당연사자(=, +=, -= ...), !x, +x, ++x, --x, typeof, delete, ? ... : ..., **
