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

안녕하세요.

display 함수 안에서 왜 group 변수를 초기화 하지 않고 변수만 선언한 이유는 (물론 안전하게 공백 등으로 초기화를 해줘도 좋지만) 변수에 들어갈 값이 바로 아래에서 결정되기 때문입니다.

설명은 아래 주석을 참고해주세요!

const display = (bmi) => {
  const result = document.querySelector('.result');
  // 여기서 선언된 result는 const 상수이므로 반드시 우리가 사용하려는 객체로 초기화가 되어야 합니다. const 상수는 선언과 동시에 초기화가 이루어져야 하고, 값이 변경되지 않습니다.
 // 특별한 이유 = 값이 중간에 변경 되거나 확실하지 않은 어쩔 수 없는 경우를 제외하고는, 자바스크립트는 const를 기본으로 사용하시는 것이 좋습니다.

  let group;
  // 여기서 group 변수는 선언만 되고 초기화 되지 않았습니다.
  // 바로 아래 if 안에 걸리는 구간에서 값이 할당됩니다.
  // 왜 if 안에서 선언하면 안되느냐? = 각각의 변수가 아닌 하나의 변수를 사용하기 위해서 밖에서 선언한 것입니다.
  // 왜 애초에 위에서 초기화 하지 않느냐? = 여기 선 값을 결정하지 못했기 때문입니다. 해당 예제가 간단한 예제라서 이렇게 한 바닥에 다 보이게끔 작성을 했는데요. 꼭 이렇게만 해야 한다는 법칙 같은 것은 없으며, 만약 이 구조가 싫다면 값을 결정하는 구간을 선행하게끔 로직을 변경하시면 됩니다! (예 : 텍스트를 반환하는 함수를 따로 만들어서, display 함수에서는 업데이트만 해준다)

  if (bmi >= 30.0) {
    group = '중등도비만';
  } else if (bmi >= 25.0) {
    group = '경도비만';
  } else if (bmi >= 23.0) {
    group = '과체중';
  } else if (bmi >= 18.5) {
    group = '정상';
  } else {
    group = '저체중';
  }

  result.innerText = `${bmi} → ${group} 입니다.`;
};

다음 링크를 함께 참고해보시면 더 좋을 것 같습니다.

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/const

   

안녕하세요, 인프런 AI 인턴입니다. 부드러운 족제비님.

display 함수 내에서 let group;와 같은 변수 선언은 변수 group을 함수의 지역 변수로 설정하는 것입니다. 이는 함수 내부에서 해당 변수를 가리킬 공간을 미리 확보하고, 추후 조건문이나 로직에 의해서 값을 할당하기 위함입니다. 예를 들어, group 변수는 특정 조건에 의해 값이 지정될 수 있으며, 이는 함수 내에서 공통적으로 접근할 수 있게 합니다.

이 방법을 사용함으로써 함수 내부에서 정의되고 사용되는 변수가 불필요하게 전역으로 설정되지 않고, 해당 함수 내의 로직 집중도와 가독성이 높아집니다. 즉, group 변수는 함수를 호출할 때마다 초기화되며, 다른 함수 호출에 영향을 주지 않고, 해당 함수 내에서만의 연산에 사용될 수 있습니다.

다음 링크를 참고하시면 더 도움되실 것 같습니다:
- 깃허브 자료에 bmi 계산기 문의
- bmi 계산기 css가 적용이 안됩니다

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