JavaScript - 헷갈렸던 문제 2

`handleEdit` 라는 이름을 가진 함수를 구현해 봅시다.
- 이 함수는 `nickname`, `interests` 라는 두 string을 인자로 받습니다. `nickname`은 유저의 닉네임을, `interests` 는 유저의 관심사를 의미합니다.
- `interests` 에는 여러 관심사를 적을 수 있습니다. 그 때 그 관심사의 구분을 콤마(`,`)를 이용합니다.
- `nickname` 과 `interests` 가 문제 없이 잘 들어왔다면 유저 정보를 효율적으로 관리하기 위해서 Object에 이 정보를 담아서 관리할 겁니다.
- 예를 들어 입력 값이 `nickname = "뚜비"` , `interests = "방탈출,테니스,멍 때리기"` 라고 했을 때
- 아래와 같은 Object를 리턴하도록 구현해 주세요.

 

<주의>

  - `interests` 는 배열입니다.
  - `interests` 를 적을 때 콤마(`,`) 뒤에 스페이스는 지워주세요.

 

<예상 답변>

      {
          nickname: "뚜비",
          interests: ["방탈출","테니스","멍 때리기"],
          bio: "제 닉네임은 뚜비입니다. 취미는 방탈출,테니스,멍 때리기입니다."
      }

 

내가 작성한 코드

const handleEdit = (nickname, interests) => {
  const obj = {};
  const arr = interests.split(',');
  Object.defineProperty(obj, "nickname", { value: nickname, enumerable: true });
  Object.defineProperty(obj, "interests", { value: arr, enumerable: true });
  Object.defineProperty(obj, "bio", { value: `제 닉네임은 ${nickname}입니다. 취미는 ${interests}입니다.`, enumerable: true });
  return obj;
}
console.log(handleEdit("가나다", "방탈출,테니스,멍때리기")); // 확인을 위한 console

해당 문제를 풀기위해 사용한 코드들

 

1. string.split()

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/split

String.prototype.split() - JavaScript | MDN

해당 string에서 어떤 문자로 끊어서 배열로 return하는 함수 split()을 사용하였다.

split()
split(separator)
split(separator, limit)

separator는 어떤 걸 기준으로 string을 끊을것인지 할대 기준을 작성해 주면 되고, 

 

limit는 해당 문자열의 최대 개수를 의미한다.

 

여기선 arr변수 안에 interests를 ,를 기준으로 짤라서 배열로 할당하였다.

 

2. Object.defineProperty

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

Object.defineProperty() - JavaScript | MDN

Object.defineProperty()

위 정적 메서드는 객체에 새로운 속성을 직접 정의하거나 이미 존재하는 속성을 수정한 후, 해당 객체를 반환합니다.

 

Object.defineProperty(obj, prop, descriptor)

obj : 실행할 객체명 적기

prop : 그 객체의 property(key)값 작성

descriptor: 새로 정의하거나 수정하려는 속성을 기술하는 객체.

 

 Object.defineProperty(obj, "interests", { value: arr, enumerable: true });

 

요 코드로 설명을 하면 obj객체에 interests라는 property(key)를 가지고 value는 arr이고 , enumerable: true의 속성들을 부여했다

여기서 enumerable은 해당 속성을 열거 가능한지 안하는지 하는 속성이다 true/false 값이 있다.

 

3. `${변수}`

 

  Object.defineProperty(obj, "bio", { value: `제 닉네임은 ${nickname}입니다. 취미는 ${interests}입니다.`, enumerable: true });

 

요 코드에서 설명하자면

 

일단 `는 작은따옴표 가 아니라 맥북 기준 option + ~ 을 사용해야한다(tistory에선 누르기만 해도 나오네요 하하)

${} 여기 안에 변수 를 적으면 해당 변수의 value가 자동으로 들어간다 해당 것은 string으로 리턴된다.