🎉 berenickt 블로그에 온 걸 환영합니다. 🎉
Lang
JavaScript
07-표현식과 연산자(Express and Operators)

1. 연산자

JavaScript의 연산자는 다음과 같은 유형으로 나눌 수 있습니다.


1.1 산술 연산자(arthmetic)

1
// 산술 연산자 (Arithmetic operators)
2
// 📝 + 더하기
3
// 📝 - 빼기
4
// 📝 * 곱하기
5
// 📝 / 나누기
6
// 📝 % 나머지값
7
// 📝 ** 지수 (거듭제곱)
8
9
console.log(5 + 2) // 7
10
console.log(5 - 2) // 3
11
console.log(5 * 2) // 10
12
console.log(5 / 2) // 2.5
13
console.log(5 % 2) // 1
14
console.log(5 ** 2) // es7에서 추가됨, 25
15
console.log(Math.pow(5, 2)) // 25
16
17
// + 연산자 주의점! : 숫자와 문자열을 더하면 문자열로 변환됨
18
let text = '두개의' + '문자를'
19
console.log(text) // 두개의 문자를
20
text = '1' + 1 // 숫자와 문자열을 더하면 문자열로 변환됨
21
console.log(text) // 문자열 11

1.2 단항 연산자(unary)

1
// 단항연산자 Unary Operators
2
// 📝 + (양)
3
// 📝 - (음)
4
// 📝 ! (부정)
5
let a = 5
6
7
a = -a // -1 * 5
8
console.log(a) // -5
9
a = -a // -1 * -5
10
console.log(a) // 5
11
12
a = +a // +5
13
console.log(a) // 5
14
15
a = -a // -5
16
a = +a // +(-5)
17
console.log(a) // -5
18
19
// 부정연산자 !
20
let boolean = true
21
console.log(boolean) // true
22
console.log(!boolean) // false
23
console.log(!!boolean) // true
24
25
console.clear() // 이전 값들 지우는 함수 clear
26
// + 숫자가 아닌 타입들을 숫자로 변환하면 어떤값이 나오는지 확인할 수 있음
27
console.log(+false) // 0
28
console.log(+null) // 0
29
console.log(+'') // 0
30
console.log(+true) // 1
31
console.log(+'text') // NaN
32
console.log(+undefined) // NaN
33
34
console.log(!!1) // true, ! 부정연산자
35
// !! 값을 boolean 타입으로 변환함

1.3 할당 연산자(assignment)

1
// 할당연산자 (Assignment operators)
2
let a = 1
3
a = a + 2
4
console.log(a) // 3
5
6
a += 2 // a = a + 2; 축약버전
7
console.log(a) // 5
8
9
a -= 2
10
console.log(a) // 3
11
12
a *= 2 // 3 * 2
13
console.log(a) // 6
14
15
a /= 2
16
a %= 2
17
a **= 2

1.4 증감 연산자(increment)

1
// 증가 & 감소 연산자 Increment & Decrement Operators
2
let a = 0
3
console.log(a) // 0
4
a++ // a = a + 1;
5
console.log(a) // 1
6
a-- // a = a - 1;
7
console.log(a) // 0
8
9
console.clear()
10
11
// 주의!
12
// 📝 a++ 필요한 연산을 하고, 그 뒤 값을 증가시킴
13
// 📝 ++a 값을 먼저 증가하고, 필요한 연산을 함
14
a = 0
15
console.log(a++) // 0
16
console.log(a) // 1
17
let b = a++
18
console.log(b) // 1
19
console.log(a) // 2

1.5 비교 연산자(relational)

1
// 대소 관계 비교 연산자 (Relational operators)
2
// 📝 > 크다
3
// 📝 < 작다
4
// 📝 >= 크거나 같다
5
// 📝 <= 작거나 같다
6
console.log(2 > 3) // false
7
console.log(2 < 3) // true
8
console.log(3 < 2) // false
9
console.log(3 > 2) // true
10
console.log(3 <= 2) // false
11
console.log(3 <= 3) // ture
12
console.log(3 >= 3) // ture
13
console.log(3 >= 2) // ture

1.6 연산자 우선순위(priority)

1
let a = 2
2
let b = 3
3
let result = ((a + b) * 4) / 5
4
console.log(result) // 4
5
6
result = a++ + b * 4
7
console.log(result) // 14
  • MDN 연산자 우선순위
  • 굳이 암기할 필요없음.
  • 정보처리기사칠 떄 외우는 용
    • 증산시 관비 논삼대(증산시의 관노비가 논을 산데)
    • 증감 / 산술 / 시프트 / 관계 / 비트 / 논리 / 삼항 / 대입

