> 웹 프론트엔드 > JS 튜토리얼 > JavaScript 연산자 이해: 예제가 포함된 전체 가이드

JavaScript 연산자 이해: 예제가 포함된 전체 가이드

Linda Hamilton
풀어 주다: 2024-12-18 00:15:10
원래의
129명이 탐색했습니다.

Understanding JavaScript Operators: A Complete Guide with Examples

### JavaScript의 연산자

JavaScript의 연산자는 값과 변수에 대한 연산을 수행하는 데 사용되는 특수 기호입니다. 이러한 작업에는 산술, 할당, 비교, 논리 및 기타 작업이 포함될 수 있습니다. 기본적인 계산, 비교를 수행하고 코드 흐름을 제어하려면 연산자를 이해하는 것이 필수적입니다.

JavaScript는 다양한 연산자를 지원하며 다음 유형으로 분류됩니다.


### 1. **산술 연산자**
산술 연산자는 숫자에 대한 수학적 계산을 수행하는 데 사용됩니다.

Operator Description Example
Addition 5 3 → 8
- Subtraction 5 - 3 → 2
* Multiplication 5 * 3 → 15
/ Division 5 / 3 → 1.666...
% Modulus (Remainder) 5 % 3 → 2
** Exponentiation 5 ** 2 → 25

예:

let a = 10;
let b = 2;
console.log(a + b);  // Output: 12
console.log(a - b);  // Output: 8
console.log(a * b);  // Output: 20
console.log(a / b);  // Output: 5
console.log(a % b);  // Output: 0
console.log(a ** b); // Output: 100
로그인 후 복사
로그인 후 복사
로그인 후 복사

**

2. 할당 연산자**

대입 연산자는 변수에 값을 할당하는 데 사용됩니다.

Operator Description Example
= Assign value x = 5
= Add and assign x = 3 → x = x 3
-= Subtract and assign x -= 2 → x = x - 2
*= Multiply and assign x *= 4 → x = x * 4
/= Divide and assign x /= 2 → x = x / 2
%= Modulus and assign x %= 3 → x = x % 3
**= Exponentiation and assign x **= 2 → x = x ** 2

예:

let a = 10;
let b = 2;
console.log(a + b);  // Output: 12
console.log(a - b);  // Output: 8
console.log(a * b);  // Output: 20
console.log(a / b);  // Output: 5
console.log(a % b);  // Output: 0
console.log(a ** b); // Output: 100
로그인 후 복사
로그인 후 복사
로그인 후 복사

### 3. **비교 연산자**
비교 연산자는 값을 비교하고 조건에 따라 부울(참 또는 거짓)을 반환하는 데 사용됩니다.

Operator Description Example
== Equal to (loose) 5 == '5' → true
=== Equal to (strict) 5 === '5' → false
!= Not equal to (loose) 5 != '5' → false
!== Not equal to (strict) 5 !== '5' → true
> Greater than 5 > 3 → true
< Less than 5 < 3 → false
>= Greater than or equal 5 >= 5 → true
<= Less than or equal 5 <= 3 → false

예:

let x = 10;
x += 5;  // x = x + 5 -> 15
x *= 2;  // x = x * 2 -> 30
console.log(x);  // Output: 30



<hr>

<p><strong>### 4. **논리 연산자</strong>**<br>
논리 연산자는 논리 연산을 수행하고 부울 값을 반환하는 데 사용됩니다.</p>

<div><table>
<thead>
<tr>
<th>Operator</th>
<th>Description</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>&&</td>
<td>Logical AND</td>
<td>
true && false → false
</td>
</tr>
<tr>
<td>`</td>
<td></td>
<td>`</td>
</tr>
<tr>
<td>!</td>
<td>Logical NOT</td>
<td>
!true → false
</td>
</tr>
</tbody>
</table></div>

<p><strong>#### 예:</strong><br>
</p>

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">console.log(5 == '5');  // Output: true (loose comparison)
console.log(5 === '5'); // Output: false (strict comparison)
console.log(10 > 5);    // Output: true
console.log(3 <= 2);    // Output: false
로그인 후 복사
로그인 후 복사

### 5. **단항 연산자**
단항 연산자는 단일 피연산자를 사용하여 특정 작업을 수행합니다.

Operator Description Example
Increment x → x = x 1
-- Decrement x-- → x = x - 1
typeof Type of operand typeof x → number
void Evaluates expression without returning a value void(0)

#### 예:

let a = true;
let b = false;
console.log(a && b);  // Output: false
console.log(a || b);  // Output: true
console.log(!a);      // Output: false
로그인 후 복사

### 6. **삼항(조건부) 연산자
**삼항 연산자는 if...else 문의 약어입니다. 조건을 평가하고 조건이 참인지 거짓인지에 따라 두 값 중 하나를 반환합니다.

Operator Description Example
condition ? expr1 : expr2 If condition is true, return expr1; otherwise, return expr2 x > 10 ? 'Greater' : 'Lesser'

*#### 예:
*

let a = 10;
let b = 2;
console.log(a + b);  // Output: 12
console.log(a - b);  // Output: 8
console.log(a * b);  // Output: 20
console.log(a / b);  // Output: 5
console.log(a % b);  // Output: 0
console.log(a ** b); // Output: 100
로그인 후 복사
로그인 후 복사
로그인 후 복사

### 7. **비트 연산자
**비트 연산자는 이진수에 대한 연산을 수행합니다.

Operator Description Example
& AND 5 & 3 → 1
` ` OR
^ XOR 5 ^ 3 → 6
~ NOT ~5 → -6
<< Left shift 5 << 1 → 10
>> Right shift 5 >> 1 → 2
>>> Unsigned right shift 5 >>> 1 → 2

*#### 예:
*

let x = 10;
x += 5;  // x = x + 5 -> 15
x *= 2;  // x = x * 2 -> 30
console.log(x);  // Output: 30
로그인 후 복사

### 8. **확산 연산자(...)
**확산 연산자를 사용하면 배열이나 개체의 요소를 새로운 배열이나 개체로 압축 해제할 수 있습니다.

*#### 예:
*

console.log(5 == '5');  // Output: true (loose comparison)
console.log(5 === '5'); // Output: false (strict comparison)
console.log(10 > 5);    // Output: true
console.log(3 <= 2);    // Output: false
로그인 후 복사

### 결론

JavaScript 연산자는 계산, 비교 및 ​​논리 연산을 수행하는 데 기본입니다. 값을 조작하든, 비교하든, 프로그램 흐름을 제어하든 이러한 연산자를 이해하는 것은 효율적인 코딩에 매우 중요합니다. 작업에 따라 올바른 연산자를 사용하여 깨끗하고 읽기 쉬운 코드를 보장하세요.

안녕하세요. 저는 Abhay Singh Kathayat입니다!
저는 프론트엔드와 백엔드 기술 모두에 대한 전문 지식을 갖춘 풀스택 개발자입니다. 저는 효율적이고 확장 가능하며 사용자 친화적인 애플리케이션을 구축하기 위해 다양한 프로그래밍 언어와 프레임워크를 사용하여 작업합니다.
제 비즈니스 이메일(kaashshorts28@gmail.com)로 언제든지 연락주세요.

위 내용은 JavaScript 연산자 이해: 예제가 포함된 전체 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 추천
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