Funtion

함수란?

특정한 작업을 수행하도록 설계된 독립적인 블럭!

함수의 호출

function checkCorrect() {
  let hi = "안녕하세요";
  
  return hi;
}

함수가 위에 처럼 정의가 되어있는데 여기서 함수의 이름은 checkCorrect 이고 이 함수를 호출(부르기) 위해서는
아래와같이 꼭 입력을 해야한다!! 함수를 만들기만 하고 호출을 하지 않으면 실행이 안됨!

위 함수 구조를 조금더 자세하게 해석(?) 혹은 들여다 보면,
1. function키워드로 시작하여
2. checkCorrect라는 이름의 함수지정하고 함수를 알리는 소괄호 () 열고 닫고,
3. 함수의 시작을 알리는 중괄호 {} 를 열어준다.
4. 실행한 코드를 중괄화와 중괄호 사이에 작성.
5. return 할 것이 있다면 return 문 작성! 그리고 괄호~닫고.

checkCorrec();

Function(함수) -데이터 받기

데이터를 전달 받는 함수의 정의

function alertSuccess(msg) {
  alert(msg);
}

함수의 호출(데이터 전딜)

alertSuccess("김개발님 로그인 성공!");

데이터를 전달 받는 함수를 정의 해주면 함수 실행 시 나타나게 해줄 수 있다. 근데 여기서 주의 ! 함수 내부에서 인자로 받은 변수에 새로운 값을 넣으면 안됨!

function alertSuccess(name) {   
  let name = "wecode";
  alert(name + "님 로그인 성공!"); 
}
 
alertSuccess("wecode");

위에 처럼 하게 되면 SyntaxError: Identifier 'name' has already been declared (1:22) 에러가 발생함.

Function(함수) -여러 인자

함수에 데이타(인자)를 여러 개 전달 할 수 있다.

function alertSuccess(month, name) {
  alert(month + "월의 당첨자는 " + name + "입니다.");
}
 
alertSuccess(3, "김개발");

Function(함수) -데이터 반환 2

function getTax(price) {
  return price * 0.1;
}
 
function calculateTotal(price) {
  return price + getTax(price);
}
 
const result = calculateTotal(3500);
console.log(result);

 위의 코드를 해석해보면,
1. getTax 함수에서 price인자 받아서 price *0.1을 반환해준다.
2. calculationTotal 함수의 인자로 price 를 받아서 인자로 받은 price 와 getTax 함수를 더한 값을 반환(리턴) 해준다.
3. const 키워드로 result변수 선언하고 변수 result는 calculationTotal 함수를 값으로 갖는다.
4. 그리고 console.log 로 result 변수를 출력해준다.

느낀점

인스타그램 로그인 페이지와 메인페이지 구현을 하면서 함수선언과 리턴에 대한 이해도가 부족해서 어려웠던 기억이 있다. 이번 기회를 통해서 좀 더 함수와 리턴등을 이해 할 수 있었다.