Taeyoung Kim(RaccoonCode96)

Go for IT! Raccooncode’s TIL blog.

20210209_JavaScript02 operator(연산자), 문자, 숫자, 논리, 증감, 비교, 조건, 반복

6 분 소요

JavaScript02

  • JavaScript에 대해 공부하기 위해서 유튜브 ‘드림코딩by엘리’ JavaScript 강의를 듣고 글을 쓰고 있다.



JavaScript 지난시간

  • variable vs object
  • primitive variable은 값 자체가 메모리에 할당됨
  • object 는 const를 통해 오브젝트를 할당하면 실제로는 reference를 먼저 가르켜 메모리에 reference가 할당되고 reference가 다른 값들을 가르킴

JavaScript operator

1. String concatenation (문자 연쇄)

  • str + str = strstr
  • 신기한 것 string num(‘12’) + num(3) -> string(‘123’)
  • backtick 활용
  • escape 문자
console.log('my' + 'cat'); // mycat
console.log('1' + 2); // 12
console.log(`string literals: 1 + 2 = ${1 + 2}`); // string literals: 1 + 2 = 3
// backtick '`'으로 묶으면 single qoute 도 그대로 표출 가능
console.log(`"go"`);

// escape string 
console.log('raccoon\'s book');
// back slash '\'를 사용 해야 backtick 안에서 backtick 표현 가능
console.log("raccoon's\n book"); // \n 개행
console.log("raccoon's\t book"); // \t tab


2. Numeric operatiors (숫자 연산자)

console.log(1 + 1); // add 더하기
console.log(1 - 1); // substract 빼기
console.log(1 * 3); // multiply 곱하기
console.log(2 / 3); // divide 나누기
console.log(5 % 2); // remainder 나머지
console.log(2 ** 5); // exponentiation 제곱


3. Increment and decrement operators (증감 연산자)

  • python에는 없음
  • 일단, 증감할 기준이 필요함 (let을 통해서 할당)
  • ++, -- : 1씩 증가 or 감소
  • k = ++i : pre 증감연산자 증가 먼저 시키고 k에 할당
  • k = i++ : post 증감연산자 k에 할당 먼저 시키고 증감 시킴
let counter = 2;
const preIncrement = ++counter;
// 1. counter = counter + 1;
// 2. preIncrement = counter;
console.log(`preIncrement: ${preIncrement}, counter: ${counter}`);
const postIncrement = counter++
// 1. postIncrement = counter;
// 2. counter = counter + 1;
console.log(`postIncrement: ${postIncrement}, counter: ${counter}`);
// pre vs post 할당 순서가 다름 pre는 할당 전에 증가, post는 할당 후에 증가
// preIncrement: 3, counter: 3
// postIncrement: 3, counter: 4


4. Assignment operators (할당 연산자)

  • python에서는 이를 통해 증감 설정
let x = 3;
let y = 6;
x += y; // x = x+y // x = 9
x -= y; // x = x-y // x = -3
x /= y; // x = x/y // x = 2
x *= y; // x = x*y // x = 18


5. Comparison operators (비교 연산자)

console.log(10 < 6); // less than
console.log(10 <= 6); // less than or equal
console.log(10 > 6); // greater than
console.log(10 >= 6); // greater than or equal


6. Logical operators (논리 연산자)

  •   (or), && (and), ! (not)
  • python에서는 그냥 or and not으로 씀
  • || : or의 경우 처음으로 true가 나오면 거기 까지 실행하고 멈춤 어차피 true라서
  • && : and의 경우 처음으로 false가 나오면 거기 까지 실행하고 멈춤 어차피 false 되니까
  • ! : not 으로 boolean을 반대로 바꿈

  • 처음에는 느슨한 조건을 쓰고 나중에 갈수록 엄격한 조건이나 연산을 쓰어 논리연산자로 묶는 것이 좋다.

  • and 의 경우 false를 찾는 요소로도 활되어 null 값 확인용으로 쓰이기도 함
const value1 = false; // false
const value2 = 4 < 2; // false

// || (or) : 처음으로 true가 나오면 거기까지 실행하고 멈춤 어차피 true니까

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


const value3 = false; // false
const value4 = 4 > 2; // true

console.log(`or : ${value1 || value2 || check()}`);
console.log('------------------');
console.log(`or : ${value3 || value4 || check()}`);
// 그러므로 무거운 연산인 경우를 나중으로 배치
// 처음에 있을 수록 조건이 쉬운쪽으로 가고 점점더 엄격해지는 순서의 연산으로 배치

// && (and) : 처음으로 false가 나오면 거기까지 실행하고 멈춤 어차피 false니까
console.log('--------and------');
const value5 = true; // true
const value6 = 4 > 2; // true
const value7 = false;
console.log(`or : ${value5 && value6 && check()}`); // 모두 true , 모두 실행
console.log('------------------');
console.log(`or : ${value5 && value7 && check()}`); // false가 나온곳 까지
// 마찬가지로 엄격한 조건이나 연산인 경우 뒤쪽으로


// 그래서 null 값 확인시에 and를 사용하기도 함
// null은 false를 return 하기 때문에
// nullableObject && nullableObject.something
// if (nullableObject != null) {
    // nullableObject.something;
