[JavaScript] 자바스크립트 기본 (5)

<모던 JavaScript 튜토리얼 - 코어 자바스크립트>

https://ko.javascript.info/

🕊️기본 연산자와 수학

용어

• 피연산자(operand) - 연산자가 연산을 수행하는 대상 (=인수(argument))
• 단항(unary) - 피연산자를 하나만 받는 연산자
  x = -x; alert( x ); //부호를 뒤집는 단항연산자 마이너스
• 이항(binary) - 두 개의 피연산자를 받는 연산자
  alert( y-x ); //이항연산자로 쓰이는 마이너스

수학

자바스크립트에서 지원하는 수학 연산자

• 덧셈 연산자 +
• 뺄셈 연산자 -
• 곱셈 연산자 *
• 나눗셈 연산자 /
• 나머지 연산자 %
• 거듭제곱 연산자 **

나머지 연산자 % (remainder operator)

나누기 연산 후 나머지를 정수로 반환
a % b //a를 b로 나눈 후 그 나머지를 정수로 반환
alert( 5 % 2 ); // 1
alert( 8 % 3 ); // 2

거듭제곱 연산자 ** (exponentiation operator)

거듭제곱과 제곱근을 구할 수 있음.
a ** b //a를 b번 곱한 값 반환
alert( 2 ** 2 ); // 4
alert( 2 ** 3 ); // 8
alert( 4 ** (1/2) ); // 2 (1/2 거듭제곱은 제곱근)

이항 연산자 '+'와 문자열 연결

• 덧셈 +
  1. 문자열 연결과 변환 (하나이상 문자열)
  2. 수학 연산 (둘다 숫자)
  * 이항 연산자 +의 피연산자 중 하나가 문자열이면, 다른 하나도 문자열로 변환됨.
  let s = "my" + "string"; // 결과 - mystring
alert( '1' + 2 ); // "12"
alert( 2 + 2 + '1' ); // "41"

• 뺄셈 -
alert( 6 - '2' ); // 4, '2'를 숫자로 바꿈

• 나눗셈 /
alert( '6' / '2' ); // 3, 두 피연산자를 숫자로 바꿈

단항 연산자 '+'와 숫자형으로의 변환

• 피연산자가 숫자일 경우 영향 X
• 피연산자가 숫자가 아닌 경우 숫자형으로 변환
• Number()와 동일한 일 수행

// 숫자형 피연산자
let x = 1;
alert( +x ); // 1 (숫자는 영향X)

// 숫자형이 아닌 피연산자
alert( +true ); // 1
alert( +"" );   // 0

// 문자열을 숫자로 변환해야 하는 경우
let apples = "2";
let oranges = "3";
alert( apples + oranges ); // 23
alert( +apples + +oranges ); // 5
alert( Number(apples) + Number(oranges) ); // 5

연산자 우선순위 (precedence)

순위	연산자 이름	기호
...	...	...
17	단항 덧셈	+
17	단항 부정	-
16	지수	**
15	곱셈	*
15	나눗셈	/
13	덧셈	+
13	뺄셈	-
...	...	...
3	할당	=
...	...	...

• 숫자가 클수록 먼저 실행
• 괄호()는 연산자 우선순위를 무력화시킴
• 순위가 같으면 왼쪽 -> 오른쪽 수행
• 동일한 기호의 단항 연산자는 이항 연산자보다 우선순위가 더 높음

할당 연산자 = (assignment)

• 우선순위가 3으로 매우 낮음

값을 반환하는 할당 연산자

let a = 1;
let b = 2;
let c = 3 - (a = b + 1);

alert( a ); // 3
alert( c ); // 0

할당 연산자 체이닝

• 할당 연산자 여러 개를 연결
• 체이닝 시, 우측부터 평가 (2+2부터 평가)

let a, b, c;
a = b = c = 2 + 2;

alert( a ); // 4
alert( b ); // 4
alert( c ); // 4

복합 할당 연산자

• +=, -=, *=, /=, %=
• 우선순위 : 복합 할당 연산자 = 할당 연산자
• 산술 연산자와 비트 연산자에도 적용 가능

let n = 2;
n = n + 5; // n=7
n = n * 2; // n=14

// 복합 할당 연산자 사용 +=, *=
let n = 2;
n += 5; // n=7
n *= 2; // n=14

let n = 2;
n *= 3 + 5; // n=16

증가.감소 연산자

