B6 : 구문과 연산자

목차

1. 구문

    1-1. 구문 (Syntax)

    1-2. 표현식 (Expression)

    1-3. 문 (Statement)

    1-4. 표현식과 문

2. 연산자 (Operator)

    2-1. 산술 연산자

    2-2. 논리 연산자

    2-3. 관계 연산자

    2-4. 비트 연산자

    2-5. 조건 연산자

    2-6. 할당 연산자

    2-7. 쉼표 연산자

    2-8. typeof 연산자

    2-9. nullish 병합 연산자

---

1. 구문

1. 구문 (Syntax)

언어가 작동하는 규칙을 정의하며, 문법에 따라 작성한다.

자바스크립트 구문의 중요한 구성 요소로 표현식, 문, 연산자가 있다.

 

2. 표현식 (Expression)

값으로 평가되는 구문으로 문자, 숫자, 할당 표현식, 복합 표현식이 포함된다.

'javascript'	// 문자
3	// 숫자
a = 1	// 할당 표현식
x + y;	// 복합 표현식

• 할당 표현식 : 변수를 선언하고, 값을 대입하는 표현식
• 복합 표현식 : 여러 개의 단일 표현식을 연산자, 함수 호출 등으로 결합한 것

3. 문 (Statement)

일종의 지시를 내리는 것으로, 표현식이 값을 결과로 가져온다면, 문은 표현식이나 다른 문을 조합해 동작을 수행하는 지시를 내린다.

let a;	// 표현식
if(true){ a='1' }	// 문

 

문은 여러 종류가 있다.

var a = 1;				// 선언문
if(a) { alert('조건문'); }		// 조건문
while(a) { alert('반복문'); }		// 반복문

function doSomething() { return 'foo'; }
console.log(doSomething());		 // 점프문

 

4. 표현식과 문

표현식과 문을 정리하다보니 헷갈려서 어떻게 구분하는 지 알아봤다.

알아보다보니 양이 좀 많아져서 글을 따로 만들었다.

자바스크립트 엔진이 표현식과 문을 구분하는 법 >>

 

---

2. 연산자 (Operator)

1. 산술 연산자

숫자 연산에 필요한 연산자들이다.

연산자	수행 연산	피연산자 개수	결합 방향	예제	결과
+	덧셈	2	좌 ⇢ 우	1 + 2	3
-	뺄셈	2	좌 ⇢ 우	2 - 1	1
*	곱셈	2	좌 ⇢ 우	1 * 2	2
/	나눗셈	2	좌 ⇢ 우	4 / 2	2
%	나머지	2	좌 ⇢ 우	5 % 2	3
++	전치, 후치 증가(단항 연산)	1	우 ⇢ 좌, 좌 ⇢ 우	const a = 1; ++a, a++	2, 1
--	전치, 후치 감소(단항 연산)	1	우 ⇢ 좌, 좌 ⇢ 우	const a = 1; --a, a--	0, 1
+ 단항	피연산자 값을 숫자로 변환	1	우 ⇢ 좌	const a = '1'; +a	1
- 단항	피연산자 값의 부호를 변경	1	우 ⇢ 좌	const a = 1; -a	-1

연산자를 사용한 대부분의 표현식은 부수 효과가 없으나, 전치/후치/증감 연산자는 부수 효과를 가진다.

• console.log(a, b); → 후치 연산
  ⋅ a는 증가 후 값인 2를 출력
  ⋅ b는 증가 전 값인 1을 출력
• console.log(a, c); → 전치 연산
  ⋅ a는 또 증가하여 3을 출력
  ⋅ c는 증가 후 값인 3을 출력

 

2. 논리 연산자

논리 연산자 &&, ||, ! 는 보통 불린값을 이용해 연산을 수행하며, 결과값도 불린값이다.

자바스크립트에서는 모든 값이 피연산자가 될 수 있으며, 결과값도 될 수 있다.

→ 이 경우, truthy값과 falsy값이라는 개념으로 피연산자를 평가한다.

truthy	falsy 외의 모든 값 (빈 배열과 빈 객체 포함)
falsy	빈 문자열 (''), null, 0, undefined, On, NaN

 

논리 연산자들 우선순위는 ! > && > || 순서로 우선순위가 높다.

연산자	수행 연산	피연산자 개수	결합 방향	예제
&&	논리 AND	2	좌 → 우	x && y > z
||	논리 OR	2	좌 → 우	x || y > z
!	논리 NOT	1	우 → 좌	!x

 

!!

NOT 연산자를 연속해서 사용하면 불린형이 아닌 값을 불린형으로 변환하는 용도로 사용할 수 있다.

 

단락 평가 (Short Circuit)

AND 연산자와 OR 연산자는 연달아서 작성하는 Chaining을 할 수 있다.

이 때 앞의 결과가 각각 거짓, 참이라면 뒤의 연산은 평가하지 않고 그대로 false, true를 반환하며 문을 끝낸다.

이런 식으로 앞의 평가 결과만 보고 뒤의 평가 결과를 판단하지 않는 방식을 단락 평가라고 한다.

1. 왼쪽부터 오른쪽으로 피연산자를 불린형으로 변환하며 평가
2. 피연산자의 변환값이 false/true면 연산 멈추고 해당 피연산자의 원래값을 리턴
3. 모든 피연산자를 평가한 경우, 마지막 피연산자를 리턴 (모두 false/true)

 

