7. Operator 연산자

https://poiemaweb.com/js-operator

Operator | PoiemaWeb

 

 

1. 표현식과 연산자

표현식(expression)은 리터럴, 식별자, 연산자, 함수 호출 등의 조합을 말한다. 

표현식은 평가(evaluation. 표현식을 실행하여 하나의 값을 만드는 과정)되어 하나의 값을 만든다. 즉, 표현식은 하나의 값으로 평가될 수 있는 문(statement, 문과 표현식 참고)이다.

 

• 리터럴 (Literal):
  • 리터럴은 코드 상에서 직접적으로 값을 나타내는 고정된 표현입니다.
  • 숫자 리터럴: 42, 3.14 등
  • 문자열 리터럴: 'Hello', "World" 등
• 식별자 (Identifier):
  • 식별자는 변수나 함수 등에 이름을 붙일 때 사용하는 이름입니다.
  • 자바스크립트에서 식별자는 변수명, 함수명 등으로 사용됩니다.
  • 예를 들어, myVar, calculateArea, PI 등이 식별자입니다.
• 연산자 (Operator):
  • 연산자는 값을 연산하거나 조작할 때 사용하는 기호나 단어입니다.
  • 다양한 연산자가 있으며, 다음과 같은 카테고리로 나눌 수 있습니다
• 함수 (Function):
  • 함수는 특정 작업을 수행하기 위해 설계된 코드 블록입니다.
  • 함수는 코드를 재사용하고, 구조화하며, 유지보수하기 쉽게 만드는 데 사용됩니다.
  • 함수는 정의(defining)하고 호출(calling)할 수 있으며, 매개변수(parameters)를 받아들이고 값을 반환할 수 있습니다.

 

// 리터럴 표현식

10

// 식별자 표현식

sum

// 연산자 표현식

10 + 20

// 함수/메소드 호출 표현식

square()

 

 

표현식은 평가되어 결국 하나의 값이 되므로 표현식과 값은 동등한 관계, 즉 동치(Equivalent)다.

표현식은 하나의 값을 만든다. 

 

var x = 10;

// 연산자 표현식

x + 30;  // 식별자 표현식과 숫자 리터럴과 연산자의 조합

요약

표현식(expression)은 리터럴, 식별자, 연산자, 함수 호출 등의 조합으로 하나의 값과 같다. 

 

---

 

2. 문과 표현식
문(statement)은 자바스크립트 엔진에게 내리는 명령이다. 

 

변수 선언문을 실행하면 변수가 선언이 되고, 할당문을 실행하면 할당이 된다. 

조건문을 실행하면 주어진 조건에 따라 코드 블록({…})의 실행이 결정되고, 

반복문을 실행하면 코드 블록이 반복 실행된다.

 

// 변수 선언문

var x;

// 할당문

x = 5;

// 함수 선언문

function foo () {}

// 조건문

if (x > 5) { … }

// 반복문

for (var i = 0; i < 10; i++) { … }

 

문은 리터럴, 연산자, 표현식, 키워드 등으로 구성되며 세미콜론( ; )으로 끝나야 한다. (코드 블록 { … }은 제외)

 

자바스크립트 엔진이 스크립트를 해석할 때, 문의 끝이라고 예측되는 지점에 세미콜론을 자동으로 붙여주는

세미콜론 자동 삽입 기능(ASI, automatic semicolon insertion)이 있기 때문이다.

 

하지만 세미콜론 자동 삽입 기능의 예측과 개발자의 예측과 다른 경우가 있다. 

따라서 세미콜론을 붙이는걸 권장한다. 

 

 

 

표현식 (expression)

• 값을 생성
• 리터럴, 식별자, 연산자, 함수 호출 등의 조합

 

문 (statement)

• 표현식으로 생성한 값을 사용해 컴퓨터에게 명령
• var, let, const, function, class와 같은 선언 키워드를 사용하여 변수나 함수를 생성
• if, for, while 문과 같은 제어문을 생성하여 프로그램의 흐름을 제어

---

 

3. 연산자란?

 

하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입 연산 등을 수행해 하나의 값을 만든다. 

 

 

피연산자

• 연산의 대상으로 하나의 값이며 표현식이다.

 

// 산술 연산자

5 * 4 // 20

// 문자열 연결 연산자

'My name is ' + 'Lee' // "My name is Lee"

// 할당 연산자

var color = 'red'; // "red"

// 비교 연산자

3 > 5 // false

// 논리 연산자

(5 > 3) && (2 < 4)  // true

// 타입 연산자

typeof 'Hi' // "string"

 

 

 

---

 

4. 산술 연산자

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

 

4.1. 이항 산술 연산자

• 2개의 피연산자를 대상으로 연산한다.
• 피연산자를 변경하지 않는다.

+ 더하기

-  뺴기

* 곱하기

/  나누기

% 나머지 

---

 

4.2. 단항 산술 연산자

 

증가/감소(++/–)

• 1개의 피연산자를 대상으로 연산한다. 
• 피연산자를 변경한다.
• 연산자는 위치에 의미가 있다. 

++값 : 값을 증가 후 다른 연산

값++ : 다른 연산 진행 후 값을 증가

--값 : 값을 감소 후 다른 연산

값-- : 다른 연산 진행 후 값을 감소

 

 

+ 단항 연산자

