본문 바로가기

Studying/Javascript

# Let's get it 자바스크립트 프로그래밍 : 함수사용하기

* 순서도 그리기

- 간략하게 기본 순서도 먼저 그려보기

시작 -> 숫자 입력 -> 연산자 입력 -> 숫자 입력 -> =버튼 -> 계산 ->결과표시 ->

 

 

- 변수에 저장해야할 것을 찾아내기 (저장공간부터 만든다)

시작 -> 숫자 입력 -> 연산자 입력 -> 숫자 입력 -> =버튼 -> 계산 ->결과표시 -> 끝

 

 

- 이벤트가 발생한 이후의 순서도를 그려본다.

숫자버튼 클릭 -> 숫자를 변수에 저장한다 -> 대기

연산자 버튼 클릭 -> 연산자를 변수에 저장한다 -> 대기

=버튼 클릭 -> 숫자 1과 숫자 2에 연산자를 적용해 계산한다 -> 계산 결과 표시 -> 끝

 

 

- 판단이 필요한 경우를 파악하여 순서도를 수정한다.

- 처음에 입력된 숫자와 그 이후에 입력된 숫자를 다른 곳에 저장해야하기 때문에 구분이 필요하다.

- 계산기가 제대로 실행될 수 있게 alert 하기 위해 판단이 필요하다.

 

* input 태그의 기타속성

- placeholder : 텍스트 박스 안에 회색 글씨 넣어서 무슨 칸인지 알려주거나 표시하기

- value: 박스 안에 글씨 넣어두기

- readonly: 텍스트박스 안에 넣은 value값 수정 불가

- required : 실행되어야만 다음 작동 가능

<input readonly id="operator">
<input readonly type="number" id="result">

-> 수정이 불가능하고 결과값만 표시하는 input 박스를 만들겠다.

 

 

* 기본 문법 : 함수

1) 형식 : 예약어 function을 사용  ||  =>화살표 기호를 사용함.

function() {}

// 또는 

() => {}

 

 

2) 함수에 이름 붙이기

- 선언문 

function a () {}

- 표현식

const b = function() {};

 

- 화살표 함수

const c = () => {};

 

 

 

 

3)  호출하기 (call)

함수 a를 선언한 후  a(); 로 함수를 호출한다.

function a() {}
a();

 

 

 

4)  반환값 (return)

함수를 호출(call)할 때 항상 결괏값이 나오는데 이 값을 반환값이라고 함.

function a() {
return 10;
}


a();


10

- 반환값의 기본값 = undefined 인데 반환값을 직접 정하려면 return 문을 추가하면 됨.

 

 

 

- 함수의 반환값을 상수나 변수에 대입할 수도 있음.

function a() {
 return 10;
 }
 const b = a();
 console.log(b);
 
 10

 

- 함수의 실행을 중간에 멈추는 역할 수행

function a() {
console.log('hello');
return;
console.log('return');
}


a();

hello

-> a라는 함수가 있는데 그 함수는 hello를 console.log하고 실행을 멈춘다. return문이 실행되면 그 아래 코드부터는

아예 실행이 되지 않는다.

 

 

 

5) 매개변수와 인수 사용하기

함수 a를 호출하면 argument가 parameter의 자리에 가게 되어서 parameter = 'argument'가 됨.

function a(parameter매개변수) {
   console.log(parameter);
}

a('argument');


argument

 

- 여러개의 매개변수와 인수를 가질 수 있음

 

function a (w,x,y,z){
console.log(w,x,y,z);
console.log(arguments);
}

a('hello','parameter','argument');

hello parameter argument undefined

Arguments(3) ['hello', 'parameter', 'argument']

 

화살표 함수에서는 arguments를 사용할 수 없음.

 

 

6) 다른 변수 사용하기

함수 안팎에 변수나 상수를 사용하거나 선언할 수 있다.

const a = 100;
function minus2 (x,y) {
return (x-y) * a;
}
console.log(minus2(5,3));


200

 

 

 

 

*  고차함수 (high order function)

함수를 만드는 함수,  함수를 반환(return)하는 함수.

