함수

1. 함수란?

** 여러 동작을 묶어놓은 명령어 덩어리 입니다**

1.1. 함수의 성분

🔑매개변수,인수,return 함수는 매개변수,인수,리턴의 3요소가 있습니다.

Info: 함수는 정해진 기능을 수행하는 기계와 같습니다.

** 믹서기의 예를 들어 보겠습니다.** 아래의 믹서기는 어떤 것이든 재료만 넣으면 무조건 갈아서 섞어 줍니다. 이때 믹서기의 기능을 자바스크립트에서는** 함수라고 부릅니다. 이때 믹서기에 넣을 재료를 자바스크립트에서는 인수라고 부릅니다. 믹서기는 재료를 넣는 곳과 결과물이 나오는 곳이 다른데요. 이때 재료를 넣는곳에 들어가는 과일들을 자바스크립트에서는 매개변수 **라고 부릅니다. 인수가 함수에 매개변수로 전달되면 함수는 정해진 기능을 수행해서 변경된 값을 반환합니다.

Info: 믹서기의 동작이 끝나면 우리는 주스를 반환받게 되는데 이때 믹서기가 생산한 결과인 주스를 자바스크립트에서는** 리턴**이라고 합니다.

우리는 상황에 따라 주스를 컵 하나에 담을 경우도 있고 여러 컵에 나누어 담을수 있듯 자바스크립트에서도 함수의 결과를 필요에 따라 하나 이상의 변수 나 함수 등에 전달하여 사용할수 있습니다.

https://drive.google.com/file/d/1ah3uMqhRUhJCm_zXElRGL2aGECDf6-H9/view?usp=sharing

위 PDF 문서 4페이지를 참고하여 매개변수(parameter)와 인수(argument)를 구분해 봅시다.

• 기능=함수
• 결과=리턴
• 투입구에 들어가는 값=매개변수
• 재료에 전달하는 값=인수

2. 함수의 선언과 호출

2.1. 함수의 선언

함수의 선언에 대해 알아보겠습니다.

함수의 선언은 믹서기 기계를 직접 만드는 것과 같습니다. 함수 선언시 가장 기본적인 방법은 함수를 만들때 이름을 붙이고 필요할때 마다 함수의 이름을 불러 실행하는 것입니다. 함수가 어떤 명령을 처리할지 미리 알려주는 것을 함수를 선언한다 혹은 정의한다 라고 합니다. 함수를 선언할 때는 함수마다 서로 다른 이름을 붙여 나중에 사용할때 알아보기 쉽도록 해야 합니다. 선언할때는 예약어 function 을 사용하고 \{ \} 안에 실행문을 작성합니다.

Info: 실행 함수를 선언해봅시다. 아래는 함수 선언의 기본 문법입니다.

function 함수이름() {
    실행문;
  }

function addNumber() {
  var num1 = 2;
  var num2 = 3;
  var sum = num1 + num2;
  alert("결과 값: " + sum);
}

2.2. 함수의 호출

함수는 선언만으로 동작 하지 않습니다. 우리가 믹서기를 만들었다고 해서 바로 동작하지 않는것과 같습니다. 믹서기의 전원 버튼을 눌러야 동작하는것 처럼 함수는 호출을 해야 실행됩니다. 선언은 앞으로 자주할 동작에 대해 예약을 해 놓는 것입니다.

동작을 하려면 함수를 불러 줘야 합니다. 함수를 부르는 것을 호출 한다라고 합니다.

Info: 실행

이전 예제에 이어서 작성해 봅시다

function addNumber() {
  var num1 = 2;
  var num2 = 3;
  var sum = num1 + num2;
  alert("결과 값: " + sum);
}
addNumber();
addNumber();

2.3. 매개변수를 사용한 함수만들기

Info: 실행

매개변수를 사용한 함수를 작성해봅시다

function addNumber(num1, num2) {
  const sum = num1 + num2;
  return sum; //return num1 + num2;//합을 바로 반환
}
const result = addNumber(2, 3);
document.write("두 수를 더 한 값 : " + result);

1. 자바스크립트 해석기가 function 이라는 키워드를 만나면 함수의 선언부 라는것을 인식하고 함수블록 {}을 해석합니다. 아직 실행하지 않습니다.
2. 6번의 addNumber(2, 3) 을 만나면 해석해 두었던 addNumber() 함수를 실행합니다.
3. addNumber() 함수는 매개변수 num1에 인수 2를 매개변수 num2에 인수 3 을 넘기고 두 수의 합을 sum 변수에 저장합니다.
4. return sum 함수의 실행이 완료되면 결과를 함수의 호출지점인 5번의 const result 에 전달합니다.
5. 전달받은 결괏값을 result 상수에 저장합니다.
6. document.write('두 수를 더 한 값 : ' + result); result의 값을 화면에 출력합니다.

