[Javascript] operator와 loop,if

이 글에서는 Javascript의 operator와 loop, if 등의 기본적인 문법에 대해 공부해보겠습니다.

 

String concatenation

 // string + string = string
console.log('my'+' cat');

// string + number = string
console.log('1'+2); 

 // string과 number 계산을 같이 쓰고 싶은 땐, 백팁을 사용한다(``). 이 때 number 계산은 ${}을 이용한다.
console.log(`string literals: 1 + 2 = ${1+2}`);

//특수문자열도 비슷함
console.log('san\nh\ta');

//'' 사이에 문자열을 쓰다가 '표시를 string으로 표시하고 싶을 땐 이스케이프 문자(백슬러쉬)를 이용한다.( \ )
console.log("minji\'s dog");

 

Numeric operator

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

 

++, --  operator

let counter = 2;
//++counter가 되면 counter에 먼저 3으로 증가시키고 변수에 넣어준다.
const preIncrement = ++counter;
console.log(`preIncrement : ${preIncrement}, counter : ${counter}`);
반면 counter++가 되면 변수에 3을 넣어준 후 counter가 4로 증가한다.
const postIncrement = counter++;
console.log(`preIncrement : ${preIncrement}, counter : ${counter}`);

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

 

할당 Operator

let x = 3;
let y = 6;
//x = x+y
x += y;
console.log(`x : ${x}, y : ${y}`);
x -= y;
console.log(`x : ${x}, y : ${y}`);
x *= y;
console.log(`x : ${x}, y : ${y}`);
x /= y;
console.log(`x : ${x}, y : ${y}`);

 

비교 operator

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

 

 

Logical operator

 

or

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

//||(or) : 처음으로 true가 나오면 멈춘다.
console.log(`\or: ${value1 || value2 || check()}`);

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

or은 처음으로 true가 나오면 뒤의 조건은 보지도 않습니다. 따라서 연산이 길어질 것 같은 function같은 요소는 제일 뒤로 연산을 두는 것이 좋습니다.

 

 

and

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

//||(and) : 처음으로 false가 나오면 멈춘다.
//null값인지 알아낼 때도 and를 쓰곤한다.
console.log(`\and: ${value1 && value2 && check()}`);

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

and 또한 처음에 false가 도출되면 뒤는 연산하지 않으므로 무거운 연산은 맨 뒤로 보내는 것이 좋습니다.

 

not

const value1 = false;

//!(not)
console.log(!value1);

true를 false로 false를 true로 바꾸는 연산자입니다.

 

Equality

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

// Loose equality ( ==, != )
console.log(stringFive == numberFive);
console.log(stringFive != numberFive);

// Strict equality ( ===, !== )
console.log(stringFive === numberFive);
console.log(stringFive !== numberFive);

Loose equality (==, !=) :  개발자의 의도와는 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환

Strict equality ( ===, !== ) : 암묵적 타입 변환을 하지 않고 값을 비교

 

object에서의 equality도 확인해봅시다.

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

console.log(ellie1 == ellie2); // false
console.log(ellie1 === ellie2); //false
console.log(ellie1 === ellie3); //true

똑같은 이름을 가졌더라고 가르키고 있는 주소가 다른 ellie1과 2는 서로 다릅니다. 반면에 ellie1과 3은 같은 주소를 가르키고 있으므로 서로 같다고 나오는 것이죠.

 

Condition operator : if

const name = 'df';
if(name === 'ellie'){
    console.log('Welcome, Ellie!');
}
else if(name === 'coder'){
    console.log('You are amazing coder');
}
else{
    console.log('unknown'); // 출력
}

 

Tenary operator : ?

const name = 'df';
console.log(name === 'ellie' ? 'yes' : 'no'); // no 출력

 

Switch statement

const browser = 'IE';
switch(browser){
    case 'IE':
        console.log('go away!');
        break;
    case 'Chrome':
    case 'Forefox':
        console.log('love you');
        break;
    default:
        console.log('same all!');
        break;
}

 

Loop : while

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

  /* 결과
	while: 3
	while: 2
	while: 1
	*/
    
do{ 
    console.log(`do while: ${i}`); 
    i--;
}while(i>0);


  /* 결과
	while: 3
	while: 2
	while: 1
	while: 0
   */

 

Loop : for loop

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