[Javascript] 함수의 종류와 parameter ,argument

1. 함수의 종류

 

함수의 종류는 3가지가 있다. 

 

1) 이름이 있는 함수

 

2) 이름이 없는 함수

 

3) 화살표 함수

 

예제와 함께 살펴 보자.

 

---

 

(1) 기명 함수 (named function)

 

function greeting(){
    console.log("hi");
}
greeting(); // hi

 

파싱하는 단계에서 함수가 호출된다.

 

 

(2) 익명함수(unanonymous function)

var greeting = function(){
    console.log("hello");
}
greeting(); 						// hello

const greetingAgain = greeting; 	// 변수 할당 가능

함수의 이름이 따로 없고 변수명에 함수를 저장하는 함수이다.

그러므로 익명함수를 호출시 변수명을 함수명처럼 사용하면 된다.

이 아이는 런타임 환경에서만 함수가 호출된다.

그래서 함수가 선언되기 전에 호출이 된다면 가슴 아픈 Error 메시지를 받을 수 있다.

호출할 떈 괄호를 붙여서 이렇게 ---> 변수명()

 

let hello = function(){
	console.log("hello world");
}
hello(); 		// 익명함수를 변수명으로 호출. hello world 출력. 

 

그런데 익명함수는 왜 쓰는걸까?

익명함수는 함수 선언 순서에 따라 함수가 작동하지 않을 수 있다.

여러 개의 함수를 작업할 때 함수가 hoisting되지 않고 (쉽게 말해 문서의 맨 위로 함부로? 올라가지지 않는) 

함수 선언 -> 함수 호출의 단계를 따른다는 말이다.

그래서 갑자기 선언하지 않은 함수가 호출되는 등의 불상사를 막을 수 있다.

이것이 익명함수를 써야하는 이유이다.

 

* 기명함수와 익명 함수의 차이

둘의 차이는 브라우저가 읽는 순서의 차이에 있다.

기명함수는 브라우저가 런타임 환경 이전에도 선언이 가능한 함수입니다.
(함수 호출 -> 함수 선언 ==> 작동o)greeting(); // hi function greeting(){ console.log("hi"); }

greeting(); // hi

function greeting(){
    console.log("hi");
}

 

익명함수는 브라우저가 런타임 환경 이후에 동적으로 선언되는 함수입니다.  
(함수 호출 -> 함수 선언 ==> 작동x)

greeting(); // 결과 : Uncaught TypeError: greeting is not a function

var greeting = function(){
    console.log("hello");
}

hello? 노노

에러? 예스예스

 

(3) Arrow function (화살표 함수)

 

const simplePrint = () => console.log("simplePrint");

simplePrint();

/*
const simplePrint = function(){
console.log("simplePrint");}
*/


const add = (a,b) => {
return a+b;
}
console.log(add(2,3));

/*
const add = function(a,b){
console.log(a+b);}
*/

항상 익명함수로 표현하고 함수를 간단히 표현할 수 있는 장점이 있다.

한 줄이면 {}를 생략할 수 도 있고 좀 더 복잡한 로직이 들어간다면 {}를 추가하면 된다.

와우. Do more, write less!

 

 

2. Parameter 와 argument

 

 

💡Parameter(인자)

: 함수는 0개 혹은 하나 이상의 parameter를 가지고 시작합니다.

함수의 정의에서 전달받은 인수를 함수 내부로 전달하기 위해 사용하는 변수

 

💡Argument(인수)

: 함수는 인자와 함께 호출이 됩니다.

함수가 호출될 때 함수로 값을 전달해주는, 들어가는 값을 말합니다.

 

function a(arg){

}
a(1); 

위 코드에서 함수 a의 arg가 parameter 이고 a(1)의 함수a를 호출 할 떄 1이 argument입니다.

 

Primitive parameters : passed by value // value(primitive data type)값에 의한 전달.

Object parameters : passed by reference // 참조(tobject data type  e.g. array, function, objec)에 의한 전달.

-> why? 오브젝트는 reference로 전달되기 때문에 

* 함수 안에서 오브젝트의 값이 변경되면 그 변경된 사항이 그대로 메모리에 저장된다. 추후 변경된 사항 확인 가능.

 

function sum(par1, par2){   		 // parameter : par1, par2 
    return par1 + par2
}
console.log(sum(1, 2));        	 	 // argument : 1, 2

 

 

(1) Default parameter ( added in ES6)

 

function showMessage(message, from = 'unknown'){  // 인자값이 없을 때 입력 default 값 ' '

    console.log(`${message} by ${from}`);

} 

showMessage('hi!', 'venny')                       // hi! by venny
showMessage('hi!')                                // hi! by unknown

 

(2) Rest parameters (added in ES6)

 

function printAll(...args){               //...args : 배열을 나타냄.

    for(let i=0; i< args.length; i++){

        console.log(args[i]);

    }


or

    for(const arg of args){

        console.log(arg);

    }


or

    args.forEach((arg) => console.log(arg)); // (element) = (arg)

}

printAll('dream', 'coding', 'ellie');

forEach 함수 : 배열에 활용이 가능한 메서드. 파라미터로 주어진 함수를 배열 요소 각각에 대해 실행하는 메서드이다.

참고로 return 값은 없다.

 

(3) IIFE :

immidiately Invoked Function Expression

 

function hello(){
    console.log('IIFE');
}
hello();
//hello

(function hello(){
    console.log('IIFE!')
})();
//hello

함수 즉시 실행이 가능하다.

 

보고보고 또 보면 그땐 더 잘 이해가 가리라 믿는다.