13. JavaScript 표현식과 연산자 | 웹 개발 기초

오리가미 스타일, dall-e

 

JavaScript 표현식과 연산자: 완벽 가이드

 

01. JavaScript 표현식이란?

1) 표현식의 정의와 종류

JavaScript에서 표현식(expression)은 값을 생성하거나 값을 반환하는 코드의 조각을 의미합니다. 표현식은 코드 내 어디서든 사용할 수 있으며, 값으로 평가될 수 있습니다. 표현식은 여러 종류가 있으며, 다음과 같은 예시가 있습니다.

• 리터럴(Literal) 표현식: 숫자, 문자열, 불리언 값 등

42;        // 숫자 리터럴
'hello';   // 문자열 리터럴
true;      // 불리언 리터럴

• 식별자(Identifier) 표현식: 변수명, 객체의 속성명 등

let x = 5;
x;         // 식별자 표현식

• 연산자(Operator) 표현식: 산술 연산자, 논리 연산자 등을 사용한 표현식

5 + 3;     // 산술 연산자 표현식
x && y;    // 논리 연산자 표현식

• 함수 호출 표현식: 함수의 호출을 나타내는 표현식

myFunction(); // 함수 호출 표현식

2) 표현식의 평가와 결과

표현식은 평가(evaluation)되어 하나의 값으로 결과를 반환합니다. 이 값은 숫자, 문자열, 불리언, 객체 등 다양한 유형이 될 수 있습니다. 표현식의 결과는 코드 실행 중 계산되며, 이는 프로그램의 흐름을 결정합니다.

• 숫자 리터럴의 평가:

10;   // 평가 결과: 10

• 산술 연산자의 평가:

5 + 7; // 평가 결과: 12

• 변수의 평가:

let a = 3;
a;     // 평가 결과: 3

• 함수 호출의 평가:

function greet() {
    return 'Hello, World!';
}
greet(); // 평가 결과: 'Hello, World!'

• 논리 연산자의 평가:

true && false;  // 평가 결과: false

• 객체 속성 접근의 평가:

let person = { name: 'Alice', age: 25 };
person.name;    // 평가 결과: 'Alice'

 

02. JavaScript 연산자

1) 할당 연산자

할당 연산자는 변수에 값을 할당하는 데 사용됩니다. 가장 기본적인 할당 연산자는 =이며, 이는 변수에 값을 할당합니다.

let x = 10;   // x에 10을 할당

복합 할당 연산자:

x += 5;   // x = x + 5; 결과: 15
x -= 3;   // x = x - 3; 결과: 12
x *= 2;   // x = x * 2; 결과: 24
x /= 4;   // x = x / 4; 결과: 6
x %= 2;   // x = x % 2; 결과: 0
x **= 3;  // x = x ** 3; 결과: 0

2) 비교 연산자

비교 연산자는 두 값을 비교하여 불리언 값을 반환합니다.

5 == '5';    // true, 동등 연산자
5 === '5';   // false, 일치 연산자
5 != '5';    // false, 부등 연산자
5 !== '5';   // true, 불일치 연산자
10 > 5;      // true
10 < 5;      // false
10 >= 10;    // true
10 <= 5;     // false

3) 산술 연산자

산술 연산자는 수학적 계산을 수행합니다.

5 + 3;    // 8
5 - 3;    // 2
5 * 3;    // 15
10 / 2;   // 5
10 % 3;   // 1
2 ** 3;   // 8, 지수 연산자

4) 비트 연산자

비트 연산자는 숫자의 비트 단위로 연산을 수행합니다.

5 & 1;    // 1 (0101 & 0001)
5 | 1;    // 5 (0101 | 0001)
5 ^ 1;    // 4 (0101 ^ 0001)
~5;       // -6 (~0101)
5 << 1;   // 10 (0101 << 1)
5 >> 1;   // 2 (0101 >> 1)
5 >>> 1;  // 2 (0101 >>> 1)

5) 논리 연산자

논리 연산자는 불리언 값의 논리 연산을 수행합니다.

true && false;   // false
true || false;   // true
!true;           // false

6) 문자열 연산자

문자열 연산자는 주로 문자열을 연결하는 데 사용됩니다.

'Hello' + ' ' + 'World';  // 'Hello World'

7) 삼항 연산자

삼항 연산자는 조건에 따라 다른 값을 반환하는 단축 조건문입니다.

let age = 18;
let canVote = (age >= 18) ? 'Yes' : 'No';  // 'Yes'

8) 쉼표 연산자

쉼표 연산자는 여러 표현식을 평가하고 마지막 표현식의 값을 반환합니다.

let x = (1, 2, 3);  // x의 값은 3

9) 단항 연산자

단항 연산자는 하나의 피연산자에 대해 연산을 수행합니다.

let y = 5;
y++;   // 6, 후위 증가 연산자
++y;   // 7, 전위 증가 연산자
y--;   // 6, 후위 감소 연산자
--y;   // 5, 전위 감소 연산자

10) 관계 연산자

