[드림코딩 엘리] 자바스크립트 연산, 반복문. 헷갈리는 ++i, i++ 이해 / 짝수, 홀수 구하는 방법

이번편에서는 기본 문법인 자바스크립트 연산과 반복문을 배운다. 예전에 생활코딩으로 공부했을 때 봤던 내용들이여서 복습겸 봤는데 제일 큰 수확 2가지가 있었다. 

• 드디어 ++i 와 i++ 의 차이점을 알게되었다는 점(앞에 ++가 붙으면 먼저 변수에 할당되어서 들어가는 것이고 / 뒤에 붙으면 그대로 들어가서 계산이 된 다음에 ++가 되는 것. for 문에서 보통 i++를 쓴다).
• 짝수와 홀수를 구하려면 4 % 2 == 0 (나누고 나머지의 값이 0이냐 == 0이냐 짝수이냐 묻는것 / !==를 쓴다면 홀수이냐 묻는 것이다) 이런식으로 구할 수 있다는 점.

드림코딩 엘리는 마지막 퀴즈를 통해 직접 연습하게 한다는 점에서 좋은 강의 인 것 같다.

---

1. String concatenation

// 1. String concatenation
console.log('my' + ' cat');
console.log('1' + 2); // 문자열에 숫자를 더하면 숫자가 문자로 변환되어서 합해진다
console.log(`string literals:  


````
1 + 2 = ${1 + 2}`);
// 백틱을 이용해서 string reterals를 만들 수도 있다. 
// $를 이용하면 변수 값을 계산해서 string을 포함해서 문자를 만들게 된다.
// 위에 처럼 싱글 코트를 이용해도 고대로 문자열로 변환되어서 나온다

console.log('ellie\'s book')
console.log("ellie's \nbook")
// 이렇게 싱글 코트로 문자를 만들게 되면 중간에 싱글코트나 기호가 인식이 되지 않는다. 그래서 string reterals가 유용하다.
// 백 슬러시를 이용해서 위에 처럼 넣어줘야한다. 혹은 " 내용 's " 이런식으로 하덩가
// 새로 줄바꿈을 할 때는 백 슬러시 + n 이렇게 해야 줄바꿈이 된다.

2. Numberic operators

// 2. Numeric operators
console.log(1 + 1); // add
console.log(1 - 1); // substract
console.log(1 / 1); // divide
console.log(1 * 1); // multiply
console.log(5 % 2); // remainder 나누고 나머지 값
console.log(2 ** 3); // exponentiation

3. ++, -- operators 

// 3. Increment and decrement operators
let counter = 2;

const preIncrement = ++counter;
// counter = counter + 1; => 위의 코드는 이 둘과 동일하다. 
// preIncrement = counter; => 1이 증가한 다음 preIncrement에 값을 할당하는 것이다.
console.log(`preIncrement: ${preIncrement}, counter: ${counter}`);
// 결과는 preIncrement: 3, counter: 3 이다.

const postIncrement = counter++;
// postIncrement = counter; => 변수 뒤에 ++가 붙으면 이 변수의 값을 postIncrement에 먼저 할당한다.
// counter = counter + 1; => 뒤에 카운터의 값을 1 증가시키는 것이다.
console.log(`postIncrement: ${postIncrement}, counter: ${counter}`);
// 결과는 postIncrement: 3, counter: 4 이다.

// --도 똑같다.
const preDecrement = --counter;
console.log(`preDecrement: ${preDecrement}, counter: ${counter}`);
// 결과는 preDecrement: 3, counter: 3 이다.
const postDecrement = counter--;
console.log(`postDecrement: ${postDecrement}, counter: ${counter}`);
// 결과는 postDecrement: 3, counter: 2 이다.

++가 앞에 쓰였으면 바로 업데이트 되서 할당이 되고

++가 뒤에 다 붙으면 할당을 해놓고 업데이트는 그 뒤에 일어나게 된다.

4. = operators

// 4. Assignment operators 할당하는 오퍼레이터즈
let x = 3;
let y = 6;
x += y; // x = x+y => 반복되는 x를 생략해서 왼쪽처럼 만들 수 있다.
x -= y; // x = x-y 사실 좀 헷갈림.
x *= y; // x = x*y
x /= y; // x = x/y

5. <= operators

// 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

6. Logical operators

// 6. logical operators: || (or),  && (and), ! (not)
const value1 = true;
const value2 = 4 < 2;

// || (or), finds the first truthy value => ture 인 value1에서 멈춘다. 나머지 2개는 실행이 안 된다.
console.log(`or: ${value1 || value2 || check()}`);

// && (and), finds the first falsy value => false 인 value2에서 멈춘다. 나머지 1개는 실행이 안 된다.
console.log(`and: ${value1 && value2 && check()}`);

// and는 null check 할 때도 많이 쓰인다. object가 0이면 이 뒤에가 실행이 안 된다. 
// often used to compress long if-statement 
// nullableObject && nullableObject.something 
if (nullabeObject !== null) { // null object가 null이 아닐때만 (null은 false니까) 이 object에 sth이라는 value를 받아오게 된다.
    nullabeObject.something;
}

