.svg)
해당 게시물은 도서 <모던 자바스크립트 Deep Dive>와 패스트캠퍼스 강의 "김민태의 프론트엔드 아카데미 : 제 1강 JavaScript & TypeScript Essential"를 참고하여 작성되었습니다.
식(Expression)은 무엇인가
자바스크립트 내에서, 식은 보통 흔히들 연산/계산이라고 표현하기도 하고, expression, 즉 표현식이라는 단어로도 흔히들 설명하는 개념입니다.
자바스크립트나 타입스크립트는 기본적으로 연산자를 제공합니다.
이 연산자들을 활용하여 실제 값을 만들어내는 코드를 우리는 식이라고 정의합니다.
이는 MDN 홈페이지를 참고하면 더욱 자세하게 알 수 있을 거에요.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Expressions_and_Operators
물론 자바스크립트 내 연산자들 중에는 우리가 너무나 익숙한 사칙연산 연산자부터, 논리 연산자, 삼항 연산자 등 다양한 종류가 있는데, 이를 사용한 코드들 대부분이 식의 범주에 들어갑니다.
문(Statement)와 식
자바스크립트에는 문(statement)의 개념도 존재하죠.
이러한 문과 식의 차이점은 결과값 도출에서 온다고 할 수 있습니다.
기본적으로 식은 하나의 값으로 수렴합니다. 아무리 복잡해도요. 그래서 반대로 말하면 값이 곧 식이라고도 말할 수 있습니다.
자바스크립트 컨벤션 중, 세미콜론을 붙이는 것이 있는데, 아무데나 붙이는 것이 아니라 식들 뒤에 세미콜론을 붙입니다. 이는 식이 곧 값을 환원하기 때문입니다.
(세미콜론 하나 당 식, 내지는 값 하나인 것입니다.)
하지만 문 뒤에 세미콜론을 붙이는 것은 문법적으로는 허용되나, 사실상 아무 의미없는 코드라고 할 수 있습니다.
연산자 훑어보기 - 복합 할당 연산자
자바스크립트 식에 대해 이론적으로 살펴본 김에, 실제 우리가 자주 사용하는 연산자들을 한번 훑어보겠습니다.
첫번째는 할당 연산자입니다.
x = x + y;
x += y;
x = x / y;
x /= y;일반적으로 할당 연산자는 변수에 값을 할당하는 데 쓰이는, =를 의미합니다. =는 굳이 설명할 필요가 없을 거에요.
중요한 것은 위 코드블럭에 나와 있는 것과 같은 복합 할당 연산자입니다. 복합 할당 연산자는 코드를 더 간결하게 만들어주기 때문에 실제로 자바스크립트 코드를 짤 때 매우 요긴하게 사용할 수 있습니다.
예시에는 덧셈과 나눗셈만 나와있지만, 복합 할당 연산자는 기본적으로 사칙연산에 모두 확장이 가능합니다.
연산자 훑어보기 - 구조 분해 할당 연산자
영어로는 디스트럭쳐링 할당이라고도 합니다. 바로 예시를 살펴보겠습니다.
const colors = ['red', 'blue', 'green'];
// 구조 분해 미활용
let color1 = colors[0];
let color2 = colors[1];
let color3 = colors[2];
// 구조 분해 활용
let [color1, color2, color3] = colors;만약 배열 안의 아이템들을 개별적인 변수에 담고 싶다고 생각해보세요. 구조 분해 할당을 쓰지 않으면 개별 변수들을 다 만들어서 하나하나 담아야 합니다.
하지만 아래쪽 구조 분해 할당 연산을 통해 한 줄의 코드로 간단하게 아이템들을 변수에 담을 수 있습니다.
구조 분해 할당은 이 외에도 유용한 쓰임새가 많은데, 따로 게시글을 하나 만들어서 다루어 보도록 하겠습니다.
연산자 훑어보기 - 비교 연산자
간단하게 한마디로 먼저 정의하자면, 두 가지 값을 비교해서 그것이 맞는지, 틀린지(Boolean) 판별해주는 연산자라고 이해할 수 있습니다.
let a = 10;
let b = '10';
console.log(a == b) // true
console.log(a === b) // false비교 연산자에서 꼭 알고 가야할 연산자 두 가지만 가져와 봤습니다.
변수 a는 숫자 10이고, 변수 b는 문자 10입니다.
==는 동등 비교 연산자인데, 이 친구는 문자 10과 숫자 10이 타입이 다르지만 결국 같은 숫자를 베이스로 하기 때문에 두 변수가 같다고 인식합니다.
이에 반해 일치 비교 연산자, 즉 ===는 두 변수의 데이터 타입이 다르다는 점까지 엄밀히 분석하여 false를 반환합니다.
실제로 일치 연산자가 필요한 경우에는 일치 비교 연산자가 더욱 선호되긴 합니다.
연산자 훑어보기 - 논리 연산자
논리 연산자도 자바스크립트 내에서 흔하게 쓰이는 연산자 유형입니다. 어려운 건 전혀 없어요. 그냥 OR와 AND라고 생각하시면 됩니다.
let a = 10;
let b = 100;
console.log(a === 10 && b === 10) // false
console.log(a === 10 || b === 10) // true
console.log(!a) // false&&는 논리 AND 연산자로, 두 항 모두 참이여야 참을 반환합니다. 첫 번째 로그를 보세요. a는 10이지만, b는 10이 아니기 때문에 false를 반환합니다.
두 번째에는 논리 OR 연산자인 ||이 사용되었는데, 둘 중 하나만 참이어도 참을 반환합니다.
!는 논리 NOT 연산자로, 참인 것을 거짓으로, 거짓을 참으로 변환해줍니다.
마치며
오늘은 자바스크립트의 식과 각종 연산자에 대해 다뤄보았습니다.
본문에서는 포함시키지 않았는데, 자바스크립트의 여러 연산자들은 코드 내에서 동작할 때 저마다의 우선 순위를 가지고 있습니다.
그래서 하나의 코드 안에서 여러 연산자를 사용할 때 해당 우선 순위에 따라 실행 순서가 결정되는 것입니다. 이 우선 순위에 대한 내용은 앞서 첨부한 MDN 홈페이지 링크를 한번 참고해보세요.
