DATA TYPE, 함수(Function) 이해하기

안녕하세요 Jlight입니다.

지난 포스팅에 이어 JavaScript에 함수(function)에 대해 알아보겠습니다.

 

 

🚀JavaScript 함수(Function) 이해하기

함수는 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 뜻합니다.

또한 자바스크립트에서 함수는 객체 타입을 가집니다.

 

함수 생성 방법

▪️ 함수 선언식 (Function Statement)

▪️ 함수 표현식 (Function Expressions)

 

자바스크립트에서 함수를 생성하는 방법은 위처럼 크게 2가지로 나누어집니다.

두 방법은 함수의 이름과 호이스팅에서 차이가 있는데 선언 방법과 차이에 대해 알아보겠습니다.

 

 

📌 함수 선언식

함수 선언문은 함수 리터럴 형식과 같으며  호이스팅에 영향  을 받습니다.

* 함수 리터럴 : 함수 이름 없이 몸체만 있는 형태를 함수 리터럴이라고 합니다.

 

✍️ 함수 선언식의 생성과 실행

// 함수 선언문 생성
function funcName(parameters){

}

funcName(parameters) // 함수 선언문 실행

 

📌 함수 표현식

함수 표현식은 호이스팅에 영향을 받지 않으며 함수를 변수에 할당합니다.

여기서 표현식이란, 자바스크립트에서  값을 반환  하는 식 또는 코드를 말합니다. 

 

✍️ 함수 표현식 생성과 실행

// 함수 표현식 생성
function funcName = function(parameters){

}

funcName(parameters) // 함수 표현식 실행

 

✍️ 화살표 함수를 통한 함수 표현식 생성과 실행

// 함수 표현식 생성 with 화살표 함수
function funcName = (parameters) => {

}

funcName(parameters) // 함수 표현식 실행

 

 

🚀  함수 선언과 표현식의 차이 : 호이스팅

호이스팅은 var을 통해 정의된 변수 선언문을 유효 범위 최상단으로 끌어올리는 행위를 뜻합니다.

예시를 통해 알아볼까요❓

 

✍️ 변수 호이스팅의 예시

var a = 10;
console.log(a);
console.log(b);  // b가 선언되기 전에 출력하기. 오류가 나지 않는다.
var b = 30;

위 코드를 보면 순서가 잘못됨을 알 수 있습니다.

변수 b가 선언되기 전에 출력이 일어났기 때문입니다. 그렇다면 이 코드를 실행한다면 오류가 발생할까요?

 

출력 화면

오류가 나타나지 않고 30대신 undefined가 출력됨

여기서 호이스팅의 개념이 등장합니다.

호이스팅은 이전 내용처럼 var을 통해 정의된 변수 선언문을 유효 범위 최상단으로 끌어올리는 행위를 뜻합니다.
그렇기에 위 코드가 사실 아래와 같이 동작합니다.

var a = 10;
var b; // 호이스팅에 의해 var 변수인 b가 상단에 위치한다.
console.log(a);
console.log(b);  // b가 선언되기 전에 출력하기. 오류가 나지 않는다.
var b = 30;

따라서 b를 출력해도 오류가 아닌 undefined를 가집니다.

 

✍️ 함수 호이스팅

함수 호이스팅도 변수 호이스팅과 유사합니다. 

함수 표현식처럼 선언된 변수 선언문이 존재한다면 유효범위 최상단으로 올라갑니다.

예시를 통해 알아보겠습니다.

console.log(jlight());
console.log(glight());


// 함수 선언문을 통한 생성
function jlight(){
	console.log("hello");
}

// 함수 표현식을 통한 생성
var glight = function(){
	console.log("hi");
}

 

출력 화면

함수 선언문으로 출력이 되지만 표현식에서 오류가 나타난다.

함수 선언문을 통한 생성은 유효 범위의 최상단으로 올라갑니다.

따라서 위 함수를 최상단으로 이동하기 때문에 정상적인 출력이 가능합니다.

그러나 함수 표현식을 통한 생성은 변수 호이스팅으로 인해 변수 값만 올라가기 때문에 "undefined"형태로 남게됩니다.

 

즉 위 동작을 순서대로 본다면 다음과 같습니다.

// 함수 선언문 전체가 최상단으로 이동된다.
function jlight(){
	console.log("hello");
}

var glight; // 함수 표현식을 통한 선언은 변수 호이스팅으로 코드가 다음과 같이 바뀐다. "undefined"


console.log(jlight());
console.log(glight());

// 함수 표현식은 함수 전체가 올라가지 않는다.
var glight = function(){
	console.log("hi");
}

 

 

🚀 자바스크립트의 함수는  "일급 객체"  이다.

일급 객체는 다음의 조건은 크게 4가지가 있는데 이에 대해 자세히 알아보겠습니다.

 

 

조건 1. 변수나 데이터 구조안에 담을 수 있다.

변수에 익명의 함수를 넣거나 담을 수 있습니다.

예시를 볼까요❓

var jlight = function(){
    console.log("변수에 함수 담기");  // jlight라는 변수에 익명 함수 넣기
}
console.log(jlight());

위 코드에서는 변수 Jlight에 익명의 함수를 넣었습니다. 

따라서 일급 객체는 함수를 변수나 데이터 구조안에 담을 수 있습니다.

 

조건 2. 다른 함수의 파라미터로 전달할 수 있다.

다음 코드를 살펴봅시다.

// jlight라는 변수에 함수 생성
var jlight = function() {
    var a = 25;
    return a;
}
 
 //glight라는 파라미터를 갖는 함수 생성
var glight = function(number) {
    console.log(number);
}


//jlight값이 glight의 파라미터값으로 사용됨
glight(jlight());

Jlight라는 함수와 파라미터값을 갖는 glight라는 함수가 있습니다.

여기서 맨 마지막 코드를 보면, glight에 필요한 파라미터 값을 Jlight로 처리하였습니다.

정리하면 일급 객체는 다른 함수의 파라미터로 전달하거나 사용될 수 있습니다.

 

조건 3. Return값으로 사용 가능하다.

역시 예시를 통해 이해해볼까요❓

//jlight 함수 생성

var jlight = function() {
    console.log("hello");
    
    // return 값으로 함수를 사용함
    return function(){
        var x = 25;
        return 25;
    }
}

console.log(jlight()());  

선언된 함수에 return값이 있습니다.

그런데 return값이 함수 형태로 되어있습니다. 

즉 일급 객체는 변수나 데이터가 아닌 함수 형태인 Return값을 취할 수 있습니다.

 

조건 4. 할당에 사용한 이름과 관계없이 고유한 구별이 가능하다.

var jlight = function glight(){
    console.log("고유 식별 가능");
}

jlight();  // -> 고유 식별 가능 
glight();  // -> ERROR

jliught라는 변수에 glight라는 함수를 할당하였습니다. 

즉 glight의 호출은 안되지만 jlight를 호출함으로써 고유한 구별이 가능합니다.

 

조건 5. 동적으로 프로퍼티 할당이 가능하다.

//함수 생성
function jlight() {
    console.log("Empty");
}

//함수에 프로퍼티 추가
jlight.secondName = "Glight";

console.log(jlight.secondName); // -> Glight

 

 

 

---

 

 

지금까지 자바스크립트의 Function(함수)에 대해 알아보았습니다.

여기서 호이스팅의 개념부터 기본적인 생성 방법, 일급 객체에 대해 자세히 다루었습니다.

그럼 다음 포스팅 기다려주세요❗️