JaveScript - Operators

 

1. String concatenation

console.log('my' + ' cat'); 
console.log('1' + 2);
console.log(`string literals : 1 + 2 = ${1 + 2}`);

2. number operators

console.log(1 + 1);
console.log(1 - 1);
console.log(1 / 1);
console.log(1 * 1);
console.log(1 % 1); 
console.log(1 ** 1);

 

3. Increment and decrement operators

increment

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

decrement

const preDecrement = --counter;
console.log(`preDecrement : ${preIncrement}, counter : ${counter}`);
const postDecrement = counter--;
console.log(`postDecrement : ${postIncrement}, counter : ${counter}`);

4. Assignment operators

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

5. Comparison operators

console.log(10 < 6);
console.log(10 <= 6);
console.log(10 > 6); 
console.log(10 >= 6);
console.log(10 == 6); 
console.log(10 != 6);

 

6. Logical operators

|| (or)

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

console.log(`or : ${value1 || value2 || check()}`);

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

const value3 = true;
const value4 = 4 < 2;

console.log(`or : ${value3 || value4 || check()}`);

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

|| 조건문에서는 하나라도 true면 true를 결과로 주기 때문에 , 첫번째 코드에서는 check() 함수가 호출되지만, 두번째 코드에서는 value3이 true이기 때문에 check 함수는 호출되지 않고 바로 true로 조건문이 종료된다.

 

그래서, 실무에서도 조건문에 실행시간이 오래걸리는 함수문은 뒤에 위치시키는것이 중요하다고 한다.

 

&& (and)

console.log(`or : ${value1 && value2 && check()}`); 

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

 

&&도 마찬가지로 하나라도 false면 false이기 때문에, 함수는 뒤에 위치시키는게 좋다.

 

7. Equlity

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

==

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

==는 type은 상관없이 값만 비교하기 때문에 string 과 number를 비교하더라도 값만 같으면 true가 된다.

 

===

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

===는 값은 물론이고 type까지 비교한다.

 

const ellie1 = { name : 'ellie' };
const ellie2 = { name: 'ellie' };
const ellie3 = ellie1 

console.log(ellie1 == ellie2); // reference 값이 다르기 때문에 false
console.log(ellie1 === ellie2); // reference 값이 다르기 때문에 false
console.log(ellie1 === ellie3); // reference 값이 같기 때문에 true

console.log(0 == false); // true 
console.log(0 === false); // false 
console.log('' == false); // true 
console.log('' === false); // false 
console.log(null == undefined); // true
console.log(null === undefined); // false

 

8. Conditional operators

const name = 'ellie'; 

if (name === 'ellie'){ 
	console.log('Welcome, Ellie!');
} else if (name === 'coder') {
	console.log('Welcome, coder');
} else { 
	console.log('unkwnon');
}

9. Ternry operators

console.log(name === 'ellie' ? 'yes' : 'no');

삼항연산자로써, 앞에있는 조건이 참일 경우에는 ":" 의 왼쪽에 있는 것 거짓일 경우에는 오른쪽에 있는 것이 실행된다.

 

10. Switch statement

const browser = 'Chrome'; 

switch (browser){
  case 'IE' :
    console.log('go away!');
    break; 
  case 'Chrome':
  case 'Firefox':
    console.log('go away!');
    break; 
  default :
      console.log('same all!');
}

 

11. Loops

 

while

let i = 3;
while (i > 0) { 
  console.log(`while : ${i}`); 
  i--;
}

do while

do {
  console.log(`do while : ${i}`);
  i--;
} while (i > 0);

for

for (i = 3; i > 0; i--) { 
	console.log(`for : ${i}`);
}

nested loops

for (i = 0; i < 2; i++) { 
  for( j = 0; j < 2; j++) {
  	console.log(`i : ${i}, j : ${j}`)
  } 
}

 

 

 

참고자료 - 드림코딩 by 엘리 유튜브

https://www.youtube.com/watch?v=e_lU39U-5bQ&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=5&ab_channel=%EB%93%9C%EB%A6%BC%EC%BD%94%EB%94%A9by%EC%97%98%EB%A6%AC%EB%93%9C%EB%A6%BC%EC%BD%94%EB%94%A9by%EC%97%98%EB%A6%AC