자바스크립트의 함수(function)의 다양한 정의 방법과 실행, 사용 이유 등에 대한 내용입니다. 😊

📒 자바스크립트의 함수란?

프로그래밍에서 함수(function)란 하나의 특별한 목적의 작업을 위해 독립적으로 설계된 프로그램 코드의 집합이라고 정의할 수 있다.

해당 정의를 이미지로 표현하면,

위와 같이 표현될 수 있는데, 이미지에서 나온 특정 입력 값이 투입되면 함수를 거쳐 새로운 출력 값을 반환하는 것과 같은 역할을 하는 것이다.

자바스크립트에서 함수는 일급 객체로 취급된다.

💡 일급(first-class) 객체란

다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 일급 객체를 위한 조건은 다음과 같다.

• 변수(variable)에 담을 수 있다.
• 인자(parameter)로 전달할 수 있다.
• 반환 값(return value)으로 전달할 수 있다.
  
  

🔖 출처

1급 객체 : 위키백과 일급 객체
1급 객체 : 최정렬님 github.io

위 일급 객체에 대한 설명에서 나온 변수와 인자 그리고 반환 값에 대한 내용이 이어지는 자바스크립트 함수의 사용법에서 다뤄진다.

⚙️ 함수(function) 사용법

함수도 변수가 선언과 할당의 과정이 있듯이, 마찬가지로 함수는 정의와 실행의 과정이 있다.

함수의 정의

함수를 정의하는 다음과 같은 방법들이 있다.

• 함수 선언문
• 함수 표현식
• 화살표 함수 표현식

우선 함수 선언문은 일반적인 프로그래밍 언어에서 함수 선언과 비슷한 형식으로 가장 기본적인 방법이다.

function functionName(parameter) {
	statements
}

위 구문에서 보이는 바와 같이, function 을 작성하고 함수 이름(functionName)을 작성한 뒤에 소괄호(()) 안에 매개변수(parameter)의 이름을 작성한다. 그리고 중괄호를 열어 함수를 실행했을 때 작동되고자 하는 구문(statements)을 작성한다.

함수 표현식은 함수 선언식의 구문과 비슷하지만 변수 값에 함수를 저장하는 형태의 구문을 갖는다.

let functionExpression = function functionName(parameter) {
	statements
}

보이는 바와 같이 함수 선언문과 비슷한 형식이지만 변수(functionExpression)를 선언하여 해당 변수의 값으로 함수(fucntionName)를 할당한다.

위와 같이 구문 작성 방식의 차이가 있기 때문에, 두 방식은 차이점이 존재한다. 그 차이점은 호이스팅과 관련된 사항인데, 호이스팅 관련 내용은 이전 자바스크립트 기본에 대한 포스트에 기재했으니 기억 안나면 다시 보는걸로!

💡 함수 선언문과 함수 표현식의 차이점

간단히 말하자면, 함수 선언문은 호이스팅에 영향을 받고, 함수 표현식은 호이스팅에 영향을 받지 않는다!

해당 내용을 예시를 활용하여 알아보자

// 함수 선언문
sayHello(); // output : hello
function sayHello(parameter) {
	console.log('hello')
}

// 함수 표현식
sayHello(); // ReferenceError: sayHello is not defined
let functionExpression = function sayHello(parameter) {
	console.log('hello')
}

위 두 가지 구문은 공통적으로 함수 실행 이후 선언이 이루어지는 형태이다.

그러나 함수 선언문의 경우에만 정상적으로 함수 실행이 작동하는 결과를 확인할 수 있다.

이는 위에서 언급한 바와 같이 호이스팅이 함수 선언문의 경우에만 일어나기 때문이다.

변수는 var는 호이스팅이 일어나기 때문에 해당 방법을 지양하고 let과 const 방식을 지향해야 했다.

마찬가지로, 함수도 호이스팅으로 인해 스코프가 꼬이고 문제 발생에 대한 정확한 원인 분석이 어려워지는 문제점 등이 발생하기 때문에, 대체적으로 함수 표현식을 지향한다!

이어서 화살표 함수(Arrow function)는 문법에 들어가는 => 해당 부분이 마치 화살표 같아서 이름 지어진 함수 정의 방식이다. 화살표 함수의 문법은 다음과 같다.

let arrowFunc = (parameter) => {
	console.log('Hi')
}

arrowFunc() // output : Hi

또한, 앞의 두 가지 방식과는 다르게 화살표 함수는 구문이 짧고, this의 바인딩 방식에서 일반 함수와 구분된다.

💡 일반 함수와 화살표 함수의 차이

this 에 대한 간단한 이해

this 를 간단하게 설명하자면, 현재 실행하고 있는 문맥이 무엇인가에 대한 내용이다.

