JavaScript - 연산자

안녕하세요, 미래의 JavaScript 마법사 여러분! 이 흥미로운 여정에서 여러분의 가이드로서 함께 JavaScript 연산자의 세상으로 안내하게 되어 기쁩니다. 프로그래밍을 가르쳐온 지 오래된 저로서는, 연산자를 이해하는 것은 프로그래밍 세계의 비밀 손 인사를 배우는 것과 같다고 말할 수 있습니다. 그럼 이제 이 미스터리를 함께 풀어보겠습니다!

JavaScript - Operators

연산자란?

먼저 기본적인 내용부터 시작해보겠습니다. JavaScript에서 연산자는 피연산자(값과 변수)에 연산을 수행하는 특별한 기호입니다. 연산자를 프로그래밍 언어의 동사라고 생각해보세요 - 일어나는 일을 만드는 행동입니다!

예를 들어, 표현식 2 + 3에서 +는 연산자이고, 2와 3은 피연산자입니다. 간단하죠?

JavaScript 산술 연산자

이제 산술 연산자에 대해 이야기해보겠습니다. 이 것들은 JavaScript에서 수학 연산의 핵심입니다. 그때 학교에서 배운 수학 수업을 떠올려보세요! 지금 그 지식을 다시 꺼내보겠습니다!

다음은 산술 연산자의 표입니다:

연산자	설명	예제
+	덧셈	5 + 3 = 8
-	뺄셈	5 - 3 = 2
*	곱셈	5 * 3 = 15
/	나눗셈	15 / 3 = 5
%	나머지(모듈러)	5 % 2 = 1
++	증가	Let x = 5; x++; (이제 x는 6)
--	감소	Let x = 5; x--; (이제 x는 4)

이제 이这些东西들을 실제로 보겠습니다:

let a = 10;
let b = 5;

console.log(a + b); // 출력: 15
console.log(a - b); // 출력: 5
console.log(a * b); // 출력: 50
console.log(a / b); // 출력: 2
console.log(a % b); // 출력: 0

a++; // a는 이제 11
console.log(a); // 출력: 11

b--; // b는 이제 4
console.log(b); // 출력: 4

이 코드 조각의 각 줄은 이 연산자들이 어떻게 작동하는지 보여줍니다. 모듈러 연산자(%)는 일부분에게 새로운 것일 수 있습니다 - 나눗셈 후 나머지를 반환합니다. 이东西는 숫자가 짝수인지 홀수인지 확인할 때 매우 유용합니다!

JavaScript 비교 연산자

다음으로 비교 연산자를 다룰 차례입니다. 이 것들은 프로그래밍 경쟁에서 심판 역할을 하는 것처럼, 값을 비교하고 참 또는 거짓을 반환합니다. 이 것들은 코드에서 결정을 내릴 때 필수적입니다.

다음은 비교 연산자의 표입니다:

연산자	설명	예제
==	같다	5 == 5는 참을 반환
===	엄격히 같다(값과 타입)	5 === "5"는 거짓을 반환
!=	다르다	5 != 3은 참을 반환
!==	엄격히 다르다	5 !== "5"는 참을 반환
>	크다	5 > 3은 참을 반환
<	작다	5 < 3은 거짓을 반환
>=	크거나 같다	5 >= 5는 참을 반환
<=	작거나 같다	5 <= 3는 거짓을 반환

이제 이这些东西들을 실제로 보겠습니다:

let x = 5;
let y = "5";

console.log(x == y);  // 출력: 참
console.log(x === y); // 출력: 거짓
console.log(x != y);  // 출력: 거짓
console.log(x !== y); // 출력: 참
console.log(x > 3);   // 출력: 참
console.log(x < 10);  // 출력: 참
console.log(x >= 5);  // 출력: 참
console.log(x <= 4);  // 출력: 거짓

==과 ===의 차이를 주의하세요. 쌍다이어그램(===)은 값과 타입을 모두 확인하며, 이중다이어그램(==)은 값을만 확인합니다. 초보자에게는 흔한 버그의 원인이 될 수 있습니다!

JavaScript 논리 연산자

논리 연산자는 JavaScript에서 결정을 내리는 역할을 합니다. 이 것들은 여러 조건을 결합하고 복잡한 결정을 내리는 데 도움을 줍니다. 이 것들을 프로그래밍 마을의 지혜로운 노인들이 코드를 올바른 결정을 내리게 안내하는 것처럼 생각해보세요.

