드림코딩 엘리와 함께하는 자바스크립트 기초 다지기 : 4. 반복문, operator

 

 

 

오늘은 드림코딩 엘리 개발자님의 4번째 강의를 들었습니다.

 

operator의 관한 내용 지금부터 정리해보도록 하겠습니다!

 

 

---

1. string concatenation

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

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

 

 

1-1. string + string = string

 

1-2. string + number = string

 

1-3. string과 number 계산을 같이 쓰고 싶은 땐, 백팁을 사용한다(``)

number 계산은 ${}을 이용한다.

 

1-4. c언어와 비슷한 특수 문자열 표시를 가지고 있음

\n = 줄 바꾸기

\t = 4칸 띄우기

 

1-5. '' 사이에 문자열을 쓰다가 '표시를 string으로 표시하고 싶을 땐 이스케이프 문자(백슬러쉬)를 이용한다.( \ )

 

 

2. Numeric operators

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

 

말 그대로 더하기, 빼기, 나누기, 곱하기, 나머지, 승의 계산을 할 수 있습니다.

 

 

 

3. ++, -- operator

let counter = 2;
const preIncrement = ++counter;
console.log(`preIncrement : ${preIncrement}, counter : ${counter}`);
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!

 

counter가 2에서 시작하여

++counter가 되면 counter에 먼저 3으로 증가시키고 변수에 넣어준다.

그래서 counter와 변수 모두 3인 것이다.

 

반면 counter++가 되면 변수에 3을 넣어준 후 counter가 4로 증가한다.

 

--도 같은 원리이다!

 

 

4. 할당 operators

let x = 3;
let y = 6;
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}`);

 

x += y; 는 약어처럼 보면 된다.

풀어서 보면 x = x + y; 로 쓸 수 있다.

 

 

5. 비교 operator

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

 

맞으면 트루, 틀리면 뽈스 ^^

 

 

 

 

6. Logical operators

먼저 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같은 요소는 제일 뒤로 연산을 두는 것이 좋습니다.

 

value 두 개가 모두 false인 경우를 보면

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('!!!!!');
    }
}

check 함수의 for문을 모두 돌고 undefined로 선언되는 모습을 볼 수 있다.

 

 

다음은 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로 바꾸는 연산자입니다.

 

 

 

7. Equality

const stringFive = '5';
const numberFive = 5;
console.log(stringFive == numberFive);
console.log(stringFive != numberFive);

console.log(stringFive === numberFive);
console.log(stringFive !== numberFive);

 

7-1. Loose equality ( ==, != )

느슨하게 검사하여

숫자 5든 문자 5든 똑같은 5라고 인식하여 true로 출력된다.

 

7-2. Strict equality ( ===, !== )

엄격하게 검사하여

숫자 5와 문자 5는 타입이 다르기 때문에 false로 출력된다.

 

 

object의 경우 equality가 좀 다르다.

ellie1, 2는 name의 관한 주소를 가르키고 있기 떄문이다.

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

console.log(ellie1 == ellie2);
console.log(ellie1 === ellie2);
console.log(ellie1 === ellie3);

 

 

똑같은 이름을 가졌더라고 가르키고 있는 주소가 다른 ellie1과 2는 서로 다르다.

(느슨하게 검사하든 엄격하게 검사하든)

 

반면에 ellie1과 3은 같은 주소를 가르키고 있으므로 서로 같다고 나온다.

 

 

 

어려웠던 퀴즈 ㅋㅋㅋ

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

 

여러분도 맞춰보세요. 가장 마지막 쯤에 답을 올려보겠습니다 ㅎ

 

 

8. conditional 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');
}

 

unknown이 출력됩니다 ^^

 

if라는 조건에 따라 출력되는 값이 다릅니다.

 

9. Tenary operator : ?

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

위에서 name은 df였으니 no가 출력되겠죠?

 

 

10. Switch statement

정해져 있는 변수를 검사하거나 enum같은 타입은 switch를 사용한다.

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;
}

swich에 IE가 들어가서 go away를 출력할 것이다.

 

 

11. Loops : while

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

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

 

결과는

while: 3

while: 2

while: 1

 

그리고 do while은 처음엔 조건을 검사안하고 무조건 들어오기 때문에

do while: 0을 출력하고 끝날 것이다.

 

 

12. for loop

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

 

for문 보니까 c언어랑 진짜 똑같다 !

inline variable for: 3

inline variable for: 1

하고 끝난다. 왜냐 i는 2씩 줄어들기 때문이다.

 

for문하면 또 nested for loop을 빼놓을 수 없죠!

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

 

 

결과를 보면

i: 0 j: 0

i: 0 j: 1

i: 0 j: 2

 

i: 1 j: 0

i: 1 j: 1

i: 1 j: 2

 

i: 2 j: 0

i: 2 j: 1

i: 2 j: 2

 

이런 식으로 i가 한 번 돌 때마다 j가 3번 씩 도는 것을 확인할 수 있다.

 

하지만 이런 식으로 돌면 o(n^2) 복잡도이기 때문에 피하는 게 상책!

 

---

 

 

<equality 정답>

 

 

오늘도 알차게 공부했다.

 

언제 js 마스터할까...^^

 

마스터하는 그날까지 달린다...