inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

2.2) 단락 평가

2.2)단락 평가 11:28 인수 전달 관련하여 질문드립니다.

해결된 질문

243

김보미

작성한 질문수 1

0

안녕하세요, 2.2)단락 평가 11:28 인수 전달 관련하여 질문 드립니다.

 

function printName(person){
    const name= person && person.name;
    // const age = person && person.age;
    console.log(name || "person의 값이 없습니다.")
    // console.log(age || "나이를 추정할 수 없습니다.")
}

printName({name:"이정환"});

객체 값을 인수로 전달했을 때 name 변수에 인수로 전달받은 객체 값들이 정상적으로 저장되고 콘솔 창을 통해 출력되잖아요.

 

printName함수의 person라는 매개 변수 형식?을 어디에서도 선언, 정의하지 않았는데 객체 타입으로 함수 호출 시 정상 출력되는 점이 혼란스럽습니다.

 

이전에 학습한 7가지 Truthy 한 값들 중 객체가 속해 있기에 Truthy 가 나오고, 그런 성질을 이용하여 변수에 name : "이정환" 이 저장되어 콘솔창에서 확인 가능한 결과가 나온다고 이해하면 될까요?

 

친절히 설명해주셔서 감사합니다.

javascript react node.js

답변 2

1

이정환 Winterlood

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

const name = person && person.name 

우선 위 코드의 동작은 다음과 같습니다

  1. person이 truthy한지 falsy한지 확인한다.

     

    1. person이 truthy 하다면 person.name을 반환한다.

    2. person이 falsy 하다면 person을 그대로 반환한다

따라서 person의 값으로 {name:"이정환"} 이라는 객체가 전달되었을 경우 이는 truthy 한 값으로 취급되므로 person.name의 값이 name 변수에 저장되는 원리입니다.

결론적으로 보미님이 잘 이해하신것 같습니다 😃

0

김보미

추가 설명 감사합니다!😊😊

1

인프런 AI 인턴

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

김보미님의 질문에 대해, 유사한 질문과 그에 대한 답변을 찾아봤습니다.

해당 질문은 함수의 매개변수로 객체를 전달하고, 이 객체에서 특정 프로퍼티 값을 추출하는 과정에 대한 이해를 요구하는 것으로 보입니다. 질문자님께서는 printName 함수에서 person이라는 매개변수를 어떻게 객체 타입으로 인식하고, 정상적으로 동작하는지에 대해 궁금해하셨습니다.

질문자님의 상황과 상당히 유사한 질문이 이전에도 있었고, 이에 대한 답변을 분석해 보면 다음과 같습니다:

매개변수를 넣는 이유

위 질문에서도 printName 함수를 통해 인수를 전달받고, 이를 통해 조건부 논리(단락 평가)를 사용하여 객체의 name 프로퍼티를 출력하는 과정에 대한 해명이 이루어졌습니다. 함수에서 매개변수를 선언하는 과정은 해당 함수의 로컬 스코프에서 사용할 변수들을 정의하는 것입니다. 인수로 전달된 객체는 함수 호출 시 매개변수에 할당되며, 이 때 매개변수가 어떤 타입의 데이터든 받을 수 있다는 점에서 JavaScript의 유연성을 보여줍니다. 따라서 person이라는 매개변수에 객체를 전달하게 되면, 해당 매개변수는 전달 받은 객체를 참조하게 되고, 이후 객체의 프로퍼티에 접근하여 사용할 수 있게 됩니다.

또한, JavaScript에서는 값이 존재하면(undefined, null, false, 0, NaN, '' 이 아닌 경우) 해당 값은 Truthy로 간주됩니다. 객체는 이러한 Truthy 값에 해당하므로, 매개변수로 전달된 객체는 person && person.name과 같은 단락 평가에서 person 객체가 존재한다면 person.name을 통해 name 값에 접근할 수 있게 됩니다.

따라서 질문자님이 이해하신 바와 같이, 객체가 Truthy 성질을 가지므로 해당 로직이 정상 작동하는 것입니다.

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

0

김보미

이해되었습니다. 감사합니다!

useEffect와 lifecycle문의

0

28

2

프론트엔드 학습 수준 문의

0

39

2

리액트 챕터별 코드에서 eslint 설정파일이 없어요

0

48

2

데이터 로딩중 화면만 계속 나와요!!

0

55

2

퍼블리셔일경우 어느정도 수준까지 강의를 들어야할까요

0

79

2

이후의 커리큘럼 문의

0

102

2

실슬환경 설정에서 save후 console.log 부분이 새로고침이 안되는현상입니다.

0

50

2

최적화 관련 질문있습니다 (useMemo 등)

0

84

3

프로바이더 컴포넌트의 위치는 어떤 기준인가요?

1

82

3

Date 객체에 관련하여 질문드립니다.

0

85

2

리액트 개정판 교재 질문

0

60

2

예제코드가 안나와요!

0

78

2

select a variant 선택에서 javascript와 javascript+react compiler 중 무엇을 선택해야하나요? com

0

108

2

onMouseEnter 관련 문의 드립니다

0

92

3

배열의 렌더링 관련 질문 드립니다.

0

73

2

2:40초 refObj를 콘솔로 출력시 오류가 발생합니다.

0

113

2

TS, 리액트 강의중에 뭘 먼저 수강하는게 좋을까요?

0

137

2

useCallback 적용한 onCreate, onUpdate, onDelete 함수..

0

70

1

vs code 자동완성관련 문의

0

113

2

91강 useEffect내에서 상태변화함수 호출시 발생하는 에러

1

179

2

87강 필터 함수 질문

0

69

2

useRef, useState count 비교

0

67

2

안된다고했던 이유가 무엇이었는지 모르겠습니다

0

90

2

85강에서 객체를 왜 클래스로 만들어서 new 하지 않는건지 궁금합니다.

0

75

2