3. 연산자

연산자

할당 연산자

• 오른쪽에 있는 피연산자의 평과 결과를 왼쪽 피연산자에 할당하는 연산자
• 다양한 연산에 대한 단축 연산자 지원
• Increment 및 Decrement연산자
  • Increment (++) : 피연산자의 값을 1증가시키는 연산자
  • Decrement (—) : 피연산자의 값을 1감소시키는 연산자
  • += 또는 -= 와 같이 더 분명한 표현으로 적을 것을 권장

let c = 0

c += 10
console.log(c)   // 10 (c에 10을 더한다)

c -= 3
console.log(c)   // 7 (c에 3을 뺀다)

c *= 10
console.log(c)   // 70 (c에 10을 곱한다)

c++
console.log(c)   // 71 (c에 1을 더한다, 증감식)

c--
console.log(c)   // 70 (c에 1을 뺀다, 증감식)

 

비교 연산자

• 피연산자들(숫자, 문자, Boolean 등)을 비교하고 결과값을 boolean으로 반환하는 연산자
• 문자열은 유니코드 값을 사용하며 표준 사전 순서를 기반으로 비교
• ex) 알파벳끼리 비교할 경우
  • 알파벳 순서상 후순위가 더 크다
  • 소문자가 대문자보다 더 크다

3 > 2 // true
3 < 2 // false

'A' < 'B' // true
'Z' < 'a'  // true
'가' < '나' // true

 

동등 연산자 (==)

• 두 피연산자가 같은 값으로 평가되는지 비교 후 boolean값을 반환
• 비교할 때 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교
• 두 피연산자가 모두 객체일 경우 메모리의 같은 객체를 바라보는지 판별
• 예상치 못한 결과가 발생할 수 있으므로 특별한 경우를 제외하고 사용하지 않음

 

일치 연산자 (===)

const a = 1
const b = '1'

console.log(a === b)  // false
console.log(a === Number(b)) // true

• 두 피연산자의 값과 타입이 모두 같은 경우 true를 반환
• 같은 객체를 가리키거나, 같은 타입이면서 같은 값인지를 비교
• 엄격한 비교가 이뤄지며 암묵적 타입 변환이 발생하지 않음
  • 엄격한 비교 : 두 비교 대상의 타입과 값 모두 같은 지 비교하는 방식

 

논리 연산자

• 세 가지 논리 연산자로 구성
  • and 연산은 &&연산자
  • or연산은 || 연산자
  • not연산은 ! 연산자
• 단축 평가 지원
  • false && true ⇒ false
  • true || false ⇒ true

 

삼항 연산자 (Ternary Operator)

• 3개의 피연산자를 사용하여 조건에 따라 값을 반환하는 연산자
• 가장 앞의 조건식이 참이면 : (콜론)앞의 값이 반환되며, 그 반대일 경우 : 뒤의 값이 반환되는 연산자
• 삼항 연산자의 결과 값이기 때문에 변수에 할당 가능

true ? 1 : 2 // 1
false ? 1 : 2 // 2

const result = Math.PI > 4 ? 'Yep' : 'Nope'
console.log(result)  // Nope

 

조건문

조건문의 종류와 특징

• if statement
  • 조건 표현식의 결과값을 boolean 타입으로 변환 후 참/거짓을 판단
• switch statement
  • 조건 표현식의 결과값이 어느 값(case)에 해당하는지 판별
  • 주로 특정 변수의 값에 따라 조건을 분기할 때 활용
    • 조건이 많아질 경우 if문보다 가독성이 나을 수 있음

if statement

const name = 'manger'

if (name === 'admin') {
    console.log('관리자님 환영합니다.')
} else if (name === 'manager') {
    console.log('매니저님 환영합니다.')
} else { 
    console.log('${name}님 환영합니다.')
}

if, else if, else

• 조건은 소괄호(condition) 안에 작성
• 실행할 코드는 중괄호 {} 안에 작성
• 블록 스코프 생성

switch statement

switch(expression) {
    case 'first value' : {
        // do something
        [break]
    }
    case 'second value' : {
        // do something
        [break]
    }
    [default : {
         // do something
     }]
}

