[JavaScript] Function

썸네일이 없어서... 그림판 손글씨

1. 함수

함수는 하나의 로직을 재실행할 수 있도록 하는 것이다. 함수를 이용해서 반복되는 동일한 작업을 필요할 때마다 불러와서 사용할 수 있다. 한 번 만들어둔 함수를 계속해서 불러와서 다시 사용할 수 있기 때문에 이러한 것을 '코드 재사용'이라고 하기도 한다.

 

# 함수는 ①함수 선언하기, ②함수 호출하기 이 두가지로 이루어진다.

① 함수 선언 = 함수를 만든다. function myfunc( argument1, argument2, ...) {}

② 함수 호출 = 만들어둔 함수를 사용한다. myfunc( value1, value2, ...);

 

2. 함수 선언

함수 선언(function declaration) 방식을 이용하면 함수를 만들 수 있다.

function myfunction() {		//함수 선언
	alert("hello");
}

myfunction();	//함수 호출
myfunction();	//여러 번 호출 가능

 

3. 매개변수

매개변수(parameter)를 이용하면 임의의 데이터를 함수 안에 전달할 수 있다. 매개변수는 인수(argument)라고도 불린다.

function myfunction(from, text) {
	alert(from + ' : ' + text);
}

let from = "Son";

myfunction(from, "Hello");	//Son : Hello

 

4. 인수(arguments)

JavaScript에서는 함수를 호출할 때 인수들과 암묵적으로 arguments 객체가 함수 내부로 전달된다. arguments 객체는 함수를 호출할 때 넘긴 인자들이 배열 형태로 저장된 객체를 의미한다.

 

# arguments 객체의 활용

매개변수 개수가 정확하게 정해지지 않은 함수를 구현하거나, 전달된 인자의 개수에 따라 서로 다른 처리를 해줘야 하는 함수를 구현할 수 있다.

function sum() {
	var result = 0;
    
    for(var i = 0; i < arguments.length; ++i) {
    	result += arguments[i];
	}
    
    return result;
}

console.log(sum(1, 2, 3));		// 8
console.log(sum(1, 2, 3, 4, 5, 6, 7));	// 28

 

5. 기본 값

매개변수에 값을 전달하지 않으면 그 값은 undefined가 된다.

 

위에서(3. 매개변수) 정의한 함수 myfunction(from, text)는 매개변수가 2개지만, 인수를 하나만 넣어서 호출할 수 있다. 

myfunction("Son");

두 번째 매개변수에 값을 전달하지 않았기 때문에 text엔 undefined가 할당되고 에러 없이 "Son : undefined"가 출력된다.

 

매개변수에 값을 전달하지 않아도 그 값이 undefined가 되지 않게 하려면 기본값을 설정해줘야 한다.

매개변수 오른쪽에 = 을 붙이고 undefined 대신 설정하고자 하는 기본값을 써주면 된다.

function myfunction(from, text = "no text") {
	alert( from + " : " + text );
}

이젠 text가 값을 전달받지 못해도 undefined 대신 기본값 "no text"가 할당된다.

 

6. 반환 값

함수를 호출했을 때 함수를 호출한 그곳에 특정 값을 반환하게 할 수 있다. 반환 값(return value)

 

지시자 return은 함수 내 어디서든 사용할 수 있다. 실행 흐름이 지시자 return을 만나면 함수 실행은 즉시 중단되고 함수를 호출한 곳에 값을 반환한다. 또 아래와 같이 함수 하나에 여러 개의 return 문이 올 수도 있다.

function checkAge(age) {
	if ( age >= 18 ) {
    	return true;
	} else {
    	return confirm('보호자의 동의를 받으셨나요?');
	}
}

let age = prompt('나이를 알려주세요', 18);

if ( checkAge(age) ) {
	alert('접속 허용');
} else {
	alert('접속 차단');
}

 

 

# return과 비슷?한 break문이 있는데 둘의 차이점은 아래와 같다.

- return : 함수 탈출(해당 메소드 자체에서 빠져나감)

- break : 루프 탈출(함수 내의 반복문에서 빠져나감)

 

7. 함수 종류

1) 일반 함수

//문법
function 함수명() {
	// JavaScript Code
}

//예시
function myfunction(x, y) {
	return x+y;
}

 

2) 익명 함수

//이름 대신에 변수로 호출을 할 수 있다.
var addFnc function(x, y) {
	return x + y;
}

addFnc(x, y);

 

3) 중첩 함수 

//다른 함수 내부에서 정의되는 함수를 의미한다.
function fstFncExample() {
	var a = 1;
    function secondFncExample() {
    	return a *2;
	}
    return secondFncExample();
}

 

4) 콜백 함수

function MainFnc {
	var arg;
    //콜백 함수를 익명으로 전달하는 구조
    LibraryFunction(arg, function(result) {
    //result를 사용한 연산
    });
}

 

5) 로드 함수

//페이지 로드 시 호출될 콜백 함수
window.onload = function() {
	alert('This is the callback function');
}

 

6) $(document).ready()

//DOM 트리들이 모두 로드된 시점에 호출이 된다. (JS 시작 시 가장 먼저 실행되는 함수)
$(document).ready(function(){
	//JS Code
});

//줄여서 표시 가능 (같은 의미)
$(function(){})

 

7) 즉시 실행 함수 (immediate function)

//function 부분을 괄호로 감싼 다음 바로 호출될 수 있게 () 괄호 쌍을 추가한다.
(function (name) {
	console.log('This is the immediate function -> ' + name);
})('foo');