JavaScript 연산자

seul_velog·2021년 11월 30일
JavaScript
0

JavaScript

목록 보기
5/25
post-thumbnail

📍 표현식과 문

표현식(expression)

  • 값은 다양한 방법(표현식)으로 생성할 수 있다.
  • 표현식은 리터럴, 식별자, 연산자, 함수 호출 등의 조합을 말한다.
  • 표현식은 평가(표현식을 실행하여 하나의 값을 만드는 과정)되어 하나의 값을 만들고, 값과 동등한 관계를 갖는다. (표현식은 값처럼 사용 가능하다.)

문(statement)

  • 문은 자바스크립트 엔진에게 내리는 명령이다.
  • 문이 실행되면 무슨 일인가가 일어나게 되는데, 예를들어 변수 선언문을 실행하면 변수가 선언이 되고, 할당문을 실행하면 할당이 된다. 조건문을 실행하면 주어진 조건에 따라 코드 블록({…})의 실행이 결정되고, 반복문을 실행하면 코드 블록이 반복 실행된다.
  • 문에는 표현식인 문과 표현식이 아닌 문이 있다.
  • 표현식 은 평가되어 값을 만들지만 그 이상의 행위는 할 수 없다. 문 은 var, let, const, function, class와 같은 선언 키워드를 사용하여 변수나 함수를 생성하기도 하고 if, for, while 문과 같은 제어문을 생성하여 프로그램의 흐름을 제어하기도 한다.

  • 표현식 의 역할은 값을 생성하는 것이다. 문 의 역할은 표현식 으로 생성한 값을 사용해 컴퓨터에게 명령을 내리는 것이다.

  • 자바스크립트의 모든 코드는 문 또는 표현식 이다.
    자연어에서 문 이 마침표로 끝나는 하나의 완전한 문장(Sentence)이라고 한다면 표현식 은 문 을 구성하는 요소이다. 표현식 은 그 자체로 하나의 문 이 될 수도 있다.




📍 연산자(operator)란?

연산자란 값에 대해서 어떤 작업을 컴퓨터에게 지시하기 위한 기호이다.

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

  • 피연산자가 “값”이라는 명사의 역할을 한다면 연산자는 “값을 만든다”라는 동사의 역할을 한다고 볼 수 있다. 

// 산술 연산자
	5 * 4 // 20

// 문자열 연결 연산자
	'My name is ' + 'seul' // "My name is seul"

// 할당 연산자
	var color = 'red'; // "red"

// 비교 연산자
	2 > 5 // false

// 논리 연산자
	(5 > 3) && (2 < 4)  // true

// 타입 연산자
	typeof 'Hi' // "string"




1. 산술 연산자 (Arithmetic Operator)

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

1-1. 이항 산술 연산자

1 + 3; // 더하기
6 - 4; // 빼기
2 * 7; // 곱하기
7 / 8; // 나누기
14 % 3; // 나머지
  • 이항 산술 연산자는 2개의 피연산자를 대상으로 연산하여 숫자 타입의 값을 만든다.


1-2. 단항 산술 연산자

++, -- 증감연산자

// 선대입 후증가 
      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
  • 단항 산술 연산자는 1개의 피연산자를 대상으로 연산한다.
  • 위의 증가/감소 연산자는 피연산자의 값을 변경하는 부수 효과가 있다.
    • 연산자의 위치가 피연산자 앞에 위치
      : 전위 증감 연산자(Prefix increment/decrement operator) 먼저 피연산자의 값을 증가/감소시킨 후, 다른 연산을 수행한다.
    • 연산자의 위치가 피연산자 뒤에 위치
      : 후위 증감 연산자(Postfix increment/decrement operator) 먼저 다른 연산을 수행한 후, 피연산자의 값을 증가/감소시킨다.

+ 단항 연산자