2.4. 매개변수의 기본값 지정하기

Info: 실행

자주 사용하는 값이 있을경우 매개변수의 기본 값으로 지정할수 있습니다.

function multiple(a, b = 5, c = 10) {
  return a * b + c;
}
const result1 = multiple(5, 10, 20);
document.write(`multiple(5, 10, 20)을 실행하면 결과는${result1}입니다<br>`);
const result2 = multiple(10, 20);
document.write(
  `multiple(10, 20)을 실행하면 세번째 매개변수는 기본값을 사용하고 결과는${result2}입니다<br>`
);
const result3 = multiple(30);
document.write(
  `multiple(30)을 실행하면 두번째,  세번째 매개변수는 기본값을 사용하고 결과는${result3}입니다<br>`
);

2.5. 문제

Info: 실행

이전에 작성한 :link:1부터10까지 더하는 함수[06] 예제를 참고하여 사용자가 입력한 숫자까지 계속 더하는 함수를 만들어보세요 MDN

prompt 함수로 반환받은 결괏값은 string 자료형으로 반환되므로 숫자연산이 불가합니다. 숫자 자료형으로 변환해주는 parseInt() 함수를 사용하세요

2.6. 함수의 종류

지금까지 alert(), log() 등의 함수를 사용하여 화면에 매번 다른 결괏값을 출력하는 명령을 수행했습니다.

이렇게 입력되는 내용을 (재료) 를 바꿔서 여러번 사용할수 있는 성질을 함수의 ‘재사용성’ 이라고 합니다.

자바스크립트의 함수 4종

**함수표현식: ** 자바스크립트의 함수는 자료형 중의 하나로 취급되며 모든 식의 값으로 취급될수 있습니다. 4가지 방식의 함수중 2~4번에 은 함수를 표현식으로 다루는 방식입니다.

2.6.1. 명명함수

명명함수는 이름이 있는 함수를 의미합니다.

선언시 이름을 붙이고 않으며 변수에 할당하여 실행합니다. 하나의 문서에서 같은 함수명을 여러번 사용할 경우 마지막 선언 함수가 이전 함수 선언을 덮어 씌우며 실행됩니다. 실행은 되지만 사람이 헷갈리니 되도록 사용하지 맙시다.

Info: 실행

명명함수를 작성해 봅시다

2.6.2. 익명함수

익명함수는 이름이 없는 함수를 의미합니다.

선언시 이름을 붙이지 않으며 변수에 할당하여 실행합니다.

Info: 실행

익명함수를 작성해 봅시다

const sum = function (a, b) {
  return a + b;
};
document.write(`함수 실행 결과\u00A0\u00A0\u00A0\u00A0: ${+sum(10, 20)}`);

2.6.3. 즉시실행함수

일반적으로 함수는 선언후 필요할 때 호출하여 실행합니다.

하지만 상황에 따라 딱 한번 실행해야 하는 함수일 경우 선언과 동시에 실행을 시킬수 있습니다.

Info: 실행

코드로 작성해 봅시다.

body {
  padding-top: 20px;
  text-align: center;
}
.accent {
  font-weight: bold;
  font-size: 1.2em;
  color: #00f;
}

(function () {
  let userName = prompt("이름을 입력하세요.");
  document.write(`안녕하세요? <span class='accent'>${userName}</span>님!`);
})();

    (function (a, b) {   // 함수 선언을 위한 매개변수
      sum = a + b;
    }(100, 200));       // 마지막에 함수 실행을 위한 인수
    document.write(`<h1>함수실행결과:${sum}</h1>`);

2.6.4. 화살표함수

익명함수를 줄여쓰는 방식으로 람다함수 라고도 부릅니다

아래는 기본형 입니다. ()⇒\{return;\}

Info: 실행

매개변수가 없는 경우의 익명함수를 화살표 함수로 변경해 봅시다

• 익명함수를 작성합니다.

const hi = function () {
	return "안녕하세요";
};

alert( hi() ); //호출

• 화살표 함수로 줄여봅시다

const hi = () => {
    return '안녕하세요?';
};
alert( hi() ); 

const hi = () => '안녕하세요?';
alert( hi() ); 