누가 호출했느냐에 대한 내용이 중요한 부분인데, 브라우저 콘솔을 기준으로 기본은 window 다.

// in browser
console.log(this); // output : window
// strict 모드일 경우, undefined 라고 한다.

이러한 this 객체 안에서는 결과 값이 달라진다.

var obj = {
  a: function() { console.log(this); },
};
obj.a(); // obj
var a2 = obj.a;
a2(); // window

이는 객체 메서드 호출 시, this 를 내부적으로 바꾼다고 한다.

그러나 아래의 경우에는 window 가 출력된다. 왜냐하면 아래의 경우에는 변수에 값을 저장한 순간 객체의 메서드가 아닌 일반적인 함수가 되었기 때문에 더 이상 obj 의 메서드가 아닌 것이다.

이렇게 자바스크립트의 this 는 정적인 것이 아닌 동적인 존재로 여겨진다. 이는 일반 함수의 this가 동적 스코프(dynamic scope)에 해당한다고 할 수 있다.

그러나 this 는 동적 스코프가 아닌 정적 스코프(lexical scope)의 this를 갖는데, 이러한 부분에서 차이점을 가지며 바인딩 방식에 차이를 보인다.

동적 스코프와 정적 스코프에 대한 내용은 아래 간단히 설명할 것이므로 필요 하에 목차를 눌러 이동하자!(해당 내용이 너무 길어져 별도로 작성 😂)

바인딩(binding) 방식의 차이

멀고도 먼 길이었다. 이제 바인딩의 차이에 대해 알아보자.

동적 스코프와 정적 스코프에 대한 이해를 마쳤다는 전제 하에 간단히 설명하자면, 화살표 함수는 함수 선언을 할 때this 에 바인딩하는 객체가 정적으로 결정된다는 점이다. 이 말은 화살표 함수는 언제나 상위 스코프의 this 를 가리킨다는 것이다.

예시 코드를 보면서 해당 내용을 이해해보자.

function Person(){
  this.age = 0;
  setInterval(() => {
    this.age++; // this는 Person 객체를 참조
    console.log(this.age);
  }, 1000); // output : 1... 2... 3...
}
var p = new Person();

콜백 함수(callback function)에 대한 내용은 잠시 미뤄두고 스코프에 대한 내용에 집중하자면, 위와 같은 상황에서 setInterval() 함수의 this 는 상위 스코프인 Person의 객체를 참조하여 해당 값인 0 을 사용한다.

위에서 잠깐 언급한 바와 같이, 화살표 함수는 간단하게 함수 구문을 작성할 수 있다는 장점과 앞에서 이해한 this의 바인딩 부분에서 상위의 객체를 참조할 수 있다는 점이 콜백 함수를 작성하는 데에 용이하다.

이와 관련되어 콜백 함수에 관련된 내용과 화살표 함수로 대체 가능한 경우에 대한 내용은 별도로 포스팅을 할 예정이다. 👊

🔖 출처

this : 제로초님 개인블로그 : 자바스크립트 this는 무엇인가?
Arrow Function Binding : Nesoy Blog : Javascript Arrow function과 Binding에 대해

💡 Lexical Scope와 Dynamic Scope

Lexical Scope 는 변수나 함수가 선언된 곳의 내용 사용한다는 의미이고, Dynamic Scope 는 변수나 함수가 호출된 곳의 내용 사용한다는 의미를 갖는다.

해당 내용은 어떻게 해석할 수 있을까에 대해 예시 코드를 보면서 알아보자

function log() {
  console.log(name);
}
function wrapper() {
  var name = 'nero';
  log();
}
var name = 'zero';
wrapper(); // output : zero

해당 코드는 두 가지 방식에 따라 결과가 달라진다.

우선 자바스크립트는 Lexical Scope 의 방식을 따르고 함수의 선언에 따라 상위 스코프가 결정되기 때문에, 코드를 실행하면 결과 값으로 zero 를 반환한다.

이는 선언을 기준으로 스코프를 결정하기 때문에, 선언하는 순간 자기 스코프 기준으로 상위 스코프의 가장 가까운 곳의 변수를 고정적으로 참조한다.

그렇기 때문에, 위 코드의 경우에는 wrapper() 함수가 선언된 시점에서 상위 스코프의 전역 변수 name을 고정적으로 참조하기 때문에, 선언 시 nero 라는 값을 가진 name 이라는 지역 변수는 출력 결과에 영향을 주지 않는다.

만약 Dynamic Scope 방식이라면 호출을 기준으로 스코프가 결정되기 때문에, 함수가 선언되고 name의 값이 변경되었지만 wrapper() 함수 내의 log() 함수가 호출 된 시점에서 name 이 재선언 되어 출력 값은 nero로 출력될 것이다.