+10 // 10
+'10' // 10
+true // 1
+false // 0
  • 피연산자에 어떠한 효과가 없으며, 음수를 양수로 반전하지도 않는다.
  • 숫자 타입이 아닌 피연산자에 + 단항 연산자를 사용하면 피연산자를 숫자 타입으로 변환하여 반환하고, 이때 피연산자를 변경하는 것이 아니라 숫자 타입으로 변환한 값을 생성해서 반환하므로, 부수 효과는 없다.

- 단항 연산자

// 부호 반전
-(-10); // 10
// 문자열을 숫자로 타입 변환
-'10'; // -10
// 불리언을 숫자로 타입 변환
-true; // -1
 // 문자열을 숫자로 타입 변환할 수 없으므로 NaN 반환
-'Hello'; // NaN
  • 피연산자의 부호를 반전한 값을 반환하고, 숫자 타입이 아닌 피연산자에 사용하면 피연산자를 숫자 타입으로 변환하여 반환한다. 이때 피연산자를 변경하는 것이 아니라 부호를 반전한 값을 생성해 반환하기 때문에 부수 효과는 없다.


1-3. 문자열 연산자

+ 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작한다. 그 외의 경우는 덧셈 연산자로 동작한다. 

// 문자열 연결 연산자
     '1' + '2'      // '12'
     '1' + 2       // '12'
// 산술 연산자
      1 + 2          // 3
      1 + true       // 2 (true → 1)
      1 + false      // 1 (false → 0)
      true + false    // 1 (true → 1 / false → 0)
      1 + null       // 1 (null → 0)
      1 + undefined // NaN (undefined → NaN)
// ex.)
let string = 'hello ' + 'world'; // 'hello world'
let string2 = 'hello' + 5; // 'hello5'
let string3 = 1 + 'seul' + 3; // '1seul3'
let string4 = 2 + 3 + 'seul'; // '5seul'

  • 1 + true를 연산하면 자바스크립트 엔진은 암묵적으로 불리언 타입의 값인 true를 숫자 타입인 1로 타입을 강제 변환한 후 연산을 수행하는데, 이를 암묵적 타입 변환 또는 타입 강제 변환 이라고 한다.

  • ❗️ 아래 ex.) 를 보면 문자열과 더할 때, 문자열이 아닌 데이터는 문자열로 바꿔서 연결한다.
    ❓그런데 마지막줄을 보면, 23seul이 아니네? 🤔
    👉 그 이유는 왼쪽부터 더해나가기 때문에 먼저 숫자 2와 3을 더해서 5로 만든후 숫자 5와 문자열 seul이 만났기 때문!





2. 할당 연산자(Assignment Operator)

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

//
var x;
x = 10;
console.log(x); // 10
//
x += 5; // x = x + 5;
console.log(x); // 15
//
x -= 5; // x = x - 5;
console.log(x); // 10
//
x *= 5; // x = x * 5;
console.log(x); // 50
//
x /= 5; // x = x / 5;
console.log(x); // 10
//
x %= 5; // x = x % 5;
console.log(x); // 0
//
var str = 'My name is ';
str += 'seul'; // str = str + 'seul';
console.log(str); // 'My name is seul'
  • var x; console.log(x = 10); // 10
    : 할당 연산은 변수에 값을 할당하는 부수 효과만 있을 뿐 값으로 평가되지 않을 것처럼 보이지만, 할당 연산은 하나의 값으로 평가되는 표현식이다.
    할당 표현식은 할당된 값으로 평가된다. 위 예제의 경우 x에 할당된 숫자 값 10으로 평가된다.




3. 비교 연산자(Comparison Operator)

  • 프로그래밍에서 비교란 주어진 값들이 같은지, 다른지, 큰지, 작은지를 구분하는 것을 의미한다. 이 때 비교 연산자를 사용하는데 비교 연산자의 결과는 true나 false 중의 하나다.
  • true 는 비교 결과가 참이라는 의미이고, false 는 거짓이라는 뜻이다.
  • 비교 연산자는 'if문' 이나 'for문' 과 같은 제어문의 조건식에서 주로 사용된다.

