함수

• 함수란?
• 프로그래밍 언어들은 코드를 조금이라도 더 쉽게 작성하기 위해, 코드를 조금이라도 더 깔끔하게 만들기 위해 다양한 개념을 도입해왔습니다. 함수도 그러한 개념 중 하나입니다. 코드(문장)을 묶고 이름을 붙여 쉽게 다시 사용할 수 있게 만들 것입니다.
• 자바스크립트에서 함수는 코드의 집합을 나타내는 자료형입니다.

함수 생성(만들기)

var ftn = function() {};

익명함수

<script>
        const ftn = function() {
            let output = prompt('숫자를 입력해 주세요', '숫자');
            alert(output);
        };
        ftn(); //함수 호출
</script>

• function( ) { }의 형태는 함수지만 이름이 명확히 정해지지 않았기 때문에 ‘익명 함수, anonymous function’ 라고 부르며 이름이 없음으로 변수에 할당해서 사용

<script>
        const 함수 = function() {
            console.log('함수 내부의 코드입니다 ... 1')
            console.log('함수 내부의 코드입니다 ... 2')
            console.log('함수 내부의 코드입니다 ... 3')
            console.log('')
        }

        함수()
        함수()

        console.log(typeof(함수))
        console.log(함수)
</script>

선언적 함수

function 함수(){};

var ftn = function() {};

<script>
        function 함수() {
            console.log('함수 내부의 코드입니다 ... 1')
            console.log('함수 내부의 코드입니다 ... 2')
            console.log('함수 내부의 코드입니다 ... 3')
            console.log('')
        }

        함수()
        함수()

        console.log(typeof(함수))
        console.log(함수)
    </script>

예제

윤년을 확인하는 함수 만들기

• 4로 나누어 떨어지는 해는 윤년
• 그러나 100으로 나누어 떨어지는 해는 윤년이 아니고 400 으로 나누어 떨어지는 해는 윤년임

<script>
	function isLeapYear(year) {
		return (year % 4 === 0) && (year % 100 !== 0) || (year % 400 === 0)
	}
	console.log(`2020년은 윤년일까? : ${isLeapYear(2020)}`) // true
	console.log(`2010년은 윤년일까? : ${isLeapYear(2010)}`) // false
	console.log(`2000년은 윤년일까? : ${isLeapYear(2000)}`) // true
	console.log(`1900년은 윤년일까? : ${isLeapYear(1900)}`) // false
</script>

 

주어진 배열에서 최소 값을 구하는 코드를 다양한 형태로 만들어 보세요

• textArray = [52,273, 32, 103, 275, 24, 57]

<script>
function min(array) {
let output = array[0]
for (let idx = 1; idx < array.length; idx++) {
if (output > array[idx]) {
output = array[idx]
}
}
return output
}
const testArray=[52, 273, 32, 103, 275, 24, 57]
console.log(`${testArray} 중에서`)
console.log(`최소값은 ${min(testArray)}입니다.`)
</script>

<script>
function min(array) {
let output = array[0]
for (let idx in array) {
if ( output > array[idx] ) {
output = array[idx]
}
}
return output
}
const testArray=[52, 273, 32, 103, 275, 24, 57]
console.log(`${testArray} 중에서`)
console.log(`최소값은 ${min(testArray)}입니다.`)
</script>

 

 

매개 변수와 리턴 값

함수 prompt()

• 문자열 자료형을 입력 받을 때 사용하는 함수

String prompt([String message], [String default]);

 

매개 변수

• 함수를 호출할 때 함수로 넘겨 주는 변수(변수가 가지고 있는 값을 함수에 전달)
• 자바스크립트는 함수를 생성할 때 함수에서 지정한 매개 변수 개수보다 많거나 적은 매개변수 사용을 허용

function <함수 이름>( <매개 변수>, <매개 변수>, <매개 변수> ) {
<함수 코드>
return <리턴 값>
}

<script>
alert('원래 매개변수입니다.', '추가된 매개변수입니다')
</script>

출력 - ‘원래 매개변수입니다’

» 추가된 매개 변수 무시

 

리턴 값

• 함수가 처리를 한 후에 다시 반환하는 값

function <함수 이름>( <매개 변수>, <매개 변수>, <매개 변수> ) {
<함수 코드>
return <리턴 값>
}

 

 

가변 매개변수 함수

