JS BASIC | 연산자

표현식(expression)은 리터럴, 식별자, 연산자, 함수 호출 등의 조합을 말한다. 표현식은 평가(evaluation. 표현식을 실행하여 하나의 값을 만드는 과정)되어 하나의 값을 만든다. 즉, 표현식은 하나의 값으로 평가될 수 있는 문(statement)이다.

연산자(Operator)는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입 연산 등을 수행해 하나의 값을 만든다. 이때 연산의 대상을 피연산자(Operand)라 한다.

피연산자도 평가되어 하나의 값이 되므로 표현식이고 피연산자를 연산자와 결합한 연산자 표현식도 물론 표현식이다.

1. 산술연산자(Arithmetic Operator)

피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만든다. 산술 연산을 할 수 없는 경우에는 NaN을 반환한다.

산술 연산자는 이항 산술 연산자와 단항 산술 연산자로 구분할 수 있다.

이항 산술 연산자	의미
+	덧셈
-	뺄셈
*	곱셈
/	나눗셈
%	나머지

증가/감소(++/–-) 연산자를 주의 깊게 보면 좋다.

단항 산술 연산자	의미
++	증가
--	감소
+	어떠한 효과도 없다. 음수를 양수로 반전하지도 않는다.
-	양수를 음수로 음수를 양수로 반전한 값을 반환한다.

전위 증가와 후위 증가

++을 작성할 때, 연산자의 위치에 따라 동작이 다르다.

• 전위 증가(++num)
  num을 1 증가시킨 후, 증가된 값을 반환합니다.
• 후위 증가(num++)
  현재 num 값을 반환한 후, num을 1 증가시킵니다.

1-1. 형 변환 (type casting)

값의 자료형이 바뀌는 현상 또는 바꾸는 행위
이때, 문자열과 숫자의 사칙연산에서 덧셈 (+)의 경우 문자열로, 뺄셈(-), 곱셈(*), 나눗셈(/)의 경우 숫자로 자동으로 형변환(묵시적 형 변환)하여 계산된다.

1 + '0' = '10'
'3' - 0 = 3
'3' * 2 = 6
4 - true =  3
4 * false = 0
4 / '2' = 2
'4' ** 'true' = 4
4 % 'two' = NaN
//'two'의 경우 숫자가 아니기 때문에
//숫자가 아닌 것과 계산을 하면 무조건 답은 NaN가 된다.

💡 실수 연산 시 주의할 점
자바 스크립트는 다른 언어와 다르게 정수 뿐만 아니라 실수도 계산할 수 있다. 하지만 결과가 실수로 나오는 연산에서는 문제가 발생한다.
이는 컴퓨터가 0과 1로만 이루어져 있기 때문인데, 컴퓨터의 2진법과 우리가 사용하는 10진법의 결과값이 미세한 차이가 생겨 부동소수점 문제가 나타나게 된다.
따라서 실수를 계산할 때는 다른 방법을 주로 사용한다.

0.1 + 0.2; = 0.30000000000000004
.
//가장 간단한 방법은 실수를 정수로 바꿔서 계산하고 마지막에 다시 실수로 바꾸는 것
(0.3 * 10 - 0.1 * 10) / 10; = 0.2

---

2. 할당 연산자(Assignment Operator)

우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당한다.

할당 연산자	사례	동일 표현
=	x = y	x = y
+=	x += y	x = x + y
-=	x -= y	x = x - y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y

// 다음 세 줄은 같은 의미입니다.
x = x + 1;
x += 1;
x++;
    
x = x - 1;
x -= 1;
x--;

---

3. 비교 연산자(Comparison Operator)

비교 연산자	의미	사례	설명
==	동등 비교	x == y	x와 y의 값이 같음
===	일치 비교	x === y	x와 y의 값과 타입이 같음
!=	부등 비교	x != y	x와 y의 값이 다름
!==	불일치 비교	x !== y	x와 y의 값과 타입이 다름

‘==’와 ‘!=’는 value(값)만 비교
‘===’와 ‘!==’는 value(값)과 Datatype(자료형)까지 비교한다.
후자가 더 엄격한 비교연산자이기 때문에 후자 사용을 추천한다.

5 == '6'; = true
4 != '4'; = false
        
5 === '5'; = false
1 === true; = false

---

4. 삼항 조건 연산자

조건식 ? 조건식이 ture일때 반환할 값 : 조건식이 false일때 반환할 값

//예시 1
5 > 0 ? '참입니다' : '거짓입니다'; = "참입니다"

//예시 2
let value = 5 < 0 ? '참입니다' : '거짓입니다';
value; = "거짓입니다"

삼항 조건 연산자는 if…else 문을 사용해도 동일한 처리를 할 수 있다.
하지만 if…else 문은 표현식이 아니기 때문에 값으로 평가할 수 없다. 따라서 삼항 조건 연산자식은 다른 표현식의 일부가 될 수 있어 매우 유용하다.

4-1. 조건부 연산의 중첩

가독성을 위해 소괄호 연산자로 묶는 것이 좋다.

let value = condition1 ? (condition2 ? '둘 다 참' : 'condition1만 참') 
: 'condition1이 거짓';

let value = condition1 ? 'condition1이 참' : (condition2 ? 'condition2가 참' : '둘 다 거짓');

---

5. 논리연산자(Logical Operator)

논리	연산자
||	논리합(OR)
&&	논리곱(AND)
!	부정(NOT)

논리 OR 연산자는 두 피연산자 중 하나라도 true라면 첫 번째 true 값을 반환하고, 두 피연산자가 모두 false일 때는 두 번째 피연산자 값을 반환한다.
논리 AND 연산자는 두 피연산자가 모두 true 라면 두 번째 피연산자 값을 반환한다.

