[Javascript] 연산자 / template literal / == 과 ===

0. 목차

1. 개요

2. 산술연산자

3. 연결연산자

4. 비교연산자

5. 논리연산자

 

1. 개요

자바스크립트의 연산자 종류는 진짜 많다.

이걸 다 통채로 외우다가는 한세월 다 보낼 지도.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Expressions_and_Operators

표현식과 연산자 - JavaScript | MDN

한번 읽어보는 걸로 만족하고 기본적인 것만 해보자.

2. 산술연산자

사칙연산 하면 다 아는거다 

더하기 빼기 나누기 곱하기

기호도 똑같이 + - /  *  를 사용한다.

 

console.log(1 + 2); // 3
console.log(1 - 2); // -1
console.log(1 / 2); // 0.5
console.log(1 * 4); // 4

 

여기다 하나 더 추가하자면 % 연산자가 있다.

나누기를 하고 남은 나머지의 값을 연산한다.

 

console.log(5 % 2); // 1

 

종종 쓰일 일이 있을지도.

 

3. 연결연산자

+ 를 사용한다.

위의 산술 연산자와 똑같은 기호를 사용한다.

그럼 자바스크립트는 연결연산자의 + 와, 산술연산자의 + 를 어떻게 구분하는 걸까

+ 가 산술연산자인지 연결연산자인지는 피연산자의 데이터 타입을 통해 결정된다.

 

 

console.log(1 + 1); // 2
console.log('num' + 'num');  // numnum
console.log('num' + 1);  // num1
console.log(1 + 'num'); //1num
console.log('1' + 1); // 11

 

문자열을 + 연산자의 피연산자로 사용하면,

자바스크립트의 내부 모듈은 + 를 연결 연산자로 인식한다.

(숫자모양의 문자열(예를들어 '1') 역시 문자열로 인식함)

위의 예제에서

다른건 뭐 딱봐도 number 고 string 인데

맨 마지막 의 출력 결과의 11 은 string 일까 number일까?

 

typeof 연산자를 이용해서 확인할 수 있다.

let unknown = 1 + '1';
console.log(unknown); // 11
console.log(typeof unknown); // string

 

스트링이다.

number 는 string 과 함깨 +연산자의 피연산자로 사용되면,

자바스크립트의 내부 모듈이

number를 string으로 변경 시켜준다.

이를, implict coercion(암묵적타입변환) 이라고 한다.

 

자세한 내용은 한번 정리한 적이 있으니까 참고하면 좋을 지도

https://kong-dev.tistory.com/15?category=982994 

타입변환

 

3-1. template literal

연결 연산자를 알았으니 추가적으로 적어본다.

 

let age = 29;

29 으로 할당된 변수 age를 이용해서 문자열을 출력하고 싶다면

let age = 29;
console.log('저는 ' + age + '살 입니다.'); // 저는 29살 입니다.

위 처럼 사용 할 수 있다.

29는 number 지만 +가 연결연산자로 인식되면서 string으로 암묵적 타입변환이 일어나

위와 같은 결과가 출련된다.

그런데 +쓰기 귀찮다.

띄어쓰기도 신경을 써야 돼서 번거롭다.

그래서 추가된 template literal

문자열을 사용할때는 singlequote, doublequote, backtick을 이용한다는 걸 알고 있다.

이중에서 backtick을 사용하는 문법이 template literal 이다.

 

사용 방법은 변수를 ${}안에 넣어주고 전체 stirng을 backtick으로 감싸주면 된다.

let age = 29;
console.log('저는 ' + age + '살 입니다.'); // 저는 29살 입니다.
console.log(`저는 ${age}살 입니다.`); // 저는 29살 입니다.

같은 결과가 출려되는걸 확인 할 수 있다.

위의 예제만 보면 왜 쓰나 싶을 수도 있지만 출력되는 값에 변수를 많이 사용하게 된다면 굉장히 유용하게 사용 할 수 있다.

let name = '완두콩';
let age = 29;
let hometown = '부산';
let study = 'Javascript';
console.log(`제 이름은 ${name}이고, 나이는 ${age}입니다. 고향은 ${hometown}이고, 현재 ${study}를 공부하고 있습니다`);
// 제 이름은 완두콩이고, 나이는 29입니다. 고향은 부산이고, 현재 Javascript를 공부하고 있습니다