<script>
	let array1 = Array()
	let array2 = Array(5)
	let array3 = Array(273, 103, 57, 32)
	alert( array1 + '\\n' + array2 + '\\n' + array3)
</script>

• ,,,, ⇒ 없다는것 표현
• Array( ) 함수는 매개 변수에 따라 세 가지 형태로 실행

 

• 매개 변수로 전달된 숫자 모두를 더하는 sumAll( )이라는 함수를 만들어 보자

<script>
	function sumAll() {
		alert( typeof(arguments) + '의 길이:' + arguments.length)
	}
	sumAll(1, 2, 3)
</script>

<script>
function sumAll() {
let output = 0
for( let eachElement of arguments){
output += eachElement
}
return output
}
alert( sumAll(1, 2, 3) )
</script>

• 자바스크립트의 모든 함수는 내부에 arguments 객체(object)가 있으며 이 arguments 객체는 매개 변수를 요소로 하는 배열임

 

나머지 매개 변수

function 함수_이름(...나머지_매개변수) {
}

<script>
	function sample(...items) {
		console.log(items)
	}
	sample(1,2)
	sample(1,2,3)
	sample(1,2,3,4)
</script>

<script>
	function min(...items) {
		let output = items.shift()
		for (const item of items){
			if (output > item) {
				output = item
			}
		}
		return output
	}
	console.log('min(52, 273, 32, 103, 275, 24, 57)')
	console.log(`= ${min(52, 273, 32, 103, 275, 24, 57)}`)
</script>

일반 매개변수와 나머지 매개변수 조합하기

• 매개변수 a, b에 값을 먼저 할당하고 나머지 매개 변수 값이 c에 할당됨

<script>
function sample(a, b, ...c) {
	console.log(a, b, c)
	}
	sample(1, 2)
	sample(1, 2, 3)
	sample(1, 2, 3, 4)
</script>

 

전개 연산자

• 어떤 함수의 매개변수로 배열을 입력할 수 없고 숫자(들)을 입력해야 한다면
• 그런데 우리가 가지고 있는 데이터는 배열이라면 배열 요소를 하나하나 전개해서 전달해야 함
• 자바스크립트에서는 이런 경우를 대비해서 ‘전개 연산자’를 제공함

min(52, 273, 32, 103)
min(52, 273, 32, 103, 275, 24, 57)
const array = [1, 2, 3, 4]
min(array[0], array[1], array[2], array[3])

함수(...배열)

풀어서 전달한다

<script>
	function sample(...items) {                  // "나머지 매개변수" 방식
		console.log(items)
	}
	const array = [1, 2, 3, 4]

	console.log('전개 연산자를 사용하지 않는 경우')
	sample(array)

	console.log('전개 연산자를 사용한 경우')
	sample(...array)                              // 전개 연산자 사용
</script>

• 전개 연산자를 사용하지 않은 경우, 배열이 매개변수로 들어옴 → items ➔ [ [1, 2, 3, 4] ]
  • [ [1, 2, 3, 4] ]는 요소가 1개인 배열
• 전개 연산자를 사용할 경우, 숫자가 하나하나 전개 되어 매개변수로 들어옴 → items ➔ [1, 2, 3, 4]
  • [1, 2, 3, 4]는 요소가 4개인 배열

 

기본 매개변수

함수_이름(매개변수, 매개변수=기본값, 매개변수=기본값)

<script>
	function earnings(name, wage=10000, hours=40) {
        console.log(`# ${name}님의 급여 정보`)
        console.log(`- 시급 : ${wage}원`)
        console.log(`- 근무 시간 : ${hours}시간`)
        console.log(`- 급여액 : ${wage * hours}원`)
        console.log('')
    }
    earnings('민재')
    earnings('재영', 150000, 20)
    earnings('뽀삐', 200, 5)
</script>

• 매개변수를 따로 주지 않으면 기본 매개변수를 준다.

 

내부 함수

• 함수 내부에서 선언하는 함수

function <외부 함수>( ) {
	function <내부 함수 1>( ) {
		<함수 코드>
	}
	function <내부 함수 2>( ) {
		
<함수 코드>
	}
}

삼각형의 빗변의 길이를 구하기

<script>
	function pythagoras(a, b) {
		return Math.sqrt(a*a + b*b);
	} 
</script>

<script>
	function square(x) { 
		return x * x; 
	};
	function pythagoras(a, b) {
		return Math.sqrt( square(a) + square(b) );
	} 