3-1. 동등 비교 연산자 & 일치 비교 연산자

  • 좌항과 우항의 피연산자가 같은 값으로 평가되는지 비교해 불리언 값을 반환한다.
  • 부동등 비교 연산자 (!=) 와 불일치 비교 연산자 (!==) 는 동등 비교 연산자와 일치 비교 연산자의 반대 개념이다.

  • 동등 비교 연산자 ==
    : 동등 비교 연산자는 'loose equality'(느슨한 비교)라고 불린다. 타입을 변경해서 검사를 한다.
// 동등 비교
5 == 5    // true
// 타입은 다르지만 암묵적 타입 변환을 통해 타입을 일치시키면 같은 값을 갖는다.
5 == '5'   //true
5 == 8    // false
  • 일치 비교 연산자 ===
    : 일치 비교 연산자는 'strict equality'(엄격한 비교)라고 불린다. 타입을 신경써서 (타입이 다르면 다른거지!😒) 검사한다. (타입과 값 모두가 일치해야한다.)
    ❗️ 되도록이면 동등 비교 연산자보다 일치 비교 연산자를 쓰는게 좋다.
// 일치 비교
5 === 5   // true
5 === '5' // false

❗️ 일치 연산자에서 몇가지 주의할 것

  • NaN === NaN // false
    일치 비교 연산자에서 NaN을 주의하자! NaN은 자신과 일치하지 않는 유일한 값이다. (숫자가 NaN인지조사하려면 빌트인 함수 isNaN을 사용해야 한다고 한다. )

  • 0 === -0 // true

  • null === undefined // false



3-2. 대소 관계 비교 연산자

  • 대소 관계 비교 연산자는 피연산자의 크기를 비교하여 불리언 값을 반환한다.
5 > 0; // true
5 < 5; // false
5 >= 5; // true
5 <= 5; // true

📌 ✍️ 동등 비교 연산자 & 일치 비교 연산자 연습 문제 ▼ 

1)
console.log(0 == false);  // true
console.log(0 === false);  // false
console.log('' == false);  // true
console.log('' === false);  // false
console.log(null == undefind);  // true
console.log(null === undefind);  // false

2)
const seul1 = {name: 'seul' };
const seul2 = {name: 'seul' };
const seul3 = seul1;
console.log(seul1 == seul2);  // false
console.log(seul1 === seul2);  // false
console.log(seul1 === seul3);  // true 😄




4. 삼항 연산자(ternary operator)

  • 삼항 연산자는 (조건 ? 참 : 거짓) 으로 구성되어 있다.
  • 조건식의 평가 결과에 따라 반환할 값을 결정한다. 자바스크립트의 유일한 삼항 연산자이며 부수 효과는 없다.

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

ex.)
var x = 2;
// x가 짝수이면 '짝수'를 홀수이면 '홀수'를 반환한다.
// 2 % 2는 0이고 0은 false로 암묵적 타입 변환된다.
var result = x % 2 ? '홀수' : '짝수';
console.log(result); // 짝수

  • 만약 조건식의 평가 결과가 불리언 값이 아니면 불리언 값으로 암묵적 타입 변환된다.

  • 삼항 조건 연산자는 첫 번째 피연산자가 true로 평가되면 두 번째 피연산자를 반환하고, 첫 번째 피연산자가 false로 평가되면 세 번째 피연산자를 반환한다.

  • 삼항 조건 연산자 표현식은 값으로 평가할 수 있는 표현식인 문이다. 따라서 삼항 조건 연산자 표현식은 값처럼 다른 표현식의 일부가 될 수 있다.

❗️ ✍️ 이 말은 즉, if, else 문은 표현식이 아닌 '문' 인데, 삼항 조건 연산자 표현식은 값으로 표현 될 수 있기 때문에, 다른 표현식의 일부가 될 수 있어 유용하다는 것!
(+ 표현식은 값처럼 사용할 수 있다는 말은 > 값이 위치할 수 있는 자리에 표현식도 위치할 수 있다는 의미😀)





5. 논리 연산자(Logical operators)

논리 연산자는 우항과 좌항의 피연산자를 논리 연산한다. 논리식은 왼쪽에서 오른쪽으로 평가된다.

