[Study] Deep Dive - 연산자

표현식과 문의 차이

자바스크립트에서 표현식(Expression)은 값(value)으로 평가되는 코드의 일부입니다. 예를 들어, 1 + 2는 표현식입니다. 이는 두 숫자를 더한 결과로 값인 3으로 평가됩니다.

반면, 문(Statement)은 자바스크립트 엔진에 명령을 내리는 코드의 일부입니다. 예를 들어, if 문은 조건에 따라 실행할 코드 블록을 결정하는 데 사용됩니다. 다른 예로는 변수를 선언하는 let 문이 있습니다.

간단히 말해, 표현식은 값을 반환하고 문은 명령을 실행합니다. 자바스크립트에서는 표현식이 모두 문의 구성 요소가 될 수 있습니다. 예를 들어, if 문의 조건은 표현식이며, let 문에서 변수의 초기값으로 표현식을 사용할 수 있습니다.

그러나 문은 값으로 평가되지 않습니다. 따라서 if 문이나 let 문을 단독으로 실행하면 아무런 결과가 반환되지 않습니다.

---

산술 연산자

피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만든다.
산술 연산이 불가능한 경우, NaN을 반환한다.

또한 피연산자의 개수에 따라 아래와 같이 구분할 수 있다.

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

이항 산술 연산자

• 2개의 피연산자를 산술 연산하여 숫자 값을 만든다.
• 모든 이항 산술 연산자는 피연산자의 값을 변경하는 부수효과(side effect)가 없다.
  즉, 언제나 새로운 값을 만들 뿐 값이 바뀌지 않는다.

이항 산술 연산자	의미	부수효과(side effect)
+	덧셈	X
-	뺄셈	X
*	곱셈	X
/	나눗셈	X
%	나머지	X

단항 산술 연산자

• 1개의 피연산자를 산술 연산하여 숫자 값을 만든다.
• 증가/감소(++/--)연산자는 피연산자의 값을 변경하는 부수효과가 있다. 즉, 값을 변경하는 암묵적 할당이 이뤄진다.

단항 산술 연산자	의미	부수효과(side effect)
++	증가	O
--	감소	O
+	어떠한 효과 X 음수를 양수로 반전하지도 않는다	X
-	양수->음수, 음수->양수로 반전한 값을 반환한다	X

---

숫자타입이 아닌 피연산자에 + 단항 연산자를 사용하면 숫자타입으로 변환하여 반환 한다. 이때도 값 자체를 변경하는게 아닌 새롭게 생성해서 반환해주는것이다 (부수효과 X)

var x = '1'

console.log(+x) // 1
console.log(x) // '1'

x = true;
console.log(+x) // 1
console.log(x) // true

x= 'hello'
console.log(+x) // NaN (자바스크립트는 대,소문자를 판별한다.)
console.log(x) // 'hello'

// 문자열 연결 연산자
'1' + 2; // '12'

1 + true; // 1

1 + null; // 1

이처럼 개발자의 의도와는 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 추론되기 때문에 boolean타입이 숫자타입으로 변환되기도 한다는것이다. (typeScript 쓰자...!)

---

할당 연산자

할당 연산자는 오른쪽의 피연산자 결과를 왼쪽 변수에 할당한다. 이는 원본의 값을 변환함으로써 부수효과가 있다.

할당 연산자	예	동일 표현	부수효과
=	X = 5	X = 5	O
+=	X += 5	X = X + 5	O
-=	X -= 5	X = X - 5	O
*=	X *= 5	X = X * 5	O
/=	X /= 5	X = X / 5	O
%=	X %= 5	X = X % 5	O

위에서 말한것처럼 오른쪽 값을 왼쪽 변수에 값을 할당한다고 했다.

var a,b,c;

//연쇄 할당. 오른쪽 -> 왼쪽 진행

a = b = c = 0;
console.log(a,b,c) // 0 0 0

---

지수연산자

ES7에서 도입된 지수연산자는 원래 Math.pow((2,2), 2)를 사용 했다고 한다.

• 이항 연산자 중에서 우선순위가 가장 높다.
• 좌항의 피연산자를 밑으로 우항의 피연산자를 지수로 거듭 제곱하여 숫자값을 반환한다.
• 음수를 거듭제곱의 밑으로 사용하려면 괄호로 묶어주어야 한다.

-5 ** 2; // error
(-5) ** 2; // 25

// 할당 연산자와 함께 사용
var num = 5;
num ** 2; // 25

그 외에 연산자 중 delete 연산자로 배열안의 값을 삭제한다고 하면
delete fruits[0] 은 undefined로 값이 바뀌어 출력이 됩니다.

• var, let, const로 선언된 변수는 non-configurable 속성으로 구분되며, delete로 삭제될 수 없습니다.

---

연산자의 우선순위

우선 순위	연산자
1	()
2	new매개변수 존재, . , []프로퍼티 접근, ()함수 호출, ?. 옵셔널 체이닝 연산자
3	new()매개변수 미존재
4	X++, X--
5	!X, +X, -X, ++X, --X, typeof, delete
6	** 이항 연산자 중에서 우선순위가 가장 높다
7	*, /, %
8	+, -
9	<, <=, >, >=, in, instanceof
10	==, !=, ===, !==
11	?? null 병합 연산자
12	&&
13	or 연산자
14	? ... : ...
15	할당 연산자 =, +=, -=, ...
16	,

우선순위를 기억하기 보다 가장 높은 그룹 연산자를 사용하여 명시적으로 조절하는것을 권장한다.

---

연산자 결합 순서

결합 순서	연산자
좌항 -> 우항	+, -, /, %, <, <=, >, >=, &&, or, ., [], (), ??, ?., in, instanceof
우항 -> 좌항	++,--,할당연산자(=,+=,-=,...), !x, +x, -x, ++x, --x, typeod.delete, ? ... : ...

---

회고

이번주는 기초를 조금 더 다지고 모르는 부분에 대해서 서로 대화를 하며 코드를 작성해서 확인해보고 명확하게 알아간 유익한 시간이었다.

• &&과 || 의 흐름 조건식일때와 표현식일때 차이
  • && 표현식 : 좌항부터 false면 우항으로 이동 후 마지막 값이 담김
  • && 조건식 : && 조건이 모두 충족 되어야만 이벤트 발생
• truthy 와 falsy
• !! 이중 부정문의 차이 (false와 true의 명확함을 위할때 유용)
• 키워드 없이 변수명 선언시 어떤 키워드로 선언이 되나?
• isNaN -> Number.isNaN 사용 권장
• 2진수 변환하는 과정

주로 위 주제로 많은 대화를 나누었고 유익했다,,재밌어 당신들

다은 - 부동소수점, 고정소수점에 대해 리뷰해주었고,
민겸 - 태그드 리터럴 함수 과 string.raw, 이스케이프 시퀀스 등등 리뷰해주었다.

대유잼!!