Info: 매개변수가 1개인 경우의 화살표 함수를 작성해 봅시다

let hihi = function (user) {
  document.write(`${user}님, 안녕하세요?`);
};
hihi("망고");

let hihi = ~~function ~~(user) => {
  document.write(`${user}님, 안녕하세요?`);
};
hihi("망고");

let hihi = user => {
  document.write(`${user}님, 안녕하세요?`);
};
hihi("망고");

let hihi = user => document.write(`${user}님, 안녕하세요?`);
hihi("망고");

Info: 매개변수가 2개인 경우의 화살표 함수를 작성해 봅시다

let sum = function (a, b) {
  return a + b;
};
document.write(`두 수의 합 :${sum(10, 20)}`);

let sum = (a, b) => {
  return a + b;
};
document.write(`두 수의 합 :${sum(10, 20)}`);

let sum = (a, b) => a + b;
document.write(`두 수의 합 :${sum(10, 20)}`);

3. 콜백함수

함수는 매개변수(parameter)를 넣을 수 있습니다.

함수는 값을 반환할 수 있습니다 자바스크립트에서 콜백(callback) 함수는 다른 함수의 인자로 전달되어, 해당 함수의 실행이 완료된 후에 호출되는 함수를 말합니다. 이러한 콜백 함수는 비동기적인 처리를 위해 많이 사용됩니다. 콜백 함수는 다른 함수에 매개변수(parameter)로 들어가는 함수로 이해하면 쉽습니다.

3.1. 콜백함수 작성

Info: 코드1실행

• 코드1 에서는 callback.html 문서를 생성하여 스크립트를 작성해 보겠습니다.

• 코드2

Info: 코드2실행

• 코드2 에서는 콜백 함수를 사용하는 내장함수를 사용해 보겠습니다.
• setTimeout, SetInterval 은 대표적인 자바스크립트의 내장 콜백함수 입니다.

//setTimeout
setTimeout(function () {
  document.write("1초 후에 실행됩니다");
}, 1000);

//clearTimeout
const stop1 = setTimeout(() => {
  document.write(`1초 후에 두번째 실행됩니다.`);
}, 1000);
clearTimeout(stop1);

//setInterval
setInterval(function () {
  document.write("1초마다 실행됩니다.");
}, 1000);

//clearInterval
const stop2 = setInterval(() => {
  document.write("1초마다 두번째 실행됩니다.");
}, 1000);
clearInterval(stop2);

3.2. setTimeout으로 로딩화면 만들기

Info: 실행

setTimeout 함수를 활용하여 5초동안 로딩 애니메이션을 보여주는 UI를 구현해보자.

<body>
  <div class="loader_wrap">
    <div class="loader"></div>
  </div>
  <h1>HOME</h1>
</body>

.loader_wrap {
	background: #fff;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	position: fixed;
	opacity: 1;
	transition: opacity 1s ease-out;
}
.loader_wrap.hidden {
	opacity: 0;
}
.loader_wrap .loader {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation: rotate 1s infinite;
	height: 50px;
	width: 50px;
	z-index: 55;
}

.loader:before,
.loader:after {
	position: absolute;
	border-radius: 50%;
	content: '';
	display: block;
	height: 20px;
	width: 20px;
}
.loader:before {
	position: absolute;

	animation: ball1 1s infinite;
	background-color: #cb2025;
	box-shadow: 30px 0 0 #f8b334;
	margin-bottom: 10px;
}
.loader:after {
	position: absolute;
	animation: ball2 1s infinite;
	background-color: #00a096;
	box-shadow: 30px 0 0 #97bf0d;
}

@keyframes rotate {
	0% {
		transform: rotate(0deg) scale(0.8);
	}
	50% {
		transform: rotate(360deg) scale(1.2);
	}
	100% {
		transform: rotate(720deg) scale(0.8);
	}
}

@keyframes ball1 {
	0% {
		box-shadow: 30px 0 0 #f8b334;
	}
	50% {
		box-shadow: 0 0 0 #f8b334;
		margin-bottom: 0;
		transform: translate(15px, 15px);
	}
	100% {
		box-shadow: 30px 0 0 #f8b334;
		margin-bottom: 10px;
	}
}

@keyframes ball2 {
	0% {
		box-shadow: 30px 0 0 #97bf0d;
	}
	50% {
		box-shadow: 0 0 0 #97bf0d;
		margin-top: -20px;
		transform: translate(15px, 15px);
	}
	100% {
		box-shadow: 30px 0 0 #97bf0d;
		margin-top: 0;
	}
}

