<JS> 함수 (function) (~es5)

 

 

 

함수 (function)

1. 함 (박스, 상자) 에 담는 경우의 수

2. 자주 사용되는 코드를 별로의 파일로 만들어서 필요할 때 마다 호출해서 사용

3. 함수 내에서 코드를 개선하면 이를 사용하는 모든 코드를 개선할 수 있다

4. 코드 수정 시 필요한 기능을 빠르게 검색해서 찾을 수 있다

5. 필요한 기능만 제공하기 때문에 쓸데없는 낭비를 줄일 수 있다

6. 함수 ==모듈 ( 한 기능에 대한 단위 )

 

 

 

function (기능을 동작 할 때 필요한 것들을 담는 공간) { 경우의 수 , 모듈, 기능}

 

 

* 함수의 이름은 소문자로 시작 하는게 좋다

* 함수는 자료형, 변수에 들어갈 수 있다

 

 

 

* 함수 사용하기 *

 

 

 

 

1. 함수 만들기 ( 실행 x )

 

function 함수명 () {}

 

 

 

 

- 만든 함수 호출. 실행

 

함수명 ();

 

* 괄호는 실행하라는 의미가 있다.

* 함수 호출은 함수가 만들어지는 것과 관계없이 아무데서나 가능하다

( 함수를 만드는 것보다 전줄에서도 사용 가능 )

 

 

 

 

 

 

 

 

 

2. 익명함수

 

function() {} // 혼자서 사용할 수 없어서 에러가 난다. 다른 방법으로 사용된다.

 

1) 변수에 함수 넣기.

 

 

 

 

2) 실행

 

(1)

 

 

-> 함수 자체의 내용이 console에 찍힌다.

 

 

 

(2) 변수명();

 

 

-> 함수 정상 실행.

 

 

 

 

* 변수에 함수를 넣을 때는 만든 후에 호출해야 한다. ( 변수이기 때문에 )

 

 

 

 

 

 

3. 자체실행 함수

 

함수 전체를 괄호로 감싸고 그 뒤에 실행을 의미하는 괄호 () 붙인다.

바로 실행됨

 

 

 

 

 

 

 

 

 

*return과 매개변수*

 

 

1. return

 

결과를 반환한다.

return을 만나면 함수를 그냥 빠져나간다.

( 함수의 값 == return 값 )

 

 

1) 변수에 return값 저장

 

 

 

 

 

 

2) 바로 console.log 실행

 

 

 

 

 

 

2. 매개변수 (parameter)

 

변수 : 매개변수, 멤버변수, 지역변수...

종류가 많지만 역할은 그대로다

상황에 따라 불리는 이름이 다를 뿐

 

 

함수 안에서 사용할 수 있는 변수. 갯수 상관 x 외부에서 컨트롤 가능.

 

 

1) 함수를 호출 했을 때 변수의 흐름

 

 

 

 

 

(1)

 

 

(2)

 

 

 

2) 두 개의 값은 같지만 다른 데이터 이다.

 

 

 

 

 

 

3) 호출 할 때 입력하는 변수의 여러 경우

 

 

(1) 매개변수 보다 많은경우

 

: 맨 뒤에 값은 버려진다. 오류 x

 

 

 

(2) 매개변수 보다 적은경우

 

: 함수 실행 자체는 이상이 없으나 함수 안에서 해당 변수를 사용 하면 오류 발생

 

 

아래의 코드처럼 함수 내에서 매개변수 값을 정해놓으면 값이 들어오지 않았을 때 정해진 값으로 함수가 진행된다.

-> 오류 안남

 

 

 

 

 

 

 

 

 

예제1. 더하기 하는 계산기 만들기

 

 

< 화면 >

 

< HTML >

 

 

 

< JS >

 

* type 이 text에서 함수의 기능을 개선하기 위해 Number를 통해 자료형을 숫자로 바꿔줬다.

* 각자 기능에서 하는 것보다 함수에서 하는 게 더 나은방법

 

 

 

 

 

 

 

예제 2. 평균 구하는 함수

( 들어오는 값, 갯수에 관계 없이 )

 

* toFixed(2) : 소수 2번째 자리까지 나타냄

 

 

 

 

 

* arguments : 들어오는 여러 변수를 자동으로 배열으로 만들어줌.

매개변수에 확실한 이름을 부여해주는 게 좋기 때문에 권장하지 않는다.