lessons 7. 연산자

2023.02.01

자바스크립트 스터디 2회차

공부 사이트: https://poiemaweb.com/

 

7. 연산자

1) 표현식

표현식(expression): 리터럴, 식별자, 연산자, 함수 호출 등의 조합. 평가되어 하나의 값을 만든다.

• 10     //리터럴 표현식
• num     //식별자 표현식
• 100 + 2     //연산자 표현식
• square()     //함수/메소드 호출 표현식

 

2) 문

문(statement): 자바스크립트 엔진에게 내리는 명령. 세미콜론으로 끝난다. (세미콜론 필수 아님)

• var x;     //변수 선언문
• x = 5;     //할당문
• function f1() {}     //함수 선언문
• if(x > 5) { ... }      //조건문
• for(var i=0;i<10;i++) {..}     //반복문

---

[TIP] 자바스크립트의 ASI

ASI(Automatic Semicolon Insertion): 세미콜론 자동 삽입 기능. 자바스크립트 엔진이 스크립트 해석 시 문의 끝이라고 예측되는 지점에 세미콜론을 자동으로 붙임.

---

표현식과 문은 유사하여 구별이 힘들다. 그 차이점은 이전 포스팅에서 설명했다. (링크)

※ 문과 표현식 차이: 문은 변수를 선언, 초기화, 함수를 생성. 표현식은 평가되어 값을 만드는 것으로 끝남. 표현식이 평가된 값을 통해 컴퓨터에 명령을 하는 것은 문이다.

 

또한 문에는 '표현식인 문'과 '표현식이 아닌 문'이 존재한다.

EX) 선언문과 할당문

//선언문. 표현식 x = 12 + 3을 포함하는 문
var x = 12 + 3;

//할당문. 자체가 표현식이면서 문
x = 100;

그렇기 때문에 선언문은 값으로 평가될 수 없다. → 선언문은 값처럼 사용할 수 없다.

// 불가능.
var result = var x = 12 + 3;

그러나 할당문은 표현식인 문이기 떄문에 값처럼 사용할 수 있다.

var result = x = 100;

 

 

3) 연산자

① 산술 연산자

- 산술 연산이 불가능한 경우 NaN 반환

산술 연산자	설명	예시
이항 산술 연산자	2개의 피연산자 대상	+, -, *, /, %
단항 산술 연산자	1개의 피연산자 대상	++, --, +, -
문자열 연결 연산자	피연산자 중 하나 이상이 문자열인 경우 동작	'1' + 2

- 단항 산술 연산자 중 ++과 --는 위치에 따라 동작이 다르다.

- 피연산자 앞에 존재: 선증가/감소 후대입

- 피연산자 뒤에 존재: 선대입 후증가/감소

 

② 할당 연산자

- 우항에 있는 피연산자 평가 결과를 좌항에 있는 변수에 할당

=	+=	-=
*=	/=	%=

 

 

③ 비교 연산자

- 좌항과 우항의 피연산자를 비교하여 boolean 값 반환

동등/일치 비교 연산자	의미
==	동등 비교 (값)
===	일치 비교 (값과 타입)
!=	부등 비교 (값)
!==	불일치 비교 (값과 타입)

	대소 관계 비교 연산자
	<	>	<=	>=

- 동등 비교 연산자는 많은 부작용을 일으키므로, 사용하지 말자.

헷갈리니까 쓰지말자

- 또한 일치 비교 연산자(===) 사용 시 NaN을 주의할 것 ✔

// NaN은 자신과 일치하지 않는 유일한 값이다.
NaN === NaN  //false

//슛자가 NaN인지 조사하려면 빌트인 함수 사용하자.
isNaN(NaN)

- 숫자 0도 주의 ✔

0 === -0   //true

 

 

 

③ 논리 연산자

- || (논리합 OR), && (논리곱 AND), ! (부정 NOT)

- 논리 부정 연산자는 언제나 boolean 값을 반환한다. 피연산자가 boolean 값이 아닐 시 암시적 형 변환을 한다.

- 그러나 논리합, 논리곱 연산자의 연산 결과는 boolean 값이 아닐 수 있음. 피연산자 중 하나 반환 (단축평가)

// 암시적 형 변환
!0   //true

// 단축 평가
'ABC' && 'XYZ'
'ABC' || 'XYZ'

단축 평가

---

[TIP] 단축 평가

- 평가는 왼쪽에서 오른쪽으로 이루어짐.

- 논리곱 연산자인 &&는 피연산자가 모두 True이어야 True를 반환한다. 그렇기 때문에 피연산자를 모두 평가해야 함.

- 논리곱 연산의 결과를 결정한 것은 마지막으로 검사한 'XYZ'

- 논리합 연산자인 ||는 피연산자 중 하나라도 True면 True 반환. 논리합 연산의 결과를 결정한 것은 제일 먼저 Ture로 확인된 'ABC'

---

 

 ④ 쉼표 연산자

- 왼쪽 피연산자부터 차례대로 피연산자 평가.

- 마지막 피연산자의 평가가 끝나면 마지막 피연산자 평가를 반환함.

var x, y, z;
x = 1, y = 2, z = 3;

마지막 피연산자 z의 결과 반환

 

⑤ 그룹 연산자

- 그룹 연산자는 그룹 내 표현식을 취우선으로 평가한다. (2+3) / 2

 

 

⑥ typeof 연산자

- 자신의 뒤에 위치한 피연산자의 데이터 타입을 문자열로 반환

- null을 반환하는 경우는 없음.

- ✔ null 타입을 파악하고 싶으면 typeof 연산자 말고 일치연산자(===) 사용할 것.