본문 바로가기

Frontend/JAVASCRIPT

[Javascript] 함수

반응형

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?

  1. 가독성이 좋아진다.
  2. 중복되는 코드가 줄어든다.
    • 다음의 예시를 보면
// 학생 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);
    
    // 이후 저장된 변수들로 추가적인 작업도 가능하다.
}
  • 중복되는 부분을 함수로 작성해주면 가독성이 높아지게 된다.
  • 꼭 중복되지 않더라도 함수로 작성을 해두면 이 코드가 어떤일을 하는지 함수명으로 알수있기 때문에 코드 이해도 빨라지게 된다. 

반응형