관계 연산자는 객체의 속성을 비교하거나, 인스턴스 여부를 확인합니다.

let person = { name: 'Alice', age: 25 };
'name' in person;  // true
'height' in person;  // false

let date = new Date();
date instanceof Date;  // true
date instanceof Object;  // true

 

03. 연산자 우선순위와 결합법

1) 연산자 우선순위

JavaScript에서는 연산자마다 우선순위가 존재합니다. 우선순위가 높은 연산자가 먼저 평가됩니다. 아래는 주요 연산자들의 우선순위입니다(우선순위가 높은 순서대로 나열).

• 괄호 연산자 (`()`): 가장 높은 우선순위를 가지며, 먼저 계산됩니다.

(3 + 2) * 2;  // 결과: 10

• 단항 연산자 (`++`, `--`, `+`, `-`, `~`, `!`): 피연산자 하나를 가지는 연산자.

let x = 5;
++x;  // 결과: 6

• 산술 연산자 (`*`, `/`, `%`): 곱셈, 나눗셈, 나머지.

3 * 2 + 1;  // 결과: 7 (3 * 2 먼저 계산)

• 산술 연산자 (`+`, `-`): 덧셈, 뺄셈.

3 + 2 * 2;  // 결과: 7 (2 * 2 먼저 계산)

• 비트 연산자 (`<<`, `>>`, `>>>`): 비트 이동.

5 << 1;   // 결과: 10

• 비교 연산자 (`<`, `<=`, `>`, `>=`): 크기 비교.

3 > 2;  // 결과: true

• 동등 연산자 (`==`, `!=`, `===`, `!==`): 동등성 비교.

5 == '5';  // 결과: true
5 === '5';  // 결과: false

• 비트 연산자 (`&`, `^`, `|`): 비트 AND, XOR, OR.

5 & 1;  // 결과: 1

• 논리 연산자 (`&&`, `||`): 논리 AND, OR.

true && false;  // 결과: false

• 삼항 연산자 (`? :`): 조건부 연산자.

let age = 18;
let canVote = (age >= 18) ? 'Yes' : 'No';  // 결과: 'Yes'

• 할당 연산자 (`=`, `+=`, `-=`, `*=`, `/=`, `%=`, `**=`): 변수에 값 할당.

let x = 10;
x += 5;  // 결과: 15

2) 결합법과 평가 순서

결합법(associativity)은 같은 우선순위의 연산자가 평가되는 방향을 결정합니다. 대부분의 연산자는 왼쪽에서 오른쪽으로 평가되지만, 할당 연산자와 몇몇 연산자는 오른쪽에서 왼쪽으로 평가됩니다.

• 왼쪽에서 오른쪽으로 평가되는 연산자:

3 + 4 - 2;  // 결과: 5 (3 + 4 먼저 계산)

• 오른쪽에서 왼쪽으로 평가되는 연산자:

let a, b, c;
a = b = c = 5;  // c = 5, b = 5, a = 5

 

04. 표현식과 연산자의 활용 예제

1) 실용적인 코드 예제

여러 가지 표현식과 연산자를 활용하여 실용적인 예제를 작성할 수 있습니다. 아래는 다양한 연산자를 사용하는 예제입니다.

• 숫자 배열의 합계 구하기:

let numbers = [1, 2, 3, 4, 5];
let sum = 0;

for (let i = 0; i < numbers.length; i++) {
  sum += numbers[i];
}

console.log(sum);  // 결과: 15

• 최대값 찾기:

let max = numbers[0];

for (let i = 1; i < numbers.length; i++) {
  if (numbers[i] > max) {
    max = numbers[i];
  }
}

console.log(max);  // 결과: 5

2) 복잡한 연산의 간소화

복잡한 연산을 간소화하여 코드를 더 이해하기 쉽게 만들 수 있습니다.

• 조건부 연산자 사용:

let age = 20;
let isAdult = (age >= 18) ? '성인' : '미성년자';
console.log(isAdult);  // 결과: 성인

• 논리 연산자 활용:

let isMember = true;
let hasPaid = false;
let canEnter = isMember && hasPaid;
console.log(canEnter);  // 결과: false

• 함수와 표현식 활용:

function calculateArea(radius) {
  return Math.PI * radius ** 2;
}

let area = calculateArea(5);
console.log(area);  // 결과: 78.53981633974483

 

---

관련된 다른 글도 읽어보시길 추천합니다

 

2024.07.04 - [Study] - 08. CSS Layout 종합 학습 | 웹 개발 기초

08. CSS Layout 종합 학습 | 웹 개발 기초

2024.07.04 - [Study] - 07. CSS Grid Layout 가이드 | 웹 개발 기초

07. CSS Grid Layout 가이드 | 웹 개발 기초

2024.07.03 - [Study] - 06. CSS Flexbox 기초 학습: 유연한 웹 레이아웃 만들기 | 웹 개발 기초

06. CSS Flexbox 기초 학습: 유연한 웹 레이아웃 만들기 | 웹 개발 기초

---

읽어주셔서 감사합니다

공감은 힘이 됩니다

 

:)