{와 return을 생략할 수 있음.

const func = (msg) => {
return () => {
console.log(msg); 
  };
};

// 생략 후


const func = (msg) => () => {
console.log(msg);
};

 

 

 

 

 

 

* if문 중첩 줄이기

 

const onClickNumber = (event) => {  
  if (operator) {   // 연산자가 입력되었을 때
     if (!numTwo) {    // 연산자는 입력되었지만 numTwo는 입력되기 전일 때
        $result.value = ''; // 값을 빈값으로 초기화해라(numOne의 값을 지워라)
     }
     numTwo += event.target.textContent; // numTwo가 입력되었을 때의 값을 변수에 저장해라
   
   }else {  // 연산자가 입력되기 전이면
     numone += event.target.textContent;  // event가 발생한 타겟의 textContent가 
    
   }
   $result.value += event.target.textContent; // 그리고 그 값을 보여줘라
 };

 

 

1) if문 다음에 나오는 공통된 절차를 각 분기점 내부에 넣는다.

 $result.value += event.target.textContent;

const onClickNumber = (event) => {  
  if (operator) {   // 연산자가 입력되었을 때
     if (!numTwo) {    // 연산자는 입력되었지만 numTwo는 입력되기 전일 때
        $result.value = ''; // 값을 빈값으로 초기화해라
     }
     numTwo += event.target.textContent; // numTwo가 입력되었을 때의 값을 변수에 저장해라
     $result.value += event.target.textContent; // 그리고 그 값은 보여줘라
   }else {
     numone += event.target.textContent;
     $result.value += event.target.textContent;
   }
 };

 

 

2) 분기점에서 짧은 절차부터 실행하도록 if문을 작성한다.

const onClickNumber = (event) => {
  if (!operator) { // 연산자가 입력되지 않았으면 
   numOne += event.target.textContent;  // 첫번째 입력된 숫자로 봐라
   $result.value += event.target.textContent; // 그리고 그 값을 보여줘라
  }else {   // 연산자가 입력되어 있을때
  	if(!numTwo) {  // 아직 두번째 숫자가 입력되지 않았으면
	$result.value = '';   // 앞에 값을 빈값으로 초기화해서 보여줘라
	} 
   numTwo += event.target.textContent;  // 그 후에 이벤트가 발생한 것을 두번째 숫자변수에 저장해라
   $result.value += event.target.textContent;  // 그 값을 보여줘라.
 }
};

 

 

3) 짧은 절차가 먼저 끝나면 return으로 중단한다.

const onClickNumber = (event) => {
  if (!operator) { // 연산자가 입력되지 않았으면 
   numOne += event.target.textContent;  // 첫번째 입력된 숫자로 봐라
   $result.value += event.target.textContent; // 그리고 그 값을 보여줘라
   return;; // 이 밑으로는 실행이 중단됨
  }else {   // 연산자가 입력되어 있을때
  	if(!numTwo) {  // 아직 두번째 숫자가 입력되지 않았으면
	$result.value = '';   // 앞에 값을 빈값으로 초기화해서 보여줘라
	} 
   numTwo += event.target.textContent;  // 그 후에 이벤트가 발생한 것을 두번째 숫자변수에 저장해라
   $result.value += event.target.textContent;  // 그 값을 보여줘라.
 }
};

 

 

4) else를 제거하여 중첩 하나를 제거한다.

return이 나온 이후에는 else가 필요 없어지니까 없애버린다.

const onClickNumber = (event) => {
  if (!operator) { // 연산자가 입력되지 않았으면 
   numOne += event.target.textContent;  // 첫번째 입력된 숫자로 봐라
   $result.value += event.target.textContent; // 그리고 그 값을 보여줘라
   return;; // 이 밑으로는 실행이 중단됨
  }
  
  	if(!numTwo) {  // 아직 두번째 숫자가 입력되지 않았으면
	$result.value = '';   // 앞에 값을 빈값으로 초기화해서 보여줘라
	} 
   numTwo += event.target.textContent;  // 그 후에 이벤트가 발생한 것을 두번째 숫자변수에 저장해라
   $result.value += event.target.textContent;  // 그 값을 보여줘라.
 }
};

5) 다음 중첩된 분기점이 나오면 위의 과정을 반복한다.

 

 

 

 

