자바스크립트 함수에 대해서 알아보자 !

함수

자바스크립트 함수는 하나 이상의 동작 또는 계산을 수행하는 코드 블록입니다. 

함수는 코드의 재사용성을 높이고, 모듈화 및 추상화를 통해 코드를 관리하기 쉽게 만듭니다.

 

분류	종류	설명
사용자 정의 함수	● 선언적 함수 ● 익명 함수	프로그램에서 필요한 기능을 사용자가 직접 정의해서 사용하는 함수입니다.
내장 함수	● 인코딩, 디코딩 함수 ● 숫자 판별 함수 ● 유 . 무한 값 판별 함수 ● 숫자변환 함수 ● 문자 변환 함수 ● 자바스크립트 코드 변경 함수	프로그램 개발에서 자주 사용되는 기능들을 자바스크립트 내부적으로 제공해주는 함수입니다.

 

 

01. 선언적 함수

 

▶ 선언적 함수의 형식

function 함수() {
	실행문;
}

function compute() {
	console.log('선언적 함수');
}

 

▶ 선언적 함수의 호출

'선언적 함수'는 함수를 호출할 때 함수의 앞 또는 뒤에서 호출 가능합니다.

function compute() {
	console.log('선언적 함수');
)
compute();

compute();
function compute() {
console.log('선언적 함수');
}

변수나 함수를 선언하지 않고 호출하였을 때는 에러가 발생해야 하는 것이 맞지만, var로 선언한 변수와 선언적 함수는

변수, 함수 선언 이전에 호출하여도 에러를 발생시키지 않습니다.

이러한 자바스크립트 성질을 '끌어 올리기' 호이스팅(Hoisting)이라고 합니다.

 

 

02. 익명 함수

 

 

▶ 익명 함수의 형식

익명 함수는 변수에 함수 데이터를 저장하여 변수를 마치 함수처럼 사용 할 수 있도록 만들어 줍니다.

var 변수 = function() {
	실행문;
};

var compute = function() {
	consoloe.log('익명 함수');
};

 

▶ 익명 함수의 호출

익명 함수는 변수 선언 이후에 호출해야 합니다.

var compute = function() {
	console.log('선언적 함수');
};
conpute();

compute(); // 익명 함수는 변수 선언 이전에 함수를 호출 할 수 없습니다.
var compute = function() {
	console.log('선언적 함수');
};

 

 

▶ 즉시 실행 함수(immediately-invoked function expression)

익명 함수 중에는 필요에 따라 일회성으로 사용되는 함수도 있습니다. '즉시 실행 함수'는 선언과 동시에 함수가 실행이 되며 함수명이 없기 때문에 재호출 할 수 없습니다. 보통 처음 한번만 실행하는 초기화 코드에 사용됩니다.

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

(function() {
	var sum = 10;
    console.log(sum);
})();

 

 

 

03. return, 매개변수

 

▶ return

함수를 통해 처리된 결과를 반환시켜주는 명령어입니다.

함수 안에서 return을 만나게 되면 해당 함수를 호출한 곳으로 결과 데이터를 반환해 주고 함수는 종료가 됩니다.

func = () => {
    const func="실행되었습니다."
    return func;
}
document.write(func());

 

▶ 매개변수

함수를 호출할 때 전달하는 변수를 '매개변수'라고 합니다.

function func(str){
	document.write(str);
}
func("실행되었습니다.");

 

매개변수의 개수가 정해지지 않은 함수

매개변수가 있는 함수의 경우 보통 매개변수 개수가 정해져 있습니다. 그런데 경우에 따라서는 매개변수의 개수를 정할 수 없는 함수를 만들어야 하는 경우도 발생합니다. 이런 경우 함수에 전달되는 매개변수 값을 저장해주는 arguments 객체를 사용하여 함수를 만들 수 있습니다.

function showsubject(){
        console.log(arguments[0] + ',' + arguments[1]); // html, css
        console.log(arguments.length);	// 2
}
showSubject('html', 'css');

 

▶ 화살표 함수(Arrow function)

ECMAScript 2015(ES6)에 추가된 내용으로 '=>'을 이용하여 함수를 간결하게 표현할 때 사용합니다.

 

화살표 함수는 function 키워드를 생략하고 부등호 '='과 '>'을 합쳐 코딩하며 항상 익명 함수 형식으로 표현합니다.

단일 명령문일 경우에는 함수의 중괄호{ }와 return을 생략할 수 있습니다.

 const func = function(){
    document.write("실행되었습니다.");
}
func();

▼

 

func = () => {
    document.write("실행되었습니다.");
}
func();