2.2 단락평가 11:28

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

2.2) 단락 평가

해결된 질문

작성

수정됨

printName(); 이렇게 매개변수 값을 안줬을때

name 값에 undefine이 들어가는거까지는 이해했습니다.

여기 콘솔로그에서 "person의 값이 없음" 이 뜨는이유를 모르겠어요 ,, name || "person의 값이 없음" 이라면 name은 이미 언디파인이기때문에 그다음 문장이 출력되는걸까요?

그리고 그 다음 printName({name:"정환"}) 여기서 이름이 출력되는 이유도 헷깔려요 ,, const name = person && person.name; 객체와 객체의 프로퍼티 값 중 왜 프로퍼티 값이 출력되는걸까요?

 {
console.log(name || "person의 값이 없음");
}
printName(); // "person의 값이 없음"
// undefine 값이 갈때는 name 에 언디파인 값이 가고 콘솔로그에서 undefine || truthy 기때문에 truthy 값이 출력된다

javascript react node.js

답변 2

이정환 Winterlood

지식공유자

안녕하세요 이정환입니다.

질문주신 코드가 조금 잘린것 같아요🥲
따라서 확실하지는 않지만 강의 코드와 동일하다고 생각하고 답변드리겠습니다.

name을 전달하지 않았을 경우 "person의 값이 없음"이 출력되고, 반대로 name을 전달했을 경우 name의 값이 출력되는 이유는 자바스크립트의 Truthy & Falsy 그리고 단락평가 때문입니다.

우선 Truthy & Falsy란 특정 값이 true나 false처럼 참 또는 거짓을 의미하는 값은 아님에도 조건식 내부에서 참 또는 거짓으로 평가되는 성질을 말하는데요 바로 이전 챕터인 2.1 에서 다루고 있으니 혹시 기억이 안나신다면 참고하시면 좋겠습니다.

Truthy & Fasly 한 값이 ||(OR)나 &&(AND) 비교문에 사용되면 비교 결과식의 결과 값이 true, false가 되는게 아닌 Truthy & Falsy한 값 자체가 됩니다. 예를 들어 다음 비교문의 결과값은 true가 아닌 1이 됩니다.

const result = 1 || false;
// 결과 : 1

동일한 원리에서 다음 비교문의 결과값은 1이 됩니다.
첫 항 0은 falsy한 값이므로 단락 평가가 이루어지지 않아 두번째 항을 살펴보게 되고 이 두번째 항의 값이 1로 Truthy한 값이므로 해당 값 자체가 이 비교식의 결과가 됩니다.

const result = 0 || 1;

마지막으로 이번에도 동일한 원리로 다음 비교문의 결과값은 0이 됩니다.
첫 항 0은 Falsy한 값입니다. 따라서 두 항이 모두 참이어야 하는 &&(AND) 비교가 첫 항부터 실패하여 그냥 첫 항의 결과값을 리턴하게 되는것이죠

const result = 0 && 1;

이해가 어려우시다면 댓글 달아주세요, 추가적으로 다음 아티클을 살펴보시는 것도 좋겠습니다.

https://reactjs.winterlood.com/9290a7b9-3636-4f61-b4b4-8970c2ca77c7

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

함수 내에서 주어진 코드가 어떻게 동작하는지에 대해 설명해드릴게요.

printName 함수 내에서 console.log(name || "person의 값이 없음"); 은 JavaScript의 논리 연산자 단락 평가를 활용하고 있습니다. 이 코드의 의미는, name이 falsy 값(즉, null, undefined, 0, false, NaN, "" 등)일 경우 “person의 값이 없음”이라는 문자열을 콘솔에 출력하라는 것입니다. 따라서, name이 undefined인 경우에는 “person의 값이 없음”이 출력됩니다.

이제 printName({name:"정환"})의 경우를 설명하겠습니다. const name = person && person.name; 이 부분에서, person 객체가 존재하고 truthy한 값이라면 person.name을 평가하게 됩니다. person이 {name:"정환"}이라는 객체라면, person.name이 “정환”이므로 이 값은 name에 할당됩니다. name이 이제 “정환”이라는 truthy 값이 되므로, console.log(name || "person의 값이 없음");은 "정환"을 출력하게 되는 것입니다.

이 과정은 자바스크립트의 논리 연산자와 변수 할당의 특성을 활용해 객체와 객체의 프로퍼티 값 평가를 개선한 좋은 예입니다.

아래 질문들과 답변을 참고하시면서 이러한 개념을 더 깊게 이해하실 수 있습니다:

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

2.2 단락평가 11:28