자바스크립트(JS) if / else if / function에 대한 이해 (feat. 점수 기반 추천 프로그램)

Q. 900,000명의 등급을
점수 기준에 따라 다르게 주세요.

 

만약 이런 조건이 주어진다면 단순 작업인데 너무 너무 너~~~~~~~~무 힘들것입니다.

이런 단순 작업을 자바스크립트 언어를 통해 해결하고자 한다면 어떻게 할까요?

​

예시로 든 90만명은 너무 많고, 예를 들어, 학생이 20명 있고, 이 학생들을 점수에 따라 등급을 분류하는 프로그램을 짜야한다고 생각해봅시다. 지금 당장은 학생이 20명이면 금방 점수를 기준으로 등급을 메길 수 있을겁니다.

그런데 만약 숫자가 1000명 , 예시로 든 900,000 이상으로 늘어난다면? 이런 불편함이 컴퓨터 프로그래밍 언어가 발전하게 된 이유입니다. 컴퓨터의 발명이 사실 계산기의 발명과 연관되어있다는 말 다들 한번 쯤은 들어보셨을 겁니다. 

자바스크립트 언어로는 if(조건문) 와 else if / else 를 활용하여 해결이 가능합니다.

전반적인 구조는 이렇게 출력이 됩니다.

 

 

 

1. if문에 대한 이해

​

if문의 경우도 조건부분과 실행 부분을 나눠서 정해줄 수 있습니다. if 부분과 else 부분을 나누어 조건을 만족할 시 그 부분을 실행 시키고, 불만족할 시 아래 부분을 실행시키는 방식 입니다.

​

예시) if 문을 활용해 단순 제품추천 식을 짜본다고 생각해봅시다.

'총점 80점이 넘는다면 이 제품을 추천하고,

못 넘는다면 추천하지 않는 프로그램'

 

작성 코드 공유

// ? 1. 단순히 제품을 추천받는 프로그램

testResult = 90  // ! 내가 추천받은 제품의 점수

if (testResult >= 80) {
  console.log('이 제품은 고객님에게 추천드립니다')
}
else {
  console.log('이 제품은 고객님에게 추천드리지 않습니다.')
}

실행 코드

80점 이상 if문 출력 코드

 

이렇게 출력되는 것을 확인할 수 있습니다. 지금 추천 점수는 90점 이므로, if문의 실행 부분이 작동하여 '이 제품을 추천한다.'가 print 된 것을 확인할 수 있습니다. 그렇다면 만약 점수를 30점으로 입력하면 어떻게 작동할까요? 당연히 밑의 else 문이 실행되는 것을 확인할 수 있습니다.

30점(80점 미만으로 입력했을 때) 실행 코드

결과 값

 

 

 

 

 

2. else if문에 대한 이해

​

그렇다면 만약에 80점 이상 미만이 기준이 아닌 60점과 40점 기준이 또 생긴다면 어떻게 해야 할까요?

 즉 , 위의 경우 단순 if문의 경우 하나의 조건을 만족하는 식을 만들고 실행할 수 있었습니다. 그렇다면 조건이 중간에 하나가 더 있다면 ??!?

 ​if문을 계속해서 써야할까요? 아닙니다! 이럴 경우 쓰는 것이 else if 문입니다. 그냥 두개를 붙여서 코드를 매끄럽게 사용할 수 있다고 이해하시면 이해하기 편할 것 같습니다. 그렇다면 추천 점수를 기준으로

 

'80점 이상은 강력 추천 !

60 이상은 추천 !

40 이상은 보통 !

나머지는 추천 안함!'

을 출력해주는 프로그램

 

 

으로 추천해주는 자바스크립트 코드를 짜보겠습니다. 아까 식에서 조금 더 추가하고 else if 문을 활용한 코드로 짜보시는 것을 추천드립니다.

 

코드 샘플 공유

// ? 2. else if 문을 추가한 프로그램

testResult = 60  // ! 내가 추천받은 제품의 점수

if (testResult >= 80) {
  console.log('강력 추천드립니다');
} else if (testResult >= 60) {
  console.log('추천합니다');
} else if (testResult >= 40) {
  console.log('보통입니다');
} else {
  console.log('추천하지 않습니다');
}

if 부분과 else 부분의 구조는 우리가 위에서 처음부분에 확인을 했으니깐, else if 부분을 중심으로 유의해보고 공부해보시면 됩니다. 어려운 것 전혀 없이 else 부분과 같은 들여쓰기에서 else if 부분을 작성해줍니다! 이때 주의할 점은 ; 세미콜론을 console 부분에 찍으시면 안 됩니다. 주의해서 코드를 작성해주시면 됩니다. 

 

 

3. function 자바스크립트 함수를 활용

 

 이 위의 예시에선 우리가 점수를 지정해 주었는데, 이것을 점수가 들어가면 알아서 분류 및 추천해주는 함수가 있다면 우리가 고생하는 것이 좀 줄어들겠죠? 이 인간의 수고로움을 덜어주기 위해 개발된 것이 프로그래밍 언어이기에 !! function (함수)는 잘 사용하면 우리의 반복적인 작업을 줄여줍니다. 

 즉, 우리가 점수를 출력하는 함수를 지정해서 어떠한 아이디(이름)를 가진 사람이 점수를 넣어주면, 그에 해당하는 값을출력해주는 함수를 만들어 보겠습니다.

그러면 ! 아까 우리가 작성해놓은 조건문을 function(함수) 안에 넣고, 파라미터를 지정해서 한번 확인해보도록 합시다.

 

코드 샘플 공유

// ? 3. function 안에 testResult, name 을 넣은 프로그램

function scoreAnswer(name, testResult) { // ! name은 이름, testResult는 제품 점수
  if (testResult >= 80) {
    console.log(name + '님에게 이 제품을 강력 추천드립니다');
  } else if (testResult >= 60) {
    console.log(name + '님에게 이 제품을 추천합니다');
  } else if (testResult >= 40) {
    console.log(name + '님에게 이 제품은 보통입니다');
  } else {
    console.log(name + '님에게 이 제품을 추천하지 않습니다');
  }
}

// 실행 결과 테스트 
scoreAnswer('흰둥이', 88)
scoreAnswer('신짱아', 65)
scoreAnswer('신짱구', 20)

실행 코드 공유

결과 값

'scoreAnswer' 이라는 함수를 지정하고 우리가 작성해놓은 if 조건문을 그 안에 들여쓰기 해서 넣습니다.

 

그리고, 원래 조건문 밖에서 지정해주던 testResule (점수) 변수도 scoreAnswer 안에 파라미터로 들어가서 함수를 이용하는 누구라도 점수가 있다면 추천 프로그램이 출력되게 만들어 줍니다. 또한, 출력값에서 사용자 맞춤형이 되도록 이름을 같이 출력되게 만들어주어 더욱 추천받는 느낌이 들게(?) 만들어 주었습니다.

 즉, 함수를 이용하여 우리가 지정한 점수 값이 아니라, 이 프로그램을 이용하는 사용자의 상황에 맞게 만듦으로써 우리수고로움이 줄어들었죠 !

​결과 값을 보니 제대로 작동하는 것을 볼 수 있습니다 !!

이렇게 if / else if 조건문 과 fuction를 활용하여 우리가 만든 점수 기반 제품 추천 프로그램도 만들어 봤습니다.

 

 

 

저의 아주 작은 티끌 코딩 글이 블로그 방문자 님의 코딩에 조금이라도,

도움이 됐으면 좋겠습니다.  감사합니다 : )