자바스크립트-함수와 화살표함수

 

 

수학시간에 함수를 배운적이 있을것이다. 함수란 변수의 값에 따라 정해지는 다른 변수의 값을 먼저 주어지는 값에 대응시키는 이항 관계를 뜻한다

 

자바스크립트(를 포함한 프로그램언어)에서의 함수도 이와 같다.

 

특정 코드를 하나의 명령어로 실행할 수 있도록 해주는것이다.

 

 

예제1)

 

const a =1;
const b = 2;
const sum = a+b;

console.log(sum);     //[3]출력

 

 

위의 코드대로라면 sum이라는 변수의 값은 3이된다.

하지만 a의 자리에 2나 3이 들어가게 변경하고싶다면 우리는 일일히 코드를 다 수정하거나, 새로운 변수를 써서 다시 작성해야 할것이다

 

이것을 함수의 형태로 바꿔본다면 이런 수고로움을 덜 수 있다.

 

 

 

 

function add (a,b){
	return a+b;        //값을 반환
	}

const sum = add(1,2);

console.log(sum);     //[3] 출력

 

 

 

바로 위와 같이 표현 할 수 있다. 여기서 a와 b의 값에 따라 sum을 호출한 결과는 바뀌게 되는데

이렇게 프로세스가 동작하는 틀을 만들어놓고 안에있는 파라미터를 변경함으로써 매번 다른 결과값을 얻을 수 있다.

a,b의 값을 변경하고싶다면 괄호안의 파라미터 값만 변경하면 새로 식을 쓸 필요가 없다.

 

이 경우는 함수내부에 반환값이 만든 후 새로운 변수를 통해 함수를 불러온 후 실행시키는 방법이다.

 

 

es6의 문법중 화살표함수라는것을 사용하면 식을 더 예쁘게 쓸 수도 있다.

아래와 같은 문법으로 함수를 선언하는것을 function대신 => 를 이용 할 수 있다.

 

 

const add = (a,b) =>{
	return a+b
    }

const sum = add(1,2);
console.log(sum)

 

 

 

여기서 주의해야 할 상황은 return을 쓰는 순간 함수는 종료되기때문에 그 밑에 어떤 식을 추가하더라도 컴퓨터는 인식하지 않는다.

 

그리고 이런 간단한 return함수는 화살표 다음에 바로 식을 씀으로써 아래와 같이 더 간결하게 줄일수도 있다.

 

 

const add = (a,b) => a+b;      //return으로 반환할때만 사용 가능

const sum = add(1,2);
console.log(sum);

 

 

 

 

예제2)

 

const a = '유림';

const hello = 'Hello' + a + '!';

console.log(a)              //-> [Hello 유림!] 출력

 

위의 예문을 함수로 변경해보겠다

 

 

function hello(a){
	console.log('Hello' + a + '!');
}
    
Hello('유림')           // ->[Hello 유림!] 출력

 

 

화살표함수로 표현하게 되면

 

 

const hello = (a) =>{
	console.log('Hello' + a + '!')
}

Hello('유림');         //[Hello 유림!] 출력

 

 

그런데 문장을 출력하기위해 계속 +와 '의 기호를 추가하려니까 영 귀찮다..^^;;;

다행이도 이것을 es6부터는 조금 더 편리하게 표현 할 수 있다

 

 

const hello = (a) =>{
	console.log(`Hello ${a}!`)
}

Hello('유림');         //[Hello 유림!] 출력

 

 

이렇게 ``기호 사이에 문장을 적고 각각 변수를 ${ } 안에 넣어주면 된다.

 

 

 

 

예제1의 경우 함수 내부에서 결과값을 반환만 시킨 후 새로운 변수를 통해 출력하는 방법을 사용했고

 

예제2의 경우 함수 내부에서 출력하는 명령까지 내린 후 변수선언 없이 바로 함수를 호출하는 방법을 사용했다.

 

이것은 상황에 맞게 골라서 쓰면 된다.. 상황에 맞는 식을 선별하는거는 많은 코드를 보면서 경험으로 쌓는 방법밖에 없을 듯 하다 :)....

 

 

위와같이 각각의 식을 함수로 표현해서 노동을 줄이고 그 함수를 화살표함수로 간결하게 표현해서 또 노동을 줄일 수가 있지만 모든 경우에 화살표 함수를 사용 할 수는 없다. 화살표 함수와 function함수에는 차이점은 있다.

 

그 중 주요 차이점은 this의 사용법인데 여기까지 정리하려면 this를 완벽히 이해해야 할 것 같아서 this에 대한 정의를 포스팅할때 함께 적도록 하겠다.