Operators (연산자)에 대해서 - 1

1/ 증감 연산자

2/ 할당 연산자

3/ 논리 연산자

4/ 동등 연산자

 

연산자에 대해서 좀 더 공부해보았다.

산술/연결 연산자는 건너뛰고 헷갈리는 연산자에 대해서만 알아봄

 

 

1/ 증감 연산자 (Increment & decrement operators)

 1. 증가 연산자 (++) 

 

변수값을 1 증가시키는 것,

전위(++n) 냐 후위(--n) 냐에 따라서 디테일이 조금 다르다. 아래 

#1. 전위 증가 (++n) pre-increment operator

let counter = 2;
const preIncrement = ++counter;
console.log(`preIncrement:${preIncrement}, counter:${counter}`)
// preIncrement:3, counter:3​

counter = counter + 1 ; 먼저 counter에 1 더한값을 counter에 할당해주고 ( 2 +1 = 3을 할당해주고)
preIncrement = counter ; 그 다음에 이미 더해진 counter 값을 preIncrement에 대입해준다.

#2. 후위 증가 (n++) post-increment operator

let counter = 2;
const postIncrement = counter++;
console.log(`postIncrement:${postIncrement}, counter:${counter}`)
// postIncrement:2, counter:3​

 

postIncrement = counter; 먼저 couter 값을 postIncrement라는 값에 할당을 해주고
counter = counter + 1; 뒤에 counter 값에서 1을 더해준다. 

 

2. 감소 연산자 (--)

 

변수값을 1 감소시키는 것

 

#1. 전위 감소(--n) pre-decrement operator

변수값에서 먼저 1을 빼주고, 그 값을 대입해주는 것

 

#2. 후위 감소(n--) post-decrement operator

값부터 먼저 대입해주고 그 다음에 1을 빼주는 것 

 

하지만 어쨌든, 모든 연산이 끝나고 나면 전위나 후위나 n값은 결국 같다. 

 

---

2/ Assignment operators 할당 연산자

 

수업 첫 시간에 수학에서의 등호(=) 와 프로그래밍에서의 등호(=)는 엄연히 다르다고 했다.

프로그래밍에서의 등호는 대입 즉, 값을 할당시켜줌을 의미하는데 이걸 다시 상기시켜주는 개념이다. 

let x = 3;
let y = 6;
console.log(x+=y) // x = 3 + 6 = 9 출력
console.log(x-=y) // x = 9 - 6 = 3 출력
console.log(x*=y) // x = 3 * 6 = 18 출력
console.log(x/=y) // x = 18 / 6 = 3 출력

x = x + y ( x에 x+y를 대입해주겠다는 뜻)
x = x - y  ( x에 x-y를 대입해주겠다는 뜻)
x = x * y  ( x에 x*y를 대입해주겠다는 뜻)
x = x / y  ( x에 x/y를 대입해주겠다는 뜻)

 

---

3/ Logical operators 논리 연산자

 

#1. || (or)

finds the 1st truthy value 

const value1 = false;
const value2 = 4 < 2;
console.log(`or: ${value1 || value2 || check()}`);

function check(){
	for (let i = 0; i <10; i++){
      console.log('anything');
    }
 return true;
}

// 출력값 : anythingelse
//          or: true

만약, value1 이 true면 즉, 선행하는 값이 true 면, || 는 이 코드 자체를 전부 true로 간주해버리고 종결한다.
즉, 앞에서 true가 나와버리면 뒤쪽은 쳐다도 안보고 true로 출력해버린다.

*tip : or (||) 연산자에서는 연산이 복잡한 건 최대한 뒤로 빼는 게 효율적인 코드 배치라고 한다.

 

#2. && (and)

finds the 1st falsy value

const value1 = false;
const value2 = 4 < 2;
console.log(`and: ${value1 && value2 && check()}`);

function check(){
	for (let i = 0; i <10; i++){
      console.log('anything');
    }
 return true;
}
// 출력값 : and: false

