🍌 JavaScript

---

Expressions and Operators 1️⃣

Expressions(표현식)

Expressions(표현식)이란 값을 반환하는 유효한 식 또는 코드이며, 숫자, 문자열, 논리값 등의 원시 값이다.

모든 표현식은 구문이 유효하다면 어떤 값으로 이행되지만, 개념적으로는 2 가지 범주로 나뉜다.

• 부수 효과가 있는(변수에 값을 바꾸는)표현식, ex) x = 7
x = 7 표현식은 =연산자를 사용해서 값 7을 x변수에 할당하므로 표현식 자체도 7로 평가됨
• 평가하면 어떤 값으로 이행하는 표현식, ex) 3 + 4
3 + 4 표현식은 +연산자를 사용해서 3과 4를 더하지만 결과인 7을 변수에 할당하는지는 않음

Js Expressions

• Arithmetic(산수) : 숫자(3.14159)로 평가, 산술 연산자 사용
• String(문자열) : 문자열("프레디", "412")로 평가, 문자열 연산자 사용
• Boolean(논리) : 참이나 거짓으로 평가, 논리 연산자를 포함
• Basic expressions(일차 표현식) : JS의 keyword나 일반 표현식
• Left-Side expression(좌변 표현식) : 좌변 값은 할당의 대상(목적지)

Basic expressions(일반 표현식)

this

this 키워드를 .이나 [] 표기법을 사용하여 현재 객체를 참조한다. 일반적으로 this는 메서드의 호출 객체를 참조한다.

this["propertyName"];
this.propertyName;

예시) 최대와 최소 값을 받아서, 어떤 객체의 value 속성 유효성을 검증하는 validate라는 함수를 가정

function validate(obj, lowval, hival) {
  if (obj.value < lowval || obj.value > hival) {
    console.log("Invalid Value!");
  }
}

<p>18과 99 사이의 수를 입력:</p>
<input type="text" name="age" size="3" onchange="validate(this, 18, 99);" />

Grouping operator

그룹 연산자 ()는 표현식 평가의 우선순위를 조절한다. 예를 들어, 곱하기와 나누기보다 더하기와 빼기 연산을 먼저 수행할 수 있다.

const a = 1;
const b = 2;
const c = 3;

// 기본 우선순위에서는
a + b * c; // 7
// 이런 순서로 평가함
a + (b * c); // 7

// 우선순위 재정의
// 곱하기보다 더하기를 먼저 수행
(a + b) * c; // 9

// ...하면 아래와 같음
a * c + b * c; // 9

Left-Side expression(좌변 표현식)

new

new연산자를 사용하면 user-defined object type(사용자 정의 객체 타입)이나 built-in object types(내장 객체 타입)의 인스턴스를 생성할 수 있다.

const objectName = new ObjectType(param1, param2, /* …, */ paramN);

super

super키워드는 객체의 부모가 가진 함수를 호출할 때 사용한다. 예를 들어, 클래스에서 부모의 생성자를 호출해야 할 때 유용하게 쓸 수 있다.

super(args); // 부모 생성자 호출
super.functionOnParent(args);

📌 '표현식을 평가한다'는 표현식의 값과 변수, 함수 등의 값을 계산하는 행위를 말한다.

Operators(연산자)

a + b에서 +는 operator(연산자)이고 a와 b는 연산 대상이 되는 표현식이며, 이를 operand(피연산자)라고 부른다.

• Assignment operators(할당 연산자)
• Comparison operators(비교 연산자)
• Arithmetic operators(산술 연산자)
• Bitwise operators(비트 연산자)
• Logical operators(논리 연산자)
• String operators(문자열 연산자)
• Conditional[ternary] operator(조건[삼항] 연산자)
• Comma operator(쉼표 연산자)
• Unary operators(단항 연산자)
• Relational operators(관계 연산자)

JavaScript는 이항 연산자와 단항 연산자를 모두 포함하며, 유일한 삼항 연산자로 조건 연산자도 가지고 있다. 이항 연산자는 연산자의 앞과 뒤에 하나씩 총 두 개의 피연산자가 필요하다.이항 연산자의 예시로는 3+4와 x*y있다.

피연산자1 연산자 피연산자2

단항 연산자는 연산자의 앞이나 뒤에 하나의 피연산자가 필요하다.
단항 연산자의 예시로는 x++ 또는 ++x가 있다.

연산자 피연산자
피연산자 연산자

Associativity(결합 법칙)

연산자에는 왼쪽에서 오른쪽으로 결합하여 연산할지 아니면 오른쪽에서 왼쪽으로 결합하여 연산할지 연산 방향을 결정하는 결합 법칙이 존재한다.
Operator Precedence

Precedence	Associativity	Individual operators
1: 그룹	n/a	(x)
2: 접근과 호출	좌 → 우	x.y Member access, x?.y Optional chaining
	n/a	x[y] Computed member access, new x(y) new with argument list, x(y) Function call
3: new	n/a	new xnew without argument list
4: 후위 연산자	n/a	x++, x--
5: 전위 연산자	n/a	++x, --x, !x 논리 NOT, ~x 비트 NOT, +x 단항 +, -x 단항 -, typeof x, void x, delete x, await x
6: 거듭제곱	우 → 좌	x ** y
7: 곱셈 연산자	좌 → 우	x * y, x / y, x % y
8: 덧셈 연산자	좌 → 우	x + y, x - y
9: 비트 shift	좌 → 우	x << y, x >> y, x >>> y 부호 없는 오른쪽 시프트
10: 관계 연산자	좌 → 우	x < y, x <= y, x > y, x >= y, x in y, x instanceof y
11: 항등 연산자	좌 → 우	x == y, x != y, x === y, x !== y
12: 비트 AND	좌 → 우	x & y
13: 비트 XOR	좌 → 우	x ^ y
14: 비트 OR	좌 → 우	x | y
15: 논리 AND	좌 → 우	x && y
16	좌 → 우	x || y 논리 OR, x ?? y
17: 삼항 연산자	우 → 좌	x ? y : z
18: 할당과 기타	우 → 좌	x = y, x += y, x -= y, x **= y, x *= y, x /= y, x %= y, x <<= y, x >>= y, x >>>= y, x &= y, x ^= y, x |= y, x &&= y, x ||= y, x ??= y null 병합 연산자
	우 → 좌	x => y Arrow function expressions
	n/a	yield x, yield* x, ...x Spread syntax
19: 콤마	좌 → 우	x, y Comma operator

📌 Associativity
left-to-right(좌결합성) : 좌 → 우
right-to-left(우결합성) : 우 → 좌

---

참고문헌,
이소 히로시, 『모던 자바스크립트 입문』, 서재원 역, 길벗, 2019
https://velog.io/@reveloper-1311/JS-표현식Expression이란
https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Expressions_and_operators
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_precedence