[학습일지]JAVA교육일지 15일차

10장 자바스크립트 함수

​

10.1) 함수​

- 어떤 목적을 가지고 작성한 코드를 모아 둔 블록문

- 함수를 호출하면 함수 내부의 여러 코드를 한 번에 실행 할 수 있음

- 여러 곳에서 재사용하기 편함, 유지 보수가 편함

​

• 함수를 정의한다 : 블록문을 function 키워드, 식별자, 소괄호와 함께 묶으면 함수 생성
• function 식별자( ) { 블록문 }

​

​

10.2) 함수 정의​

함수 선언문, 함수 표현식, 화살표 함수 등으로 정의

​

10.2.1 함수 선언문으로 함수 정의 : function 키워드로 정의하는 방법

function 식별자() { 함수 호출 시 실행할 코드 }

• 중괄호{ } 안에는 함수가 호출되면 실행할 코드 작성, 코드는 길이, 개수 등의 제한 없음
• 함수정의 후 함수의 식별자(함수명)과 소괄호( )로 실행

함수명( ) ;

​

10.2.2 함수 표현식으로 함수 정의 : 함수를 변수에 할당하여 정의

• 네이밍 함수 : 변수에 할당하는 함수에 식별자가 있는 함수
• 익명 함수 : 변수에 할당하는 함수에 식별자가 없는 함수

const 변수명 = function() { } ; ← 익명 함수 const 변수명 = function 식별자() { } ; ← 네이밍 함수

• function 키워드 다음에 오는 식별자(함수 식별자)로는 호출X
• 할당한 변수명으로 호출​
• 그래서 익명함수도 호출할 수 있음
• 함수 표현식으로 정의식 const 키워드 주로 사용, 일관된 목적을 가진 코드집할이라 재정의, 재할당을 하면 안되는 경우가 많아서
• var, let 키워드 사용해도 문제는 없음

​

※ 함수 표현식으로 함수 정의시 네이밍함수로 정의하는 것이 좋음, 식벽자를 변수명과 똑같이 만들면 헷갈리지 않아서 좋음

​

​

10.2.3 화살표 함수로 함수 정의 : ES6에서 추가된 방법, 화살표를 사용해 함수 정의

( ) => { } ;

• 익명함수로만 정의 가능
• 호출하려면 함수 표현식을 사용해야 함

const 변수명 = ( ) => { } ; 변수명( ) ;

​

10.3) 함수 기능 확장

​

10.3.1 매개변수와 인수

• 매개변수 : 함수를 정의할 때 외부에서 전달하는 데이터를 함수에서 받을 수 있도록 정의하는 변수
• 인수 : 정의한 함수를 호출할 때 소괄호 안에 적는 전달하고 싶은 데이터
• 함수 호출 시 인수는 함수의 매개변수에 자동 할당됨
• 매개변수는 여러 개 만들 수 있음, 쉼표(,)로 구분해 나열
• 함수를 호출할 떄는 인수 또한 매개변수의 개수에 맞춰 작성

함수 선언문 function 함수명 ( 매개변수1, 매개변수2, ..., 매개변수n) { }

함수 표현식​ const 함수명 = function 식별자 (매개변수1, 매개변수2, ..., 매개변수n { } ;

화살표 함수 const 함수명 = (매개변수1, 매개변수2, ..., 매개변수n) => { } ;

함수 호출​ 함수명 (인수1, 인수2, ..., 인수n) ;

​

ex) 구구단

function gugudan(매개변수){ for(let i = 1 ; i <= 9 ; i++){ console.log(`${dan} * ${i} = ${dan * i}`); } } gugudan(인수); gugudan(3); // 3단 출력 gugudan(5); // 5단 출력

​

10.3.2 매개변수의 특징

​

* 명명규칙 : 일반적으로 변수와 같음

* 데이터 전달

• 함수 호출시 전달되는 데이터와 일대일로 대응되어 데이터가 할당됨
• 첫 번째 인수는 첫 번째 매개변수에 할당, 두 번째 인수는 두 번째 매개변수에 할당됨
• 매개변수의 개수 제한은 없지만 많으면 함수가 지저분해보이므로 최소한으로 정의하는 것이 좋음
• 매개변수에 함수 호출 시 데이터를 전달하지 않아도 undefined값이 할당되어 오류가 발생하지 않음
• 매개변수가 정의되지 않아도 오류 발생X, 전달한 데이터를 받을 변수가 없어서 값 활용X

​

* 기본값 할당

• ES6에서 기본값을 지정하는 방식 추가, 최신 웹브라우저만 지원
• 매개변수에 직접 데이터를 할당하는 방식으로 기본값 지정할 수 있음

​

10.3.3 return 문 : 함수 외부로 데이터를 반환할 때 사용

return 식 또는 값

• 함수 외부에서 함수 내부의 변수를 참조하려고 하면 오류 발생
• 오류가 나지 않게 하려면 return 문으로 함수 내부 데이터를 함수 외부로 전달해야함(반환한다, 반환값)
• 반환된 데이터를 함수 외부에서 사용하려면 함수 호출 부분에서 반환값을 다시 변수에 할당해야함
• return문은 데이터를 반환하지 않으면 단수히 함수 실행을 종료하는 역할을 함

​

※ 화살표 함수와 return문 : 화살표 함수에서 { }를 생략하면 화살표 다음에 오는 코드는 return문으로 처리됨

​

​

​

​