soom 숨의 블로그 frontend developer

180912 TIL Lec1 다각형의 넓이

Sep 12, 2018 » 1막, TIL (Today I Learned)

알고리즘

실력 향상을 위해 해야 할 것들

- 매일코딩
- 최소 하루에 한 문제 풀자.
- 공부하기: 문제해결 전략을 꼭 공부하자.
- 기록하기: 푼 문제의 링크, 내 풀이, 해결전략을 간략히 기록한다.
- 다른 사람의 풀이와 내 풀이를 비교해 본다.

배열

  • foreach, map, filter 사용법을 더 익혀야겠다. 아직 잘 모르겠음..

(강의내용)
배열의 순회는 for 문을 사용하거나, forEach와 같은 메서드를 통해서 할 수 있습니다.

다른 프로그래밍 언어와 비슷한 문법인 자바스크립트 for문은 여러분들이 금방 찾아서 학습이 가능할 것 같아 생략하고요.

forEach를 통한 배열 탐색을 공부할 필요가 있습니다.

//forEach는 함수를 인자로 받고 있어요.
//forEach의 인자로 함수를 사용하고 있는데 편의상 arrow 함수를 사용했다.

["apple","tomato"].forEach( (value) => {
   console.log(value)
});

forEach를 사용하면 더이상 배열의 길이를 체크하는 for문을 추가하거나, i++과 같은 증가시켜주는 코드가 필요 없습니다. 이부분은 알아서 자바스크립트 파서가 처리해줍니다. 결국 for문을 쓰면서 생길 수 있는 실수를 줄여줍니다.

그리고 코드의 가독성도 좋아서 읽기 편한 코드를 만들 수 있습니다. for문과 성능차이도 있을 수 있지만 미미한 차이입니다.

한가지 더 특이한 점은 forEach와 같은 메서드가 함수를 인자로 갖는 다는 점입니다. 이런 특징은 자바스크립트에서 많이 나오는데요, 배열에서는 이런식으로 동작하는 메서드들이 꽤 있습니다.

filter, map은 아주 중요하고요. 이 부분을 이해한 후에 reduce를 공부하고, some, every등도 같이 알아보면 좋습니다.

그리고 여기 소개되고 있는 메서드들의 반환값도 주의해야 합니다. 어떤 메서드는 새로운 배열을 반환하기도 합니다.

아래는 새로운 배열을 반환하는 map메서드 예제입니다.

var newArr = ["apple","tomato"].map( (value, index) => {
   return index + "번째 과일은 " + value + "입니다";
});
console.log(newArr)// 여러분들이 실행해보세요

스코프

  • const로 선언된 변수는 재선언과 재할당을 할 수 없고, let은 재선언은 안되지만 재할당은 가능
  • const를 먼저 사용하고 재할당해야 하는 경우엔 let사용! var는 block scope를 지원하지 않음으로 사용하지 않는다. (*block({}))
  • scope chain: 지역스코프(안쪽함수)에서 전역 스코프까지 단계적으로 올라가면서 변수를 찾는 것

STEP1. 다각형의 넓이

    <요구사항>
    1. 반지름을 입력받아 원의 넓이를 계산하는 함수를 만든다.
    2. 필요한 인자를 입력받아 사각형의 넓이를 계산하는 함수를 만든다.
    3. 필요한 인자를 입력받아 사다리꼴의 넓이를 계산하는 함수를 만든다.
    4. 필요한 인자를 입력받아 원기둥의 넒이를 계산하는 함수를 만든다.
    5. 숫자가 아니면 에러를 반환하도록 구현한다.
    6. 인자의갯수가 부족하면 에러를 반환한다.

  • ‘입력받아’ 부분을 어떻게 처리해야할 지 고민했다. prompt로 받을 것인가 input으로 받을 것인가. 야구게임에서도 발목을 잡았었는데, prompt는 모든 값을 string으로 입력받기 때문에 요구사항 5번을 처리하기가 어려웠다. 일단 input으로 받아서 처리했는데, input에 숫자를 넣어도 undefined나 string으로 나오는 것이다. (아오 화나)

    (1) 처음 풀이

      반지름: <input id='radius'> <br>
  높이: <input id='height'> <br>
  <button onclick="cylinder()"> 원기둥의 넓이 구하기 </button>
  <p id="result"> </p>
  </div>
  <script>
      function cylinder() {
          let r = Number(document.getElementById('radius').value);
          let h = Number(document.getElementById('height').value);
          if (isNaN(r) || isNaN(h) || !r || !h) {
              document.getElementById('result').innerHTML = '빈칸이 있거나 숫자가 아닌 값이 들어있습니다.';
          } else {
              let p = Math.PI
              let cylinderArea = (2 * p * Math.pow(r, 2)) + (h * 2 * p * r);
              document.getElementById('result').innerHTML = '원기둥의 넓이는 = ' + cylinderArea;
          }
      }

  • 값이 애초에 number인데 왜 Number()로 감싸줘야하는 지 모르겠고, isNaN과 typeof의 사용법을 정확히 잘 모르겠다. 어떨땐 되고 어떨땐 안되는 느낌?

  • 그래서 cocoa의 도움을 받아 console에 찍는 방법으로 수정하였다.

(2) 두번째 풀이

```javascript
function getCylinderArea(r, h) {
    if (arguments === 0 || arguments > 2 || isNaN(r) || isNaN(h)) {
        console.log('error: 2개의 값(반지름, 높이)이 아니거나 숫자가 아닙니다.');
    } else {
        let p = Math.PI
        let cylinderArea = (2 * p * Math.pow(r, 2)) + (h * 2 * p * r);
        console.log(cylinderArea);
    }
}
getCylinderArea(3,4);
```  - arguments를 활용하여 훨씬 더 심플하게 표현할 수 있었다.



내 페이스대로! Remember Sara-


9/13(Thu) To-Do

  1. 알고리즘 문제 풀기
  2. filter, map, foreach 연습문제 풀어보기
  3. 가능하다면 STEP 2 과제 upload