TIL 03 - 연산자

hojung choi·2021년 5월 21일

js

목록 보기

4/17

연산자

전위연산자

let counter = 2;
const result = ++counter;
// counter = counter + 1;
// result = counter;
// result = 3 , counter = 3

전위연산자 값이 먼저 증가/감소해서 적용된다

후위연산자

let counter = 2;
const result = counter++;
// result = counter;
// counter = counter + 1;
// result = 2 , counter = 3

후위연산자는 값이 후에 증가/감소해서 적용된다

대입연산자

let x = 3;
let y = 6;
x += y; // x = x+y
x -= y; // x = x-y
x *= y; // x = x*y
x /= y; // x = x/y

논리연산자

✅ OR (||)

하나라도 true가 있으면 true를 반환합니다

const value1 = false;
const value2 = 4 < 2;
const value3 = true;

console.log(`${value1 || value2 || value3}`); // true

or는 true값을 만나는 순간 뒤에 있는 코드를 읽지 않고 바로 값(true)을 return합니다! 그렇기 때문에 값이 무거운(함수같은 애들) 값을 뒤에서 체크하는것이 좋다

✅ AND (&&)

모두 true여야 true값을 반환합니다

const value1 = false;
const value2 = 4 < 2;
const value3 = true;

console.log(`${value1 && value2 && value3}`); // false

and는 false값을 만나는 순간 뒤에 있는 코드를 읽지 않고 바로 값(false)을 return합니다! 그렇기 때문에 값이 무거운(함수같은 애들) 값을 뒤에서 체크하는것이 좋다

✅ not (!)

값을 반대로 바꿔 반환한다

const value1 = false;
const value2 = 4 < 2;
const value3 = true;

console.log(!value); // true

등위연산자

✅ == (추상적 같음, loose equality)

// 타입을 변경해서 검사를 한다

const stringFive = '5'; // 문자열
const numberFive = 5; // 숫자

console.log(stringFive == numberFive); // true
console.log(stringFive !== numberFive); // false

분명 stringFive의 값은 문자열 '5' 이고,
numberFive의 값은 숫자 5인데! 어떻게 같게 나오지...?
그 이유는 == 연산자는 타입을 변경해서 비교를 하기때문!
==연산자를 쓰게되면 자바스크립트 엔진은 너네 '5'가 문자열이긴 한데 그래도 값은 5잖아! 너희 둘은 같아! 라고 말한다...
정말 함부로 쓰면 코드가 엄청나게 꼬일 것 같은 느낌!

✅ === (엄격한 같음, strict equality)

// 타입을 신경써서 검사

const stringFive = '5'; // 문자열
const numberFive = 5; // 숫자

console.log(stringFive == numberFive); // false
console.log(stringFive !== numberFive); // true

타입이 다르면 값이 같아도 false이다!
웬만하면 ===를 사용하자!

🚫 obj는 어떻게 비교 될까?

obj는 값을 저장하는 원시타입과 달리 참조값(ref)을 저장한다.
이제 코드를 통해 확인해보자!

const hojung1 = {age : 26};
const hojung2 = {age : 26};
const hojung3 = hojung1;

console.log(hojung1 == hojung2); //false
console.log(hojung1 === hojung2); //false
console.log(hojung1 == hojung3); //true