[Javascript] #6. Javascript Function

[Javascript] #6. Javascript Function

안녕하세요, 개발자 iGon 곤잘레스입니다! 오늘은 자바스크립트의 Function에 대하여 포스팅하려 하는데요. Function은 작업을 수행하거나 값을 계산하는 절차입니다. Function은 단순히 로직 작업을 수행하는 절차를 넘어, 하나의 객체로 정의되는 개념으로서 Class기법이 나오기 전에는 prototype라는 것을 이용하여 한동안 객체 지향 프로그래밍 기법처럼 사용되었습니다. 그럼 지금부터 자바스크립트 Function에 대해 알아보도록 하겠습니다.

1. 기본 선언

함수(Function)은 기본적으로 function 키워드를 사용하여 선언합니다. 함수의 기본적인 구성은 function키워드, 함수명, 매개변수, 함수 내용부 등을 이용하여 정의할 수 있습니다.

// function 선언방식 /* function 함수명 (매개변수..) { 함수 내용부 } */ function example(param) { console.log(param); return param; }; example('예제입니다.');

위의 예제는 example이라는 함수를 정의하여 매개변수로 String 값을 전달하여 해당 값을 console 메시지로 출력한 다음, 해당 메시지를 다시 반환하도록 작성하였습니다. 여기서 매개변수와 반환 값은 작성하고자 하는 목적에 따라 선언하거나 생략할 수 있습니다. 특정 변수를 조작하거나 이를 이용하여 계산해야 할 작업이 없다면 매개변수와 반환 값은 굳이 선언하지 않아도 됩니다. 하지만 해당 변수에 대하여 조작이나 계산이 필요하거나 변경된 값을 다시 전달받아야 한다면 매개변수와 반환 값을 선언하여 함수를 통해 변경된 내용을 전달받아야 합니다.

2. 익명함수

익명 함수는 특정 변수를 선언한 후, 함수의 내용을 해당 변수에 할당하여 사용하는 것을 뜻합니다. 보통 함수 선언에서는 이를 실행하는 과정에서 함수 호이스팅이 일어날 수 있는데 이 내용에 대해서는 Javascript #2 변수 선언에서 포스팅하였으니, 해당 콘텐츠를 참고해 주시기 바랍니다. 다시 돌아와서 익명 함수는 함수 호이스팅이 적용되지 않습니다. 익명 함수를 선언하는 방식은 아래와 같습니다.

// 익명 함수 선언 var unnamedFunction = function() { // 변수에 함수 객체를 할당 console.log('익명함수 입니다'); }; unnamedFunction(); // console log에 '익명함수 입니다' 메시지 출력

3. 클로저

클로저는 함수의 중첩을 허용하는 자바스크립트의 특성을 이용한 기능입니다. 간단히 설명하자면 자바스크립트는 함수 내 함수를 중첩하여 작성하는 것을 허용하는데 이때, 중첩된 내부 함수는 이를 둘러싸고 있는 외부 함수 안의 변수나 다른 함수에 접근이 가능하나 외부 함수에서는 내부 함수 내 작성된 변수와 함수에는 직접 접근이 불가합니다. 이를 통해 내부 함수에 대한 일종의 캡슐화 효과를 제공할 수 있습니다.

// 클로저 작성 function externalFunc() { var external_val = "1"; function innerFunc() { var inner_val = "2"; console.log(external_val); // 외부함수 내 변수에 접근 가능 } console.log(inner_val); // 내부 함수 내 변수 접근 불가, error return { innerFunc }; } var fn_val = externalFunc(); fn_val.innerFunc();

클로저를 이용하게 되면 특정 함수 객체 내 변수에 대해 직접적인 접근을 허용하지 않게 하고, 오로지 내부에 선언된 함수를 통해서만 변수에 대한 접근이 가능하도록 함으로써 캡슐화된 데이터를 보유할 수 있습니다. 캡슐화의 특성을 이용하여 전역으로 사용되어야 하나, 외부에서 쉽게 접근하여 조작하기를 원하지 않는 데이터를 관리하는 데 사용합니다.

function globalObject() { var _text = ""; function setText(txt) { _text = txt; } function getText() { return _text; } return { setText, getText }; }; var globalObj = globalObject(); globalObj.setText("텍스트"); console.log(globalObj.getText());

4. 즉시 함수(IIFE)

즉시 함수는 함수를 선언하고 함수 사용을 위해 별도 선언 없이 즉시 실행하고자 할 때 사용합니다. 즉시 함수를 작성하게 되면, 스크립트 파일이 브라우저 내에서 해석되자마자 별도 선언 없이 바로 실행됩니다.