function check() {
    for (let i = 0; i < 10; i++) { //  여기서도 i++ 가 쓰였는데 아까 위에서 배운데로 ++가 뒤에 오니까 변수가 먼저 할당 된 다음에 계산이 된다.
        //wasting time. or 의 경우 앞에서 true 가 나오면 멈추고, and 의 경우 false 가 먼저 나오면 멈춘다. 뒤에 까지 계산을 안 하게된다.
        console.log('T.T');
    }
    return true;
}

// ! (not) 값을 반대로 바꿔준다.
console.log(!value1); // value1이 true니까 false로 변경한 것이다.

• or (||)연산자 => 3개 중에 하나라도 true면 true로 계산되는 연산자이다. 만약 true 가 앞에 먼저 나오면 멈춘다. 
• and (&&) 연산자 => 만약 false 가 나오면 멈춘다. 여기서는 value2에서 멈춘다. 나머지 1개는 실행이 안 된다.
• object가 null이면 실행이 안된다.
• null object가 null 이 아닐 때나 object에 something이라는 value를 받아오게
• !는 연산자는 값을 반대로 바꿔준다.

#주니어 개발자들이 코드 지적 당하는 부분

• false / false / 마지못해서 나오는 true 이런식으로 만드는 게 제일 좋다.
• expression 이나 function을 호출하는 아이들을 제일 뒤에다가 배치하는 것이 효율적이다.
• 앞이 false heavy 한 operation 일 수록 제일 뒤에 넣어야한다.

7. euqlity operators

// 7. Equality
const stringFive = '5';
const numberFive = 5;

// == 는 loose equality 라고 하며, with type conversion 이다.
console.log(stringFive == numberFive); // 문자열과 숫자열은 다르지만 값은 똑같으니까 결과는 ture
console.log(stringFive != numberFive); // != 똑같지 않다. 똑같으니까 결과는 false

// === 는 strict equality 라고 하며, no type conversion 이다. 타입도 같아야 한다. 코딩을 할 때, 이것을 쓰는 것이 더 좋다.
console.log(stringFive === numberFive); // false
console.log(stringFive !== numberFive); // true

// object equality by reference. object는 메모리에 탑재될 때 reference 형태로 저장 된다.
const ellie1 = { name: 'ellie' }; // 1과 2에는 똑같은 데이터가 들어있는 object지만 실제로 메모리에는 각각 다른 reference가 들어있고, 다른 reference는 서로 다른 object를 가리키고 있다.
const ellie2 = { name: 'ellie' };
const ellie3 = elli1; // 1과 3은 똑같은 reference를 가지고 있다.
console.log(ellie1 == ellie2); // me: reference가 다르지만 데이터는 같으니 true ? => 떙!! reference가 각각 다르니까 false 임!!
console.log(ellie1 === ellie2); // me: reference가 다르니까 엄격한 === 임으로 false => 딩동댕
console.log(ellie1 === ellie3); // me: reference가 같으니까 데이터도 같고 고로 true => 딩동댕 뿌리가 똑같으니까 맞다.

// equality - puzzler
console.log(0 == false); // true => 딩동댕. null 과 empty string 과 0 은 다 false로 간주된다.
console.log(0 === false); // false => 딩동댕. 0은 boolean이 아니기 때문에 우리가 strict equality type을 쓴다면 false 가 된다.
console.log('' == false); // true=> 딩동댕. null 과 empty string 과 0 은 다 false로 간주된다.
console.log('' === false); // false=> 딩동댕. empty string은 boolean이 아니기 때문에 우리가 strict equality type을 쓴다면 false 가 된다.
console.log(null == undefined); // ture=> 딩동댕. null 과 undefined 는 같은 것으로 간주된다.
console.log(null === undefined); // false=> 딩동댕. null 과 undefined 는 다른 tpye이다.

웬만하면 strict equality 를 사용하라

8. If operator

// 8. Conditional operators: if
// if, else if, else

const name = 'df';
if (name === 'dr') {
    console.log('Welcome, Ellie');
} else if (name === 'coder'){
    console.log('You are amazing coder');
} else {
    console.log('unknown');
}

9. ? operator

간단하게 코드를 쓸 때만 사용해라

// 9. Ternary operator: ?  => 간단하게 사용할 때만 쓴다.
// condition ? value1 : value2;
console.log(name === 'ellie' ? 'yes' : 'no')

10. switch operator

// 10. Switch statement
// use for multiple if checks
// use for enum-like value check
// use for multiple type checks in TS
const browser = 'IE';
switch (browser) { // ( ) 안에 있는 것이 true면 출력하라
    case 'IE':
        console.log('go away!'); 
        break;
    case 'Chrome':
    case 'Firefox':
        console.log('love you!');
        break;
    default:
        console.log('same all!')
        break;         
}