1.7 동등 비교 연산자(equality)

의미비교 연산자설명
동등 비교(loose equality)x == yx와 y의 값이 같음
일치 비교(strict equality)x === yx와 y의 값과 타입이 같음
부등 비교x != yx와 y의 값이 다름
불일치 비교x !== yx와 y의 값과 타입이 다름
  • == : 느슨한 비교
    • 자료의 타입변환을 JS 엔진이 알아서 해보고 동일하면 true라고 판정
  • === : 엄격한 비교
    • 자료의 타입까지 동일해야 true라고 판정
1
// 동등 비교 관계 연산자 (Equality operators)
2
// 📝 == 값이 같음
3
// 📝 != 값이 다름
4
// 📝 === 값과 타입이 둘다 같음
5
// 📝 !== 값과 타입이 다름
6
console.log(2 == 2) // true
7
console.log(2 != 2) // false
8
console.log(2 != 3) // true
9
console.log(2 == 3) // false
10
console.log(2 == '2') // true
11
console.log(2 === '2') // false✨
12
console.log(true == 1) // true
13
console.log(true === 1) // false
14
console.log(false == 0) // true
15
console.log(false === 0) // false
16
17
console.clear()
18
19
const obj1 = {
20
name: 'js',
21
}
22
const obj2 = {
23
name: 'js',
24
}
25
26
console.log(obj1 == obj2) // false
27
console.log(obj1 === obj2) // false
28
console.log(obj1.name == obj2.name) // true
29
console.log(obj1.name === obj2.name) // true
30
31
let obj3 = obj2
32
console.log(obj3 == obj2) // true
33
console.log(obj3 === obj2) // true

1.7.1 배열 동등 비교

숫자나 문자열 비교할때는 == 이나 === 연산자를 이용하면 되지만, 배열이나 객체를 비교할때는 불가능하다. 왜냐하면 reference 타입으로써 값이 비교 되는 것이 아닌 주소값이 비교되기 때문이다.

1
const a = [1, 2, 3]
2
const b = [1, 2, 3]
3
4
// 배열 구성을 비교하는게 아닌 배열 메모리 주소값 비교가 된다
5
a == b // false
6
a === b // false

그래서 배열을 동등비교하려면 JSON.stringify()을 사용해야 한다.

1
const equals = (a, b) => JSON.stringify(a) === JSON.stringify(b)
2
3
const a = [1, 2, 3]
4
const b = [1, 2, 3]
5
6
equals(a, b) // true

2. 표현식

2.1 리터럴(Literal)

값에는 다양한 데이터 타입이 있었습니다. 코드에서 값을 나타내는 표기법리터럴이라고 합니다.

  • 숫자만 쓰면 숫자 리터럴
  • 따옴표 안에 쓰면 문자 리터럴
  • true나 false를 쓰면 불리언 리터럴
  • 괄호를 사용하면 객체 리터럴
  • 대괄호를 사용하면 배열 리터럴
  • 템플릿 리터럴은 템플릿을 만들 수 있는 리터럴

2.2 문(Statement)

코드에서 최소로 실행할 수 있는 단위의 한 줄문(Statement, 문장)이라고 합니다. 할당하면 할당문, 조건문이 있으면 조건문입니다. 여러 문이 있지만 이 중에서 표현식이 있습니다.

1
let a, b // 변수를 선언하는 문장
2
let c = 1 // 선언과 초기화를 한 번에 하는 문장
3
4
// 조건을 판별하는 if문장
5
if (a > b) {
6
console.log('a가 b 보다 큽니다.')
7
}
8
9
a = b // 대입 문장
10
c = a + b // 계산 문장

2.2.1 표현식(Expressions)

문 중에서 값으로 평가될 수 있는 문표현식(Expressions)이라고 부릅니다.

  • 식별자, 연산자, 리터럴 등으로 구성되고 결과가 하나의 값으로 표현되는 문장
1
1 // 숫자 리터럴 표현식
2
1 + 1 // 연산자 표현식
3
call() // 함수 호출 표현식
4
let b // 선언문
5
b = 2 // 할당문, 할당 표현식인 문
6
7
c = a < b ? 1 : 2 // 삼항연산
8
9
// 익명 함수를 반환하는 표현식
10
let anonymousFn = function (a, b) {
11
return a + b
12
}
13
let arrowFn = (a, b) => {
14
return a + b
15
}

[참고]