증가·감소 연산자의 우선순위는 다른 대부분의 산술 연산자보다 높기 때문에, 평가가 먼저 이뤄짐

증가 연산자 ++ (increment)

let counter = 2;
counter++;      // counter = counter + 1
alert( counter ); // 3

감소 연산자 -- (decrement)

let counter = 2;
counter--;      // counter = counter - 1
alert( counter ); // 1

증가·감소 연산자는 변수에만 사용가능 / 5++ 불가능

전위형 (prefix form)

++counter

let counter = 1;
let a = ++counter;
alert(a); // 2

후위형 (postfix form)

counter++ : 증감 전 기존값 반환

let counter = 1;
let a = counter++;
alert(a); // 1

반환값을 사용하지 않는 경우, 전위형과 후위형엔 차이가 없음

let counter = 0;
counter++;
++counter;
alert( counter ); // 2

비트 연산자 (bitwise operator)

• 인수를 32비트 정수로 변환하여 이진 연산을 수행
• 저수준(2진 표현)에서 숫자를 다룸
• 암호 다룰 때 유용
• MDN 비트연산자

• 비트 AND ( & )
• 비트 OR ( | )
• 비트 XOR ( ^ )
• 비트 NOT ( ~ )
• 왼쪽 시프트(LEFT SHIFT) ( << )
• 오른쪽 시프트(RIGHT SHIFT) ( >> )
• 부호 없는 오른쪽 시프트(ZERO-FILL RIGHT SHIFT) ( >>> )

쉼표 연산자 , (comma operator)

• 여러 표현식을 코드 한 줄에서 평가
• 마지막 표현식의 평가 결과만 반환
• 마지막 표현식을 제외한 모든 것을 버리는 연산자

// 1+2, 3+4 각각 평가되지만 반환은 마지막 결과만
let a = (1 + 2, 3 + 4);
alert( a ); // 7

우선순위가 매우 낮음. = 보다 낮음.
여러 동작을 하나의 줄에서 처리하려는 복잡한 구조에서 이용

// 한 줄에서 세 개의 연산이 수행됨
for (a = 1, b = 3, c = a * b; a < 10; a++) {
 ...
}

과제

1. 전위형과 후위형

// 아래 코드가 실행된 후, 변수 a, b, c, d엔 각각 어떤 값들이 저장될까요?
let a = 1, b = 1;

let c = ++a;
let d = b++;

// a = 2, b = 2, c = 2, d = 1

2. 할당 후 결과 예측하기

// 아래 코드가 실행되고 난 후, a와 x엔 각각 어떤 값이 저장될까요?
let a = 2;

let x = 1 + (a *= 2);

// a = 4, x = 5

3. 형 변환

// 아래 표현식들의 결과를 예측해 보세요.
"" + 1 + 0		// "10"
"" - 1 + 0		// -1
true + false	// 1
6 / "3"			// 2
"2" * "3"		// 6
4 + 5 + "px"	// "9px"
"$" + 4 + 5		// "$45"
"4" - 2			// 2
"4px" - 2		// NaN
7 / 0			// Infinity
"  -9  " + 5	// "  -9  5"
"  -9  " - 5	// -14
null + 1		// 1
undefined + 1	// NaN
" \t \n" - 2	// -2

1. 연산자가 '+'일 때, 피연산자 중 하나라도 문자열이면 둘다 문자열 취급

\t \n

2. 위 문자열은 공백을 만드는 문자 \t와 줄바꿈 문자 \n, 그 사이의 일반적인 공백으로 구성. 숫자형으로 변환 시 비어있는 문자열로 취급하여 숫자 0이 됨.

4. 덧셈 고치기

아래 코드는 사용자에게 숫자 2개를 입력받은 다음 그 합을 보여줍니다.
그런데 의도한 대로 예시가 동작하지 않고, 결과는 12가 됩니다.
예시가 제대로 동작하도록 코드를 수정해 보세요. 결과는 3이 되어야 합니다.

// 코드 수정
let a = prompt("덧셈할 첫 번째 숫자를 입력해주세요.", 1);
let b = prompt("덧셈할 두 번째 숫자를 입력해주세요.", 2);

//alert(a + b); // 12
alert(+a + +b); // 3

함수 앞에 단항 연산자 '+'를 붙이는 것도 가능

let a = +prompt("덧셈할 첫 번째 숫자를 입력해주세요.", 1);
let b = +prompt("덧셈할 두 번째 숫자를 입력해주세요.", 2);
alert(a + b); // 3