표현식과 연산자 (Expressions and Operators)

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Expressions_and_operators

표현식과 연산자 - JavaScript | MDN

 

일반적으로 웹사이트는 여러개의 자바스크립트로 이루어져 있다.

대부분 스크립트 언어의 특징이지만 자바스크립트는 파일들을 각각 별개의 프로그램으로 취급하고 있다.

 

자바스크립트 프로그램은 무엇으로 이루어져있을까?

그것은 앞으로 알아볼 표현식(Expressions)과 문장(Statements) 두 가지 카테고리로 이루어져 있다.

 

 

---

✨ 표현식 (Expressions)

표현식이란 어떠한 결과 값으로 평가되는 식이다. (즉, 결과가 계산되는 식)

숫자, 문자열, 논리값 같은 원시 값을 포함하여 변수, 상수, 함수 호출 등으로 조합할 수 있다.

const a = 10 + 32; // 42
const b = a - 20; // 22
const c = "String" + 3; // "String3"
const d = true + false + true; // 2

이러한 표현식은 연산자를 통해 조합되어 새로운 표현식으로 나타낼 수 있다.

 

✨ 할당 연산자

할당 연산자는 오른쪽 표현식을 왼쪽 피연산자 값에 할당하는 연산자이다.

등호 (=) 를 사용하며 다른 연산자와 같이 사용하여 복합 할당 연산자로 이용할 수 있다.

let x;
// 할당 연산자
x = 10;

// 복합 할당 연산자
x += 5; // 덧셈 할당 - 15
x -= 5; // 뺄셈 할당 - 10
x *= 10; // 곱셉 할당 - 100
x /= 10; // 나눗셈 할당 - 10
x %= 3; // 나머지 연산 할당 - 1
x <<= 4; // 비트 왼쪽 이동 할당 - 16
x >>= 2; // 비트 오른쪽 이동 할당 - 4

 

✨ 비교 연산자

좌측 피연산자와 우측 피연산자를 비교하는 연산자이다.

true 혹은 false를 반환한다.

// 비교 연산자
const x = 10;
const y = 12;

x == y; // 동등 - false
x != y; // 부등 - true
x === y; // 일치 - false
x !== y; // 불일치 - true
x > y; // ~보다 큰 - false
x >= y; // ~보다 크거나 같은 - false
x < y; // ~보다 작은 - true
x <= y; // ~보다 작거나 같은 - true

"10" == 10; // true
"10 === 10; // false

 

✨ 산술 연산자

덧셈, 뺄셈, 곱셈, 나눗셈을 하는 연산자이다.

Number를 반환한다.

// 산술 연산자
const a = 10;
const y = 12;

x + y; 
x - y;
x * y;
x / y;

console.log(x / y);

 

✨ 비트 연산자

이진법으로 나타낼 수 있게 각 비트를 직접 조작하는 연산자이다.

// 비트 연산자
const x = 10; // 1010
const y = 12; // 1100

x & y; // AND - 8
x | y; // OR - 14
x ^ y; // XOR - 6
// 0000000000000000000000000001010
// 1111111111111111111111111110101
// 2의 보수
~x; // NOT - -11
x << 1; // Left Shift - 10100 - 20
x >> 1; // Right Shift - 101 - 5

 

✨ 논리 연산자

Boolean을 통해 참과 거짓을 검증하는 연산자이다.

// 논리 연산자
const x = true;
const y = false;

 x && y; // AND - false
 x || y; // OR - true
 !x // NOT - false

 

✨ 삼항 연산자

조건에 따라 값을 선택하는 연산자이다.

'조건 ? 참 : 거짓' 형태를 가진다.

// 삼항 연산자
const x = 10;
const y = 12;

// x가 y보다 작아 거짓이기 때문에 뒤에 값을 선택
x > y ? 100 : 200; // 200

 

✨ 관계 연산자

객체에 속성이 있는지 확인하기 위한 연산자이다.

// 관계 연산자
const x = {
  name: "Song Hwa-Yeon",
  email: "lazyhysong@naver.com",
};

"name" in x; // true
"gender" in x; // false

 

✨ typeof

피연산자의 타입을 반환하는 연산자이다.

문자열로 반환된다.

// typeof
const x = 10;
const y - "String";
const z = false;

typeof x; // number
typeof y; // string
typeof z; // boolean