230306 - 제어문 응용, 함수(function)

백승연·2023년 3월 6일
1

🚩 제어문 응용

적정 몸무게 구하기

✒️ 코드

입력

html

<body>
    <div>
      <h1>적정 몸무게 구하기</h1>
      <p id="p1">
        <script>
          let name = prompt("당신의 이름은?");
          let height = prompt("당신의 키는?");
          let weight = prompt("당신의 몸무게는?");
          // document.write("이름 " + name + "<br>키 : " + height+"<br>몸무게 : "+weight);
          document.write(`이름 : ${name}<br>키 : ${height}cm <br>몸무게 : ${weight}kg`);
        </script>
      </p>
      <p id="p2">
        <script>
          // 적정체중 = (키 - 100) * 0.9 / 위아래로 3kg이내
          let normalWeight = (height - 100) * 0.9; // 적정체중

          let result = weight >= normalWeight - 3 && weight <= normalWeight + 3;
          // document.write(result);

          let resultText = result ? "적정체중입니다" : "적정체중이 아닙니다";
          document.write("당신은 " + resultText);
          document.write(`<br>적정 체중은 ${normalWeight}kg 입니다.`);
        </script>
      </p>
    </div>
  </body>

js

let name = prompt("당신의 이름은?");
let height = prompt("당신의 키는?");
let weight = prompt("당신의 몸무게는?");
// document.write("이름 " + name + "<br>키 : " + height+"<br>몸무게 : "+weight);
document.write(`이름 : ${name}<br>키 : ${height}cm <br>몸무게 : ${weight}kg`);

출력

  • 이미지로 대체

prompt 입력


결과


🔗 참고 링크 & 도움이 되는 링크






🚩 Javascript 함수

function()

📝 설명

  • 특정한 일을 수행하는 코드의 집합
  • 가독성, 재사용, 유지보수 용이
  • 함수의 형태
// 함수 정의
function name(매개변수) {
	정의 내용
}

name(매개변수); // 함수 호출


✒️ 사용법

입력

예제1

js

function add(num1, num2) {
  // const result = num1 + num2;
  // return result; // return은 값을 외부로 반환
  return num1 + num2;
}

const result = add(3, 5); // 함수 호출
console.log(result);


let firstName1 = "우성";
let lastName1 = "정";
// let fullName1 = `${firstName1} ${lastName1}`;
// console.log(fullName1);

let firstName2 = "정재";
let lastName2 = "이";
// let fullName2 = `${firstName2} ${lastName2}`;
// console.log(fullName2);


function fullName(aa, bb) {
  return `${bb} ${aa} 🎈` // 순서 반대로 출력되도록
}
console.log(fullName(firstName1, lastName1));
console.log(fullName(firstName2, lastName2));
console.log(fullName("혜수", "김"));
예제2

html

<style>
      body {
        background: lightblue;
      }
      body > div {
        width: 500px;
        margin: 200px auto;
        padding: 50px;
        text-align: center;
        background: rgba(255, 255, 255, 0.7);
      }
      #p1 {
        font-size: 20px;
      }
      #p2 {
        background-color: lightblue;
        color: #fff;
        line-height: 2;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div>
      <h1>두 개의 숫자를 더한 값과 곱한 값은?</h1>
      <p id="p1">
        <script>
          let num1 = prompt("첫 번째 숫자는?");
          let num2 = prompt("두 번째 숫자는?");
          document.write(`첫 번째 숫자 : ${num1} <br> 두 번째 숫자 : ${num2}`);
        </script>
      </p>
      <p id="p2">
        <script>
          function calculate() {
            let plus = Number(num1) + Number(num2);
            // 이미 외부에서 선언되어 있기 때문에 그냥 작성해도 됨
            // number로 감싸야 제대로 된 연산이 가능
            let multi = Number(num1) * Number(num2);
            document.write(`num1과 num2를 더한 값은? : ${plus} <br> num1과 num2를 곱한 값은? : ${multi}`);
          }
          calculate();
        </script>
      </p>
    </div>
  </body>

출력

  • 이미지로 대체

prompt로 값 입력받음

결과


🔗 참고 링크 & 도움이 되는 링크






🚩 함수의 참조

주소값 참조


✒️ 사용법

입력

예제1

js

function add(a, b) {
  return a + b;
}

const sum = add; 
// add가 가르키는 메모리 주소값을 sum에 그대로 할당
// sum도 함수처럼 사용됨
// 일급함수(일반 객체처럼 모든 연산이 가능)
console.log("add 함수 실행 : ", add(1, 2));
console.log("add 함수 실행 : ", sum(1, 2));
console.log("add 함수 실행 : ", sum()); // NaN
// 함수에 매개변수가 지정되어 있을 떄는 반드시 넣어주어야 한다.

출력

  • 이미지로 대체

🔗 참고 링크 & 도움이 되는 링크






🚩 함수의 리턴

return

📝 설명

  • return이 나오면 함수 실행을 종료한다.
  • 함수를 종료한 후 값을 호출지점으로 반환한다.


✒️ 사용법

입력

예제1

js

function add(a, b) {
  a + b;
}
// 함수에 return을 명시하지 않으면 undefined
const result = add(5, 3);
console.log(result);

function write(txt) {
  console.log(txt);
}
write("이 글자가 나올까요?");
// 특정한 일을 수행, 반환하지 않는 함수는 return 생략 가능 (ex. 문자열)

function print(num) {
  if (num < 0) {
    return; // return undefined;의 축약
  }
  console.log(num + "을(를) 출력합니다.");
}

print(-12);
// return을 함수 중간에 넣으면 함수가 종료

출력

  • 이미지로 대체

🔗 참고 링크 & 도움이 되는 링크






🚩 함수의 인자(매개변수)

parameters

📝 설명

  • 키와 값을 연결하는 객체의 구성원. 해당 값이 다른 값과 연결되어 있는 것을 프로퍼티라고 부른다.
  • 속성이라고도 함.


✒️ 사용법

입력

예제1

js

// 인자(매개변수) Parameters

function add(a, b) {
  console.log(a);
  console.log(b);
  console.log(arguments);
  // 전달된 인자 정보를 출력해주는 프로퍼티 (함수에 기본적으로 내장, 매개변수 정보는 arguments 객체에 저장
  console.log(arguments[1]); // 배열의 형식으로 두 번째 인자 출력 (0, 1, 2...)
}

add(5, 6, 7, 8);

console.log();

function add2(a = 5, b = 3) {
  console.log(arguments);
  console.log("a + b : ", a + b);
}
add2();
add2(1005, 1);
// 매개변수에서 기본값 설정 가능. Default Parameters
// 외부에서 값이 주어졌을 때는 기본값 ❌

console.log();

/* 
  Rest 매개변수 : 인자를 몇 개 받아올지 모를 때 사용
*/
function sum(...numbers) {
  console.log(numbers);
}

sum(1, 2, 3, 4, 5, 6, 7);
sum("딸기", "바나나", "피자", 1005, "마라탕", "스파게티", "볶음밥");

console.log();

function sum2(a, b, x, ...numbers) {
  console.log(numbers); // 4번째 인자부터 들어있음
  console.log(a);
  console.log(b);
  console.log(x);
}

sum2(1, 2, 3, 4, 5, 6, 7);
sum2("딸기", "바나나", "피자", 1005, "마라탕", "스파게티", "볶음밥");

출력

  • 이미지로 대체
    업로드중..

🔗 참고 링크 & 도움이 되는 링크






profile
공부하는 벨로그

0개의 댓글