반응형
# 자바스크립트 학습
# 함수 (function)
- 특정 기능을 처리하는 자바스크립트 코드의 묶음
- 함수의 형태
1. 함수의 형태 1
function book() {
var title = "JS 책";
}
2. 함수의 형태2
var point = function(one, two) {
var total - one + two;
var bonus = total + 100;
}## 함수의 구성 요소
- function 키워드(KeyWord)
- 함수 이름
- 파라미터(Parameter) : 매개 변수, 인자, 아규먼트로도 불린다. 파라미터의 작성은 선택사항이다.
1. 함수의 이름을 사용한 형태1 // 함수 이름 book
function book() {
var title = "JS 책";
};
2. 함수의 이름을 사용한 형태2 // 함수 이름 point
var point = function(one, two) { // 소괄호() 안에 작성한 것을 파라미터라고 한다.
var total = one + two;
var bonus = total + 100;
};- 함수의 Body
중괄호{ } 안에 작성한 코드
함수 코드, 소스 텍스트로도 부른다.
함수의 코드 작성은 선택이다.## 함수의 이름 규칙
- 첫 문자의 경우...
영문자, $, 언더바(_) 사용가능
첫문자로 사용 불가능한 것 : 숫자, &, *, @, + 등..function setBookTitle() {
var title = "JS 책";
};
var calculatePoint = function(one, two) {
var total = one + two;
var bonus = total + 100;
};- 함수 이름 작명 권장사항은 아래와 같다.
함수 이름은 내부의 코드를 읽지 않더라도, 함수의 이름과 파라미터를 바탕으로 기능을 알 수 있도록 작명해야 한다.
시맨틱(의미, 뜻)을 부여하여 작명한다.## 함수의 이름 관례
- calculatePoint() 처럼 동사로 시작한다. => calculatePoint는 포인트를 계산한다는 의미.
function setBookTitle() {
var title = "JS 책";
};
var calculatePoint = function(one, two) {
var total one + two;
var bonus = total + 100;
};- 카멜 표기법(CamelCase 형태) : 두 개 이상의 단어를 사용할 때, 두 번째 단어부터 명사를 사용하며, 명사의 첫 문자를 대문자로 사용한다. (낙타 등과 비슷하다고 하여 카멜 표기법이라고 함)
- 동사 + 명사의 형태로 인해 동적인 모습이 된다. (함수는 뭔가를 처리하는 기능을 수행하므로 정적인 모습이면 안된다.)
## 함수의 호출
- 함수는 호출이 되어야 실행된다.
function setValue(one, two) {
var total = one + two;
};
setValue(10, 20); // setValue 라는 함수 호출, 파라미터 값 전달하여 값 받는 것이 목적- 함수 호출의 경우 setValue() 형태로 호출, 호출 시 호출 하려는 함수의 이름과 소괄호()의 형태로 작성한다. 만약 소괄호를 작성하지 않을 경우 호출되지 않는다.
- 파라미터
호출된 함수에 넘겨줄 값을 작성한다.
파라미터의 경우 setValue(10, 20)처럼 소괄호() 안에 작성한다.
파라미터에는 자바스크립트에서 지원하는 타입을 작성해야 한다.
콤마(,)로 구분하여 다수의 값을 작성할 수 있다.- 함수의 사이클
1. 함수를 호출
setValue();
2. 함수를 호출하면서 파라미터 값 전달
setValue(10, 20);
3. 파라미터 값 설정 및 함수 코드 실행
function setValue(one, two) {
var total = one + two;
};- 일반적으로 호출 받는 함수를 소스 파일 위에, 호출 하는 함수를 아래에 작성한다. (반드시 이렇게 해야 하는 건 아니다.)
## return
- return문의 형태
return 표현식opt;- return문 실행 시 표현식의 평과 결과를 반환한다. (표현식 작성은 선택이다.)
function getPoint() {
return 10 * 30;
};
var result = getPoint();
log(result);
=>
300- undefined 반환의 경우 예
function getPoint() {
};
var result = getPoint();
log(typeof result);
=>
undefined
return을 작성하지 않으면, 값을 반환하지 않는것이 아니라 undefined 값을 반환한다.
자바스크립트에서 undefined는 값이다.- 줄을 분리하여 표현식 작성한 예
function getPoint() {
return
10 * 30;
};
var result = getPoint();
log(result);
=>
undefined
return 다음에 세미콜론(;) 이 없고 줄 바꿈 된 경우
자바스크립트가 자동으로 세미콜론을 작성해 준다.
위 코드에서는 이로인해 return에서 문장이 종료되며 아래 10*30 문장은 실행되지 않는다.# 주석 작성의 목적
- 주석 작성의 궁극적 목적은 코드가 목적을 달성하기 위한 기능, 시나리오 등을 생각하고 정리하는 것이며, 이처럼 생각하고 정리한 것을 문법에 맞춰 작성하는 것이 코드이다.
- 코드를 작성하기 전에 먼저 생각을 정리하고, 정리한 생각을 주석으로 작성한다. (주석을 작성하는 습관은 중요하다.)
## 주석 작성의 기준
- 작성한 코드의 목적과 결과가 미치는 영향을 주석에 작성한다.
- 다른 사람이 알 수 있도록 자세하게 주석을 작성해야 한다.
## 주석 작성의 사례
- 문법적으로 정의된 것이 아닌, 개발자 간의 관례로 전해지다가 일반화 되었다.
/**
* @function calculateAmount
* 1. 파라미터로 받은 수량에 단가를 곱해
* 금액을 계산하고 결과 값을 반환한다.
* 2. 수량과 단가의 0 체크는
* 함수를 호출하기 전에 하므로 체크하지 않는다.
* @param {Number} quantity, 수량
* @param {Number} price, 단가
* @param {Number} 계산 결과
*/
function calculateAmount(quantity, price) {
// 주석을 자세하게 작성하기 위해
// 함수의 코드를 분리하는 경우도 있다.
};반응형
'인프런 강의 학습 > 자바스크립트 비기너' 카테고리의 다른 글
| 자바스크립트 학습 11일차 (0) | 2020.12.14 |
|---|---|
| 자바스크립트 학습 10일차 (0) | 2020.12.13 |
| 자바스크립트 학습 8일차 (0) | 2020.12.11 |
| 자바스크립트 학습 7일차 (0) | 2020.12.10 |
| 자바스크립트 학습 6일차 (0) | 2020.12.09 |