원문 : https://www.joshwcomeau.com/javascript/statements-vs-expressions/
몇 년 전 지역 코딩 부트캠프에서 웹 개발을 가르치고 있던 저에게 학생이 저에게 이런 질문을 했습니다.
자바스크립트에서 "문"과 "표현식"의 차이점이 뭔가요?
답을 알고 있는 것 같았지만 말로 설명할수는 없었습니다. 감은 있었지만 실제 지식은 놀라울 정도로 모호했습니다.
가르치는 것만큼 겸손한 것은 없습니다 😅. 학생들은 우리가 이해하는 "모호한 부분"을 알아내는 재주가 있습니다.
그 이후로 이 질문이 가장 중요하다는 것을 깨달았습니다. 이것은 수많은 자바스크립트 지식에 도움이 되는 지지기반입니다.
이것은 특히 React 개발자에게 해당됩니다. 기억해야 하고 항상 따라야 하는 것을 잊어버리는 JSX 규칙의 대부분은 문/표현식 이중성의 결과입니다.
이 블로그 게시물에서 저는 이 구분에 대해 몇 가지 깨달은 것과 일상 업무에서 이 정보를 어떻게 사용할 수 있는지 공유할 것입니다.
대상 독자
이 튜토리얼은 기본 자바스크립트 구문에 익숙하다고 가정했지만, 그렇지 않은 초보자에게도 친숙하도록 작성되었습니다.
튜토리얼이 끝날 무렵, 우리는 몇 가지 React 의미를 살펴보겠습니다. 그리고 이 섹션에서는 약간의 React 경험이 필요합니다. React 개발자가 아니라면 이 섹션을 건너뛰어도 됩니다. 나머지 튜토리얼은 여전히 많은 가치를 제공할 것입니다!
표현식(Expressions)
기본적으로 표현식은 값을 생성하는 자바스크립트 코드입니다.
예를 들어 다음은 모두 표현식입니다.
1
→1
생성"hello"
→"hello"
생성5 * 10
→50
생성num > 100
→true
또는false
를 생성isHappy ? "🙂" : "🙁"
→ emoji 생성[1, 2, 3].pop()
→ 숫자3
생성
표현식은 표현식을 포함할 수 있습니다. 예를 들어, 이 JS 코드 청크에 몇 개의 표현식이 있을까요? 추측한 다음 슬라이더를 드래그하여 각각이 하이라이트 되었는지 확인합니다.
역주 : 번역본에서는 슬라이더가 빠져있습니다. 원문에 가시면 슬라이더 애니메이션과 함께 해당 내용을 확인해보실 수 있습니다.
표현식 #1: 전체 표현식
이 코드 청크는 숫자 "12"를 생성하는 표현식입니다.
표현식 #2: 괄호 안의 덧셈
이 하위 표현식은 괄호 때문에 먼저 평가되고 "6"으로 해석됩니다.
표현식 #3: 더하고 있는 첫 번째 숫자
개별 숫자는 값을 생성하기 때문에 그 자체가 표현식입니다. 이 표현식은 "5"로 해석됩니다.
표현식 #4: 더하고 있는 두 번째 숫자
같은 로직으로 이 숫자는 숫자 "1"을 생성하는 표현식이기도 합니다.
표현식 #5: 곱하는 수
이 숫자는 "2"로 해석되는 최종 표현식을 구성합니다.
문(Statements)
자바스크립트 프로그램은 일련의 문입니다. 각 문은 컴퓨터가 무언가를 하도록 지시하는 것입니다.
다음은 자바스크립트 문의 몇 가지 예입니다.
let hi = 5;
if (hi > 10) {
// More statements here
}
throw new Error('Something exploded!');
여기에 대해 저는 문은 프로그램을 함께 유지하는 단단한 구조이고 표현식은 세부사항을 채우는 것 이라 생각하는 편 입니다.
문에는 표현식을 위한 "슬롯"이 있는 경우가 많습니다. 우리는 그 슬롯에 우리가 좋아하는 표현식을 넣을 수 있습니다.
예를 들어, 변수 선언에는 표현식 슬롯이 있습니다.
let hi = /* 표현식 일부 */;
해당 슬롯의 앞서 본 모든 표현식을 사용할 수 있습니다.
let hi = 1;
let hi = "hello";
let hi = 5 * 10;
let hi = num > 100;
let hi = isHappy ? "🙂" : "🙁";
let hi = [1, 2, 3].pop();
유효한 구문에 관해서 표현식은 교환 가능합니다. 문에 표현식 슬롯이 있는 경우 거기에 표현식을 넣으면 코드가 실행됩니다. 문법 에러가 발생하지 않습니다.
즉, 여전히 다른 문제에 직면할 수 있습니다. 예를 들어 다음 코드는 문법 상 맞지만 실행하려고 하면 무한 루프가 발생해서 브라우저 탭이 충돌합니다.
while ("hello") {
// "hello"는 절대 변경되지 않기 때문에
// 이 루프는 스크립트가 충돌할 때까지 계속해서 실행됩니다.
// 문법 상 맞지만 여전히 문제가 있습니다.
}
편리한 트릭
JS 청크가 표현식인지 문인지 알고 싶으신가요? 로그를 확인해보세요!
console.log(/* Some chunk of JS here */);
만약 실행된다면 그 코드는 표현식입니다. 에러가 발생하면 문(또는 잘못된 JS)입니다.
보너스로, 브라우저 콘솔에 출력되기 때문에 표현식이 어떻게 해석되는지 볼 수도 있습니다!
이것은 모든 함수 인수가 표현식이어야 하기 때문에 동작합니다. 표현식은 값을 생성하고 그 값은 함수에 전달됩니다. 문은 값을 생성하지 않으므로 함수 인수로 사용할 수 없습니다.
경험 많은 개발자로서도 console.log
에 의존합니다. 그것은 놀랍도록 다재다능한 도구입니다!
문으로서의 표현식
다음 1 + 2 + 3
은 표현식입니다.
이 표현식만 포함하는 JS 파일을 생성하면 어떻게 되나요? 다음 콘텐츠를 test.js
로 저장한다고 가정해 보겠습니다.
1 + 2 + 3
이 파일에는 몇 개의 문이 있습니까? 0개 아니면 1개?
상황을 설명해보겠습니다. 표현식은 단독으로 존재할 수 없습니다. 그들은 항상 문의 일부입니다. 따라서 이 경우 다음과 같은 문이 있습니다.
/* 표현식 슬롯 */
문은 표현식 슬롯을 제외하고는 본질적으로 비어 있습니다. 우리의 표현식 1 + 2 + 3
이 이 슬롯을 채우면 우리의 문이 완성됩니다.
즉, 다음 행은 모두 올바른 문입니다.
// 문 1:
let hi = /* 표현식 슬롯 */;
// 문 2:
return /* 표현식 슬롯 */;
// 문 3:
if (/* 표현식 슬롯 */) { }
// 문 4:
/* 표현식 슬롯 */
종종 튜토리얼에서는 표현식이 문이라고 잘못 설명하지만, 이는 옳지 않습니다. 표현식과 문은 별개 입니다. 그러나 추가 문자를 제공하지 않아도 문은 표현식을 감쌀수 있습니다. 투명한 비닐 랩으로 샌드위치를 포장하는 거라고 생각하세요.
문은 일반적으로 문의 끝을 표시하는 세미콜론으로 끝납니다. 세미콜론은 if
문, while
루프 및 함수 선언과 같은 특정 문에는 필요하지 않습니다.
React에서의 실질적인 의미
이전에 React로 작업한 적이 있다면 구불구불한 괄호 ({ 및 })
를 사용해서 이와 같이 JSX 내에 약간의 자바스크립트를 포함할 수 있다는 점을 알고 있을 겁니다.
function CountdownClock({ secondsRemaining }) {
return (
<div>
Time left:
{Math.round(secondsRemaining / 60)} minutes!
</div>
);
}
이것이 React를 마법처럼 만드는 부분입니다. 자바스크립트의 모든 기능을 사용할 수 있습니다.
그러나 중괄호 안에 모든 자바스크립트를 넣을 수 없다는 함정이 있습니다. 구체적으로 말하면 문이 아닌 표현식만 포함할 수 있습니다. 구불구불한 대괄호는 기본적으로 JSX 내에 표현식 슬롯을 만듭니다.
if/else 문과 같은 문을 여기에 포함하려고 하면 에러가 발생합니다.
function CountdownClock({ secondsRemaining }) {
return (
// 🚫 구문 에러 발생
<div>
{if (secondsRemaining > 0) {
`${secondsRemaining} seconds left`
} else {
"Time expired!"
}}
</div>
);
}
이것은 문이 값을 생성하지 않고 표현식만 값을 생성하기 때문에 터집니다. JSX에 if/else 로직을 포함하려면 삼항 연산자 표현식을 사용해야 합니다.
function CountdownClock({ secondsRemaining }) {
return (
// ✅ 괜찮아요
<div>
{secondsRemaining > 0
? `${secondsRemaining} seconds left`
: "Time expired!"
}
</div>
);
}
이것은 이상한 JSX/React 제한처럼 보일 수 있지만 실제로는 자바스크립트에서 제한합니다.
컴포넌트가 단일 최상위 요소를 반환해야 하는 것처럼 겉보기에 제멋대로인 룰을 보고 React를 비난하는 경우가 많습니다. 그러나 대부분의 경우 React는 자바스크립트 제한 사항에 대해 경고합니다.
문과 표현식의 차이점을 이해하는 것은 React 경고 및 버그의 전체 범주를 이해하기 위한 중요한 첫 단계입니다. 또한 JSX가 자바스크립트로 컴파일되는 방식과 React의 조정 및 렌더링 주기가 작동하는 방식에 대해서도 배워야 합니다. 하지만 이러한 주제는 이 블로그 게시물의 범위를 벗어납니다!
덧붙여서, 저는 제가 React를 배울 때 있었으면 하는 재료가 있는 종합적인 React 코스를 만들고 있습니다. Joy of React라고 하며 오늘 업데이트를 신청할 수 있습니다!
요약하면
자바스크립트 프로그램은 일련의 문으로 구성됩니다. 각 문은 변수 생성, if/else 조건 실행 또는 루프 시작과 같은 작업을 수행하는 명령입니다.
표현식은 값을 생성하고 이러한 값은 Super Nintendo가 하는 일을 변경하는 Super Nintendo 카트리지처럼 문에 삽입됩니다.
문이 비어 있는 경우에도 표현식은 항상 문의 일부입니다. 예를 들어, 아래 코드는 for
문을 사용하여 without 루프를 실행하지만 여전히 "빈 래퍼" 문이 포함되어 있습니다.
data.forEach(item => console.log(item));
이를 쉽게 구분하기까지는 시간이 걸릴 수 있지만 이 블로그 게시물을 통해 몇 가지 것들은 명확해졌기를 바랍니다!
'아티클 번역' 카테고리의 다른 글
[번역] 자바스크립트 번들러 만들기 (0) | 2022.12.11 |
---|---|
[번역] 전문가처럼 타입스크립트 infer 사용하기 (0) | 2022.12.11 |
[번역] JavaScript 패키지 매니저 비교 - npm, Yarn 또는 pnpm? (0) | 2022.12.11 |
[번역] React에 SOLID 원칙 적용하기 (0) | 2022.12.11 |
[번역] Reduce에 대한 10가지 필수 JavaScript 트릭 및 팁 (0) | 2022.12.11 |