• 숫자 타입으로 변환한 값을 반환한다.
• 피연산자를 변경하지 않는다. 

 

+10 // 10

+'10' // 10

+true // 1

+false // 0

 

 

– 단항 연산자

• 부호를 반전한 값을 반환한다.
• 피연산자를 변경하지 않는다. 

---

 

4.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)

 

개발자의 의도와는 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되기도 한다는 것이다. 

 

위 예제에서 1 + true를 연산하면 자바스크립트 엔진은 암묵적으로 불리언 타입의 값인 true를 숫자 타입인 1로 타입을 강제 변환한 후 연산을 수행한다. 이를 암묵적 타입 변환(Implicit coercion) 또는 타입 강제 변환(Type coercion)이라고 한다. 앞서 살펴본 +/- 단항 연산자도 암묵적 타입 변환이 발생한 것이다.

 

---

 

5. 할당 연산자
할당 연산자(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

 

---

 

6. 비교 연산자
비교 연산자(Comparison Operator)는 좌항과 우항의 피연산자를 비교하여 불리언 값을 반환한다. 

if 문이나 for 문과 같은 제어문의 조건식에서 주로 사용한다.

 

6.1. 동등 / 일치 비교 연산자

 

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

 

 

동등 비교 연산자는 편리한 경우도 있지만 수많은 부작용을 일으키므로 사용하지 않는 편이 좋다.

 

'' == '0'           // false

0 == ''             // true

0 == '0'            // true

false == 'false'    // false

false == '0'        // true

false == undefined  // false

false == null       // false

null == undefined   // true

 

 

일치 비교(===) 연산자는 좌항과 우항의 피연산자가 타입도 같고 값도 같은 경우에 true를 반환한다.

일치 비교 연산자에서 주의할 것은 NaN이다.

숫자가 NaN인지 조사하려면 빌트인 함수 isNaN을 사용한다

 

 

NaN === NaN // false

isNaN(NaN) // true

 

 

 

부동등 비교 연산자(!=)와 불일치 비교 연산자(!==)는 동등 비교(==) 연산자와 일치 비교(===) 연산자의 반대 개념이다.

 

---

 

6.2. 대소 관계 비교 연산자
대소 관계 비교 연산자는 피연산자의 크기를 비교하여 불리언 값 (true / false) 을 반환한다.

 

대소 관계 비교 연산자	예시	설명
>	x > y	x 가 y 보다 크다
<	x < y	x 가 y 보다 작다
>=	x >= y	x 가 y 보다 크거나 같다
<=	x <= y	x 가 y 보다 작거나 같다

 

 

 

7. 삼항 조건 연산자
삼항 조건 연산자(ternary operator)는 조건식의 평가 결과에 따라 반환할 값을 결정한다. 

자바스크립트의 유일한 삼항 연산자이며 부수 효과는 없다. 삼항 조건 연산자 표현식은 아래와 같이 사용한다.

 

 

 조건식 ?  ture : false

 

 

var x = 2;

// x가 짝수이면 '짝수'를 홀수이면 '홀수'를 반환한다.

// 2 % 2는 0이고 0은 false로 암묵적 타입 변환된다.

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

console.log(result); // 짝수

 

삼항 조건 연산자는 if…else 문을 사용해도 동일한 처리를 할 수 있다.

 

var x = 2

if (x%2) {

    result = '홀수';

}

else {

    result = '짝수';

}

console.log(result);

 

 

if ... else 는 조건문이다. 이와 다르게 삼항 연산자는 표현식으로 다른 표현식의 일부가 될 수 있다. 

 

---

8. 논리 연산자
논리 연산자(Logical Operator)는 우항과 좌항의 피연산자(부정 논리 연산자의 경우, 우항의 피연산자)를 논리 연산한다.

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

 

 

논리 부정(!) 연산자는 언제나 불리언 값을 반환한다. 

 

논리합(||) 연산자와 논리곱(&&) 연산자는 일반적으로 불리언 값을 반환하지만 

상황에 따라서 피연산자 중 한쪽 값을 반환한다.

 

 

// 단축 평가

'Cat' && 'Dog' // “Dog”

 

 

---

 

9. 쉼표 연산자

쉼표(,) 연산자는 왼쪽 피연산자부터 차례대로 피연산자를 평가하고 마지막 피연산자의 평가가 끝나면 마지막 피연산자의 평가 결과를 반환한다.

 

var x, y, z;

x = 1, y = 2, z = 3; // 3

 

---

 

10. 그룹 연산자
그룹 ((…))연산자는 그룹 내의 표현식을 최우선으로 평가한다. 

그룹 연산자를 사용하면 연산자의 우선 순위를 1순위로 높일 수 있다.

 

---

11. typeof 연산자

• typeof 연산자는 자신의 뒤에 위치한 피연산자의 데이터 타입을 문자열로 반환한다. 
• 반환하는 문자열은 7개의 데이터 타입과 일치하지는 않는다. 
• 7가지 문자열 “string”, “number”, “boolean”, “undefined”, “symbol”, “object”, “function” 중 하나를 반환한다. 
• “null”을 반환하는 경우는 없으며 함수의 경우 “function”을 반환한다.

 

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"

 

null 타입을 확인할 때는 typeof 연산자를 사용하지 말고 일치 연산자(===)를 사용