JS 함수 활용편 / 콜백함수 / 화살표함수

[ 함수 가지고 놀기 ]


0. < 넘치는 매개변수 / 부족한 매개변수>

: 넘치면 버리고, 없으면 없는대로 실행은 시켜준다.

function t2( p,q ){ document.write( "test"+ p + q );}

- 매개변수 2개를 취하는 함수다.

t2(7,9); => test79
t2(7,9,8); => test79
t2(7); => test7undefined

- 매개변수를 넘치게주면
앞부분 필요한 매개변수만 받고,
뒤에 넘치는 부분은 무시하고 그냥 실행시켜준다.

- 매개변수를 부족하게 주면
준 부분만 실행하고
부족한 부분은 undefined 로 실행시켜준다.



1. < 함수 안에 함수 >

function outer(){
function inner(){document.write("Hello!");} }

outer( ); => ( X )

- outer 실행하면 inner함수를 "생성" 한다.
- inner 함수를 "호출" 하는 문장이 있어야 outer 실행했을 때, inner 뽑힘


function outer(){
function inner(){document.write("Hello!";)}
inner( );}

outer( ); => Hello! (O)



- inner 함수는 지역변수취급. => 바깥 scope에서 사용 불가능
inner( ); (X)
outer( ).inner( ); (X) ( 자바에서는 비슷하게 되는 문법이지만, JS는 불가 ! )



2. < ** 매개변수로 함수 주기 >


function f1( x ){ x( ); }

- x변수를 저렇게 매개변수로 넣어두면, 타입이 미정인 변수이기 때문에
매개변수로 함수가 들어가면 x( ); 실행문이 있기때문에 함수가 실행된다.

function f2(){ alert("Hello"); }
f1( f2 ); => Hello

즉, 매개변수로 함수를 넣어서 사용하려면,
매개변수로 그냥 변수 줘놓고, ( x )
실행부에 함수를 실행하는 x( ); 를 선언해두면 된다.


이렇게 x(); 해놨는데, 함수가 아니라, 그냥 int,String등이 들어가면 당연히 오류가 난다.
그래서 if ( typeof(x) == "function" ) { x( ); }
else return x;
이런식으로 타입별로 결과를줘서 사용할 수도 있다.

-

< * 콜백함수 >
: 이렇게 매개변수로 쓰이는 함수를 "콜백함수"라고 부른다.

function f1( a ) { a( ); }
function f2( ) { }

f1( f2 );
f2 < = 콜백함수

이런식으로 매개변수에 함수를 넣어서 사용하는 것.
즉, 콜백함수를 사용하는 건 JS 에서 거의 일상처럼 많이 쓰이는 형식이기 때문에,
계속해서 익숙해져야 하겠다.



3. < 함수 매개변수로 객체주기 >


let emp1 = {id:1, name:"홍길동"};
- 객체 생성

function f1( x ){
document.write( x.id + " : " + x.name );
}

f1( emp1 );
=> 1 : 홍길동




4. < 함수 return 함수 > => 두번뽑기

function f1(){
return function(){ return "hello";}
}

f1();
- f1() 을 실행하면
=> function(){return"hello";}
내부함수를 리턴.


doc.write( f1(); ) 을 해봤자 원하는 hello가 나오는게 아니라
내부함수 내용을 리턴함.

=> 한번 더 뽑아내야함 ( 두번 담아져있는거니까 )

let f2 = f1();
// f1 실행한걸, f2 에 담음


즉, f2 = function(){return "hello"; } 인 상태


f2( );
이 f2를 실행
doc.write(f2( )); => hello

=> 함수가 return 값으로 함수를 리턴하는 경우,
두번 뽑아내야 inner 함수의 값을 받을 수 있다.

--


5. < 배열을 매개변수로 받기 >

- 받은 배열의 0 번째 인덱스를 출력할거다

function t6 ( x ) {
if( arguments.length>=1 && arguments[0] instanceof Array) {
alert( x [0] );}
}

t6 ( [ 777,5,10 ] );
=> 777

=> x 매개변수로, 배열이 들어왔을때만 작동가능. [ 0 ] 인덱스를 사용하니깐.
미리 if문 걸어둬서 오류 방지.

매개변수로 들어오는 값을 인자값, arguments 라 한다.
그래서 x.length 이렇게 쓰는 대신,
arguments.length 이렇게 쓸 수 있다.

arguments[0] instanceof Array
(typeof 로하면 배열도 "object" 로 밖에 안나옴
=> instanceof Array 로 검사해줘야함 )



-------------



[*화살표함수 ( 람다식 ) ]
- React.JS / Vue.JS 리액트, 뷰 에서는 거의 화살표함수 사용


(변수에 담은 기본함수)
let a1 = function(x){return x*x;}


( JS에서는 모든 함수를 변수취급 한다.)


- 화살표 함수
let a1 = (x) => {return x*x; }
a1(5); => 25


매개변수 하나면 ( ) 생략 가능
return 문 하나면 return이랑 {} 세트로 생략가능 (자바랑 같음)


let a2 = x=> x*x;


<생성안하고 바로 사용하기>


document.write( ( (x) => {return x+x;} ) (3) + "<br>");

(매개변수) => {실행부} 원래대로 생성하고
전체를 ( ) 괄호로 감싸주고 뒤에 ( ) 매개변수 바로 줌
( (매개변수) => { 실행부 } ) ( 매개변수 );

document.write(( x => x+x )(3) + "<br>");