이정도로 간단하게 각 스코프에 대해 설명할 수 있다. 👌

🔖 출처

Lexical and Dynamic Scope : Suyeon Bak님 medium : (JavaScript) Lexical Scope(Static Scope) and Dynamic Scope
Lexical and Dynamic Scope : 제로초님 개인 블로그 : 함수의 범위(scope)

함수명에 따른 구분

또한, 함수 작성 방식에서 함수의 이름(식별자 : identifier)을 작성하는 지의 유무에 따라 구분되기도 한다.

식별자 규칙에 대한 내용 리마인드! 🧐

일반적으로 함수의 이름을 정의하는 함수 형태를 기명 함수라 하고, 반대로 참조할 식별자 없이 선언된 함수를 익명 함수라 한다.

// 기명 함수
function sayHello1() {
	console.log('Hello, World')
}
// 익명 함수 1
let sayHello2 = function () {
	console.log('Hello, World')
}

위와 같이 기명 함수(sayHello1())는 해당 함수명을 통해 선언되었지만, 아래 익명 함수(sayHello2())의 경우 함수 표현식의 구문으로 let 을 통해 변수에 할당되었으며, 변수명을 통해 구분할 수 있다.

그리고 기명 함수의 경우엔 선언된 함수명을 통해 실행하지만, 아래 익명 함수의 경우에는 변수명을 통해 실행 가능하다. 위 익명 함수의 경우에는 아래와 같이 실행된다.

sayHello2(); // 기명 함수와 동일

이러한 익명 함수는 주로 다른 함수에 대한 인수로 사용하거나, 클로저(closure)로 사용하는 경우에 활용된다.

클로저(closure)는 간단하게 말하자면 내부 함수가 외부 함수에 접근할 수 있는 것에 대한 내용인데, 이후 별도의 포스팅을 진행할 것이다. 그래도 지금 당장 이해가 필요하다면 아래 링크로!

🔖 참고

closure : 생활코딩 : 클로저

return 문의 역할

그리고 함수에서 작동된 구문에 따라 나오는 결과 값을 반환하기 위해서는 return 문이 존재해야 한다. 다음의 코드를 살펴보면서 알아보자.

// return 문이 없는 함수
function sayHello() {
	let a = 'Hello, World'
}
console.log(sayHello()) // output : undefined

해당 함수의 경우 변수 a 에 'Hello, World' 라는 문자열을 저장하였지만, 이를 실행하여 console 에 출력하니 undefined 라는 값을 반환하였다.

이는 함수의 기본 반환 값이 undefined 로 정해져있고, returtn 값을 설정하지 않았기에 기본 값이 출력된 것이다.

해당 코드에서 변수 a 의 값을 출력하기 위해서 다음과 같이 수정할 수 있다.

// return 문이 있는 함수
function sayHello() {
	let a = 'Hello, World'
	return a
}
console.log(sayHello()) // output : 'Hello, World'

위 코드에서 return 값으로 a 를 설정하니 의도한 대로 Hello, World를 출력하는 것을 알 수 있었다.

해당 경우에는 단순히 console 에 출력하는 것이 목적이었지만, return 은 구문에 대한 값을 반환한다는 점에서 중요한 요소 중 하나이다.

함수의 실행

이미 위에서도 많이 봤겠지만, 함수의 실행은 다음과 같은 형식으로 할 수 있다.

function sayHello() {
	console.log('Hello, World')
}
sayHello(); // output : 'Hello, World'

위와 같이 함수명에 소괄호를 붙혀 실행할 수 있다. 또한 앞에서 언급한 익명 함수의 경우에는 변수명을 활용하여 함수를 선언할 수 있다.

그리고 함수 실행을 선언 이후에 별도로 진행하는 것 말고도, 선언과 동시에 즉시 함수를 실행하는 함수도 존재한다.

// 기명 즉시 실행 함수 1
(function sayHello() {
	console.log('Hello, World')
})(); // output : 'Hello, World'
// 기명 즉시 실행 함수 2
(function sayHello() {
	console.log('Hello, World')
}()); // output : 'Hello, World'
// 익명 즉시 실행 함수 1
(function () {
	console.log('Hello, World')
})(); // output : 'Hello, World'
// 익명 즉시 실행 함수 2
(function () {
	console.log('Hello, World')
}()); // output : 'Hello, World'

위 네 가지 함수 구문은 기명과 익명 함수로 구분되고 괄호의 위치만 달라진다. 괄호의 위치가 변경되어도 보시다시피 결과 값은 동일하다.

