드림코딩 유튜브 강의를 듣고 자바스크립트에서 두 변수를 두고 연산하고자 할 때에 사용할 수 있는 연산자의 타입에 대해 공부했다.

String Concatation

수학의 연산자와 같이 문자열과 문자열을 +를 사용하여 합칠 수 있다.

> 'Hello' + 'World'   /
< Hello World

기존에 문자열과 변수를 더하기 위해서는 문자열과 변수를 구분하여 사이에 +를 넣어주어야 했지만 ES6에서는 백틱(`)을 사용하여 출력하고자 하는 모든 문자열과 변수를 넣고, 변수에만 따로 구분을 주어 직관적으로 확인 할 수 있도록 하였다.

> let age = 30;
> '저의 나이는 ' + age + '살 입니다.'   // 기존 문자열과 변수를 더하는 연산자 활용
< 저의 나이는 30살 입니다.
> `저의 나이는 ${age}살 입니다.`   // 백틱(`)을 이용하여 효율적으로 문자열과 변수를 더하는 값 출력 가능
< 저의 나이는 30살 입니다.

Numeric Operators

수학에서 사용하는 연산자라고 생각하면 이해하기 쉽다.

> 1 + 2   // add : 출력값 3 
> 2 - 1   //subtract : 출력값 1
> 4 / 2   // divide : 출력값 2
> 2 * 3   // multiple : 출력값 6
> 8 % 3   //remainder : 출력값 2
> 2 ** 3  // Squared : 출력값 8

Increment & Decrement Operators

숫자를 데이터 값으로 갖는 변수에 대해 더하거나(++), 빼는(--) 역할을 하는 연산자로 그 위치에 따라 값이 달라진다.

• 연산자(++,--)가 변수 앞에 쓰이는 경우

> let a = 2 
> let preIn = ++a // a에 1을 더한 후 preIn에 a의 값을 할당한다.

perIn = 3, a = 3

• 연산자(++,--)가 변수 뒤에 쓰이는 경우

> let b = 2
> postIn = b++ // postIn 값에 b 값을 할당한 후 b에 1을 더한다.

postIn = 2, b = 3

Assigment Operators

기준이 되는 변수를 다른 변수와의 연산을 통해 그 값을 정의하고자 할 때 사용하는 연산자로 기존 수학에서 사용하는 연산자에서 가독성을 높이기 위해 변형한 것으로 이해하면 쉽다.

x += y   // x = x+y
x-= y    // x = x-y

Comparison Operators

x > y    // x는 y보다 크다.
x < y    // x는 y보다 작다.
x >= y   // x는 y보다 크거나 같다.
x <= y   // x는 y보다 작거나 같다.

Logical Operators

주로 조건문, 반복문 등이 작동하는 조건의 충족 여부 (true or false)를 확인하기 위한 조건으로 활용되는 논리 연산자이다.

• || (or)

A || B || C
=> A, B, C 중 하나라도 true일 경우 true 값을 출력한다.

• && (and)

A && B && C
=> A, B, C 모두 true일 경우 true 값을 출력한다.

• != (not)

A != B
=> A와 B가 같지 않을 경우 true 값을 출력한다.

** 실무에서 논리 연산자를 사용할 때 뒤로 갈 수록 무거운 데이터를 넣는 것이 좋다.
예를 들어 ||(or) 연산자의 경우 첫 번째 데이터인 A가 true일 경우 true 출력의 조건을 충족했기 때문에 B와 C에 대한 검증 작업을 진행하지 않는다. 이와 같이 run time을 줄이는 것은 경제적으로 웹 문서를 관리할 수 있는 방법이 된다.

Equality

연산자 양 측에 놓인 데이터의 값이 서로 같은 것인지 확인하는 연산자이며 loose equality(==)와 strict equaliy(===)으로 구분된다. loose equality는 말 그대로 느슨하게 데이터 값의 동일성 여부를 판단하는 것이며 strict equaliy의 경우 데이터 자체와 데이터형의 동일성까지 엄격하게 비교하는 연산자이다.

> 1 == '1'   // true
> 1 === '1'  // false 

• object equality

> const a1 = {name: 'smy'}
> const a2 = {name: 'smy'}  // a1과 a2는 같은 name 값을 갖지만 서로 다른 레퍼런스로 저장 됨
> const a3 = a1   // a1과 a3는 같은 레퍼런스로 저장 됨  
> a1 == a2   // false 
> a1 === a2  // false
> a1 === a3  // true

> 0 == false   // true
> 0 === false  // false => 0의 데이터 타입은 불리언이 아니다.
> '' == false  // true
> '' === false // false => ''의 데이터 타입은 불리언이 아니다.
> null == undefined  // true
> null === undefined  // false => null과 undefined의 데이터형은 다르다.