</script>

<script>
	function square(x) { // A
		return x * x; 
	};
	function pythagoras(a, b) {
		return Math.sqrt( square(a) + square(b) );
	} 
	function square(x) { // B
		return 2*x;
	}
	alert( pythagoras(1, 1) );
</script>

square 라는 함수가 재정의 되어 위에서 만든건 덮어씌워진다.

• 내부함수 사용

<script>
	function pythagoras(a, b) {
		function square(x) { 
			return x * x; 
		};
		return Math.sqrt( square(a) + square(b) );
	} 
	function square(x) {
		return 2*x;
	}
	alert( pythagoras(1, 1) );
</script>

참고 – 자기 호출 함수

• 함수를 생성 하자 마자 호출

<script>
	( function ftn( ) {
		alert(‘함수를 생성 하자 마자 호출’);
	} )( );
</script>

 

콜백 함수

• 자바스크립트에서는 함수도 하나의 자료형이므로 매개변수로 전달할 수 있음
• 매개변수로 전달하는 함수를 콜백 함수라고 함
  • 함수를 매개 변수로 받아서 해당 함수(callback 함수)를 5번 호출 하는 코드

<script>
	function CallTenTimes( callback ) {
		for(var i = 0 ; i < 5 ; i++) {
			callback( );
		}
	}
	var callback = function () {
		alert(‘함수 호출’);
	}
	CallTenTimes( callback );
</script>

<script>
	function CallTenTimes( callback ) {
		for(var i = 0 ; i < 5 ; i++) {
			callback( i );
		}
	}
	var callback = function () {
		alert( `함수 호출 : ${ arguments[0] }` );
	}
	CallTenTimes( callback );
</script>

arguments = 매개변수의 배열

위의 코드에서 arguments는 i 의 값을 요소로 하는 배열

 

• 콜백 함수는 익명 함수로 사용하는 경우가 많음.
• CallTenTimes( ) 함수의 매개 변수로 익명함수를 전달

<script>
	function CallTenTimes( callback ) {
		for(var i = 0 ; i < 5 ; i++) {
			callback( );
		}
	}
	CallTenTimes( function( ) {
		alert(‘함수 호출‘);
	} );
</script>

함수를 리턴 하는 함수

• returnFunction( ) 함수가 리턴 하는 것이 함수이므로 함수에 ( );를 붙여서 해당 함수를 호출

<script>
	function returnFunction( ) {
		return function( ) {
			alert(‘함수를 리턴’);
		};
	}
	returnFunction( )( ); 
</script>

 

콜백 함수를 활용하는 함수

forEach( )

• forEach( )는 배열이 가지고 있는 메서드 - 각 요소에 대해서 주어진 함수를 적용

<script>
	const numbers = [273, 52, 103, 32, 57]
	numbers.forEach(function(value, index, array){
		console.log(`배열 [${array}]에서 ${index}번째 요소의 값은 ${array[index]}입니다.`)
		console.log('')
	}) 
</script>

 

map( )

• map( )은 배열이 가지고 있는 메서드 - 콜백함수에서 반환하는 값으로 새로운 배열을 생성

<script>
	const numbers = [2, 4, 6, 8, 10]
	let newNumber = numbers.map(function(value, index, array){
		return value * value
	}) 
	console.log(newNumber)
</script>

<script>
	const numbers = [2, 4, 6, 8, 10]
	let newNumber = numbers.map(function(value, index, array){
		return value * value
	}) 
	newNumber.forEach(console.log)
</script>

 

filter( )

• filter( )은 배열이 가지고 있는 메서드 - 콜백함수에서 반환하는 값이 true인 것만을 모아서 새로운 배열을 생성

<script>
	const numbers = [0, 1, 2, 3, 4, 5]
	let evenNumbers = numbers.filter(function(value, index, array){
		return value % 2 === 0
	}) 
	console.log(`원래 배열 : ${numbers}`)
	console.log(`짝수만 추출한 배열 : ${evenNumbers}`)
</script>

<script>
	const numbers = [0, 1, 2, 3, 4, 5]
	let evenNumbers = numbers.filter(function(value){
		return value % 2 === 0
	}) 
	console.log(`원래 배열 : ${numbers}`)
	console.log(`짝수만 추출한 배열 : ${evenNumbers}`)
</script>

