[J.S] 5. 연산자

5.0 연산자(Operator)란?

변수나 상수에 데이터를 할당 시 '='를 사용하듯, 연산을 처리하는 데 사용하도록 미리 정의된 기호

let num = 10;

5.1 산술연산자

수학 연산을 수행하는 연산자를 뜻함

자바 스크립트에서 사용 가능한 산술 연산자 종류:

• 이항 산술 연산자
• 단항 산술 연산자
• 단항 부정 연산자

5.1.1 이항 산술 연산자

두 개의 피연산자(값)에 대해 연산을 수행

연산자	설명	예시	결과
+	더하기	5 + 3	8
-	빼기	5 - 3	2
*	곱하기	5 * 3	15
/	나누기	5 / 2	2.5
%	나머지	5 % 2	1
**	거듭제곱(ES6)	2 ** 3	8

let a = 5;

let b = 2;

// 이항 산술 연산자

console.log(a + b);  // 7

console.log(a - b);  // 3

console.log(a * b);  // 10

console.log(a / b);  // 2.5

console.log(a % b);  // 1

console.log(a ** b); // 25

5.1.2 단항 산술 연산자

하나의 피연산자에 대해 연산을 수행

5.1.2.1 부호 연산자

 

• + (부호 유지) → 숫자의 부호를 그대로 유지하거나, 숫자가 아닌 값을 숫자로 변환할 때 사용
• - (부호 반전) → 숫자의 부호를 반대로 바꿈 (양수 → 음수, 음수 → 양수)

 

연산자	이름	설명	예시	결과
+	부호 유지 연산자	값을 숫자로 변환하거나 부호를 그대로 유지	+3	3
-	부호 반전 연산자	값의 부호를 반대로 변경	-3	-3

let x = 5;

let y = -5;

console.log(+x); // 5  (그대로 유지)

console.log(-x); // -5 (부호 반전)

console.log(+y); // -5 (그대로 유지)

console.log(-y); // 5  (부호 반전)

5.1.2.2 증감 연산자

• 전위형
  • 변수의 값을 먼저 증가/감소시킨 후에 그 값을 사용
  • 결과적으로 출력 시 이미 값이 변경된 상태

연산자	이름	설명	예시	출력값	실행값
++변수	전위 증가 연산자	먼저 1 증가시키고 결과 반환	++a (a=3)	4	4
--변수	전위 감소 연산자	먼저 1 감소시키고 결과 반환	--a (a=3)	2	2

• 후위형
  • 변수의 값을 먼저 사용(출력) 한 뒤에 증가/감소 시킴
  • 결과적으로 출력 시 값이 아직 변하지 않은 상태

연산자	이름	설명	예시	출력값	실행값
변수++	후위 증가 연산자	현재 값을 먼저 반환, 그 후 1 증가	a++ (a=3)	3	4
변수--	후위 감소 연산자	현재 값을 먼저 반환, 그 후 1 감소	a-- (a=3)	3	2

 

l

let a = 3;

console.log(++a); // 4 (먼저 증가 → 출력)

console.log(--a); // 3 (먼저 감소 → 출력)

console.log(b++); // 3 (출력 후 증가 → b는 이제 4)

console.log(b--); // 4 (출력 후 감소 → b는 이제 3)

5.1.3 단항 부정 연산자

항상 피연산자 앞에 위치

피연산자의 부호를 부정하는 연산을 수행

양수는 음수로 음수는 양수로 변환 연산

연산자	설명	예시	결과
-	부호 반전	-5	-5
-	부호 반전	-(10)	-10

let positive = 10;

let negative = -20;

console.log(-positive);  // -10 (양수를 음수로)

console.log(-negative);  // 20  (음수를 양수로)

console.log(-0);         // -0  (부호가 있는 0, 자바스크립트에서는 특수하게 처리됨)

console.log(-"15");      // -15 (문자열을 숫자로 변환 후 부호 반전)

