JavaScript 마스터 - Ch03 연산자와 구문

2주차 온라인 강의에서는 JS 연산자와 구문, 함수, 표준 내장 객체에 대해 배웠다.

 

 

Ch03 - 연산자와 구문

할당, 증감연산자

// 할당(Assignment)
// const: 재할당 x, let: 재할당 o

// const a4 = 3
// a4 = a + 2 
let a4 = 3
a4 += 2

console.log(a4)


// 증감연산자(Increment * Decrement)
let a5 = 3
let a6 = 6
let a7 = 9

console.log(a5++) // 3
console.log(a5) // 4

console.log(++a6) // 7
console.log(a6) // 7

console.log(--a7) // 8
a7 -= 1
console.log(a7) // 7

 

 

비교 연산자

const a8 = 1
const b4 = 3

console.log(a == b) // false(동등연산자)
console.log(a != b) // true
console.log(a === b) // false(일치연산자)
console.log(a !== b) // true

 

 

논리 연산자

const a9 = true
const b5 = false

if (a9&&b5) {
    console.log("모두 참")
}

if (a9 || b5) {
    console.log("하나 이상이 참")
}

// and - 왼쪽부터 확인해서 먼저 만나는 거짓 데이터 반환
console.log(true && false) // false
console.log(1 && 0) // 0
console.log(1 && 2 && 0) // 0
console.log("A" && 'B' && 'C') // 다 참이면 마지막 데이터 반환

// or - 왼쪽부터 확인해서 제일 먼저만나는 트루 데이터 반환
console.log(true || false)
console.log(0 || 1) // 1 
console.log(false || 0 || {}) // {}
console.log(false | 0 || NaN) // 다 거짓이면 마지막 데이터 반환

 

 

Nullish 병합(??)

null, undefined 제외하고 모든 데이터 만나면 그 데이터 만날 때 반환

const num2 = n ?? 7

console.log(num2) // 0 
console.log(null ?? 1) // 1
console.log(undefined ?? 2) // 2
console.log(null ?? undefined) // undefined - 마지막 데이터 반환
console.log(null ?? 1 ?? 2) // 1
console.log(false ?? 1 ?? 2) // false
console.log(0 ?? 1 ?? 2) // 0

 

삼항 연산자

식: 조건 ? 참: 거짓

const a10 = 1

if (a<2) {
    console.log("참")
} else {
    console.log("거짓,,,")
}

console.log(a < 2 ? "참": "거짓...")

 

 

전개 연산자

배열 데이터의 대괄호& 객체 데이터의 중괄호 기호 증발!!!!

const a11 = [1,2,3]
const b6 = [4,5,6]

console.log(a11)    // [1,2,3]
console.log(...a11) // 1 2 3

 

 

병합 메소드 concat

const c2 = a11.concat(b6)
console.log(c2)

 

 

할당 메소드 assign

const a12 = {x:1, y:2}
const b7 = {y:3, z:4}
const c3 = Object.assign({}, a12, b7)

console.log(c3)

 

 

 

구조 분해 할당

구조를 분해해 각각의 변수에 재할당

const arr = [1,2,3]
const a14 = arr[0]
const b8 = arr[1]
const c4 = arr[2]

console.log(a14, b8, c4) // 1 2 3

const [a15, b9, c5] = arr
console.log(a15, b9, c5) // 1 2 3

const arr3 = [1,2,3]
const [a16, rest] = arr3

console.log(a16, rest) // 1 2


const arr4 = [1,2,3]
const [a17, ...rest2] = arr4

console.log(a17, rest2) // 1 [2, 3]

 

 

객체 구조 분해

const { a19, b20 } = obj

console.log(a19, b20) // 1 2

 

 

객체 구조 분해와 배열의 차이

배열: 데이터가 대괄호안에서 나열

객체 구조 분해: 속성 이름으로 바로 데이터 검색 가능

 

 

객체 구조 분해에 전개연산자 사용

const obj2 = {
    a21: 1,
    b21: 2,
    c21: 3,
    x21: 7,
    y21: 100
}

 

 

선택적 체이닝

const user5 = undefined
console.log(user5?.name) 

const userC = {
    name: "jioh",
    age: 24,
    address: {
        country: "korea",
        city: "seoul"
    }
}

const userD = {
    name: "Neo",
    age: 22
}

function getCity(user) {
    return user.address?.city || "주소x"
}

console.log(getCity(userC)) // seoul
console.log(getCity(userD)) // 주소 x - typeError방지

 

 

if 조건문

기본적으로 함수는 리턴값이 없으면 undefined 반환!!!

 

 

for of 반복문(배열)

for of 반복문을 사용하면 번거롭게 코드를 작성하지 않아도 된다. 하지만 길이를 조절할 수 없으므로 배열의 모든 데이터를 탐색한다!

const fruits5 = ['apple', 'banana', 'cherry']

// for문
for (let i = 0; i < fruits5.length; i++) {
    console.log(fruits5[i])
}

// for of문
for (const fruit of fruits5) {
    console.log(fruit) // apple banana cherry
}

 

 

for in 반복문(객체 데이터)

const users2 = {
    name: 'jioh',
    age: 26,
    isValid: true,
    email: 'ckaquz98@naver.com'
}

for (const key in users2) {
    console.log(key,':' , users2[key])
}

 

 

Do while 반복문

while문처럼 조건을 먼저 보지 x. 일단 do { } 부분을 실행

let n2 = 0
// while(n2) {
//     console.log // 출력값 x- false 이므로
// }

do {
    console.log(n2)
} while(n2)

do {
    console.log(n2)
    n2++
} while(n2 < 4)

 

더 많은 내용을 배웠지만 기존에 알던 내용은 제외하고 헷갈리거나 잘 모르는 내용 위주로 정리해보았다.

처음 알았던 내용은 전개연산자를 쓰면 객체데이터의 중괄호와 배열데이터의 대괄호가 증발한다는 점이었다.

 

다음 ch04에서는 함수에 대해 정리해보겠다