JavaScript <function.1>
함수
- 특정 작업을 수행하거나 값을 계산하는 데 사요되는 '코드의 묶음(집합)'
- A->B->C 동작을 함수 'ABC'로 구현
- 다른 위치(코드)에서 해당 절차 즉, ABC를 다시 사용 가능
- 코드의 재사용성과 가옥성 향상 그리고 디버깅을 용이라게 함.
함수의 사용 용도와 예제(특징)
1) 코드 재사용
- 한 본 정의함녀 프로그램 내의 여러 위치에서 '호출'하여 사용 가능
- 같은 코드를 여러 번 작성하는 대신 함수를 정의하고, 필요할 때마다 호출하여 사용
ex) 두수의 합을 계산하는 자바스크립트 함수
2) 모듈화 및 추상화
- 복잡한 작업을 수행하느 코드를 함수로 분리
-각 함수가 수행하는 작업에 집중
- '모듈성'은 복잡한 작업을 작은 단위로 나누어 관리할 수 있다는 특성을 의미
ex) 두 점의 거리를 계산하는 자바스크립트 함수
3) 이벤트 처리
- 웹 페이지에서 발생하는 다양한 이벤트(버튼 클릭, 폼 제출 등)를 처리하는데에 사용
ex) 문서를 로드 후 버튼을 선택하고 클릭 이벤트 리스너를 추가
3. 함수 구현 방법(함수 생성)
- function의 키워드를 사용 - function은 자바스크립트의 예약어
- 기본 구조 - 함수 선언문 형식
function 함수명(매개변수) {
함수가 수행할 코드
return 결과값;
}
1) 함수명
- 함수를 식별하는 이름
- 주로 동사를 사용
cf. 변수명 - 주로 명사를 사용
2) 매개변수 (파라미터, parameter)
- 함수에 입력으로 제공되는 값
- 함수 내에서 해당 매개변수를 사용하여 특정 작업을 수행
3) 결과값(리턴값, return)
- 함수가 작업을 완료한 후 반환하느 값
- return 키워드를 사용하여 겨과값을반환
4. 함수 선언 방식
# 함수 표현식(Function Expression)
- 함수를 변수에 할당하는 방식으로 함수를 정의
- 함수에 이름을 붙일 수도 있고, 붙이지 않을 수도 있다.
- 정의된 함수는 할당된 변수의 스코르 내에서만 사용 가능
-호이스팅 적용되 않는다
- 선언(정의) 이전에 호출 불가
# 기본 구조
const 변수명 = function(매개변수) {
함수 기능 작성
return 반환갑;
}
# 익명 함수
- 함수명을 지정하지 않는 함수
-주로 함수 표현식에서 사용
ex)
# 화살표 함수 (Arrow Function)
- 'ES6에서 도입'된 함수 정의 방식
- 기존의 function 키워드를 화살표( => )로 대체하여, 간결한 함수를 작성
- 항상 익명함수로 사용
- 'this'가 일반 함수와 다르게 바인딩 됨
- funtion 키워드 사용하면 안된다.
- 기본 구조
const 변수명 = (매개변수) => {
함수 기증 작성
return 반환값;
}
함수 본문(기능 구현부 {})이 단일문으로 자성되는 경우 중괄호와 return 키워드 생략이 가능
5. 함수 호출 방법
- 함수를 생성 - '함수를 선언한다.'
- 함수를 사용 - '함수를 호출한다.'
- 함수를 정의한 후에는 함수명과 괄호를 사용하여 함수 호출 가능
- 함수명(인자값);
- 인자값(안규먼트, argument)
- 실제 계산을 위해 파라미터로 전달되는 값
- 매개변수와 인자. 리턴값은 생략 가능
6. 함수 사용시 지역변수와 전역 변수 사용
# 함수 선언 방식에 대한 베스트 프렉티스
- 일반적 상황에서는 함수 선언문 방식을 사용
- 조건부 함수 선언 시 함수 표현식 방식을 사용
- 콜백 함수 사용 시 화살표 함수르 사용
>> 화살표 함수의 경우 this 바인딩이 다르게 동작