9. 연산

자바스크립트 연산자와 활용법

---

1. 기본 연산자와 수학 연산자

연산자란?

• *피연산자(Operand)**는 연산자가 연산을 수행하는 대상이다. 예를 들어, 5 * 2에서 5와 2는 피연산자다.
• *연산자(Operator)**는 피연산자에 대해 특정 작업을 수행한다.
• 예를들어 * 는 곱셈 연산자다

단항 연산자와 이항 연산자

1. 단항(Unary) 연산자는 피연산자가 하나인 경우다.

let x = 5;
x = -x; // 단항 마이너스 연산자는 부호를 반대로 바꾼다.
console.log(x); // -5

1. 이항(Binary) 연산자는 피연산자가 두 개인 경우다.

let x = 10, y = 3;
console.log(x - y); // 7 (뺄셈 연산)

---

2. 수학 연산자

자바스크립트에서 제공하는 주요 수학 연산자

1. 덧셈(+)
2. 뺄셈(-)
3. 곱셈(*)
4. 나눗셈(/)
5. 나머지(%)
6. 거듭제곱(**)

이 연산자들은 숫자를 다룰 때 필수적으로 사용된다.

---

나머지 연산자 %

• 나머지 연산자는 두 숫자를 나누고 그 나머지를 반환한다.
• 예를 들어, a % b는 a를 b로 나눈 나머지를 반환한다.

console.log(5 % 2); // 1 (5를 2로 나눈 나머지)
console.log(8 % 3); // 2 (8을 3으로 나눈 나머지)

• 사용 예시: 홀수와 짝수 판별

let number = 5;
if (number % 2 === 0) {
  console.log("짝수");
} else {
  console.log("홀수");
}

---

거듭제곱 연산자 *

• 거듭제곱 연산자는 어떤 숫자를 특정 횟수만큼 곱한다. 예: a ** b는 a를 b번 곱한 결과를 반환한다.

console.log(2 ** 3); // 8 (2 * 2 * 2)
console.log(4 ** (1 / 2)); // 2 (4의 제곱근)

• 사용 예시: 제곱근이나 세제곱근 계산

let squareRoot = 16 ** (1 / 2); // 제곱근
let cubeRoot = 27 ** (1 / 3); // 세제곱근
console.log(squareRoot); // 4
console.log(cubeRoot); // 3

---

3. 이항 연산자 +와 문자열 연결

숫자와 문자열 연결

• 자바스크립트에서는 이항 덧셈 연산자 +를 사용해 문자열을 연결할 수 있다.

let greeting = "Hello, " + "world!";
console.log(greeting); // "Hello, world!"

숫자와 문자열이 섞여 있을 경우

• 피연산자 중 하나가 문자열이면 다른 피연산자도 문자열로 변환된다.

console.log("The result is: " + 42); // "The result is: 42"

연산 순서와 문자열

• 왼쪽에서 오른쪽 순서로 진행된다.

console.log(1 + 2 + "3"); // "33"

---

4. 단항 연산자 +

숫자형으로 변환

• + 연산자를 사용해 문자열을 숫자로 변환할 수 있다.

console.log(+"42"); // 42 (문자열을 숫자로 변환)
console.log(+true); // 1
console.log(+""); // 0

• 실무 예시: 폼 데이터를 숫자로 변환

let apples = "5";
let oranges = "3";
console.log(+apples + +oranges); // 8

---

5. 할당 연산자

기본 할당 연산자 =

• 값을 변수에 대입한다.

let x = 10; // x에 10을 대입

복합 할당 연산자

• 연산과 할당을 동시에 수행한다.

let n = 5;
n += 2; // n = n + 2
console.log(n); // 7

체이닝

• 여러 값을 한 번에 할당할 수 있다.

let a, b, c;
a = b = c = 10;
console.log(a, b, c); // 10, 10, 10

---

6. 증가·감소 연산자

전위형과 후위형

• 전위형(++x): 증가 후 반환한다.
• 후위형(x++): 반환 후 증가한다.

let counter = 0;
console.log(++counter); // 1 (증가 후 반환)


let counter = 0;
console.log(counter++); // 0 (반환 후 증가)