즉시 실행 함수의 문법을 말하자면 함수를 작성하고 함수를 소괄호로 감싼 뒤, 인자를 포함할 소괄호를 다시금 작성해주면 된다.

함수 표현식으로도 즉시 실행 함수를 작성하였지만, 익명 기명 구분 없이 오류가 발생했다.

(let sayHello = function () {
	console.log('Hello, World')
})(); // SyntaxError: /src/index.js: Unexpected reserved word 'let' (2:1)

위와 같은 구문 오류를 반환하는 것을 알 수 있다.

🔖 출처

즉시 실행 함수 : beomy님 tistory : [자바스크립트] 함수(Function), 즉시실행함수(Immediately-invoked function expression)

🧐 함수를 사용하는 이유

이렇게 함수에 대해 어느 정도 알아봤으니 함수를 사용하는 이유에 대해서도 간단하게 알아보자. 해당 내용에 대해서는 재사용성, 가독성, 모듈화라는 세 가지 키워드를 통해 알 수 있다.

재사용성

재사용성은 말그대로 코드의 재사용에 대한 것을 의미한다.

예를 들어, 같은 기능을 하는 구문이 있지만 사용되는 인자가 달라서 인자마다 같은 형식의 구문을 반복한다면 해당 구문은 매우 길어질 것이며, 불필요한 반복 업무 또한 늘어날 것이다.

// 일정 구간에서 2의 배수들을 배열에 담는 구문
let two = []
for (let i = 1; i < 10; i++) {
  two.push(i*2)
} 
console.log(two) // output :  [2, 4, 6 ... , 18]
// 일정 구간에서 3의 배수들을 배열에 담는 구문
let three = []
for (let i = 1; i < 10; i++) {
  two.push(i*3)
} 
console.log(three) // output :  [3, 6, 9 ... , 27]

해당 경우에 함수를 사용한다면 같은 함수에 인자만 다르게 대입하여 코드를 재사용할 수 있고, 간략한 코드와 반복 업무의 감소를 도모할 수 있다.

function pushMultiple(n) {
  let arr = []
  for (let i = 1; i < 10; i++) {
    arr.push(i*n)
  }
  return arr
}
console.log(pushMultiple(2)) // output :  [2, 4, 6 ... , 18]
console.log(pushMultiple(3)) // output :  [3, 6, 9 ... , 27]

가독성

가독성 또한 간단하게 말해 읽기 쉬운 코드를 의미한다. 해당 내용도 재사용성에서 사용한 예시를 활용하여 설명할 수 있다.

먼저 읽기 쉽다는 것은 복잡하지 않고 간략하다는 의미가 될 수 있다.

위 예시를 보면 함수를 사용하지 않은 구문과 함수를 사용한 구문이 단순히 코드 줄 갯수의 부분에서 차이가 있다는 것을 알 수 있다. 코드가 짧다는 것은 간략하게 같은 기능을 실행하고 이해할 수 있다는 장점이 된다.

또한, 읽기 쉽다는 것은 해석에 용이하다는 의미도 포함된다.

앞서 함수를 사용하지 않고 작성한 구문의 경우에는 출력하기 이전에 해당 변수명이나 for 문을 보고 직관적으로 결과 값을 예측하기 어려운 부분이 있다.

그러나 함수를 사용한 구문은 pushMultiple() 이라는 함수명에서 해당 함수가 배수와 push() 메서드를 활용한다는 부분에 대해 어느 정도 유추할 수 있기에 해당 코드를 읽고 해석하는 것에 있어 유용하다.

모듈화

모듈화에 대한 이해를 위해 우선 모듈(module)에 대한 개념을 간단히 이해해보자.

모듈이란 소프트웨어 설계에서 기능 단위로 분해하고 추상화 되어 재사용 및 공유 가능한 수준으로 만들어진 단위를 의미하는데, 그러한 의미에서 모듈화는 원활한 협업을 도와주는 역할을 한다고 보면 된다.

필요 기능을 정의하고 구조적인 부분에서 서로에게 영향을 주지 않도록 코드를 작성하여, 오류가 발생하였을 때 디버깅의 과정에서 확실한 원인 파악과 이후 원활하고 신속한 수정 및 보수의 과정을 할 수 있다는 부분이 모듈화에 대한 내용에 포함된다.

🔖 출처

함수를 사용하는 이유 : 개발 흔적 남기기 : Javascript - 함수(Function)를 사용하는 이유, 문법
module : VincentGeranium Blog : 모듈(Module)와 모듈화란?

🔖 전체적인 참고

함수 : MDN Web Docs : 함수

📓 수정 로그

수정 날짜	내용
210806	미작성한 return 에 대한 개념 추가