window.onload = () => {
  const loader = document.querySelector(".loader_wrap");
  setTimeout(() => {
    loader.classList.add("hidden");
  }, 5000);
};

3.3. setInterval로 자동재생 되는 갤러리 만들기

Info: 소스파일다운로드

실행화면

4. Scope

스코프(scope) 란

변수나 함수가 접근 가능한 범위를 의미로, 크게 전역과 지역 두가지가 있습니다. 전역스코프: 어디서나 접근 가능한 범위 지역스코프: 특정 함수나 블록 내에서만 접근 가능한 범위

실행화면

let output; //전역
function sum(a, b) {
  const result = a + b; //지역
  output = result;
  return output;
}

동적요소 생성후 화면에 결과를 출력

sum(50, 5536)
const h1 = document.createElement("h1"); //전역
h1.textContent = output;
document.body.appendChild(h1);

h1변수를 함수바디 내부로 이동

실행은 되지만 오류를 발생시킬 가능성이 많기 때문에 사용하지 않는것이 좋다."
function sum(a, b) {
  const result = a + b; //지역
**  h1 = document.createElement("h1"); //전역**
  output = result;
  return output;
}
sum(50, 5536);
h1.textContent = output;
document.body.appendChild(h1);

5. Hosting

호이스팅이란 끌어올림을 말합니다. 당근마켓의 끌올 기능처럼 선언순서와 상관없이 우선해서 읽히는 것을 말합니다.

자바스크립트에서 호이스팅이 발생하는 경우는 두가지 입니다.

1. **명명함수 **
2. var 로 초기화 한 변수

5.1. 함수의 호이스팅

웹브라우저에서 자바스크립트 소스를 해석할때 함수 선언부분을 가장 먼저 합니다. 그래서 개발자가 원하는 곳에 함수를 선언해 놓기만 하면 선언 위치와 무관하게 함수를 실행할수 있습니다. 아래의 예시를 비교해 보면 함수를 호출, 선언하는 위치가 다르지만 둘다 문제없이 실행되는것을 볼수 있습니다.

addNumber();
function addNumber() {
    //실행문
}

function addNumber() {
  //실행문
}
addNumber();

5.2. 변수의 호이스팅

var 변수는 자바스크립트 해석기에서 따로 기억을 합니다. 그렇기 때문에 해석시 끌어올림(hosting) 현상이 발생하게 됩니다. 변수를 실행하기 전이지만 해석기에서 변수의 존재를 미리 저장해 두기 때문에 아래와 같은 문제가 발생하게 됩니다. 실행

var x = 10;

function displayNumber() {
	console.log('x is ' + x);
	console.log('y is ' + y);
	var y = 20;
}
displayNumber();

실행

function addNumber(num1, num2) {
	return num1 + num2;
}
var sum = addNumber(10, 20);
console.log(sum);
sum = 50;
console.log(sum);
var sum = 100;
console.log(sum);

var 변수의 유연함으로 인해 프로그램의 작성시 예상치 못한 버그가 잦았으며 디버깅 시 원인을 찾는 것 또한 어려웠습니다. 그래서 ES6에서 블록레벨 에서만 사용할수 있는 let과 const 가 등장하게 되었습니다. 블록이란 \{ \} 를 의미합니다.

6. 문제

6.1. 문제1

Info: 💡 실행화면

다음 조건을 참고하여 매개변수로 전달받은 두수의 값이 같으면 곱하고 다르면 더하는 함수 를 작성하시오.

1. 명명함수로 작성하고 식별자는 sumMulti 일 것.
2. sumMulti는 매개변수 x,y 를 전달받을 것.
3. if~else 문을 사용하고 비교 연산자는 ===를 사용할것.
4. html 문서에 결과를 출력할것.

6.2. 문제2

Info: 💡 실행화면

다음 조건을 참고하여 프롬프트 창에서 두수를 입력받아 크기를 서로 비교한 후 더 큰 숫자를 알림창으로 표시하는 함수를 작성하시오.

1. 프롬프트 창에서 입력받은 두수를 각각 num1, num2 변수에 저장할 것.
2. 함수 선언시 함수의 타입과 함수명은 자유롭게 지정하고 매개변수는 2개를 사용할 것.
3. if~else 문을 사용하며 값의 비교시 비교연산자는 === 를 사용할 것.
4. 두수가 같을경우 ‘같습니다’ 를 출력할 것