if 후에 else if를 많이 반복하기보다는 switch를 사용하는 편이 좋다.

11. while loop

statement가 false로 나오기 전까지는 무한 대로 반복해서 키에 계속 도는 것을 말한다.

// 11. Loops
// while loop, while the condition is truthy, false가 나오면 끝이 난다.
// body code is executed.
// 결과는 while: 3  while: 2  while: 1 
let i = 3;
while (i > 0) {
    console.log(`while: ${i}`);
    i--;
}

12. do-while loop

블럭을 먼저 실행한 다음에 조건이 맞는지 안 맞는지 검사한다.

// do while loop, body code is executed first, then check the condition.
// 블럭을 먼저 실행한 다음에 조건이 맞는지 안 맞는지 검사한다.
// i가 0임에도 불구하고 이 블럭을 먼저 실행해서 출력이 먼저 되고나서 0 인지 아닌지 검사해서 이때 멈추게 된다.
// 블럭을 먼저 실행하고 싶다면 do-while을 써야하고, 조건문이 맞을 때만 블럭을 실행하고 싶다면 y를 써야 한다.
// 결과는 do while: 0 이다. 
do {
    console.log(`do while: ${i}`);
    i--;
}   while (i > 0);

13. for loop

(시작하는 문자; 중간의 컨디션; 그 다음에 밞을 스텝)을 명시하게 되어있다. 즉, begin을 처음 한번만 호출을 하고; 그 다음의 블럭을 실행하기 전에 컨디션이 맞는지 안 맞는지 검사한 다음에 블럭이 다 실행이 되면; 스텝을 진행하게 된다. 그래서 애네들이 계속 보완해서 컨디션이 안 맞을 때까지 실행하게 된다.

// for loop, for(begin; condition; step)
// for 안에서 기존에 존재하는 변수의 값을 할당하는 경우이다.
// begin을 처음 한번만 호출을 하고 → 그 다음의 블럭을 실행하기 전에 컨디션이 맞는지 안 맞는지 검사한 다음에 블럭이 다 실행이 되면 → 스텝을 진행하게 된다.
// 그래서 애네들이 계속 보완해서 컨디션이 안 맞을 때까지 실행하게 된다.
// 결과는 for: 3  for: 2  for: 1 
for (i = 3; i > 0; i--)  {
    console.log(`for: ${i}`);
}

// inline variable declaration 라고 한다.
// 블럭 안에 let 이라는 지역 변수를 선언해서 이렇게 작성하는 것도 좋다.
for (let i = 3; i > 0; i = i - 2)  { 
    // inline variable declaration
    console.log(`inline variable declaration for: ${i}`);
}

14. nested loop

// nested loops => 이런 while 이나 for 같은 거는 서로 nesting 에서 작성할 수 있다.
// for문 안에 다시 for문을 작성하게 되면 i가 0 일 때 j를 0부터 9까지 계속 빙빙 돌리고, 그 다음 i가 1일 때 j를 0부터 9까지 돌리는 식이다.
// 이렇게 nesting 해서 작성하게 되면 0(n^2) 이렇게 작성하는 것은 cpu에 좋지않다. 그래서 되도록이면 피하는 것이 좋다.
for (let i = 0; i < 10; i++)   {
    for (let j = 0; j < 10; j++)    {
        console.log(`i: ${i}, j:${j}`);
    }
}

15. QUIZ 2개

// 이런 loop 안에서는 break, continue 같은 키워드를 써서 loop를 끝낼 수가 있다.
// break는 loop를 완전히 끝내는 것이다.
// continue는 해당 '조건문만' 실행하지 않고, 반복문을 이어서 가는 것(다음 step으로 넘어가는 것)을 말한다.
// QUIZ 2개 실습 => 위에는 실패, 밑에는 스스로 만듦. % == 0 or !== 이거로 짝수, 홀수 만들 수 있네!!
// 01. iterate from 0 to 10 and print only even numbers (use continue)

for (let i = 0; i < 11; i++) {
    if (i % 2 !== 0) { // 나누어서 떨어지지 않으면 = 숫자가 홀수인 경우에는 
        continue; // 위가 true 이면 continue가 호출된다. 밑의 console.log를 실행하지 않고 바로 i++로 간다.
    }
    console.log(`q1. ${i}`) // 2로 나누어 떨어지면 = 숫자가 짝수이면 console.log를 실행한다.
}

// 연습하려고 위에 처럼 작성한 거지 원래 짝수 일 때만 출력하는 건 밑에 처럼 하며 된다.
for (let n = 0; n < 11; n++) {
    if (n % 2 === 0) {
        console.log(`p1. ${n}`);
    }
}


// 02. iterate from 0 to 10 and print numbers until reaching 8 (use break)

for (i = 0; i < 11; i++)  {
    for(i = 0; i<9; i++ )   {
        console.log(`for: ${i}`)
    }
    break;
}

//or

for (let i = 0; i < 11; i++) {
    if (i>8) {
        break;
    }
    console.log(`q2. ${i}`);
}