❗ 단락 평가

논리 연산에서 첫 번째 피연산자의 값만으로 해당 식의 결과가 확실할 때, 두 번째 값은 평가하지 않는 것

첫 번째 값이 truthy하고 OR 연산자가 나온다면 그 결과는 무조건 true를 반환합니다. 반대로 첫 번째 값이 falsy하고 AND 연산자가 나온다면 그 결과는 무조건 false를 반환한다.

만약 아래처럼 코드를 작성하면, 값이 있을 땐 해당 값을, 없다면 문자열을 출력한다.

const printName = (person) => {
  const name = person && person.name;
  console.log(name || "없음");
}
printName(); //"없음" 반환
printName({ name : "홍길동" }); //"홍길동" 반환

만약 인수가 없을 경우 person은 falsy하기 때문에 더 검사하지 않고 name은 undefined가 된다. 따라서 undefined와 "없음" 중 truthy 한 값인 문자열을 출력한다.
person이 전달될 경우 true이고, AND 연산자 이므로 다음 값까지 검사하여 person.name을 name에 대입한다. 따라서 첫 번째 피연산자 값인 name이 출력된다.

---

6. 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 /test/gi        // "object"
typeof function () {}  // "function"

💡 사칙연산보다 우선순위가 높기 때문에 console.log(typeof 5-3); 일 경우 NaN가 출력된다. 괄호 필수!

+)

 console.log(typeof typeof (5-3));
 = console.log(typeof typeof 8);
 = console.log(typeof 'number'); = string;

💡 이때, null의 자료형을 typeof으로 확인할 경우 결괏값이 "null"이 아니라 "object"가 나오게 된다.
typeof null; = "object"
이 현상은 JS에서 유명한 버그이며, 초창기 실수 때문에 오류가 발생했지만 수정이 어려워 이대로 사용하고 있다. (참고)

---

8. 비트 연산자

32비트 숫자에서 작동하며, 피연산자는 32비트로 변환한다.

연산자	연산자 설명	예제
&	AND	논리곱(AND)
|	OR	논리합(OR)
~	NOT	부정(NOT)
^	XOR	서로 다를 때 1 반환
<<	Left Shift	비트를 왼쪽으로 이동
>>	Right Shift	부호를 유지하면서, 비트를 오른쪽으로 이동

---

9. instanceof

어떤 객체에 대해 지정한 객체의 데이터 타입에 대한 결과를 반환하는 연산자

object instanceof constructor

const a = new Car("Honda", "Accord", "1998");
console.log(a instanceof Car); //true

---

10. 기타 연산자

10-1. 삭제 (delete)

어떤 객체의 값을 삭제하는 연산자로, 삭제 후에는 삭제 값은 사용할 수 없다.

const person = {
                 firstName= "John",
                 lastName= "Song",
                 age= "27",
               };

delete person.age;
console.log(person.age); //undefined

10-2. 스프레드 연산자 (spread)

객체나 배열에 저장된 여러 개의 값을 개별로 흩뿌려주는 역할

// 예시 1
let arr = [1, 2, 3];
let arr2 = [4, ...arr, 5, 6];

// 예시 2
let obj = { a:1, b:2, c:3, };
let obj2 = { ...obj, d:4, e:5, f:6];
            
// 예시 3
function a(p1, p2, p3, p4 = 10){ //추가적으로 선언할 수도 있음
  console.log(p1, p2, p3); // 1, 2, 3
}
function(...arr);

Rest 연산자

스프레드 연산자와 생김새가 똑같음.
나머지 매개변수를 모두 가져와 뿌려주는 역할

let arr = [1, 2, 3];
function a(p1, ...rest){
  console.log(rest); // 2, 3
}
function(...arr);

한가지 주의할 점은 spread와 다르게 rest 뒤에는 추가적으로 매개변수를 선언할 수 없다.

10-3. javascript:void(0)

javascript:

가상 url로써, 브라우저에서 a 태그의 href의 값으로 javascript를 받는다면 이 값을 참조된 경로가 아닌 쌍점: 뒤에 오는 것을 자바스크립트의 코드로 해석한다.

<a href="javascript:alert('javascript')">Link</a>

void(0)

함수가 비어있다(void)뜻은, 그 함수가 아무것도 반환하지 않는다는 것을 의미한다.
자바스크립트에서 함수가 직접적으로 undefined를 반환하는 것과 비슷하다.

javascript:void(0)

링크를 클릭했을 때 다른 페이지로의 이동, 로딩을 원치 않을 경우 보통 #를 사용하는데, 이는 문제가 될 수 있다. 따라서 javascript:void(0)를 사용하게 되면, 그 어떤 코드도 실행하지 말라는 것과 같아져 대용으로 사용 가능하다.

<a href="#">클릭</a>
<a href="javascript:void(0);">클릭</a>

---

11. 연산자 우선순위

우선순위	연산자 유형	기호
20	그룹	()
19	함수 호출	., [], new, ()
18	인수 없이	new
17	후위	++, --
16	논리 NOT, ?, 단항, 단항, 전위, 전위, typeof, void, delete, await	!, ~, +, -, ++, --, typeof, void, delete, await
15	거듭제곱	**
14	곱셈, 나눗셈, 나머지	*, /, %
13	다항	+, -
12		<<, >>, >>>
11	미만, 이하, 초과, 이상	<, <=, >, >=, in, instanceof
10	동등,부등, 일치, 불일치	==, !=, ===, !==
9		&
8		^
7		|
6	논리 AND	&&
5	논리 OR	||
4	삼항 연산자	? :
3	할당	=, +=, -=, *=, =, /=, %=, <<=, >>=, >>>=, &=, ^=,
2		yield, yield*
1	쉼표	,

참고 링크: 포이마