console.log(-true);      // -1  (true → 1 → 부호 반전)

console.log(-null);      // -0  (null → 0 → 부호 반전)

5.2 대입연산자와 복합 대입연산자

5.2.1 대입 연산자(Assignment Operator)란?

변수에 값을 할당하는 데 사용되는 연산자

5.2.2 복합 대입 연산자(Compound Assign란?

대입과 산술 연산을 한 번에 처리하는 축약형 연산자

구분	연산자	의미	예시	설명 및 결과
대입 연산자	=	기본 대입 연산자	a = 5	오른쪽 값을 왼쪽 변수에 할당함
복합 대입 연산자	+=	더한 후 대입	a += 3	a = a + 3 와 같음
	-=	뺀 후 대입	a -= 2	a = a - 2 와 같음
	*=	곱한 후 대입	a *= 4	a = a * 4 와 같음
	/=	나눈 후 대입	a /= 2	a = a / 2 와 같음
	%=	나머지 구한 후 대입	a %= 3	a = a % 3 와 같음
	**=	거듭제곱 후 대입	a **= 2	a = a ** 2 와 같음

let a = 5;

a += 3;  // a = a + 3 → 8

console.log(a);

a -= 2;  // a = a - 2 → 6

console.log(a);

a *= 4;  // a = a * 4 → 24

console.log(a);

a /= 3;  // a = a / 3 → 8

console.log(a);

a %= 5;  // a = a % 5 → 3

console.log(a);

a **= 3; // a = a ** 3 → 27

console.log(a);

5.3 비교 연산자

두 값을 비교하여 참(true) 또는 거짓(false)을 반환하는 연산자

조건문, 반복문 등에서 조건을 판단 시 자주 사용

연산자 설명 예시 결과 (예시 기준)

연산자	설명	예시	결과
==	값이 같은가? (느슨한 비교)	5 == '5'	true
===	값과 타입이 모두 같은가?	5 === '5'	false
!=	값이 다른가? (느슨한 비교)	5 != '7'	true
!==	값이나 타입이 다른가?	5 !== '5'	true
<	왼쪽이 오른쪽보다 작은가?	3 < 5	true
>	왼쪽이 오른쪽보다 큰가?	7 > 2	true
<=	왼쪽이 오른쪽보다 작거나 같은가?	5 <= 5	true
>=	왼쪽이 오른쪽보다 크거나 같은가?	6 >= 7	false

console.log(5 == '5');   // true  (값만 비교)

console.log(5 === '5');  // false (값과 타입 모두 비교)

console.log(3 != 4);    // true

console.log(3 !== '3'); // true

console.log(2 < 5);     // true

console.log(7 > 10);    // false

console.log(5 <= 5);    // true

console.log(6 >= 7);    // false

5=='5'의 결과가 true이나 5==='5'의 결과가 False 인 이유:
5는 숫자형 '5'는 문자열이기에 타입이 다르다. 

5.4 논리 연산자

피연산자를 논리적으로 평가한 후, 조건에 맞는 피연산자를 반환하는 연산 수행

Boolean  값을 다루며 여러 조건을 결합하거나 부정 시 사용

조건문과 반복문에서 조건을 더 복잡하게 만들 때 사용

연산자	이름	설명	예시	결과
&&	AND 연산자	두 조건이 모두 참일 때만 참	true && false	false
||	OR 연산자	두 조건 중 하나라도 참이면 참	false || true	true
!	NOT 연산자	조건을 반대로 바꿈 (참 → 거짓, 거짓 → 참)	!true	false

let age = 20;

let hasID = true;

// 나이가 18세 이상이고 신분증이 있을 때만 입장 가능

if (age >= 18 && hasID) {

  console.log("입장 가능합니다.");

} else {

  console.log("입장 불가합니다.");

}

// OR 예시

let isWeekend = true;

let isHoliday = false;

if (isWeekend || isHoliday) {

  console.log("쉬는 날입니다.");

} else {

  console.log("일하는 날입니다.");

}

 

**논리 연산자의 주요 특징

불리언 값을 다룬다
논리 연산자는 주로 true 또는 false 값을 가지고 연산
하지만 자바스크립트에서는 비불리언 값도 불리언으로 암묵적 변환해서 평가

Falsy 값은 거짓으로 평가된다
"" (빈 문자열), 0, null, undefined, NaN, false 등은 Falsy 값으로 간주되어
조건문이나 논리 연산에서 false로 처리
이러한 특성 때문에 다양한 데이터 타입을 조건식에 바로 사용 가능

단락 평가(short-circuit evaluation)를 한다
&& 와 || 연산자는 결과가 확정되면 나머지 피연산자는 평가하지 안 함.
필요한 연산을 줄이고, 코드 효율성 높임

결과가 항상 불리언이 아니다!
자바스크립트에서 &&, || 연산자는 불리언뿐 아니라 피연산자 자체를 반환 가능
true && "hello"는 "hello"를 반환
이 특성을 이용해 조건문 외에도 다양한 패턴으로 활용 가능

우선순위가 비교적 낮다
논리 연산자의 우선순위는 산술 연산자보다 낮고, 비교 연산자와 비슷
필요하면 괄호로 묶어 우선순위를 명확하게 설정 필요 

부정 연산자 !는 단항 연산자
! 는 단항 연산자로, 피연산자의 불리언 값을 반전
! true는 false,! 0 은 true 가 된다.

5.5 삼항 연산자 (Ternary Operator)

조건식의 참/거짓에 따라 두 값 중 하나를 선택하는 유일한 3항 연산자
자바스크립트에서 if-else 문을 간단하게 표현할 때 사용하며,
가장 왼쪽 조건식의 결과에 따라 나머지 두 값을 선택적으로 반환하는 표현식

구분	내용
연산자	조건식 ? 참일_때_값 : 거짓일_때_값
수식	(age >= 18) ? "성인입니다." : "미성년자입니다."
예제	javascript<br>let age = 20;<br> let message = (age >= 18) ? "성인입니다." : "미성년자입니다.";<br> console.log(message); // 성인입니다.<br>
설명	- age >= 18 조건 검사- 참이면 "성인입니다." 반환- 거짓이면 "미성년자입니다." 반환- 콘솔에 결과 출력

5.6 연산자 우선순위

자바스크립트에서 여러 연산자가 있을 때 어떤 연산부터 처리할지 결정하는 규칙

5.6.1 기본 개념

• 연산자마다 우선순위가 다름
• 우선순위가 높은 연산자가 먼저 계산됨
• 괄호를 사용하면 괄호 안 여난을 가장 먼저 수행

5.6.2 주요 연산자 우선순위

우선순위 연산자 종류 기호 결합 순서

우선순위	연산자 종료	기호	결합 순서
1	그룹 연산자	( )	좌 → 우
	대괄호 연산자	[ ]	좌 → 우
	마침표 연산자	.	좌 → 우
2	증가 연산자	++	우 → 좌
	감소 연산자	--	우 → 좌
	단항 부정 연산자	-	우 → 좌
	NOT 연산자	!	우 → 좌
	delete 연산자	delete	우 → 좌
	new 연산자	new	우 → 좌
	typeof 연산자	typeof	우 → 좌
3	나눗셈 연산자	/	좌 → 우
	곱셈 연산자	*	좌 → 우
	나머지 연산자	%	좌 → 우
4	덧셈 연산자	+	좌 → 우
	뺄셈 연산자	-	좌 → 우
5	비교 연산자	<=, <, >, >=	좌 → 우
6	동등, 일치, 부등, 불일치	==, ===, !=, !==	좌 → 우
7	AND 연산자	&&	좌 → 우
8	OR 연산자	||	좌 → 우
9	삼항 연산자	?:	좌 → 우
10	대입(할당) 연산자	=	우 → 좌
	복합 대입 연산자	+=, -=, *=, /=, %=, **=	우 → 좌
11	쉼표(멀티) 연산자	,	좌 → 우

// 1. 그룹 연산자, 대괄호, 마침표 연산자

let arr = [10, 20, 30];

let obj = { value: 5 };

console.log((arr[1] + obj.value) * 2);  

// (arr[1] + obj.value) 먼저 계산 → (20 + 5) * 2 → 50

// 2. 증가, 감소, 단항 부정, NOT, delete, new, typeof 연산자

let x = 5;

console.log(++x);       // 6 (전위 증가)

console.log(x--);       // 6 (후위 감소, 출력 후 감소)

console.log(-x);        // -5 (부호 반전)

console.log(!true);     // false (논리 부정)

console.log(typeof x);  // "number" (자료형 확인)

// 3. 나눗셈, 곱셈, 나머지 연산자

console.log(10 / 2 * 3 % 4);

// 10/2=5 → 5*3=15 → 15%4=3

// 4. 덧셈, 뺄셈 연산자

console.log(10 + 5 - 3);

// 10+5=15 → 15-3=12

// 5. 비교 연산자

console.log(7 >= 5);  // true

// 6. 동등, 일치, 부등, 불일치 연산자

console.log(5 == '5');  // true (값만 비교)

console.log(5 === '5'); // false (타입과 값 모두 비교)

// 7. AND 연산자

console.log(true && false); // false (둘 다 참이어야 참)

// 8. OR 연산자

console.log(false || true); // true (하나만 참이어도 참)

// 9. 삼항 연산자

let age = 18;

console.log(age >= 18 ? '성인' : '미성년자');

// 조건 참 → '성인'

// 10. 대입(할당) 및 복합 대입 연산자

let a = 10;

a += 5;  // a = a + 5

console.log(a);  // 15

// 11. 쉼표(멀티) 연산자

let b = (1, 2, 3);

console.log(b);  // 3 (맨 마지막 값 반환)

5.7 형 변환

데이터 타입을 다른 타입으로 변경

자바스크립트는 동적 타입 언어라서 자동으로 변환하기도 하고, 개발자가 직접 변환하기도 함

종류:

• 암시적 형 변환: 자바스크립트가 상황에 맞게 자동으로 타입 변환
• 명시적 형 변환: 개발자가 의도적으로 타입을 변환(함수 사용)

5.7.1 암시적 형 변환

console.log('5' + 3);  // '53' (숫자 3이 문자열로 변환되어 문자열 결합)

console.log('5' - 3);  // 2 (문자열 '5'가 숫자 5로 변환되어 뺄셈 수행)

console.log('5' * '2'); // 10 (둘 다 숫자로 변환됨)

console.log(true + 1);  // 2 (true가 숫자 1로 변환됨)

console.log(null == 0); // false (null은 0과 같지 않음)

console.log(undefined == null); // true (특별한 동등성)

5.7.2 명시적 형 변환

// 문자열로 변환

console.log(String(123));       // "123"

console.log(String(true));      // "true"

// 숫자로 변환

console.log(Number("456"));     // 456

console.log(Number("abc"));     // NaN (숫자로 변환 불가)

// 불리언으로 변환

console.log(Boolean(0));        // false

console.log(Boolean("hello"));  // true

// 다른 방법

console.log(parseInt("123"));   // 123

console.log(parseFloat("3.14"));// 3.14

 

 

*해당 문서는 김기수 님께서 작성하신 HTML+CSS+자바스크립트 책을 읽고 이해한 대로 자바스크립트를 요약한 정리입니다. 

본 문서는 상업적인 목적으로 사용이 불가능 함을 고지합니다. (개인 공부를 남기기 위한 목적임을 명백히 고지합니다.)