[REAL Deep Dive into JS] 5. 표현식과 문

young_pallete·2022년 8월 22일
0

REAL JavaScript Deep Dive

목록 보기
5/46
post-custom-banner

🌈 시작하며

벌써 5장이네요. 아무래도 2장씩 하면 9월 초까지는 모든 여정이 끝날 것 같아요.
사실 갈 길이 좀 멀어서, 나름대로 압박감은 느끼고 있습니다. 분명 지식선에서 중복되는 이야기들도 많아요.

그런데, 일을 하면서 느꼈던 것인데, 지금은 그 조금씩 잘못 쌓인 지식들을 검토할 때라는 것이었어요.

작년에 엄청 죽을듯이 공부하면서 웬만한 지식은 이미 알고 있다고 생각했는데, 어느 순간 잘못 틀어박혀버린 지식들이 나중에 디버깅할 때 저를 괴롭히더라구요.
(예컨대 빌드라던지, 빌드라던지...)

그래서 저는 좀 더 기본에 집중하며 천천히 다가가려합니다. 아, 물론 다른 프로젝트들과 알고리즘도 별도로 공부하면서요! 😉

그럼, 시작해볼까요~


🚦 본론

실무를 하면서 이 파트를 보았을 때 느낀 것은, 잘 정의해서 나쁠 건 전혀 없다입니다.
잘 나오는 단어들도 있지만 대개는 커뮤니케이션할 때 자주 쓰지는 않았던 것 같아요.
(예컨대 그냥 '이 코드에서는~~'으로 다 모든 것이 표현되죠 😂)

하지만 원문적으로 설명할 때는 분명히 자주 언급되는 개념이고 매우 중요합니다. 공부할 때에는 제대로 짚고 넘어가야 할 지식들입니다.

이전 글에서 변수를 설명할 때 변할 수 있는 값들을 메모리 상에 담은 주소를 기억하는 식별자이라고 했던 것으로 기억합니다.

이때의 값이란, <모던 자바스크립트 Deep Dive>에 따르면 식이 평가되어 생성된 결과라고 설명되어 있네요.

단순히 메모리에 저장된 값이 정확한 값이 아닐 수 있습니다.
이진수로 모든 문자를 0, 1로 구분할 때에 있어 0100 0001Number 타입을 통해 65를 지칭할 수도 있지만, String에서는 ASCII를 통해 A라고 말할 수도 있습니다.

정리하자면, 값은 식을 통한 결과를 의미하며, 이러한 값을 우리는 변수에 담는다고 보면 되겠네요! 😉

값을 생성하는 대표적인 방법, 리터럴

리터럴은 정~말 많이 쓰이는 말인데 가끔 헷갈리니 꼭 익히는 게 좋을 것 같아요.

literal의 의미가 무엇이죠? literal은 '융통성 없는'이라는 뜻을 갖고 있습니다. 쉽게 말하자면 모호하지 않다는 의미기도 하죠.

따라서 리터럴은 정말 딱 고정된 값을 생성하는 거에요. 우리가 이해할 수 있는 문자, 기호를 사용하여 값을 만들어내는 표기법인 거죠.

예컨대 '1'은 문자 리터럴입니다. 1은 정수 리터럴이구요.
{ a: 1 }은 객체 리터럴이며, [1, 2]는 배열 리터럴이에요.
우리가 평소에 값을 생성하는 일반적인 표기 방식을, 리터럴이라고 쉽게 유추할 수 있겠죠? 😉


문(statement)

const result = 1 + 2;

우리는 이러한 코드들을 계속해서 쌓아서 결과적으로 하나의 동작할 수 있는 프로그램을 만들어냅니다.

이러한 프로그램들은 결국, 하나하나의 코드가 실행되면서 나타난 결과물이죠.
이때, 하나하나 실행 될 수 있는 프로그램 기본 단위를 문(statement)이라고 합니다.

결국 위의 식도 실행될 때 저 식 자체를 실행하게 되므로 이라고 할 수 있는 거죠!

그런데, 문도 나눌 수 있는 거 아닌가요?

맞습니다. 우리는 그렇게 세부적으로 문을 세부적인 요소로 나누는 것을 대개 tokenize한다고 해요.

여기서 우리는 토큰이라는 것도 알아가면 좋겠네요. 토큰은 문법적인 의미를 가진 최소한의 요소에요!


표현식

문(statement)에서 설명했을 때 의아한 것이 보이는 군요.

1 + 2는 리터럴일까요?

아닙니다. 1 + 2라는 값은 리터럴과 연산자를 통해 새로운 값을 생성하는 것이므로, 뭔가 더 새로운 말로 표현을 할 필요가 있어요!

우리는 생각보다 리터럴이 아닌 다양한 식으로 코드를 짜게 됩니다. 위처럼 말이죠!
따라서 어떤 특정한 식을 통해 결과 값(이 값은 새로운 값일 수도 있고, 참조된 값일 수도 있어요.)을 만들 수 있는 문들을 작성하게 돼죠. 이것들을 우리는 표현식이라 부릅니다. 간단하죠! 😆

const result = 1 + 2;

이 문은 result라는 변수와, 1 + 2라는 표현식으로 구성되어 있군요! 😮
이러한 식들은 결국 실행을 마치고 나면 특정한 결과 값을 만들어내요. 그렇기 때문에 1 + 2는 표현식이라고 할 수 있는 거죠.

여기서 유추할 수 있는 게 있어요. 우리는 변수에 표현식을 통해 변수에 결과 값의 주소를 저장할 수 있는데요.

표현식인 문은, 반드시 오른쪽에서 결과 값으로 할당될 수 있겠죠!

따라서 '이게 표현식이 맞나?' 싶으면, 오른쪽에 할당해주세요.
그렇다면, 표현식은 '결과값'을 항상 내포하기 때문에 표현식이 아닌지 확인이 가능하답니다. 👐🏻


✨ 마치며

사실 위의 말들을 저도 완전히 '이게 뭐다!'라고 쓰지 않으면서 개발했던 것 같아요. (a.k.a. 이 코드 보시면... 😂)
그렇지만, 하나하나 짚어 보니 결국 이 모든 개념들이 집합처럼 얽혀있다는 것이 꽤나 흥미로웠어요.

결국 문 > 표현식 > 리터럴로 점차적으로 단위가 좁혀지는 이 과정이 너무나 재밌지 않나요!
역시 개발 공부는 재밌는 것 같아요.🥰

이상! 🌈

profile
People are scared of falling to the bottom but born from there. What they've lost is nth. 😉
post-custom-banner

0개의 댓글