[스파르타코딩클럽 2주차 ] 2.Javascript 예제 풀어보기 (함수, 조건문, 반복문)

rimu·2020년 3월 16일

Q1. '기사저장' 버튼을 클릭할때마다 숫자가 증가하는 onclick 함수 만들기

여기서 잠깐! onClick 태그란?
html에서 button에만 사용가능한 태그로서, 버튼에 대한 클릭이 일어났을때 반응하는 함수를 받는다. (input에는 적용되지 않는 것 주의하기)

1.버튼에 대한 함수 선언하기

<!-- 버튼 부분 -->
<button onclick="hey()" class="btn btn-primary">
  기사저장</button>

onClick 함수 내용 정의하기

  let num = 1;
      function hey() {
        alert(num);
        num += 1;
      }

여기서 핵심은 num 이라는 변수를 함수 바깥쪽에 선언하는것이다. (global scope) 함수 안쪽에 변수를 1이라고 선언해버리면 num에 1을 더해 재할당하는게 적용되었다가 num이 계속 1로 바뀌어버린다.

Q2.배열에서 원소의 갯수 세기

다음의 배열에서 '딸기'가 들어간 갯수는 총 몇개?

let a = ['사과','감','감','배','포도',
        '포도','딸기','포도','감','수박','딸기']

방법1. 반복문 사용하기

function count_fruit(name){
  let count = 0;
  for(let i= 0; i < a.length; i++){
    if(a[i] === name) {
      count = count + 1 
    }
  }
  console.log(count);
}
count_fruit('딸기')

반복문을 만들때 헷갈리지 말아야할 점은 대부분의 반복문이 기본적으로 변수를 두 개 필요로 한다는 것이다. i는 반복문을 몇 회 돌릴지의 횟수와 관련된 설정이고 이 결과값으로 어떤걸 산출할지를 반영하는 기본 변수가 하나 더 있어야 한다.(위의 예시에서 count)

좀 더 세련된 방법 2. filter() 함수 이용하기
배열에서 특정한 원소가 위치한 인덱스를 알려준다. 해당 원소가 배열에 없으면 결과가 -1로 나온다.
a.filter(function item => item === '딸기').length;

Q3. 합을 구하는 함수 만들기

0부터 n-1까지 합을 구하는 함수를 만들고싶다면?

function get_sum(n){
  let result = 0;
  for (let i =0; i < n; i++){
    result = result + 1 
  }
  return result 
}
console.log(get_sum(n))

쉬울거같은데 은근 풀이법이 한번에 안 떠오른다...
총 두가지 변수(result:반복문을 실행할 내용, i:반복문 돌릴 횟수 )를 설정했고, 함수에 대한 입력값(인자), 즉 횟수를 n로 해서 n만 바꿔서 언제든 재사용할 수 있는 함수를 만들었다.

Q4.미세먼지(IDEX_MVL)의 값이 50 미만인 구 이름(MSRSTE_NM)과 값을 출력하기

먼저 미세먼지 수치에 대한 데이터가 다음과 같이 주어졌다. 너무 길어서 일부만 가져왔음.

let mise = [
{
MSRDT: "201912052100",
MSRRGN_NM: "도심권",
MSRSTE_NM: "중구",
PM10: 22,
PM25: 14,
O3: 0.018,
NO2: 0.015,
CO: 0.4,
SO2: 0.002,
IDEX_NM: "좋음",
IDEX_MVL: 31,
ARPLT_MAIN: "O3"
},
{
MSRDT: "201912052100",
MSRRGN_NM: "도심권",
MSRSTE_NM: "종로구",
PM10: 24,
PM25: 18,
O3: 0.013,
NO2: 0.016,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 39,
ARPLT_MAIN: "PM25"
}, ]

미세먼지 값이 50미만인 구의 이름과 미세먼지 값을 출력하는방법?

방법1. 조건문 & 반복문 활용하기


for(let i=0; i < mise.length; i++){
  if(mise[i]['IDEX_MVL'] < 50) {
    console.log(mise[i]['MSRSTE_NM'], mise[i][IDEX_MVL])
  } 
}

방법2. 조건문 & 반복문 & Array.push( ) 사용하기

let result = [ ];
for(let i=0; i < mise.length; i++){
if(mise[i]['IDEX_MVL'] < 50){
  result.push({mise[i]['MSRSTE_NM']:mise[i]['IDEX_MVL']} )
 }
}
console.log(result)

방법3. Array.filter( )

let result_name 
 = mise.filter(item => item['IDEX_MVL'] < 50)
.map(item => item['MSRSTE_NM'], item['IDEX_MVL'])

아직 .filter( )와 .map( )을 자신있게 쓸 수 있는 단계라 조금 어려움. 하지만 이해만 제대로 하면 코드가 훨씬 간결해질거같다!

이것은 가까운미래의 내가 이해해있을거야.... (먼산)

Q5. 자전거(parkingBikeTotCnt)가 5개 미만인 정류장의 이름을 출력하기

위의 예시와 정확하게 똑같다!
일단 자전거에 대한 데이터 배열을 가져오면 다음과 같다. (일부 생략)

let bikes = [
{
rackTotCnt: "7",
stationName: "101. (구)합정동 주민센터",
parkingBikeTotCnt: "4",
shared: "14",
stationLatitude: "37.54956055",
stationLongitude: "126.90575409",
stationId: "ST-3"
},
{
rackTotCnt: "22",
stationName: "102. 망원역 1번출구 앞",
parkingBikeTotCnt: "17",
shared: "5",
stationLatitude: "37.55564880",
stationLongitude: "126.91062927",
stationId: "ST-4"
},
{
rackTotCnt: "16",
stationName: "103. 망원역 2번출구 앞",
parkingBikeTotCnt: "11",
shared: "13",
stationLatitude: "37.55495071",
stationLongitude: "126.91083527",
stationId: "ST-5"
},]

자전겅의 갯수가 5개 미만인 정류장 이름 출력하기?

let result_bikes = [];
  for (i = 0; i < bikes.length; i++) {
     if (bikes[i]["parkingBikeTotCnt"] < 5) {
     result_bikes.push(bikes[i]["stationName"]);
     }
   }
 console.log(result_bikes);