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

짱쫑·2023년 2월 8일
0

javascript

목록 보기
3/10
post-thumbnail

연산자 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 = 5x = 5O
    +=x += 5x = x + 5O
    -=x -= 5x = x - 5O
    *=x *= 5x = x * 5O
    /=x /= 5x = x / 5O
    %=x %= 5x = x % 5O
  • 비교 연산자 comparison
    좌항과 우항의 피연산자를 비교한 다음 그 결과를 불리언 값으로 반환한다. 비교 연산자는 if문이나 for문과 같은 제어문의 조건식에서 주로 사용한다.

    • 동등/일치 비교 연산자 equlity
      비교 연산자의미사례설명부수효과
      ==동등 비교x == yx와 y의 값이 같음X
      ===일치 비교x === yx와 y의 값과 타입이 같음X
      !=부동등 비교x != yx와 y의 값이 다름X
      !==x !== yx와 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 > yx가 y보다 크다X
    <x < yx가 y보다 작다X
    >=x >= yx가 y보다 크거나 같다X
    <=x <= yx가 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; 할당문, 할당 표현식인 문
profile
不怕慢, 只怕站

0개의 댓글