선행하는 값이 false면 &&는 이 코드 자체를 전부 false로 간주해버리고 종결한다.
즉, 앞에서 false값이 나와버리면 뒤쪽은 쳐다도 안보고 false로 출력해버린다.
전부 true여야만 true로 출력해준다. 

---

4/ Equality operators 동등 연산자

 

#1. loose equality, w/ type conversion (==) 

자바 스크립트 엔진 (V8) 이 데이터타입까진 고려하지 않아서, 외관상 같으면 true로 출력해준다.

 

#2. strict equality, no type conversion (===)

자바 스크립트 엔진 (V8) 이 데이터타입까지 같을 때에만 true로 출력해준다.

const stringFive = '5';
const numberFive = 5;

console.log(stringFive == numberFive); // 출력값: true 
console.log(stringFive != numberFive);​// 출력값: false

(==) stringFive가 문자여서 데이터타입이 다르긴 하지만 어쨌든 같이 5니까 같은 거다.

console.log(stringFive === numberFive); // 출력값: false
console.log(stringFive !== numberFive); // 출력값: true

(===) stringFive의 데이터타입은 string이고, numberFive의 데이터타입은 number니까, 
같은 5여도 엄연히 다른 데이터다. 

 

#3. object equality 에 대하여

 

object 는 메모리에 탑재될때 reference 형태로 저장되어서 서로 다른 객체 안의 변수명과 변수값이 같아도 결국은 다른 reference로 객체가 저장되기 때문에, 즉 뿌리가 다른 변수명,값이므로 equality 출력을 해보면 false가 출력된다. 

const wine1 = { name : 'redwine' age : 17 };
const wine2 = { name : 'redwine' age : 17 };
const wine3 = wine1;

console.log(wine1 == wine2) // false
console.log(wine1 === wine2) // false
console.log(wine1 === wine3) // true

쉽게 와인을 생각해보면, 사실 같아보이는 와인이여도 원산지가 다르면 다른 와인으로 치니까?
이것도 비슷한 맥락아닐까싶다,,

QUIZ

console.log(0 == false);
console.log(0 === false);

1. true : 0 은 연산하고보면 false에 속하기 때문에 둘은 같다.
2. false : 0 자체로 놓고 보면 데이터타입은 number이고 false는 boolean type이므로
           둘은 strict하게 비교하면 type이 다른 값이라 false가 출력된다.

console.log('' == false);
console.log('' === false);

1. true : 빈 문자열을 나타내는 ' ' 는 false에 해당하기 때문에 둘은 같다.
2. false : 빈 문자열이여도 어쨌든 데이터타입은 string이므로, boolean type인 false와 다른 값이다.

console.log(null == undefined)
console.log(null === undefined)

1. true : null과 undefined 둘다 false값이므로 true가 출력됨
2. false : null은 empty 값으로 아무것도 아님을 '명확히' 지정해줬기때문에 비어 있는 상태여도 type이 object인데 반해, undefined는 값이 빈건지, 값이 들어가 있는건지 그런게 아예 정해지지 않은 상태, 즉 값 자체가 할당되지 않은 상태이므로 type이 undefined여서 둘은 다른 데이터타입이고, 따라서 false 가 출력된다. 

 

** 헷갈리는 boolean = false/true 값들 정리

Variables	data type	boolean	example
0	number	false	let num if (num) { console.log('true!'); } else{ console.log('false!'); } 변수를 선언하고 값을 할당하지 않을 경우,  undefined로 컴퓨터가 인식하고 false로 받아들여 else 출력문인 false!가 출력된다.
' ' (Empty string)	string	false
null	object	false
undefined	undefined	false	let num num && console.log(num) 하면, num이 undefined이므로 뒷문장 실행 x false 출력됨
NaN (Not a Number)	number	false
[ ] (Empty array)	object	(==)false (===)true	let num=9 num && console.log(num) 하면, num이 true 이므로 뒷문장만 출력되어서 9 가 나온다.

** empty array [ ] = type of object => conversed to true

** but, in case of loose equality, [ ] == false