• 표현식(expression)의 결과값을 이용한 조건문
• 표현식의 결과값과 case문의 오른쪽 값을 비교
• break 및 default문은 [선택적]으로 사용 가능
• break문이 없는 경우 break문을 만나거나 default문을 실행할 때까지 다음 조건문 실행
• 블록 스코프 생성

 

이 경우 모든 cosole이 출력(Fall-through)

const name = '홍길동'

switch(name) {
    case '홍길동' : {
        console.log('홍길동님 환영합니다.')
    }
    case 'manager' : {
        console.log('매니저님 환영합니다.')
    }
    default : {
        console.log(`${name}님 환영합니다.`)
    }
}

 

break를 작성하면 의도한대로 동작

const name = '홍길동'

switch(name) {
    case '홍길동' : {
        console.log('관리자님 환영합ㄴ디ㅏ.')
        break
    }
    case 'manager' : {
        console.log('매니저님 환영합니다.')
        break
    }
    default : {
        console.log(`${name}님 환영합니다.`)
    }
}

 

if / switch

• 조건이 많은 경우 switch문을 통해 가독성 향상을 기대할 수 있음
• 일반족으로 중첩 else if문은 유지보수 하기 힘들다는 문제도 있음

const num0ne = 5
const numTwo = 10

if (operator === '+') {
    console.log(num0ne + numTwo)
} else if (operator == '-') {
    console.log(num0ne - numTwo)
} else if (operator == '*') {
    console.log(num0ne * numTwo)
} else if (operator == '/') {
    console.log(num0ne / numTwo)
} else {
    console.log('유효하지 않은 연산자입니다.')
}

const num0ne = 5
const numTwo = 10
let opertaor = '+'

switch(operator) {
    case '+' : {
        console.log(num0ne + numTwo)
        break
    }
    case '-' : {
        console.log(num0ne - numTwo)
        break
    }
    case '*' : {
        console.log(num0ne * numTwo)
        break
    }
    case '/' : {
        console.log(num0ne / numTwo)
        break
    }
    default : {
        console.log('유효하지 않은 연산자입니다.')
    }
}

 

반복문

while

조건문이 참이기만 하면 문장을 계속해서 수행

while (조건문) {
    // do something
}

let i = 0

while (i < 6) {
    console.log(i)
    i += 1
}

// 0, 1, 2, 3, 4, 5

for

특정한 조건이 거짓으로 판별될 때까지 반복

for ([초기문];[조건문];[증감문]) {
    // do something
}

for (let i = 0; i < 6; i++ ){
    console.log(i)
}

// 0, 1, 2, 3, 4, 5

for…in

• 객체 (object)의 속성을 순회할 때 사용
• 배열도 순회 가능하지만 인덱스 순으로 순회한다는 보장이 없으므로 권장하지 않음

for (variable in object) {
    statement
}

const fruits = {a: 'appleb', b: 'banana'}

for (const key in fruits) {
    console.log(key) // a, b
    console.log(fruits[key]) // apple, banana
}

for…of

• 반복 가능한 객체를 순회할 때 사용
• 반복 가능한 (iterable) 객체의 종류 : Array, Set, String 등

for (variable of object) {
    statements
}

const numbers = [0, 1, 2, 3]

for (const number of numbers) {
    console.log(number)  // 0, 1, 2, 3
}

for…in 과 for…of 차이

• for … in 은 속성 이름을 통해 반복
• for … of 는 속성 값을 통해 반복

const arr = [3, 5, 7]

for (const i in arr) {
    console.log(i)  // 0 1 2
}

for (const i of arr) {
    console.log(i)  // 3 5 7
}

 

[참고]

for … in, for … of 와 const

일반적인 for문 for (let i=0; i<arr.length; i++) {…}의 경우에는 최초 정의한 i를 재할당 하면서 사용하기 때문에 const를 사용하면 에러발생

다만 for..in, for..of의 경우에는 재할당이 아니라, 매 반복시 해당 변수를 새로 정의하여 사용하므로 에러가 발생하지 않음

키워드	종류	연관키워드	스코프
if	조건문	-	블록 스코프
switch	조건문	case, break, default	블록 스코프
while	반복문	break, continue	블록 스코프
for	반복문	break, continue	블록 스코프
for...in	반복문	객체 순회	블록 스코프
for...of	반복문	iterable 순회	블록 스코프