정의되지 않을 수 있는 값에서 분해

문제

updateUserProfile 함수를 사용하여 검색할 수 있습니다 user 제공된 user_id , 그런 다음 다른 데이터베이스 쿼리를 사용하여 제공된 email 다른 사용자에 속하지 않으며 제공된 쿼리를 보내는 데이터베이스의 사용자를 마지막으로 업데이트합니다 name 및 email .

문제는 이미 제공된 email 데이터베이스에서 결과는 User 개체 또는 undefined , 사용자를 찾았는지 여부에 따라 다릅니다.
User 개체에는 많은 속성( id , name , email , avatar , password , created_at , updated_at )이 포함되어 있지만 id 제공된 속성과 비교할 user_id 이메일이 어떤 사용자에게도 속하지 않았음을 보장합니다.
id 결과에서 이름을 바꾸거나 findEmailOwner 결과가 User일 수 있기 때문입니다. 개체 또는 undefined , 그래서 다음과 같은 TypeScript 오류 메시지가 나타납니다. "Property 'id' does not exist on type 'User | undefined' .

TLDR: id object 또는 undefined .

function updateUserProfile ({ user_id, name, email }) {
  const user = await usersRepository.findById(user_id);

  if (!user) {
    throw new AppError(`The user was not found.`, 401);
  }

  const { id: findEmailOwner } = await usersRepository.findByEmail(email); // error message: "Property 'id' does not exist on type 'User | undefined'.

  if (typeof findEmailOwner !== 'undefined' && findEmailOwner !== user_id) {
    throw new AppError(`This email cannot be used.`, 401);
  }

  user.name = name;  
  user.email = email;

  return usersRepository.save(user);
}

대답

user인 경우 단락 평가를 사용하여 기본값을 제공할 수 있습니다. 거짓 값( undefined , null , 0 , -0 , 0n , "" 또는 NaN )입니다.

참고 1: id Destructuring으로 검색하려는 속성은 내 데이터베이스의 거짓 값에 할당할 수 없습니다.

참고 2: 하지만 avatar 할당할 수 있는 속성 null 데이터베이스에서는 이 접근 방식이 작동하지 않습니다.

```tsx
// Case 1 - id (cannot contain falsy values)

// user does not exist
const user = undefined
const { id } = user || {}
console.log(id) // undefined (what we expect)

// user exists
const user = {
    id: 'aaaa-aaaa-aaaa-aaaa',
};
const { id } = user || {}
console.log(id) // 'aaaa-aaaa-aaaa-aaaa' (what we expect)

// Result: SUCCESS

//-----------------------------------------

// Case 2 - avatar (can contain null a falsy values)

const user = undefined
const { avatar } = user || {}
console.log(avatar) // undefined (what we expect)

const user = {
    avatar: 'photo.jpg',
};
const { avatar } = user || {}
console.log(avatar) // 'photo.jpg' (what we expect)

const user = {
    avatar: null,
};
const { avatar } = user || {}
console.log(avatar) // undefined (not good, we needed this to be null)

// Result: FAILURE
```

또 다른 접근 방식은 user null 및 undefined 값은 무시됩니다.

참고 1: avatar를 검색하는 경우 이 접근 방식을 사용합니다. 첫 번째 접근 방식이 작동하지 않기 때문에 데이터베이스의 거짓 값( null )에 할당할 수 있는 속성입니다.

참고 2: 이 접근 방식은 덜 관용적이므로 첫 번째 접근 방식이 작동하는 경우에는 사용하지 않습니다.

참고 3: 이 접근 방식은 id .

//Case - avatar (can contain null a falsy values)

const user = undefined
const { avatar } = { ...user }
console.log(avatar) //undefined (what we expect)

const user = {
  avatar: 'picture.jpg',
}
const { avatar } = { ...user }
console.log(avatar) // 'picture.jpg' (what we expect)

const user = {
  avatar: null,
}
const { avatar } = { ...user }
console.log(avatar) // null (what we expect)

// Result: SUCCESS

코드에 단락 평가 접근 방식 적용:

function updateUserProfile ({ user_id, name, email }) {
  const user = await usersRepository.findById(user_id);
  if (!user) {
    throw new AppError(`The user was not found.`, 401);
  }
  const { id: findEmailOwner } = (await usersRepository.findByEmail(email)) || {}; // 1st approach
  if (typeof findEmailOwner !== 'undefined' && findEmailOwner !== user_id) {
    throw new AppError(`This email cannot be used.`, 401);
  }
  user.name = name;
  user.email = email;
  return usersRepository.save(user);
}

TLDR

object 또는 undefined - 단락 평가를 사용합니다.

object 또는 undefined - 개체이거나 정의되지 않은 값에 대해 스프레드 연산자를 사용합니다.

추가 링크

JS/ES6: Destructuring of undefined on Stack Overflow

연락 유지

내 소셜 미디어를 통해 저에게 연락하십시오. DDD, TDD, 모범 사례 및 새로운 Wonder Woman 1982 영화에 대해 이야기해 봅시다. GitHub .

오늘 배운 내용을 말해주세요.