---

7. 쉼표 연산자

여러 표현식을 한 줄에서 평가

• 쉼표로 나열된 표현식을 순서대로 실행하고, 마지막 표현식의 결과를 반환한다.

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

실무 예시

• for 문 초기화

for (let i = 0, j = 10; i < j; i++, j--) {
  console.log(i, j); // i와 j가 각각 증가, 감소
}

---

8. 비트 연산자

비트 연산자의 개요

• 비트 연산자는 숫자를 32비트 정수로 변환하여 개별 비트 단위로 연산을 수행한다.
• 웹 개발에서 잘 사용되진 않지만, 암호화, 이미지 처리, 저수준 데이터 조작 등에서 유용하게 쓰인다.

주요 비트 연산자

연산자 설명 예시

&	비트 AND (둘 다 1일 때만 1)	5 & 3 → 1
|	비트 OR (둘 중 하나가 1이면 1)	1 | 0 → 1
^	비트 XOR (둘이 다르면 1, 같으면 0)	5 ^ 3 → 6
~	비트 NOT (비트를 반전)	~5 → -6
<<	왼쪽 시프트 (왼쪽으로 비트를 이동, 오른쪽은 0으로 채움)	5 << 1 → 10
>>	오른쪽 시프트 (부호를 유지하며 오른쪽 비트를 이동)	5 >> 1 → 2
>>>	부호 없는 오른쪽 시프트 (왼쪽은 0으로 채움)	-5 >>> 1 → 2147483645

예시 코드

// 비트 AND
console.log(5 & 3); // 1 (5: 101, 3: 011, AND 결과: 001)

// 비트 OR
console.log(5 | 3); // 7 (5: 101, 3: 011, OR 결과: 111)

// 비트 XOR
console.log(5 ^ 3); // 6 (5: 101, 3: 011, XOR 결과: 110)

// 왼쪽 시프트
console.log(5 << 1); // 10 (5: 101, 왼쪽으로 한 칸 이동 → 1010)

// 오른쪽 시프트
console.log(5 >> 1); // 2 (5: 101, 오른쪽으로 한 칸 이동 → 10)

// NOT 연산자
console.log(~5); // -6 (NOT 결과: 모든 비트를 반전)

비트 연산자의 실무 활용

• 권한 비트 플래그: 여러 상태를 한 번에 저장하고 처리할 때 사용.
• 성능 최적화: 특정 조건에서 빠른 계산이 필요할 때 활용.

let x = 5;
console.log(x << 1); // 10 (x에 2를 곱함)
console.log(x >> 1); // 2 (x를 2로 나눔)

---

9. 연산자 우선순위

연산자의 우선순위

• 우선순위는 여러 연산자가 함께 사용될 때 어떤 순서로 계산할지를 결정한다. 예: 1 + 2 * 3에서 곱셈이 먼저 계산된다.

연산자 우선순위 표

• 위에 있을 수록 먼저 실행우선순위 연산자 설명

  20	()	괄호
  19	. [] ()	객체 접근, 배열 접근, 함수 호출
  18	new (매개변수 없는 경우)	객체 생성
  17	++ -- (전위형)	전위 증가/감소
  16	! ~ + - typeof void delete	단항 연산자
  15	**	거듭제곱
  14	* / %	곱셈, 나눗셈, 나머지
  13	+ -	덧셈, 뺄셈
  12	<< >> >>>	시프트 연산자
  11	< <= > >= in instanceof	비교 연산자
  10	== != === !==	동등/일치 비교 연산자
  9	&	비트 AND
  8	^	비트 XOR
  7	|	비트 OR
  6	&&	논리 AND
  5	||	논리 OR
  4	??	null 병합 연산자
  3	? :	조건부 (삼항) 연산자
  2	= += -= *= /= ...	할당 연산자
  1	,	쉼표 연산자

예시

let result = 5 + 10 * 2; // 곱셈이 먼저 실행되어 5 + 20 = 25
console.log(result);

let complex = (5 + 10) * 2; // 괄호 안의 연산이 먼저 실행되어 (15) * 2 = 30
console.log(complex);