* If문 /  Switch문

 

1) if 문

if (조건식) {
      실행문;
   } else if (조건식) {
      실행문;
   } else {
      실행문;
};

 

 

2) switch 문

" 조건식(변수)=== 비교조건식(변수와 비교할 값) "일 때 실행문이 실행됨.

switch (조건식) {
  case 비교 조건식:
    	실행문;
}

 

 

- 실행문이 여러 개여도 다 실행가능함.

let value = 'A';

switch (value) {
  case 'A':
     console.log('A');
     console.log('B');
}



> A
> B

 

 

- else if 처럼 여러 방향으로 분기 가능함.

일치하는 case가 발견된 순간부터 그 밑에는 일치하지 않아도 실행문이 전부 실행됨.

let value = 'B'';


switch (value) {
  case 'A':
    console.log('A');
  case 'B':
    console.log('B');   
  case 'C':
    console.log('C');
}


> B   
> C

// switch문은 일치하는 case를 발견하면 그 아래 case들의 실행문 모두를 무조건 실행함.

 

- break문 추가시

정확히 일치하는 case만 실행됨. 

예약어 default는 어떠한 case도 일치하지 않을 때 실행하는 case를 만들고 싶을 때 사용함.

let value = 'F';


switch (value) {
  case 'A':
    console.log('A');
    break;
  case 'B':
    console.log('B');  
     break;
  case 'C':
    console.log('C');
     break;
  default:          //  예약어
    console.log('아무것도 일치하지 않음');
}


아무것도 일치하지 않음

 

3) if문과 switch문의 비교

 

- if문

let fruit = '사과';


if (fruit ==='사과')       {
  console.log('사과입니다');
}else if (fruit ==='배')   {
  console.log('배입니다');
}else if (fruit ==='포도')  {
  console.log('포도입니다');
}else {
  console.log('뭔지 모르겠습니다');
}

 

 

- switch문 

default를 어느 위치에 놔둬 상관없음.

let fruit = '사과';

switch (fruit) {

   default:
     console.log('뭔지 모르겠습니다');
     break;
   case '사과':
     console.log('사과');
     break;
   case '배':
     console.log('배');
     break;
   case '포도':
     console.log('포도');
     break;
 }

 

 

*  결과 계산하기

 

document.querySelector("#calculate").addEventListener("click", () => {
      if (numTwo) {
        //calculate눌렀을 떄 numTwo 입력되어 있으면
        switch (
          operator //operator의 값이
        ) {
          case "+": // +라면
            $result.value = parseInt(numOne) + parseInt(numTwo); //+는 문자열을 숫자로 바꿔줘야해서
            break;
          case "-":
            $result.value = numOne = numTwo;
            break;
          case "x":
            $result.value = numOne * numTwo;
            break;
          case "/":
            $result.value = numOne / numTwo;
            break;
          default:
            break;
        }
      } else {
        // numTwo가 아직 입력되지 않았다면
        alert("숫자를 먼저 입력하세요.");
      }
    });

 

 

* 연이어 계산하기

document.querySelector("#calculate").addEventListener("click", () => {
      if (numTwo) {
        //calculate눌렀을 떄 numTwo 입력되어 있으면
        switch (
          operator //operator의 값이
        ) {
          case "+": // +라면
            $result.value = parseInt(numOne) + parseInt(numTwo); //+는 문자열을 숫자로 바꿔줘야해서
            break;
          case "-":
            $result.value = numOne - numTwo;
            break;
          case "x":
            $result.value = numOne * numTwo;
            break;
          case "/":
            $result.value = numOne / numTwo;
            break;
          default:
            break;
        } 
        $operator.value = ""; // 연산자칸을 빈칸으로 만들어라 
        numOne = $result.value; // 첫번째 결괏값을 numOne변수에 저장해라
        operator = "";  // operator 변수를 빈값으로 만들어라
        numTwo = "";    // numTwo 변수를 빈 값으로 만들어라
      } else {
        // numTwo가 아직 입력되지 않았다면
        alert("숫자를 먼저 입력하세요.");
      }
    });

 

 

*

*

*

*

*

*