TIL 10 - 함수

👉 함수

스크립트를 작성하다 보면 유사한 동작을 하는 코드가 여러 곳에서 필요할 때가 많다.
사용자가 로그인이나 로그아웃을 했을 때 안내 메시지를 보여주는 동작 같은 경우가 있는데
함수는 프로그램을 구성하는 주요 '구성 요소(building block)'이다. 함수를 이용하면 중복 없이 유사한 동작을 하는 코드를 여러 번 호출할 수 있다.

✍️ 함수 선언

function name(parameter){
  함수 본문
} 

함수 표현식 vs 함수 선언문

함수 선언문 : 함수는 주요 코드 흐름 중간에 독자적인 구문 형태로 존재한다.
(코드 블록이 실행되기도 전에 처리되어 블록 내 어디서든 활용 가능하다.)

function name(a,b){
  return a + b;
} 

함수 표현식 : 표현식이나 구문 구성 내부에 생성됩니다.
(실행 흐름이 표현식에 다다랐을 때 만들어진다.)

let sum = function(a,b){
  return a + b;
} 

함수를 호출하는 방법 예시

function sayhello(nameOfPerson, age){
  
  console.log('Hello my name is' +  nameOfPerson + 'and I`m' + age );

} //중괄호 안에 들어가는 것들이 실행버튼(sayhello)를 누를 때마다 발생한다.

sayhello('su',10); //Hello my name is su and I`m 10

sayhello('jeong',20);//Hello my name is jeong and I`m 20

sayhello('lee',30);//Hello my name is lee and I`m 30

지역 변수

함수 내에서 선언한 변수인 지역 변수는 함수 안에서만 접근 가능하다.

function showMessage(){
  
  let message = 'hi'//지역 변수
  
  alert(message);
  
}
showMessage(); //hi

alert(message); //error : message는 함수 내 지역 변수이기 때문에 에러가 발생한다.

외부 변수

함수 내부에서 함수 외부의 변수인 외부변수에 접근 가능하다.

let userName = 'su';

function showMessage(){
  
  let message = 'hi,' + userName//지역 변수 
  alert(message);
  
}
showMessage(); //hi, su

함수에서 외부 변수 수정하는 방법

let userName = 'su';

function showMessage(){
  
  userName = 'jeong';// 1. 외부변수를 수정
  
  let message = 'hi,' + userName 
  alert(message);
  
}
alert(userName);//함수 호출 전이므로 su가 출력된다.

showMessage(); 

alert(userName);//함수에 의해 jeong로 값이 바뀌었다.

✍️ retrun

함수를 호출했을 때 함수를 호출한 곳에 특정 값을 반환하게 할 수 있다.

예제

const age = 96;

function calculateKrAge(ageOfForeigner){
  
 ageOfForeigner + 2;
  
}
const krAge = calculateKrAge(age);
console.log(krAge);

👉 undefined

return을 적용했을 때

const age = 96;

function calculateKrAge(ageOfForeigner){
  
 return ageOfForeigner + 2; //함수에 'return'을 사용하면 함수를 실행할 때 
calculateKrAge(age); 이 부분을 대체한다.
  
}
const krAge = calculateKrAge(age);
console.log(krAge);

👉 98

'return'을 하면 계산을 담당하는 함수의 코드는 그 함수가 return하는 값과 같아진다.

const calculator = {
   
   plus : function(a,b){
   return  a+b;  
  }
}
const plusResult = calculator.plus(2,3);
console.log(plusResult);

👉 5

규칙에 의해서

const plusResult (variable) = calculator.plus(2,3);(return value)
👉 variable에 함수를 할당하면 이 variable은 함수의 return value를 가지게 된다
❗️ 한번 return하면 function은 끝난다.❗️ 👉 return을 하면, function은 작동을 멈추고 결과 값을 retur하고 끝나버린다.

const calculator = {
   
 plus : function(a,b){
   
   console.log("hello"); // 이 부분은 적용된다. 
   return  a+b; 
   console.log("hi"); // retur을 사용해 코드가 종료되었기 때문에 코드는 절대 적용
   되지 않는다.
 
 }
}

✍️ 인자

인자(argument)는 함수로 유입되는 입력 값을 의미하는데, 어떤 값을 인자로 전달하느냐에 따라서 함수가 반환하는 값이나 메소드의 동작 방법을 다르게 할 수있다.

function calculator(arg) {
   
   return  arg; 

}
alert(calculator(1));// calculator(arg)로 1이라는 값을 전달하겠다는 의미. 

alert(calculator(2));// calculator(arg)로 2라는 값을 전달하겠다는 의미. 

👉1,2

복수의 인자

function calculator(arg1,arg2) {
   
   return  arg1 + arg2; 

}
alert(calculator(10, 20));// 30 

alert(calculator(20, 30));// 50 

❗️마치며❗️

함수는 return 파트가 굉장히 복잡하고 어렵웠다😢
그래도 예제를 활용해서 계속 공부하니 이제는 조금 이해가 되었는데 그래도 아직 헷갈리는건 마찬가지이다. 이 부분도 반복 학습뿐이 답인 것 같다..🥲