Functions 함수- Arrow Function이란?

하유진·2021년 8월 14일

📑Function

우리가 일반적으로 알고 있는 함수를 만드는 것
재사용이 가능하다는 점에서 편리하다.

1. Function 정의하기

c언어에서 void 같이 사용된다.

📝 표기법

function_name(param1, param2, ...){
	body
   	...
	return;
}

보통 함수 이름 지을 땐 동사, 명령어로 짓는다.
함수 이름이 너무 길다면 이들을 쪼개는게 함수를 깔끔하게 만드는 팁.
자바스크립트에서 함수는 object이기 때문에 함수를 return할 수도 있다.

🤔 예시

1. 콘솔창에 hello를 출력하는 함수

function printHello(){
    console.log('Hello');
}
printHello();

2. 원하는 메세지를 출력하는 함수

function log(message){
    console.log(message);
}
log('Hello@');
log(1234);

자바스크립트에는 타입이 없어서 문자나 숫자 구분없이 사용가능하다. 그러나 TypeScript에서는 항상 타입을 표기해줘야한다.

3. 원하는 메세지를 출력하는 함수의 TypeScript 버전

function log(message: string): number{
    console.log(message);
    return 0;
}
log('Hello@');

2. Parameters

두 가지 종류

premitive parameters: value가 전달되는 param
object parameters: 레퍼런스가 전달되는 param

function changeName(obj){
    obj.name = 'coder'; //name을 coder로 바꿔주는 함수
}
const ellie = {name:'ellie'}; //ellie라는 변수의 이름을 'ellie'로 설정
changeName(ellie); 
console.log(ellie); //changeName함수로 인해 이름이 coder로 바뀌어 출력

3. default parameter

parameter의 default값은 undefined이다.

function showMessage(message, from){
    console.log(`${message} by ${from}`);
}
showMessage('Hi!');

위와 같은 경우 from의 값이 정해지지 않았으므로 결과값은 Hi! by undefined로 출력된다.

parameter 옆에다 원하는 default값을 정해줄 수 있다.

function showMessage(message, from = 'unknown'){
    console.log(`${message} by ${from}`);
}
showMessage('Hi!');

이렇게 하면 출력값은 Hi! by unknown

4. rest parameters

parameter 앞에 ...을 붙이면 배열 형태로 전달된다.

function printAll(...args){
    for(let i =0;i<args.length; i++){
        console.log(args[i]);
    }
  
  	//for문을 더 간단하게 쓸수도 있음
  	for(const arg of args){ //args에 있는 값들이 차례로 하나씩 arg에 지정됨
        console.log(arg);
    }
  
  	//나중에 배열에서 자세히 나오겠지만 요런것도 가능
  	args.forEach((arg) => console.log(arg));
}
printAll('dream', 'coding', 'yujin');

출력은 순서대로 dream coding yujin가 따로따로 출력된다.

5. Local scope

지역변수. 썬텐한 유리창을 생각하면된다.
밖에서는 안이 보이지 않고(함수 밖에선 함수 안에 있는 변수를 사용할 수 없고)
안에서만 밖을 볼 수 있다(함수 밖에서 선언된 변수-전역변수-는 함수 안에서도 사용 가능)

let globalMessage = 'global'; //global variable
function printMessage(){
    let message = 'hello'; //local variable
    console.log(message);
    console.log(globalMessage); //전역변수는 함수 내에서도 출력가능
}
printMessage();
console.log(message); //지역변수는 함수밖에서 쓸수 없다.