[javascript] 함수(function)

함수
(function)

 

함수의 종류

1. 선언적 함수 : 이름이 있는 함수, 이름을 통해 호출하여 실행함

2. 익명 함수 : 이름이 없는 함수, 함수명 대신 변수명에 함수를 대입하여 함수코드를 저장하는 구현 방식

 

 

 

1. 선언적 함수

- 매개변수가 없는 경우 생략 가능하다.

- 반환할 결과값이 없는 경우 return 결과값; 도 생략 가능하다.

 

버튼이 클릭됐을때 실행될 함수 test()

 

 

 

2. 익명 함수

- 매개변수 생략가능

=> 특정 변수나 속성에 대입하는 함수가 필요할 때 주로 사용됨

(주로 이벤트 핸들러 작성시 사용)

 

 

=> 선언적 함수는 선언해두면 언제 어디서든 재사용이 가능하고 반면, 익명 함수는 특정함수에서만 적용되는 코드이므로 일회성적이다.

 

 

 

 

3. 함수의 매개변수

 

매개변수 제시시 자료형이나 변수 키워드(var, let, const) 지정할 필요없다 => 변수명만 적음

 

 

자료형에 상관없이 매개변수의 갯수만 잘 맞는다면 실행되는데 문제가 없다.

 

 

정의해둔 매개변수의 갯수보다 더 많이 전달하는 것도 실행하는데 문제가 없다.

단, 초과된 전달값들은 무시돼서 '안녕'만 출력되게 된다.

 

 

 

정의해둔 매개변수의 갯수보다 더 적게 전달하는것도 실행에 문제가 없다.

단, undefined로 뜨는 것을 확인 할 수 있다.

 

 

 

 

4. 매개변수 관련 배열

함수 호출 시 전달하는 값은 내부적으로 arguments라는 배열에 담긴다.

* arguments : 모든 함수마다 내부적으로 하나씩 존재하는 배열 객체

콘솔창에 함수에 들어있는 arguments(인자값들)을 찍어보면 모두 출려되는 것을 알 수 있다.

또한 각 배열의 인덱스값만 추출해서 출력해볼 수도 있다.

test4()함수의 매개변수 0번 인덱스에 들어잇는 값으로 15가 콘솔창에 찍혀 있다.

 

결과값을 area4 요소객체 innerHTML 안에 대입시켜 출력해줬다.

 

 

 

5. 매개변수 있는 함수에 this 키워드 전달하기

 

 

★중요!★

this : 요소객체 자기 자신을 가리키는 키워드

 

 

 

6. 함수의 리턴

- 일반적인 값을 리턴하는 경우

 

 

7. 익명함수를 리턴하는 경우