[오늘의 자바스크립트] 함수

함수 Function이란?

ㄴ특정 기능에 포함된 명령어가 여러가지 일 때 그 명령을 한번에 실행할 수 있게 한 덩어리로 묶어둔 것

(즉, 여러 동작을 묶은 덩어리임  ex. a랑 b를 더하고 x로 나누는 기능을 모아둔 것과 같음)

1. 특정 기능을 실행하기 위한 코드의 집합으로 호출을 통해 재사용가능

2. 객체 자료형중 하나이기 때문에 변수 대입가능

3. 함수는 선언 함수와 함수표현식 (익명 함수, 화살표함수, 즉시 실행 함수)으로 생성가능

4. 자바스크립트에 내장된 함수도 있는데 그것은 메서드(method)라고 함 ex.)alert prompt...etc
 

- 선언함수 : 이름을 가진 함수 선언문

ㄴ선언함수의 경우 어느 곳에서나 호출 가능

ㄴ함수명 (); <-함수 호출 calling. 여러번 호출 가능하며 재사용이 목적

ㄴthis키워드는 이벤트 주체 지칭

function 함수명 (매개변수) {

실행문;

return반환값;

} <-선언함수의 경우 세미클론 생략 가능

 

-매개 변수 (인자, parameter): 함수를 실행하기 위해 필요하다고 지정하는 값

ex) function getNum (a, b) {...}

위 함수에서 매개변수는 a와 b 입니다.

ㄴES6 부터는 매개변수에 기본값을 지정할수 있음 ex) function getNum (a=10, b) {...}

 

 

-인수 (전달인자, argument) : 함수를 실행, 호출할 때 함수이름 옆 괄호안에 매개변수에 할당할 값을 지정하는 것

ㄴ값이 대입되지 않으면 undefined로 뜸

getNum(4, 25);
ㄴ함수를 호출할때 괄호에 지정한 4와 25는 인수입니다.
 

***

변수에 hoisting이 있긴한데 var만 가능한 기능이다. 

hoisting은 자바스크립트 해석기가 함수소스를 훑어 보면서 var로 선언된 변수를 따로 기억해두기 때문에,

변수를 실행하기 전이지만, 이미 해석기가 이런변수가 있다는걸 기억해둔 상태로

선언을 이미 한것과 같은 효과가 있는 것을 말한다. (출처: <자바스크립트 입문>)

 

-return 문 : 함수를 실행한 수 그 결과 값을 함수 밖으로 넘기는 것을 '함수의 값을 반환한다(return)'고 함 

ㄴ함수안에서 선언된 변수나 값은 함수 {}밖에서 접근이 안된다. 그렇기 때문에 return키워드를 이용해 호출한 곳으로 값을 반환시켜준다.

ㄴ값을 반환받기 위해서 쓰거나, 함수를 종료하기 위해서 사용

ㄴreturn받을 내용이 길어서 한줄에 작성이 어려운경우 return{...} 형태 작성 가능 

function fn(x) {

실행문;

return; 함수 강제종료하는 키워드로 이 다음 구문은 실행되지 않음

return 반환값; 반환값을 데이터로 반환

}

ex)

function getNum(a, b){

let sum = a+b ;

return sum;}

let result = getNum(10,20); // return을 쓰지 않으면 함수밖에서 결과값을 반환받을수 없다 

 

 

- 함수 표현식 

1) 익명함수 : 이름이 없는 함수 표현식 (변수에 값을 할당하는 것처럼 함수를 변수에 대입)

ㄴ이름이 없기 때문에 변수나 상수에 대입하여 사용.

ㄴ이름이 없기 때문에 *반드시* 함수를 호출하는 코드보다 먼저 작성되어야 함 (즉, 호출 전 선언 필수)

const 변수명 = function(){
실행문;

return반환값;

}; <-세미클론 붙여야함

ex.) window.onload = function() {}; <-

변수명 (); <-함수 호출. 반드시 함수보다 호출 작성이 나중에 되어야 함

 

2)화살표 함수 : ES6부터는 =>화살표 표기법을 사용해 함수선언을 간단하게 할수있고, 익명함수에서만 사용할 수 있다. 

ㄴthis, arguments,new 키워드 사용어려움

(화살표 함수에서의 this는 윈도우 객체를 말하기 때문에 정확히 이벤트 대상을 찾고 싶다면,

e.currentTarget이나 e.target을 이용하면된다. )

form 1) const 변수명 = () => 실행문.

ㄴ매개 변수가 없는 경우 반드시 ()작성해야 함  & 한 줄 작성시 실행문에 {중괄호

}생략가능하고 return 없이도 반환됨

 

 

form2) let 변수명 = para1, para2 => {              // 매개변수가 있는경우 ( )생략가능< 생략거의안함 ( 가독성때문에 )

실행문;

return 반환값;  // {중괄호}사용시 반드시 return키워드를 통해 반환

}

 

3)즉시 실행 함수 : 함수를 정의함과 동시에 실행하는 함수로 함수 선언 전체를 괄호로 묶어주면 됨

(function 함수이름 (){})();

(function 함수이름 (){}());

ㄴ 한번만 호출되기 때문에 주로 초기화 값으로도 많이 사용.

ㄴ 전역으로 선언되는 것을 방지

ㄴ 즉시실행 함수는 변수에 할당할 수 있고, 함수에서 반환하는 값을 변수에 할당할수 있음

**변수에 할당 및 매개변수를 사용해 정의하고, 인수를 넣어서 실행하는 예시)

let result = (function (x, y){ //매개변수 지정

return x * y;}(10,20)); //인수 대입

console.log(result); //200

**변수 스코프+즉시실행함수 예시)

function () {

let num =2; //지역변수

console.log(`함수 내 num : ${num}`); //지역변수값 적용

})();

console.log(`함수 밖 num : ${num}`); //전역변수값 적용

 

** 변수 대입 + 재사용 예시)

 

(myFn = function(a, b) {

console.log(a + b);

})(`재미있는! `,`자바스크립트!!!`);

myFn('하하하','쿸쿸쿸'); //즉시 실행 함수도 변수에 저장해 재사용 가능