반응형
1.함수
수학에서의 함수와 비슷한 개념으로 생각하면 좋을것 같다.
f(x+10) = y ---> f 에 x 를 집어넣으면(input )y가 나온다.(output)
프로그래밍에서도 거의 동일하게 작성된다.
function f([input, input2, ...]){
const output = input + 10;
return output;
}
input이 오면 그 값에 10을 더해주고 내보낸다. (return)
function f2(input){
const output = input + 10;
}
프로그래밍에서는 return 키워드를 사용하지 않으면 해당 함수는 함수 밖에서 output을 이용한 값을 사용할수가 없다. 이 부분이 수학에서의 함수와 가장 큰 차이점이라고 생각한다.
2.함수의 사용(실행)
프로그래밍에서는 함수를 실행할때는 '함수명([input])'으로 실행시킨다.
f(10); // 20;
f2(10); // undefined
- return 을 사용한 함수(f)와 사용하지 않은 함수(f2)의 차이점은 함수 실행후를 보면 알수가 있다. f(10)은 그 값을 20(number type)을 가지고 있지만 f2(10)은 undefined를 가지게 된다.
- 값을 할당하여 사용한다면 return문을 사용해 함수 실행후 변수에 저장해서 사용할수가 있다.
const score = f(10) // score is 20 (number type)
const yourscore = f2(10) // yourscore is undefined (undefined type)
- 함수내부에서의 어떤 값을 다른 로직에서 사용한다면 return을 사용하여 해당 값을 사용할수 있게 해주어야 한다.
- 다른로직에서 사용해야할 값을 f2처럼 만들었다면 에러(error)가 날것이다.
3.why use Function?
- 가독성이 좋아진다.
- 중복되는 코드가 줄어든다.
- 다음의 예시를 보면
// 학생 3명의 과목 평군점수 구하기
function calcStudentsAverage(){
const std1Name = '초코';
const std1Math = 90;
const std1Eng = 85;
const average1 = std1Math + std1Eng / 2
const std2Name = '뭉치';
const std2Math = 88;
const std2Eng = 80;
const average2 = std2Math + std2Eng / 2
const std3Name = '니로';
const std3Math = 93;
const std3Eng = 87;
const average3 = std3Math + std3Eng / 2
// 만약 30명의 평균을 구해야 한다면?
}
만약 1000명이라면 아마 도중에 그만둘지도 모르겠다..
function calcStudentAverage(name, math, eng){
return math + eng / 2;
}
function calcStudentsAverage(){
const student1 = calcStudentAverage('초코',90,85);
const student2 = calcStudentAverage('뭉치',88,80);
const student3 = calcStudentAverage('니로',93,87);
// 이후 저장된 변수들로 추가적인 작업도 가능하다.
}
- 중복되는 부분을 함수로 작성해주면 가독성이 높아지게 된다.
- 꼭 중복되지 않더라도 함수로 작성을 해두면 이 코드가 어떤일을 하는지 함수명으로 알수있기 때문에 코드 이해도 빨라지게 된다.
반응형
'Frontend > JAVASCRIPT' 카테고리의 다른 글
[Javascript] Object(기본,리터럴) (0) | 2020.01.12 |
---|---|
[Javascript] 인자(argument)와 매개변수(parameter) (0) | 2020.01.12 |
[Javascript] 연산자와 boolean Type (0) | 2020.01.11 |
[Javascript] 배열(Array) (0) | 2020.01.11 |
[Javascript] 변수와 값(타입) (1) | 2020.01.07 |