[JS-책 편김에 끝까지] 연산자

연산자 operator

• 산술 연산자 arithmetic operators
  산술 연산자는 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만든다.

  이항 산술 연산자	의미	부수효과
  +	덧셈	X
  -	뺄셈	X
  *	곱셈	X
  /	나눗셈	X
  %	나머지	X
  **	지수, 거듭제곱	X

  • +연산자 주의점
    let text = '두개의' + '문자';
    console.log(text); // '두개의 문자';
    text = '1' + 1;
    console.log(text); // 11, 숫자와 문자열을 더하면 문자열로 변환된다!

• 단항 산술 연산자 unary operator
  1개의 피연산자를 산술 연산하여 숫자 값을 만듦

단항 산술 연산자	의미	부수효과
++	증가	O
--	감소	O
+	어떤 효과도 없고 음수를 양수로 반전하지도 않음	X
-	양수를 음수로, 음수를 양수로 반전 값을 반환	X

let x = 1;

// ++연산자는 피연산자의 값을 변경하는 암묵적 할당이 이루어짐
x++; // x + x = 1;
console.log(x); //2

// --연산자는 피연사자의 값을 변경하는 암묵적 할당이 이루어짐
x--; // x = x - 1;
console.log(x); // 1

let a = 5;
a = -a; // -1 * 5
console.log(a); // -5
console.log(-a); // 5

a = -a; // -5
a = +a; // +(-5)
console.log(a); // -5

// +의 다른 역할: 숫자가 아닌 타입들을 숫자로 변환하여 값으로 확인할 수 있음
console.log(+false); // 0
console.log(+null); // 0
console.log(+''); // 0
console.log(+true); // 1
console.log(+'text'); // NaN 문자열은 숫자로 변환할 수 없기 때문에
console.log(+undefined); // NaN

• 할당 연산자 assignment
  우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당한다. 할당 연산자는 좌항의 변수에 값을 할당하므로 변수 값이 변하는 부수효과가 있다.

  할당 연산자	예	동일 표현	부수효과
  =	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

• 비교 연산자 comparison
  좌항과 우항의 피연산자를 비교한 다음 그 결과를 불리언 값으로 반환한다. 비교 연산자는 if문이나 for문과 같은 제어문의 조건식에서 주로 사용한다.

  • 동등/일치 비교 연산자 equlity

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

    // 동등 비교
    5 == 5; //true
    5 == '5'; // true 타입은 다르지만 암묵적 타입 변환을 통해 일치시킴
    0 == ''; // true
    0 == '0'; // true
    false == 'false'; // false
    false == '0'; // true
    false == null; // false
    false == undefined; // false
    const obj1 = {
    	name: 'js',
    }
    const obj2 = {
    	name: 'js',
    }
    console.log(obj1 == obj2); // false
    // obj1과 obj2가 각각 할당된 메모리 주소가 달라서(obj1은 101호, obj2는 102호).
    console.log(obj1 === obj2); // false
    // obj1과 obj2의 메모리에 담긴 값 자체가 다르기 때문
    console.log(obj1.name == obj2.name); // true
    console.log(obj1.name === obj2.name); // true
    let obj3 = obj2;
    console.log(obj3 == obj2); // true
    console.log(obj3 === obj2); // true
    // obj3과 obj2는 동일한 메모리 주소를 가지고 있기 때문에 타입과 값이 같다
    // 일치 비교
    5 === 5; // true
    5 === '5'; // false 암묵적 타입 변환을 하지 않고 값을 비교
    NaN === NaN; // false NaN은 자신과 일치하지 않는 유일한 값
    0 === 0; // true
    0 === -0; // true 양의 0과 음의 0은 비교/동등 비교 모두 결과는 true
    // 부동등 비교
    5 != 8; // true
    5 != 5; // false
    5 != '5'; // false
    // 불일치 비교
    5 !== 8; // true
    5 !== 5; //false
    5 !== '5'; // true

• 대소 관계 비교 연산자 relational

  대소 관계 비교 연산자	예제	설명	부수효과
  >	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

삼항 조건 연산자 tenary

조건식의 평가 결과에 따라 반환할 값을 결정한다. 자바스크립트의 유일한 삼항 연산자이며, 부수효과는 없다.

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

const x = 10;

const result = x % 2 ? '홀수' : '짝수';

console.log(result); // 짝수

논리 연산자 logical

우항과 좌항의 피연산자를 논리 연산한다.

논리 연산자	의미	부수효과
||	논리합(OR)	X
&&	논리곱(AND)	X
!	부정(NOT)	X

// 논리합 - 두 결과중 하나라도 참일 때
console.log( true || true );   // true
console.log( false || true );  // true
console.log( true || false );  // true
console.log( false || false ); // false
let hour = 12;
let isWeekend = true;

if (hour < 10 || hour > 18 || isWeekend) {
  console.log( '영업시간이 아닙니다.' ); // 주말이기 때문임
}

//논리곱 - 두 결과가 모두 참일 때
console.log( true && true );   // true
console.log( false && true );  // false
console.log( true && false );  // false
console.log( false && false ); // false

let hour = 12;
let minute = 30;

if (hour == 12 && minute == 30) {
  console.log( '현재 시각은 12시 30분입니다.' );
}

//부정
console.log( !true ); // false
console.log( !0 ); // true

☝🏻 이 외에도 쉼표, 그룹, typeof, 지수, 옵셔널체이닝, null병합, 프로퍼티삭제 등등 여러가지가 더 있음

❗️ 증가/감소 연산자는 위치에 의미가 있음

• 피연산자 앞에 위치한 전위 증가/감소 연산자는 먼저 피연산자의 값을 증가/감소 시킨 후 다른 연산을 수행 (++a)
• 피연산자 뒤에 위치한 후위 증가/감소 연산자는 먼저 다른 연산을 수행한 후 피연산자의 값을 증가/감소 시킴 (a++)

a = 0;
let b = a++;
console.log(b); // 0
console.log(a); // 1

// 위 코드는 할당 연산이기 때문에 b에 0인 a를 할당한 뒤 a를 증가시킨다. 
// 그러니까 b에 0을 할당하는 게 연산의 우선이기 때문에 할당을 하고나서 a를 증가시킴

a = 0;
let b = ++a;
console.log(b); // 1
console.log(a); // 1

// 위와 거의 비슷한 코드다. 바뀐게 있다면 ++연산자가 이번엔 a의 앞에 갔다.
// 먼저 번의 코드의 우선순위를 생각한다면 이번엔 반대로 값을 먼저 증가시킨 후 할당

표현식 expression

값(value)에는 원시타입과 객체타입으로 나타낼 수 있다고 했다. 이를 코드에서 값을 나타내는 것을 리터럴(literal)이라고 한다.

• 1 숫자 리터럴 표현식
• 1 + 1 연산자 표현식
• see() 함수 호출 표현식
• let a; 선언문
• a = 1; 할당문, 할당 표현식인 문