2.2 단락평가 11:28
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 값이 출력된다
답변 2
0
안녕하세요 이정환입니다.
질문주신 코드가 조금 잘린것 같아요🥲
따라서 확실하지는 않지만 강의 코드와 동일하다고 생각하고 답변드리겠습니다.
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
0
안녕하세요, 인프런 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의 값이 없음");은 "정환"을 출력하게 되는 것입니다.
이 과정은 자바스크립트의 논리 연산자와 변수 할당의 특성을 활용해 객체와 객체의 프로퍼티 값 평가를 개선한 좋은 예입니다.
아래 질문들과 답변을 참고하시면서 이러한 개념을 더 깊게 이해하실 수 있습니다:
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
useEffect와 lifecycle문의
0
26
2
프론트엔드 학습 수준 문의
0
37
2
리액트 챕터별 코드에서 eslint 설정파일이 없어요
0
47
2
데이터 로딩중 화면만 계속 나와요!!
0
53
2
퍼블리셔일경우 어느정도 수준까지 강의를 들어야할까요
0
79
2
이후의 커리큘럼 문의
0
102
2
실슬환경 설정에서 save후 console.log 부분이 새로고침이 안되는현상입니다.
0
50
2
최적화 관련 질문있습니다 (useMemo 등)
0
84
3
프로바이더 컴포넌트의 위치는 어떤 기준인가요?
1
81
3
Date 객체에 관련하여 질문드립니다.
0
84
2
리액트 개정판 교재 질문
0
60
2
예제코드가 안나와요!
0
78
2
select a variant 선택에서 javascript와 javascript+react compiler 중 무엇을 선택해야하나요? com
0
107
2
onMouseEnter 관련 문의 드립니다
0
91
3
배열의 렌더링 관련 질문 드립니다.
0
72
2
2:40초 refObj를 콘솔로 출력시 오류가 발생합니다.
0
112
2
TS, 리액트 강의중에 뭘 먼저 수강하는게 좋을까요?
0
134
2
useCallback 적용한 onCreate, onUpdate, onDelete 함수..
0
69
1
vs code 자동완성관련 문의
0
111
2
91강 useEffect내에서 상태변화함수 호출시 발생하는 에러
1
178
2
87강 필터 함수 질문
0
68
2
useRef, useState count 비교
0
67
2
안된다고했던 이유가 무엇이었는지 모르겠습니다
0
90
2
85강에서 객체를 왜 클래스로 만들어서 new 하지 않는건지 궁금합니다.
0
75
2