편-안

이런 식으로 동작은 똑같이 하지만,

개발자의 편의성을(작성과 가독성) 위해 만들어진 문법을 syntactic sugar(문법적 설탕) 이라고 한다.

실제로도 사용해보면 달달하다.

 

4. 비교연산자

비교연산자는 부등호다!

우리가 아는 부등호는 <,>,= 이 있다.

자바스크립트의  세계에선 조금 아주 조오금 다르다.

 

console.log(1 > 2); // false
console.log(2 > 1); // true
console.log(2 === 2); // true
console.log(1 >= 2); // false
console.log(2 <= 1); // true

 

초등학교를 나왔다면 보기만해도 이해가 된다.

딱히 설명할게 없다.

눈에 띄는 것만 짚어보면,

결과물이 boolean 타입으로 출력된다는 것.

그리고 = 이아닌 === 을 사용한다는 것.

이상과 이하를 표현 하고 싶을 때는 >= , <= 을 사용한다는 것 이다.

<=  과 >= 을 사용할 때는 순서에 주의 해야한다.

(=> 는 arrow function 을 의미한다.)

 

 

4-1. == 과 ===

낄낄

나는 처음부터 ===으로 배웠고,

== 은 잘 몰라서 한번 검색을 해봤다.

 

짧게 정리하자면,

=== 은 피연산자의 데이터타입까지 일치해야 true를 반환하고,

==은 대충 비슷하면 true를 반환한다.

솔직히 내용을 이해하고 나니까, ==을 쓰면 안되겠다 라는 생각만 더 강해 졌다.

위의 유-머를 해석해보면,

 

0과 '0' 은 데이터 타입은 다르지만 number와 string이 피연산자로 사용되며

암묵적 타입변환이 일어남과 동시에 같은 값으로 연산된다.

그래서 true 가 반환 된다.

 

console.log(0 == '0'); // true

 

두번째 0 과 []를 비교하면

[] 을 == 의 피연산자로 사용하게 되면 

형변환이 일어나면서 '' 즉 비어있는 문자열로 변경된다

'' 과 0 이 == 의 피연산자가 되면

또한번 boolean 값으로 형변환이 된다.

(truthy 와 falsy)

결국, [] == 0 은

false == false 와 같아서, true를 반환한다.

ㅎㅎ.. 놀라운 자바스크립트의 세계

 

마지막 줄 "0" 은 truthy

[]는 피연산자로 사용되며 형변환이 일어나면서 빈 문자열로 변경되며 falsy 값을 갖게된다

결국 true == falsy 를 비교 하는 것과 같게 되어

false를 반환한다.

 

아주 놀랍고도 신비한 자바스크립트의 세계다...

 

반면 === 으로 위의 예제를 돌려보자.

console.log(0 === '0'); //false
console.log(0 === []); //false
console.log('0' === []); //false

가차없다.

걍 다 false 다.

===는 == 과 달리

데이터타입까지 일치해야만 true를 반환한다.

아무리 생각해도 === 을 두고 

==을 써야될 이유를 모르겠다.

 

코딩컨벤션에서도 == 보다는 ===의 사용을 권장한다.

그러니까 ===을 쓰자!

5. 논리연산자

 

살면서 처음 들어 본것같지만 아니다.

그냥 용어만 바뀌었을 뿐 이미 아는 거다.

 

&&(and), ||(or), !(not)

이렇게 세가지가 있다.

 

&&는 두가지의 값이 모두 true 이면 true를 반환하고

|| 는 둘중 하나라도 true 이면 true를 반환하고

! 는 결과값을 반대로 출력한다.

 

console.log(2 > 1 || 1 > 2); // true
console.log(2 > 1 || 3 > 2); // true
console.log(2 > 1 && 1 > 2); // false
console.log(2 > 1 && 3 > 2); // true
console.log(!(1 > 2)); // true
console.log(!(2 > 1)); // false

 

예시를 보고 이해하는 게 빠르다.