[JavaScript] 함수(1) : 함수 정의, 화살표 함수, 즉시실행함수(IIFE)

1. 함수

1) 함수 정의하여 콘솔에 띄우기 (기명함수)

인수x와 인수y를 더한 값을 console에 띄우는 함수 'sum( )' 정의 및 활용하기

 

2) 반환 키워드 'return' 을 활용해 반환한 값을 함수 밖으로 내보내기

const를 활용해 함수가 호출되는 횟수를 줄여서 효율성 높이기

 

3) 익명의 함수를 특정 변수에 담아서 활용 (함수 표현)

익명 함수 function (x,y)에 sum 이라는 변수에 지정하여 변수를 활용하는 방식 

 

4) return 키워드 주의사항

함수 내에서 return 키워드가 사용되는 부분에서 함수가 종료됨.

return 키워드의 작성 순서를 신경써야 함, 즉 조건을 만들어 특정 조건을 실행할지 말지를 결정할 때도 응용가능

 

console 실행문이 return 키워드 앞에 작성 :  x값 '1' 이 잘 반환됨

console 실행문이 return 키워드 뒤에 작성 : console 실행문이 작동하지 않음 (미작동되는 부분은 반투명한 글씨로 보임)

 

  (응용)

return 값이 없기 때문에 undefined로 console에 나옴 (return을 함수 종료 선언 용도로만 사용하는 경우)

 

 

5) arguments 객체

매개변수를 지정하지 않아도 arguments 객체를 통해 함수 활용 가능,
sum함수 실행 시 인수로 넣은 7, 3이 데이터 순서 배열형태로 적용됨

zero based number 순서로 0번째 데이터 숫자 7, 1번째 데이터 숫자 3 표시됨 (console)

arguments 변수 0번째와 1번째 데이터 더해서 결과값을 return (반환)하는 결과 : 10 잘 표시됨

함수 사용시 활용할 인수가 너무 많아서 변수를 x, y, z.... 일일이 지정이 어려울 때 사용가능

그러나 일반적인 경우에는 zero based number때문에 직관성이 떨어지기 때문에 가급적 x, y를 명시적으로 작성하는 걸 우선으로 사용할 것을 권장

 

 

 

 

 

 

2. 화살표 함수

1) => 를 통해 축약형으로 기본 함수를 작성 가능
단, 함수 내에는 단순실행문만 작성 가능 (console.log 등 입력 불가)

 

화살표 함수 (축약형)

매개변수가 한개x만 존재하면 소괄호( )도 생략 가능

매개변수 2개인 경우

 

2) 화살표 함수 : 간단한 실행문(e.g. 산술) 또는 숫자, 문자데이터, boolean데이터, [ ] 대괄호 배열 데이터 입력 가능.

단, 실행문을 중괄호로 감싸면, 값 반환 불가. (객체 데이터 로직을 만들 때 활용하여 블럭을 구분하는 표시이기 때문)
return 키워드를 사용해야 실행됨/

중괄호를 반환하고 싶으면 중괄호를 소괄호로 감싸줘야함

중괄호 내 실행문 입력시 결과 반환 실패

중괄호 내에 return (반환) 키워드 반영시, doubleArrow 함수가 잘 실행됨

중괄호 자체를 값으로 반환하고 싶을 땐, 중괄호를 소괄호로 감싸야 함.

 

 

3. 즉시실행함수 (IIFE, Immediately-Invoked Function Expression)

단 한번만 활용할 함수라면, 굳이 기명함수를 만들어서 선언해둘 필요 없음 (효율성 저하)

이럴 때 즉시실행함수를 사용함

 

즉시실행함수는 익명함수여서 세미콜론을 통해 전후 함수와 관계가 없음 (이전 함수가 활용 종료됨)을 알려주는 ';' 세미콜론을 찍어줘야 에러가 안남

 

즉시실행함수 활용 방법 2가지

1) (x)( ) 순서

2) (x( )) 순서   : 권장