참고영상: 드림코딩 - 자바스크립트 기초 강의

잠시 변수로 돌아가서...

• Variable: 읽고 쓰는 것이 가능
  • read
  • write
• Constant: 읽는 것만 가능
  • read

값이 중간에 바뀌는게 아니라면 웬만해선 const를 추천!

• primitive type: 메모리에 바로 값 할당 가능
• object는 너무 커서 불가능
  • reference가 메모리에 저장
  • 스스로 변경 가능: mutable data type

연산

String concatenation

console.log('my' + 'cats')
console.log('1' + 2)
console.log(`string literals: 1 + 2 = ${1+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) // 2의 3제곱

++, -- operators

let counter = 2
const preIncrement = ++counter
// counter = counter+1
// preIncrement = counter
const postIncrement = counter++
// postIncrement = counter
// counter = counter+1

• ++변수는 +1을 해준 다음에 다른 변수에 할당
• 변수++는 다른 변수에 할당한 다음 +1

--도 마찬가지

= operators

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

<= operators

작고, 작거나 같고, 크고, 크거나 같고...
이미 잘 아는 내용이니까 패스

Logical operators

• || (or)
• && (and)
• ! (not)

or

const value1 = false
const value2 = 4<2

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

function check(){
    for(let i=0; i<10; i++){
        console.log('🙋🏻‍♀️')
    }
    return true 
}

or은 하나라도 true이면 true이다.

위 코드에서 check()이 true로 반환되므로, value1, value2가 false여도 true라고 출력된다.

※ or은 앞에서 true가 되면 뒤에있는 조건은 생각않고 true대로 행동한다.

const value1 = true
const value2 = 4<2

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

function check(){
    for(let i=0; i<10; i++){
        console.log('🙋🏻‍♀️')
    }
    return true 
}

value1이 true라면,

check()은 작동하지 않는다.
value1만 보고 check()은 무시했기 때문이다.

주의

연산이 많이 되는 함수를 호출하거나 시간을 많이 잡아먹는 함수를 맨 앞에 둔다면?

const value1 = true
const value2 = 4<2

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

function check(){
    for(let i=0; i<10; i++){
        console.log('🙋🏻‍♀️')
    }
    return true 
}

이러면 시간이 많이 드는 비효율적인 코드가 된다.
따라서, 논리연산자는 비교적 간단한 것들을 앞에 두고, 그 간단한 애들이 다 false 일때만 마지막에 마지못해 돌려야 하는 애들을 호출하는 것이 좋다.

and

const value1 = false
const value2 = 4<2

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

function check(){
    for(let i=0; i<10; i++){
        console.log('🙋🏻‍♀️')
    }
    return true 
}

and는 모두 true일때 동작한다.

따라서 value1이 false라면 게임 끝났다.
무조건 작동 안한다.

고로 and도 시간이 많이 드는 연산을 제일 마지막에 적는 것이 좋다.

null 체크

if (nullableObject != null){
  nullableObject.something
}

not

값을 반대로 바꿔줌

const value1 = true
console.log(!value1)

true 값을 false로 바꿔서 출력되었다.

Equality operators

• loose equality (속내용을 보고 검사)
  • ==
  • !=
• strict equality (타입을 보고 검사)
  • ===
  • !==

const stringFive = '5'
const numberFive = 5

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

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

웬만하면 strict equality를 사용하는 것이 좋음!

object equality

const kim1 = {name: 'kim'}
const kim2 = {name: 'kim'}
const kim3 = kim1
console.log(kim1 == kim2)
console.log(kim1 === kim2)
console.log(kim1 === kim3)

• kim3은 kim1의 ref를 가지고 있음
  고로, 똑같은 ref를 가지고 있다.

• kim1과 kim2는 다른 레퍼런스를 갖기 때문에 false가 나온다.
• kim1과 kim2는 똑같은 type이든 아니든 레퍼런스 값이 다르기 때문에 false가 나온다.
• kim1과 kim3은 똑같은 레퍼런스이므로 true가 나온다.

마무리 확인

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

• 0은 false로 간주하기 때문
• 0은 boolean 타입이 아니기 때문
• ''은 false로 간주하기 때문
• ''은 boolean 타입이 아니기 때문
• null은 undefined랑 같은 것으로 간주하기 때문
• null과 undefined는 같은 타입이 아니기 때문

If operators

const name = 'kim'
if(name === 'kim'){
    console.log("What's up kim!")
} else if(name === 'yang'){
    console.log("Hi yang")
} else {
    console.log('unknown')
}

if 안에 있는 조건이 true일때만 실행

? operators

const name = 'kim'
console.log(name === 'kim' ? 'yes' : 'no')

조건문이 참이면 왼쪽, 거짓이면 오른쪽을 반환한다.
📍 단, 간단하게 쓸때만 쓰는것이 좋다.
(뒤에다 묶고 묶고... 하면 가독성 떨어짐)

Switch operators

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

근데 지금 브라우저가 크롬이랑 파이어폭스면 같은 값을 출력한다.
따라서 다음과 같이 바꾸는 것이 더 좋을 것 같다.

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
}

반복문

while

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

while에 걸어준 조건이 끝날때까지 반복

do-while

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

• do 안에 있는 내용을 먼저 시작
• 그 다음에 while 안에 있는 조건에 맞는지 확인

현재 i는 while문에 따라 0이 된 상태이다. 그러나 do를 실행하기 때문에 do while이 출력이 된다.
그 후, i가 while의 조건에 맞는지 아닌지 확인하게 되고 -> 안맞으니까 멈춤.

To sum up

• do while: 블럭 안의 내용을 먼저 실행하고 싶을 때
• while: 조건에 맞을때만 실행시키고 싶을 때

for

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

for(시작; 조건; 스텝) 에 맞게 작성

for문 안에서 변수 선언하는 것도 가능 !

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

이중 for

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

• for문 안에 또 for문을 돌리는 것.
• i가 0일 때 j가 0~9까지 돌게 됨
• 이를 i가 9가 될때까지 반복

그러나 O(n²)시간이 걸리므로 좋지 않음.

break, continue

• break: 중간에 반복문을 끝냄
• continue: 지금꺼만 skip하고 다음꺼를 진행는 식으로 무시하기

ex. 0부터 10까지 continue를 사용하여 짝수만 출력하기

for (let i = 0; i < 11; i++) {
    if (i % 2 !== 0) continue
    console.log(i)
}

ex. 0부터 10까지 반복하되 break를 사용하여 8까지만 출력하기

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

끝!

대체로 알고있는 내용이었지만 잘 몰랐던 부분도 조금씩 있었다.
조금 배운 내용을 알겠다며 넘어가고 어떻게든 진도를 나가는 것보다는 기초와 기본을 탄탄하게 잡고 다양한 응용도 겸하면서 천천히 나아가는게 좋은 것 같다.