3. 관계형 연산자

두 피연산자의 관계를 검증할 때 사용한다.

결과는 항상 불린형 이며, 주로 조건문/반복문 내 조건을 정의할 때 사용한다.

연산자	수행 연산	피연산자 개수	결합 방향	예제
>, >=, <, <=	Number,BigInt의 대소 비교, String의 알파벳 순서 비교	2	좌 ⇢ 우	x >= y
==	값의 동등을 판단	2	좌 ⇢ 우	x == y
===	값의 일치를 판단	2	좌 ⇢ 우	x === y
instanceof	객체의 클래스 확인	2	좌 ⇢ 우	car instanceof Vehicle
in	객체에 특정 프로퍼티가 있는지 확인	2	좌 ⇢ 우	name in Obj

 

 

4. 비트 연산자

숫자의 비트를 조작하는 연산자로, 피연산자는 32비트 정수 표현법을 따른다

연산자	수행 연산	피연산자 개수	결합 방향	예제
&	비트 AND	2	좌 ⇢ 우	x & y
|	비트 OR	2	좌 ⇢ 우	x | y
^	비트 XOR	2	좌 ⇢ 우	x ^ y
~	비트 NOT	1	좌 ⇢ 우	~x
<<	왼쪽 시프트	2	좌 ⇢ 우	x<<1
>>	부호 비트 확장 오른쪽 시프트	2	좌 ⇢ 우	x >> 1
>>>	부호 비트 확장 없는 오른쪽 시프트	2	좌 ⇢ 우	x >>>1

 

 

 

5. 조건 연산자 (삼항 연산자, 물음표 연산자)

자바스크립트에서 유일하게 피연산자를 3개 가지는 3항 연산자로, if else의 축약형이다.

// if else 조건문
if(a > 1) {
	b = a;
} else {
	b = 2;
}

// 조건 연산자
b = a > 1 ? a : 2;

 

 

6. 할당 연산자

변수에 값을 할당할 때 사용하는 연산자로, 우측 피연산자의 값을 좌측 값에 할당한다.

연산자	표현식	동등한 표현식
+=	x += y	x = x + y
-=	x -= y	x = x - y
*=	x *= y	x = x*y
/=	x /= y	x = x / y
%=	x %= y	x = x % y
&=	x &= y	x =  x & y
|=	x |= y	x = x | y
^=	x ^= y	x = x ^ y
<<=	x <<= y	x = x << y
>>=	x >>= y	x = x >> y
>>>=	x >>>= y	x = x >>> y
||=	x ||= y	x = x || y

 

7. 쉼표 연산자

한 번에 여러가지 피연산자를 사용하고 싶을 때 사용한다.

for (let i = 0, j = 10; i < j; i++, j--) {
	...
}

 

 

8. typeof 연산자

피연산자의 타입을 문자열로 반환하는 단항 연산자이다.

피연산자 타입	결과	예제
문자열	'string'	typeof 'javascript'
숫자	'number'	typeof 1
불리언	'boolean'	typeof true
undefined	'undefined'	typeof undefined
null	'object'	typeof null
함수	'function'	typeof function(){}
객체	'object'	typeof {}
심볼	'symbol'	typeof Symbol()
BigInt	'bigint'	typeof 1n

 

 

typeof null의 결과로 object가 나오는 이유는 자바스크립트 초창기 설계 오류로 생긴 버그로, null 타입을 확인하려면 동등 연산자를 사용해야한다.

const vehicle = new Vehicle();
console.log(vehicle instanceof Vehicle);	//true
console.log(typeof vehicle);	//'object'

 

 

 

9. nullish 병합 연산자

병합 연산자 ??으로 여러 피연산자 중 그 값이 확정되어 있는 변수를 찾을 수 있다.

a ?? b의 평과 결과는 아래와 같다.

• a가 null도 아니고 undefined도 아니면 a
• 그 외의 경우는 b (a가 null || undefined)

x = (a !== null && a !== undefined) ? a : b;

a ?? b

 

OR 연산자와 비슷해보일 수 있으나 null, undefined <-> 숫자 0 을 구분지어야할 때 쓰기 좋다.

let height = 0;

alert(height || 100);	// 100 (0을 false로 판단)
alert(height ?? 100);	// 0 (처음 나타난 defined 값을 반환)

값이 존재하지 않아야만 뒤의 값을 넘기기 때문에

0이나 빈 문자열도 정상 데이터라고 보고 싶을 때 사용한다.

 

 

특징

• 연산자 우선순위가 꽤 낮으므로, 복잡한 표현식에서 사용할 때는 괄호를 추가하는 게 좋다.
  대다수의 연산자보다 낮고, ?와 =보다는 높다.
• 안정성 이슈로 &&, ||와 chaning하여  사용할 수 없다.
  let x = (1 && 2) ?? 3; 과 같이 쓸거면 괄호를 사용해야한다.

 

 

 

참고

https://ko.javascript.info/logical-operators

논리 연산자

 

https://ko.javascript.info/nullish-coalescing-operator

nullish 병합 연산자 '??'

기초부터 완성까지, 프런트엔드 - 예스24