// }

// ! (not) boolean을 반대로 바꾸어 줌
console.log('--------not--------');
console.log(!value1);


7. Equality (등호)

  • =의 경우는 그냥 할당하는 기호라고 생각하는 게 좋다.
  • == : 타입 검정을 느슨하게 비교 검정 (loose equality)
  • === : 타입 검정을 엄격하게 비교 검정 (stirict equality)
  • Object 비교의 경우 같은 값을 가지고 있더라도 다름, Object를 직접 할당 받으면 같지만
const stringFive = '5';
const numberFive = 5;

// == loose equality, with type conversion (It can't use in python)
// 타입 검정을 느슨하게 동등성 비교 검증
console.log(stringFive == numberFive); // true
console.log(stringFive != numberFive); // false
console.log('------------------');

// === stirict equality, no type conversion
// 타입도 신경써서 검증
console.log(stringFive === numberFive); // flase
console.log(stringFive !== numberFive); // ture
// 웬만해서는 strict로 검증할 것
console.log('------------------');

// object equality by reference
const raccoon1 = { name: 'racoon'};
const raccoon2 = { name: 'racoon'};
const raccoon3 = raccoon1;
console.log(raccoon1 == raccoon2); // false
console.log(raccoon1 === raccoon2); // false
console.log(raccoon1 === raccoon3); // true
// 1과 2는 모두 같은 값을 가지고 있지만 다른 reference를 가르키고 있어 다름
// 3은 1을 할당 받고 있기에 똑같음

console.log('--------equality - puzzler----------');

console.log(0 == false); // true
console.log(0 === false); // false (0은 boolean이 아니기 때문에)
console.log('' == false); // true
console.log('' === false); // false
console.log(null == undefined); // true
console.log(null === undefined); // false
// equality - puzzler
// 0, '' 은 python에서 bool 에서는 False로 표기되지만 비교에서 0, False만 같아 True고 나머지는 모두 다르다.
// 즉, 0 과 '' 다르지만 bool값은 False로 같다 하지만 0 과 False는 같다
// javascript의 경우 == 일때는 어느정도 해석해서 같게 인식하고
// === 일때는 모두 다르다. (type 검토까지 하기 때문에)


8. If operators (조건 연산자)

  • if, else if, else (python에서는 if, elif, else)
const name = 'coder';
if (name === 'raccoon') {
    console.log('Welcome, raccoon!');
} else if (name === 'coder') {
    console.log('You are amazing coder');
} else {
    console.log('unknown');
}

9. Ternary operator: ? (삼항 조건 연산자)

  • conditional ? value1 : value2;
  • 조건 ? true : false
  • 간단 할때만 사용할 것
console.log(name === 'raccoon' ? 'yes' : 'no');


10. Switch statement (Switch, case 문)

  • dict 형태로 해당하는 값에 대한 code를 설정할 수 있음
  • 가독성에 좋음
const browser = 'IE';
switch (browser) {
    case 'IE':
        console.log('go away!');
        break;
    case 'Chrome':
    case 'Firefox':
        console.log('love you!');
        break;
    default :
        console.log('same all');
        break;        
}


11. Loops (반복문)

while

  • 조건 확인 - 코드 실행 - 조건에 충족 할때 그때 멈춤
let i = 3;
while (i > 0) {
    console.log(`while: ${i}`);
    i--;
}


do while

  • 코드 실행 - 조건 확인 - 조건 만족할때 그 자리에서 멈춤
i = 0;
do {
    console.log(`do while: ${i}`);
    i--;
} while (i > 0);


for

  • for(begin; condition; step)
  • begin은 처음만 실행되고 condition - code - step 순으로 loop
  • 지역변수 선언 가능
  • nested loop 즉, for안에 for로 반복문 안에 반복문
    • 근데 cpu가 너무 과부화됨 (반복문 * 반복문 횟수라서) ``` js for (i = 3; i > 0; i–) { console.log(for: ${i}); }

for (let i = 3; i > 0; i = i - 2) { // inline variable declaration (지역변수 선언 가능) console.log(inline variable for: ${i}); }

// nested loops // 둘러 싸서 포함하는거 가능 for (let i = 0; i < 10; i++) { for (let j = 0; j < 3; j++) { console.log(i: ${i}, j:${j}); } } // O(n^2) 이기 때문에 cpu에 무리가 감 되도록 피하자


<br>

### Loop quiz

- 놓친점 `==` 등호 사용 잘하자 `=`과 햇갈리지 말자
- 실행할 코드 블럭 안에 `;` 사용 주의

- 0~10까지 숫자 반복하여 짝수만 출력시키기 (continue 사용해서)

``` js
'1번'
for (let i = 0; i <= 10; i++) {
    if (i % 2 == 0) {
        console.log(`num : ${i}`)
    } 
    // else {
        // continue;
    // }
}

'2번'
for (let i = 0; i < 11 ; i++) {
    if (i % 2 !== 0) {
        continue;
    }
    console.log(`number : ${i}`);
}


  • 0~10까지 숫자 반복하여 8까지 도달시 그만 (break 사용해서)
for (let i = 0; i <= 10; i++) {
    console.log(`${i}`)
    if (i == 8) {
        break;
    }
}

참고