5-1. || (or 연산자, 논리합)

: 어떤 하나라도 참일 경우 true를 반환한다.
피연산자가 boolean이 아닌 경우, 평가를 위해 boolean으로 변환된다.
앞의 값이 거짓인 값일 때 다음 값로 넘어간다. 

true || true   // true
true || false  // true
false || true  // true
false || false // false
// 논리합 연산자 예제 ▼ 
var o1 =  true || true;     // t || t returns true
var o2 = false || true;     // f || t returns true
var o3 =  true || false;    // t || f returns true
var o4 = false || (3 == 4); // f || f returns false
var o5 = 'Cat' || 'Dog';    // t || t returns Cat
var o6 = false || 'Cat';    // f || t returns Cat
var o7 = 'Cat' || false;    // t || f returns Cat

5-2. && (and 연산자, 논리곱)

: AND 연산자는 피연산자가 모두 참일 경우에만 true, 그렇지 않으면 false를 반환한다.

true && true; // true
true && false; // false
false && true; // false
false && false; // false
// 논리곱 연산자 예제 ▼  
var a1 =  true && true;     // t && t returns true
var a2 =  true && false;    // t && f returns false
var a3 = false && true;     // f && t returns false
var a4 = false && (3 == 4); // f && f returns false
var a5 = 'Cat' && 'Dog';    // t && t returns Dog
var a6 = false && 'Cat';    // f && t returns false
var a7 = 'Cat' && false;    // t && f returns false

5-3. ! (not 연산자, 논리부정)

: 값을 반대로 바꿔준다.
언제나 불리언 값을 반환한다. 단, 피연산자는 반드시 불리언 값일 필요는 없다. 만약 피연산자가 불리언 값이 아니면 불리언 타입으로 암묵적 타입 변환된다.

!true; // false
!false; // true
// 논리부정 연산자 예제 ▼  
var n1 = !true;  // !t returns false
var n2 = !false; // !f returns true
var n3 = !'Cat'; // !t returns false
// 암묵적 타입 변환 ▼ 
!0 // true

단축평가

  • 자바스크립트에서는 단축평가가 일어난다.
    x의 값이 false라면 x && y의 값은 y에 상관없이 false를 가지게 되는데, 이처럼 두 값을 모두 평가하지 않아도 될 때에 단축평가가 일어난다.
const foo = true;
let bar = 0;
const result = foo || bar++;
  • foo의 값은 true, 그래서 bar의 값과 상관없이 foo || bar의 값은 true.
    이럴때 단축평가가 일어나게 되고, bar라는 피연산자에 ++라는 부수효과가 붙어있더라도 그 효과는 일어나지 않는다. (bar의 값은 0이 나온다.)
    👉 즉, 단축평가가 일어나면 확인할 필요가 없는 피연산자에 부수효과가 있더라도 효과가 발생하지 않는다.

✍️ ❗️효율적인 코드 작성 방법 Tip !!
앞서 정리한 이러한 특징들 때문에, or연산자, and연산자의 경우, 계산이 무거운 표현들은 최대한 뒤쪽으로 빼고 앞쪽에는 간단하게 계산되는 것들을 두는게 좋다.
앞쪽에 간단한 식이 가능한 것들을 넣어서 하나라도 true(or연산자의 경우)나 false(and연산자의 경우)가 나왔을 때 뒷 부분은 실행되지 않고 바로 넘어가게끔 짜는게 효율적인 코드라고 한다.😀




6. typeof 연산자

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"

❗️ typeof 연산자로 null 값을 연산해 보면 null이 아닌 “object”를 반환(오류)하므로 null타입을 확인할 때는 === 일치 연산자를 사용하자! ▼ 

var foo = null;
console.log(typeof foo === null); // false 
console.log(foo === null);        // true



reference
justmakeyourself - Logical Operator dreamcoding MDN poiemaweb CodingEverybody

profile
seul_velog
기억보단 기록을 ✨
이전 포스트

JavaScript 변수

다음 포스트

JavaScript 조건문

0개의 댓글