계산기

1.HTML & CSS

2. Script

function App() {
        //변수 초기화
        const result = document.querySelector('input[name="result"]');
        const buttons = document.querySelectorAll('input[type="button"]');

        buttons.forEach(btn => {
          btn.addEventListener("click", callback);
        });

        function callback(e) {
          const value = this.value;
          //결과창의 스트링을 배열로 변환
          const resultValue = Array.from(result.value);
          //결과창의 마지막 값
          const lastValue = resultValue[resultValue.length - 1];
          //연산자 버튼 클릭 이벤트
          if (
            value === "+" ||
            value === "-" ||
            value === "*" ||
            value === "/" ||
            value === "%"
          ) {
            //결과창의 마지막 값을 가져와서 마지막 값이 +,-,... 이면 에러 발생 => isNaN === true 이면
            if (isNaN(lastValue)) {
              return;
            }
            result.value += value;
          }
          //숫자 버튼 클릭 이벤트
          else if (!isNaN(value)) {
            //초기상태이면, 결과창에 0이 나와있을 경우
            if (lastValue === "0" || lastValue === 0) {
              result.value = value;
            } else {
              result.value += value;
            }
          }
          //clear 버튼 클릭 이벤트
          else if (value === "clear") {
            result.value = "0";
          } else if (value === "=") {
            const t = eval(result.value);
            result.value = t.toString();
          }
        }
      }
      new App();

3.

3.1 Eval()

()안에 들어간 string을 계산해서 number 타입의 결과를 출력한다.

3.2 '2+2' 와 new String('2+2')의 차이

'2+2'는 string이고 new String('2+2')의 결과는 String의 인스턴스(객체)이다.

따라서 eval()의 안에는 new String의 결과를 대입하지 못하고, 사용하려면

const string = new String('2+2');
eval(string.toString());

toString()을 사용해줘야 한다.

4. .Map()

Array.prototype.map()

: map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

const map2 = array1.map(x =>{return x * 2});

map()안의 내용이 한줄이면 return 문을 안써도 되지만, {}를 사용할 경우 반드시 return문을 사용해야한다!

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map