JS스터디 3주차-표현식과 연산자

Wonju·2021년 11월 8일

JavaScript 스터디 연산자 자바스크립트 표현식 프론트엔드

JS스터디

목록 보기

3/9

표현식과 연산자

표현식이란 ?

어떤 값으로 평가되는 것. 표현식의 값, 변수, 함수 등의 값을 바탕으로 계산하는 행위.

숫자, 문자열, 논리값, 변수, 프로퍼티, 함수 호출 등등 모두 표현식

연산자(오퍼레이터, operator)를 사용해 더욱 복잡한 표현식을 만들 수 있습니다.

  연산자 기본 용어 정리

- 피연산자: 연산자가 연산을 수행하는 대상입니다.

a + b 는 왼쪽과 오른쪽에 피연산자 총 두개입니다.

- 단항(unary) 연산자: 피연산자를 하나만 받는 경우입니다.

마이너스(-)연산자가 대표적입니다.

- 이항(binary) 연산자: 두 개의 피연산자를 받는 경우입니다.

자바스크립트의 수학 연산자

덧셈 연산자 +
뺄셈 연산자 -
곱셈 연산자 *
나눗셈 연산자 /
나머지 연산자 %
거듭제곱 연산자 **

연산자의 우선순위와 결합 법칙

연산자가 여러 개 일때는 계산 순서에 따라 결과가 달라집니다.

2 + 3 * 4

그룹 연산자()를 사용하면 ()안에 들어 있는 표현식이 가장 먼저 평가됩니다.

2 +
  (3 * 4)(
    // 14

    2 + 3
  ) *
    4; // 20

연산자에는 📜우선순위 가 정해져 있고 그에 따라 연산 순서가 정해집니다.

연산자에는 왼쪽 혹은 오른쪽과 결합해서 연산할지를 정하는 결합 법칙이 정해져있고, 우선순위가 같을 경우 왼쪽에서 오른쪽 방향으로 결합합니다.

산술 연산

산술 연산자는 피연산자가 숫자인 연산자로, 피연산자가 숫자가 아닐 땐 피연산자를 숫자 타입으로 바꾸어 연산합니다.

연산 결과가 숫자 값이지만 피연산자가 숫자로 바꿀 수 없는 값이거나 계산할 수 없을 때는 NaN이 나옵니다.

산술 이항 연산자(+, -, *, /, %)
산술 단항 연산자

연산자	뜻	예제	의미
++	증가 연산자	++a	a에 1을 더한 다음 a 값을 평가한다
		a++	a를 평가한 다음에 a에 1을 더한다
--	감소 연산자	--a	a에서 1을 뺀 다음에 a 값을 평가한다
		a--	a를 평가한 다음에 a에서 1을 뺀다
+	아무것도 처리하지 않음	+a	a와 같은 값으로 평가한다
-	부호 반전	-a	a의 부호를 반전한 값으로 평가한다

논리 연산자와 관계 연산자

관계 연산자는 두개의 피연산자를 비교한 결과를 논리값(true/false)로 반환합니다. 관계 연산자는 주로 제어 구조(if/else문, while문, do/while문, for 문)에서 조건식을 만들 때 사용합니다.

연산자	뜻	예제	의미
==	값이 같음	a == b	a와 b 같으면 true, 외에는 false
!=	값이 다름	a != b	a와 b 다르면 true, 외에는 false
===	값과 타입이 같음	a === b	a와 b 값과 타입이 같으면 true, 외에는 false
!==	값과 타입이 다름	a !== b	a와 b 값과 타입이 다르면 true, 외에는 false
<	작음	a < b	a가 b보다 작으면 true, 외에는 false
>	큼	a > b	a가 b보다 크면 true, 외에는 false
<=	작거나 같음	a <= b	a가 b보다 작거나 같으면 true, 외에는 false
>=	크거나 같음	a >= b	a가 b보다 크거나 같으면 true, 외에는 false

논리 연산자는 관계연산자를 사용해 만든 논리식과 결합해 더욱 복잡한 논리를 정의합니다.

자바스크립트엔 세 종류의 논리 연산자 ||(OR), &&(AND), !(NOT)이 있습니다.

연산자	뜻	예제	의미
&&	논리곱	a && b	a와 b 모두 true면 true, 그 외에는 false
\|\|	논리합	a \|\| b	a와 b 중 하나라도 true면 true, 그 외에는 false
!	부정	!a	a가 true면 false, false면 true

예시

x > 0 && y > 0; // x와 y가 모두 참일 때만 true

x > 0 || y > 0; // x와 y 중 하나라도 참이면 true, 모두가 0 이하면 false

!(a && b); // a 또는  b가 거짓

비트 연산자

비트 연산자는 데이터 통신이나 이진 파일을 처리할 때 사용되며, 자바스크립트뿐만 아니라 대부분의 프로그래밍 언어에서 지원합니다.

아래는 비트 연산 시 쓰이는 연산자 목록입니다.

비트 AND ( & )
비트 OR ( | )
비트 XOR ( ^ )
비트 NOT ( ~ )
왼쪽 시프트(LEFT SHIFT) ( << )
오른쪽 시프트(RIGHT SHIFT) ( >> )
부호 없는 오른쪽 시프트(ZERO-FILL RIGHT SHIFT) ( >>> )

기타 연산

1. typeof 연산자

단항 연산자이며 피연산자의 데이터타입을 알려주는 문자열을 반환합니다.

var a = "원주";
console.log(typeof a); // string

2. 조건 연산자

조건(?:) 연산자는 삼항 연산자이며, 주어진 조건의 참과 거짓에 따라 값을 선택합니다.

첫번째 피연산자를 조건식으로 평가한 후 결과가 true면 두번째 피연산자를 값으로 삼고, false면 세번째 피연산자를 값으로 삼습니다.

var parity = (a % 2 == 0)? "짝수" : "홀수";

a % 2 가 0일 때(즉 a가 짝수일 때)는 "짝수"가 되고 그렇지 않을 때는 "홀수" 가 된다는 것.

3. 쉼표 연산자

쉼표 연산자 (,) 는 좀처럼 보기 힘들고, 특이한 연산자 중 하나입니다. 코드를 짧게 쓰려는 의도로 가끔 사용됩니다.

쉼표 연산자 (,) 는 여러 표현식을 코드 한 줄에서 평가할 수 있게 해줍니다. 이때 표현식 각각이 모두 평가되지만, 마지막 표현식의 평가 결과만 반환되는 점에 유의해야 합니다.

let a = (1 + 2, 3 + 4);
console.log(a); // 7

첫 번째 표현식 1 + 2은 평가가 되지만 그 결과는 버려집니다. 3 + 4만 평가되어 a에 할당됩니다.

🟡 쉼표 연산자의 연산자 우선순위는 매우 낮습니다. 따라서 위 예시에선 쉼표연산자가 먼저 수행되도록 하는 괄호가 중요한 역할을 합니다.

명시적 타입 변환

1. 숫자를 문자열로 변환하기

숫자 + 문자열 : + 연산자로 연결하면 숫자타입이 문자열로 바뀝니다
Number객체 메서드를 활용하기 (toString, toLocaleString, toFixed, toExponential, toPrecision)
String 함수를 활용하기 : String생성자 앞에 new를 붙이지 않으면 일반적 함수로 활용할 수 있고, 이 때의 반환값은String 객체가 아닌 문자열입니다.

모든 데이터 타입을 문자열로 바꿀 수 있습니다.

String(true) // "true"