value 만 사용하니 index, array는 빼줘도 된다.

 

 

조금 더 나아가기

화살표 함수

• 프로그래밍 언어는 시간이 지남에 따라 ‘기능 추가＇라는 발전도 하지만 ‘기존 코드를 더 쉽게 사용할 수 있는 문법의 추가’라는 측면의 변화(발전)도 함. ‘화살표 함수’는 후자의 경우에 해당.

function( ) { }

익명함수를 아래와 같이 표현 가능

( ) => { }

• 위 두 표현이 완전이 동일한 것은 아님
• this 키워드의 의미가 다름 → “this 키워드를 주의해서 사용하자＂
• 아래 두 코드 비교

<script>
	let m = function(a, b){
		return a*b
	}
</script>

<script>
	let m = (a, b) => a*b
	console.log( m(2, 3) )
	</script>

 

 

자바스크립트 내장 함수

기본적으로 제공되는 함수

• 예. alert(), prompt()

 

타이머 함수

• 특정 시간에 지정한 함수를 실행

setTimeout( function, millisecond)

<script>
	alert(‘마음 속으로 1, 2, 3, … 세보세요\\n준비 되었나요?’);
	setTimeout(function( ) {
		alert(‘4초 지났습니다‘); 
	}, 4000);
</script>

setInterval( function, millisecond )

<script>
	// 1초 마다 함수 실행
	var intervalID = setInterval( function( ) {
		alert( ‘<p>’ + new Date( ) + ‘</p>’);
	}, 1000);
	// 5초 후 함수를 실행
	setTimeout( function( ) {
		clearInterval( intervalID ); // 타이머 종료
	}, 5000);
</script>

 

코드 실행 함수 - eval( string ) 

• eval( string ) : 문자열을 자바스크립트 코드로 보고 실행

<script>
	var willEval = ‘’;
	willEval += ‘var number = 0;’;
	willEval += ‘alert(number);’;

	alert( willEval );

	eval( willEval );

</script>

 

 

예제

랜덤 정수 만들기

Math.random( )

• 0~1까지의 수 중에서 임의 수를 리턴
• Math.random( ) * 10은 0~10까지의 수 중에서 임의 수를 리턴

<script>
	var N = 5;
	var number = Array(N);
	for( var i = 0; i<N; i++) {
		number[i] = Math.random( ) * 10;
		alert( number[i] );
	}
</script>

 

Math.floor( )

• 주어진 수 와 같거나 주어진 수 보다 작은 가장 큰 정수를 반환

<script>
	var N = 5;
	var number = Array(N);
	for( var i = 0; i<N; i++) {
		number[i] = Math.random( ) * 10;
		alert( Math.floor( number[i] ) );
	}
</script>

 

 

Quiz 1

함수 이름 : power

• 매개변수 한 개를 전달하면 제곱한 값을 반환(예, power(2) → 2 x 2 = 4 )
• 매개변수 두 개를 전달하면 <첫 번째 매개 변수>의 <두 번째 매개 변수> 제곱한 값을 반환(예, power(2,3) → 222 = 8)

<script>
        var power = (a,b) => {
            if (!b){
                return a*a;
            }
            else{
                return Math.pow(a,b);
            }
        }
        alert(power(2))
        alert(power(2,3))
</script>

<script>
	var power = function( ) {
		switch (arguments.length) {
			case 1 : return arguments[0] * arguments[0];
			case 2 : return Math.pow( arguments[0], arguments[1] );
			default : return ‘매개 변수 개수 에러!’;
		}
	};
	alert( power(2) );
	alert( power(2, 3) );
	alert( power( ) );
</script>

 

 

Quiz 2

함수 이름 : multiply

• 매개변수로 넣은 값을 모두 곱해 줌(예, multiply(1, 2, 3, 4, 5) → 120 )

<script>
	function multiply( ) {
		var result = 1;
		for (var element of arguments) {
			result *= element;
		}
		return result;
	}
	alert( multiplay(1, 2, 3, 4, 5) );
</script>

<script>
	var multiply = function( ) {
		var result = 1;
		for (var element of arguments) {
			result *= element;
		}
		return result;
	}
	alert( multiply(1, 2, 3, 4, 5) );
</script>

<script>
	var multiply = (…numbers ) => {
		var result = 1;
		for (var element of numbers) {
			result *= element;
		}
		return result;
	}
alert( mul