// 즉시 실행 함수(IIFE) /* (function () { // 함수 내용 })(); */ // 익명 즉시 실행 함수 (function (num) { console.log(num); // 10 출력 })(10); // 기명 즉시 실행 함수 (function msg(num) { console.log(num); // 20 출력 })(20); // 변수에 반환값 전달 var msg = (function (num) { return num; })(30); console.log(msg); // 30 출력

즉시 함수는 한 번만 실행되는 작업에 많이 이용되는데, 한번 실행되고 끝나기 때문에 익명함수로 보통 작성하며 외부에서 접근할 수 없어 즉시함수 내 내부 변수를 보호하고 쓸데없는 전역 변수를 만들지 않아 Global scope에 영향을 끼치지 않습니다. 보통 자바스크립트 라이브러리나 플러그인 등을 만들거나 초기화 모듈을 작성하는데 많이 사용됩니다.

(function ($) { // 파라미터를 통해 내부 변수로 받아올 수 있기 때문에 $라는 전역변수를 오염시키지 않고 작업이 가능 })(jQuery)

5. 화살표 함수

화살표 함수는 위에 설명드린 전통적인 함수 표현에서 간편하게 작성할 수 있도록 ES6 이후에 나온 구문입니다. function 키워드 없이 화살표만을 이용하여 함수를 선언할 수 있습니다. 작성 방법은 아래와 같습니다.

// arrow function // 반환값 리턴 var arrowFunction1 = (param) => { console.log('arrow function1 start'); console.log(param); return param; } // 반환값 없음 var arrowFunction2 = param => { console.log('arrow function2 start'); console.log(param); } // 반환값 리턴 선언 생략 var arrowFunction3 => param => param + '입니다'; // 객체 반환(소괄호()로 감싼 후, 객체(json형태)를 반환); var arrowFunction3 => param => ({ param: param });

화살표 함수는 기존의 일반 함수와 다르게 간편히 사용할 수 있다는 점에서 많은 장점을 지니고 있습니다. 하지만 일반 함수에서 사용될 수 있는 this 지시자에 대하여 상위 스코프의 this를 가리킵니다. 이를 Lexical this라고 합니다.

var obj = { root: 'root', normalFunction: function() { // obj 객체에 바인딩 console.log('normalFunction'); // normalFunction 출력 console.log(this.root); // root 출력 }, bindFunction () { // obj 객체에 바인딩 console.log('bindFunction'); // bindFunction 출력 console.log(this.root); // root 출력 }, arrowFunction: () => { // 전역 객체에 바인딩 console.log('arrowFunction'); // arrowFunction 출력 console.log(this.root); // undefined 출력 } } obj.normalFunction(); obj.bindFunction(); obj.arrowFunction();

화살표 함수를 사용함에 있어서 몇 가지 위에 설명한 내용을 포함하여 주의할 점이 몇가지 있습니다. 우선, addEventListener에 화살표 함수를 사용하게 되는 경우에도 this 지시자가 window 객체를 가리키기 때문에 이벤트를 발생시키는 컴포넌트를 찾는 데에는 this를 사용할 수 없습니다. 또한, prototype이 화살표 함수에는 존재하지 않기 때문에 prototype 메서드를 정의할 때에도 사용할 수 없습니다.

마지막으로 화살표 함수는 arguments 객체를 바인딩하지 않기 때문에 arguments 객체 대신에 나머지 매개변수를 대안으로 사용하는 것을 권장하고 있습니다.

var button = document.createElement('button'); button.id = "testBtn"; console.log(button) button.addEventListener('click', () => { console.log(this); // undefined }); button.click(); // undefined 출력 // 2. prototype 선언 var arrowPrototype = () => {}; console.log('arrowPrototype.prototype', arrowPrototype.prototype); // undefined //3. arguments 객체 바인딩 var item = [1, 2, 3] var arrowArgs = () => arguments[0]; var arrowArgs2 = (...args) => args[0]; console.log('arrowArgs', arrowArgs(item)); // {} console.log('arrowArgs2', arrowArgs2(item)); // [1,2,3]

지금까지 자바스크립트 함수 선언에 대하여 알아보았습니다. 이번 포스팅에서는 간단하게 자바스크립트 함수 선언 방식과 각각의 특징에 대해서만 다루었는데요. 추후에 이에 대하여 조금 더 자세히 알아보는 시간을 갖도록 하겠습니다.(공부할 게 참 많습니다 ㅠㅠ) 다음에는 자바스크립트의 Class에 대해 포스팅 하도록 하겠습니다. 지금까지 긴 글 읽어주셔서 감사합니다.

from http://igonnnnn.tistory.com/13 by ccl(A) rewrite - 2021-12-27 23:27:29