JavaScript - 할당 연산자

안녕하세요, 미래의 프로그래머 여러분! 오늘 우리는 자바스크립트 할당 연산자의 흥미로운 세상으로 뛰어들어 볼 거예요. 프로그래밍에 새로운 사람이라면 걱정하지 마세요 - 저는 여러분을 단계별로 안내해 드릴 테니까요. 수 년 동안 수많은 학생들을 가르친 경험을 바탕으로 이 coding 모험을 함께 시작해봅시다!

JavaScript 할당 연산자

할당 연산자는 프로그래밍의 근간적인 부분입니다. 변수에 값을 할당하는 데 도움을 주는 역할을 합니다. 변수를 상자로 생각하고, 할당 연산자를 그 상자에 것을 넣는 도구로 생각해 보세요.

기본 할당 연산자 (=)

가장 일반적인 할당 연산자는 등호 (=)입니다. 간단하지만 강력합니다. 예를 보겠습니다:

let myAge = 30;
console.log(myAge); // 출력: 30

이 예제에서 우리는 myAge라는 변수를 생성하고 30이라는 값을 할당합니다. console.log 문은 이 값을 출력합니다.

하지만 기다리세요, 그 이상이 있습니다! 할당 연산자는 단순 할당 이상의 기능을 수행할 수 있습니다. 더 흥미로운 것들을 탐구해 보겠습니다!

산술 할당 연산자

산술 할당 연산자는 수학 연산과 할당을 결합합니다. 코드를 더 간결하고 가독성 있게 만드는 쉬운 단축 형식입니다.

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

연산자	예제	동등한 표현
+=	x += y	x = x + y
-=	x -= y	x = x - y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y
**=	x **= y	x = x ** y

이제 이들을 실제로 사용해 보겠습니다:

let score = 10;

score += 5; // score는 이제 15입니다
console.log(score); // 출력: 15

score -= 3; // score는 이제 12입니다
console.log(score); // 출력: 12

score *= 2; // score는 이제 24입니다
console.log(score); // 출력: 24

score /= 4; // score는 이제 6입니다
console.log(score); // 출력: 6

score %= 4; // score는 이제 2입니다 (6을 4로 나눈 나머지)
console.log(score); // 출력: 2

score **= 3; // score는 이제 8입니다 (2의 3제곱)
console.log(score); // 출력: 8

이게 정말 멋있습니다! 우리는 score 변수를 여러 가지 방법으로 조작했지만, 각각의 수학 표현을 반복할 필요 없이 했습니다.

비트 연산자 할당 연산자

이제 약간 더 고급 지점으로 나아가보겠습니다: 비트 연산자 할당 연산자. 이 연산자들은 비트 연산을 수행하고 그 결과를 변수에 할당합니다. 이게 복잡해 보일 수 있지만, 차근차근 설명해 드릴게요!

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

연산자	예제	동등한 표현
&=	x &= y	x = x & y
|=	x |= y	x = x | y
^=	x ^= y	x = x ^ y
<<=	x <<= y	x = x << y
>>=	x >>= y	x = x >> y
>>>=	x >>>= y	x = x >>> y

이제 몇 가지 예제를 보겠습니다:

let bitwiseNum = 5; // 이진수: 0101

bitwiseNum &= 3; // 이진수: 0101 & 0011 = 0001
console.log(bitwiseNum); // 출력: 1

bitwiseNum |= 6; // 이진수: 0001 | 0110 = 0111
console.log(bitwiseNum); // 출력: 7

이 예제에서 우리는 비트 AND (&)와 OR (|) 연산을 수행하고 있습니다. 컴퓨터의 비밀 코드 같은 것입니다!

비트 이동 할당 연산자

비트 이동 할당 연산자는 비트 연산자 가족의 일부이지만, 특별한 주목을 받을 만합니다. 이들은 숫자의 비트를 왼쪽이나 오른쪽으로 이동하고 그 결과를 변수에 할당합니다.

이전 표에서 이미 보았지만, 이제 집중해 보겠습니다:

연산자	예제	동등한 표현
<<=	x <<= y	x = x << y
>>=	x >>= y	x = x >> y
>>>=	x >>>= y	x = x >>> y

이렇게 작동합니다:

let shiftNum = 8; // 이진수: 1000

shiftNum <<= 1; // 왼쪽으로 1칸 이동, 이진수: 10000
console.log(shiftNum); // 출력: 16

shiftNum >>= 2; // 오른쪽으로 2칸 이동, 이진수: 0100
console.log(shiftNum); // 출력: 4

비트 이동은 숫자의 자리를 움직이는 것처럼 보이지만, 이진수에서 작동합니다. 특정 유형의 계산에 강력한 도구입니다!

논리 할당 연산자

마지막으로 논리 할당 연산자에 대해 이야기해 보겠습니다. 이 연산자들은 상대적으로 새로운 추가로, ES2021에서 도입되었습니다. 논리 연산과 할당을 결합합니다.

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

연산자	예제	동등한 표현
&&=	x &&= y	x && (x = y)
||=	x ||= y	x || (x = y)
??=	x ??= y	x ?? (x = y)

이제 이들을 실제로 사용해 보겠습니다:

let a = true;
let b = false;

a &&= 5; // a는 여전히 참이므로 5가 됩니다
console.log(a); // 출력: 5

b ||= 10; // b는 거짓이므로 10이 됩니다
console.log(b); // 출력: 10

let c;
c ??= 15; // c는 정의되지 않았으므로 15가 됩니다
console.log(c); // 출력: 15

이 연산자들은 기본값을 설정하거나 조건부로 변수를 업데이트하는 데 유용합니다.

그렇게 해서 우리는 자바스크립트 할당 연산자의 세상을 탐험했습니다. 연습이 완벽을 만듭니다. 이 연산자들을 자신의 코드에서 사용해 보세요. 그러면 곧 이들이 두 번째 nature가 될 것입니다. 행복한 코딩, 미래의 프로그래머 여러분!

Credits: Image by storyset