[생활코딩] JavaScript 8. 함수

* JavaScript 목차

 

 

1. 함수 (function, 메소드, method)

1. 정의

: 입력과 출력이 존재, 기능을 수행
- 입력값에 따라 함수가 다른 출력값을 내도록
- 하나의 로직을 재실행할 수 있도록 하는 것
- 코드의 재사용성을 높여줌
- 핵심은 입력과 출력!
 
(+)
- 일종의 수납상자
- head 태그에 함수를 만들어서 작성
- 효율성 높임
- 웹페이지 크기 줄이기
 
 
* 메소드 (method)
: 객체에 속해 있는 함수
 
 

2. 입력값

1. 매개변수 (파라미터, parameter)
- 값을 받아서 함수 안으로 매개하는 변수들
ex) left, right
 
2. 인자 (아규먼트, argument)

출처 : 생활코딩

- 괄호 안에 들어가는 값
- 함수로 유입되는 입력값
ex) 2, 3
 
 

3. 리턴 (return)

- 계산이라는 기능만을 구현
- 원자화된 기능을 다양한 맥락에서 활용할 수 있게 함 (자유도)
- 함수를 다양한 용도에서 활용 가능해짐
- 함수의 결과를 반환 + 함수를 종료
 
 

4. 활용

- 중복 코드 제거
- 로직 부여 (명확하게 만들기)
 
 

5. 함수 정의

1.

function 함수명 ( [인자... [, 인자]] ) {
	코드
    return 반환값
}

 
2. 

var 함수명 = function () {
}

 
 
 

2. 실습 : 함수 기본

1. 결과

 
- 의도: 반복되는 부분을 함수로 만들기
 
 
2. 코드

 
 
 

3. 실습 : 매개변수 & 인자

1. 결과

- 의도: 함수 3개 만들기
1) onePlucOne() : 1+1을 계산하고 출력
(* Plus인데 오타 수정 귀찮으니까 그냥 씀)
 
2) sum(left, right) : 매개변수 left + right를 계산하고 더해서 출력
 
3) sumColorRed(left, right) : 매개변수 left + right를 계산하고 더해서 빨간색으로 출력
 
 
2. 코드

- left, right : 매개변수
- 괄호 안의 2, 3 : 인자
 
 
 

4. 실습 3 : 리턴

1. 결과

 
- 의도 : 더한 값을 반환하는 함수를 만들어서 다양하게 활용
1) sum2(left, right) : 둘을 더한 값을 반환
 
 
2. 코드

 
- 그냥 출력, 빨간색으로 바꿔서 출력, 크기를 키워서 출력
 
 
 

5. 실습 : 함수의 활용 (함수 이용 리팩토링)

1. 결과

- 의도 : 기능 변화 X, nightDayHandler 함수 만들기
 
 
2. 코드
1) head 태그 안에 함수 만들기

- 매개변수 : self
 
2) body 태그 안

- 인자 : this