자바스크립트 함수(function)의 이해 for SAPUI5 입문

자바스크립트 함수 란, 하나의 특정한 목적의 작업이 처리되도록 설계된 ‘독립된’ 블락의 기능을 의미합니다.

입력을 받아 출력을 내보내고, 함수 내부로 전달 받은 변수인 매개변수를 로직을 통해 조작하며, 해당 결과를 반환하는 역할 등을 합니다.

추후 나올 자바스크립트의 핵심 개념인 클로저, 생성자 함수, 메서드, 프로토타입, 컨택스트 등을 이해하기 위해서는 기초적인 함수의 이해가 필수입니다.

자바스크립트 함수 의 기본 형태

자바스크립트의 함수는 다음과 같은 형태를 띄게 됩니다.

//function키워드 function이름( 파라메터 )
function funcName( x, y ) {
  return x + y;
}

함수도 변수처럼 처리 가능

자바스크립트에서는 함수도 하나의 데이터타입으로 취급됩니다. 즉, 변수처럼 할당하고 사용할 수 있습니다.

따라서 다음과 같이 func라는 변수에 function 자체를 할당하고 필요한 곳에서 변수 형태로 호출이 가능합니다.

const func = function () {
  console.log( "함수입니다." )
}
func(); // 함수호출

함수 외부의 변수도 참조하여 사용 가능

자바스크립트는 다음과 같이 스코프상 함수 외부에서 생성한 변수의 값에도 접근하여 사용이 가능합니다.

const func2 = function () {
 // 외부에서 먼저 수행된 y 값을 받아서 찍어줄 수 있음
 console.log( `함수입니다. + ${ y } 이 추가되었습니다.` )
}
const y = 10;
func2() // 함수호출

하지만, 함수 수행 라인보다 나중에 실행되는 변수는 사용할 수 없습니다.

자바스크립트 함수 – 수학적 함수

수학적 함수란 파라메타가 존재하는 함수를 말합니다. 그렇게 중요한 개념은 아닌 듯 합니다.

// 파라메터 p를 받아 내부 함수에서 1 을 추가하여 return함
const func5 = function( p ){
 console.log( `입력받은 값은 ${ p} 입니다.`);
 return p + 1
}
func5( 10 )

익명함수와 선언적 함수란

익명함수란 말그대로 함수이름이 없는 함수를 이야기합니다. 따라서 익명함수를 사용하기 위해서는 변수에 할당해서 사용을 해야한다.

const func = function () {
return 1;
}

func();

선언적 함수란 익명함수와는 다르게 특정 이름을 갖고 있는 함수를 이야기 합니다. 그리고 타 변수에 할당하지 않고 사용됩니다. 함수 끝에 별도의 return문이 없는 경우에는 기본값으로 undefined가 반환되도록 되어있습니다.

function getNumber() {
return 100;
}

const func1 = getNumber()

// func1;
getNumber();

선언적 함수는 코드가 실행되기 전에 만들어지고(호이스팅), 익명함수는 코드가 한줄한줄 실행되며 만들어지게 됩니다.

따라서 선언적 함수의 경우 다음과 같이 실행 이후에 기술되어도 실행에 문제가 없게 됩니다.

const func1 = getNumber()

// func1;
getNumber();

function getNumber() {
  return 100;
}

자바스크립트 함수에서 사용하는 … 파라매터 전개연산자

ECMAScript6에서 추가된 전개 연산자(Spread Operator)는 배열 혹은 객체 내의 값만을 하나 하나 넘기는 방식을 말합니다. 자바스크립트에서의 함수 매개변수에 “…” 형태의 매개변수를 만들게 되면, 이 파라메터는 배열 형태로 다루어 집니다.

const func5 = function ( param1, param2, ...args ){
 console.log( param1, param2, args )
};
func5( 10, 20, 30, 40, 50 );

const func5 = function ( param1, param2, ...args ){
  console.log( param1, param2, ...args )
};
func5( 10, 20, 30, 40, 50 );

하지만 배열형태의 파라메터는 위치상 마지막에만 사용할 수 있습니다.

const func6 = function ( ...args , param1, param2 ){
  console.log( param1, param2, args )
};
func6( 10, 20, 30, 40, 50 );

아래의 코드로 차이점을 알 수 있습니다. 결국 전개 연산자로 파라메터를 넘기게 되면 2차원 형태로 되지 않음을 알 수 있습니다.

//배열형태로 array push
const arr1 = [1, 2, 3];
const arr2 = [4, 5];
arr1.push(arr2);
console.log(arr1); // [1, 2, 3, 4, 5]

// 전개 연산자로 array push
const arr3 = [1, 2, 3];
const arr4 = [4, 5];
arr3.push(...arr4);
console.log(arr3); 

자바스크립트 함수 에서 즉시호출함수란

즉시호출함수란, 함수를 만들고 즉시 호출하는 함수(Immediately Invoked Function Expression)이며, 한번만 실행하고 더 이상 실행할 필요가 없을 때 사용됩니다.

그래서 보통은 초기화 위치에서 많이 사용되는데요, 그 이유는 변수를 전역에 선언하지 않기 떄문에 코드의 충돌이 없어 플러그인이나 라이브러리 등 모듈화된 기능을 구현할 때 많이 사용됩니다.

일반함수와 달리 ( )로 묶어주면 즉시호출함수가 됩니다.

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

var funcToy = (function() { 
 var priVar = '즉시실행함수';
 return {
    property : priVar
 };
}());

console.log(funcToy.property); // "즉시실행함수" 출력

좀 더 자세한 내용은 모질라 함수 편에서 확인할 수 있습니다.

함께 보면 좋은 글

자바스크립트 배열 메소드 기초 for SAPUI5 초보자

자바스크립트 undefined 체크 방법 – null과의 차이 for SAPUI5