다음은 논리 연산자의 표입니다:

연산자	설명	예제
&&	논리 AND	(x > 0 && x < 10)
\|\|	논리 OR	(x === 5 \|\| y === 5)
!	논리 NOT	!(x === y)

이제 이这些东西들을 실제로 보겠습니다:

let a = 5;
let b = 10;

console.log(a > 0 && b < 20);  // 출력: 참
console.log(a > 10 || b === 10);  // 출력: 참
console.log(!(a === b));  // 출력: 참

&& 연산자는 두 조건 모두 참이면 참을 반환합니다. || 연산자는 적어도 하나의 조건이 참이면 참을 반환합니다. ! 연산자는 부울 값을 뒤집습니다 - 참을 거짓으로, 거짓을 참으로 바꿉니다.

JavaScript 비트 연산자

이제 비트 연산자의 세계로 들어가보겠습니다. 이 것들은 정수 값의 비트를 다루는 것입니다. 이 것들은 프로그래밍 세계의 비밀 요원처럼, 자주 사용되지는 않지만 필요할 때 매우 강력합니다.

다음은 비트 연산자의 표입니다:

연산자	설명
&	비트 AND
\|	비트 OR
^	비트 XOR
~	비트 NOT
<<	왼쪽 이동
>>	부호 연산 오른쪽 이동
>>>	제로 채우기 오른쪽 이동

이 연산자들은 상당히 고급이므로 처음에는 혼란스러울 수 있습니다. 프로그래밍 여정을 계속하면서 필요한 상황에서 마주치게 될 것입니다.

JavaScript 대입 연산자

대입 연산자는 변수에 값을 할당하는 데 사용됩니다. 이 것들은 프로그래밍 세계의 이사일 것입니다 - 것들을 제 Richtige 장소에 배치합니다.

다음은 대입 연산자의 표입니다:

연산자	설명	예제
=	대입	x = 5
+=	덧셈 대입	x += 3은 x = x + 3과 같습니다
-=	뺄셈 대입	x -= 3은 x = x - 3과 같습니다
*=	곱셈 대입	x = 3은 x = x 3과 같습니다
/=	나눗셈 대입	x /= 3은 x = x / 3과 같습니다
%=	모듈러 대입	x %= 3은 x = x % 3과 같습니다

이제 이这些东西들을 실제로 보겠습니다:

let x = 5;
console.log(x); // 출력: 5

x += 3;
console.log(x); // 출력: 8

x -= 2;
console.log(x); // 출력: 6

x *= 4;
console.log(x); // 출력: 24

x /= 3;
console.log(x); // 출력: 8

x %= 3;
console.log(x); // 출력: 2

이 연산자들은 코드를 더 간결하고 가독성 있게 만드는 데 유용합니다. 이 것들은 프로그래밍 세계의 스위스 아ーノ이 Knife처럼 다재다능하고 편리합니다!

JavaScript 기타 연산자

마지막으로, 다른 카테고리에 들어 맞지 않는 기타 연산자들을 살펴보겠습니다.

조건부(ternary) 연산자: 이东西는 if-else 문의 간단한 형태입니다.

let age = 20;
let canVote = (age >= 18) ? "Yes" : "No";
console.log(canVote); // 출력: "Yes"

이 연산자는 age >= 18이 참인지 확인합니다. 참이면 "Yes"를 canVote에 할당하고, 거짓이면 "No"를 할당합니다.

typeof 연산자: 이东西는 피연산자의 타입을 나타내는 문자열을 반환합니다.

console.log(typeof 42);        // 출력: "number"
console.log(typeof 'blubber'); // 출력: "string"
console.log(typeof true);      // 출력: "boolean"
console.log(typeof [1, 2, 4]); // 출력: "object"

delete 연산자: 이东西는 객체의 프로퍼티나 배열의 요소를 삭제합니다.

let person = {name: "John", age: 30};
delete person.age;
console.log(person); // 출력: {name: "John"}

이제 JavaScript 연산자의 세상을 여러분과 함께 여행했습니다. 기억하시길, 연습이 완벽을 만듭니다. 따라서 이 연산자들을 자신의 코드에서 실험해보지 마세요. 행복한 코딩을 기원합니다!

Credits: Image by storyset