드림코딩 유튜브 강의를 듣고 자바스크립트에서 두 변수를 두고 연산하고자 할 때에 사용할 수 있는 연산자의 타입에 대해 공부했다.
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의 데이터형은 다르다.
