[JS] 함수 ( function )

 

 

변수 = 값
함수 = 명령들 (코드의 집합)

 

변수는 값을 저장하는 것이라고하면, 

함수는 다양한 명령들을 저장하는 것, 특정작업을 수행하는 코드의 집합이라고 할 수 있다.

 

 

 

함수가 필요한 이유?

 

> 재사용성

: 하나의 일을 하는 코드 조각을 정의된 블록안에 저장하고, 같은코드를 여러번 타이핑하기보다는

하나의 짧은 명령을 사용하여 언제든지 그 코드를 호출할 수 있게 하여 효율적인 장점이 있음.

 

 

> 가독성

:  내부에 작성한 코드들의 포괄적 의미를 포함하여 함수명을 잘 지어놨다면,

함수이름만으로 함수의 기능과 동작을 유추하여 한번에 드러낼 수 있고,

해당 기능이 필요시에 함수를 호출함으로써 불필요한 소스는 줄어들고 체계적이고 가독성있는 소스구성 가능.

 

//함수 선언
function 함수이름 (parameter 매개변수들..) {
   동작
   return 리턴값
 }
 
 //함수 호출
 함수이름 (parameter매개변수);

 

 

> 코드들을 기능으로 묶고 싶을 때

 

> 입출력 기계를 만들고 싶을 때

let 함수 = (a) => { return a+10 }

 

 

---

 

 

함수를 만드는 방식

 

> 함수 선언

:  function 키워드 통해 함수 선언 (일반적)

function hello() {
  console.log('hi');
  console.log('안녕하세요');
  console.log('bonjour');
  console.log('guten tag');
}

실행 → 반응x

cuz  함수선언은 그 함수가 사용될 때 어떤 행동을 할 지 정의만 하는 것.

→ (함수 호출)   함수이름( parameter );

hello();

↓ 출력 ↓

hi
안녕하세요
bonjour   
guten tag 

 

 

 

> 함수 표현식

: 함수 선언을 변수에 할당하거나 다른 함수의 argument로 활용하면서, 값처럼 활용해 함수만드는 방식

const sayHi = function() {
 console.log('Hi');
};

 

 

 

---

 

 

return

 

 : 함수를 호출했을 때, 함수가 값을 반환

> return을 생략하면 undefined값 리턴

 

 

>  호출결과 확인

1. return 값을 변수에 저장하여 console로 확인

let result1 = multiplyTen(3); 

console.log(result1);

 

 

2. 바로 console로 확인!

console.log(multiplyTen(0));

 

 

---

 

parameter & argument

 

매개변수 (parameter)

> 함수 선언식의 괄호 ( ) 안에 쓴 변수명은 함수 안에서 변수와 같은역할을 함.

 

 

인자 (argument)

>  어떤 함수를 호출하면서, 호출문의 괄호 안에 쓴 값

   함수에서 매개변수를 적어뒀다면, 호출시 인자로 전달한 값은 매개변수 통해 사용가능

 

function double(Number) {     //매개변수Number (호출문에서 받은값을 Number라는 변수명으로 함수안에서 사용)
  let Result = Number * 2
  return Result
}
 
double(8);                    //argument

function double(Number = '3') {         //파라미터 기본값 지정
  let Result = Number * 2
  return Result
}
 
double(8);                    //argument
double();                     //기본값 3실행
double(undefined)             //기본값 3실행

> 어떤 변수에 정의된값을 인자로 전달가능

let someNumber = 42
doubleNumber(someNumber);   //someNumber의 값 42를 doubleNumber에 전달

 

> 가변인자 (함수의 파라미터 개수가 가변적일때) / arguments값 사용가능

function meetAt(year, month, date) {             ----인자 3개
  if(argument.length ==1) {                      ----인자 1개만 받았을때
    return arguments[0]+'년';
  } else if (argument.length ==2) {              ----인자 2개 받았을때
    return arguments[0]+'년'+arguments[1]+'월';
  } else {                                       ----인자 3개 받았을때
    return arguments[0]+'/'+arguments[1]+'/'+arguments[3];
  }
}

>arguments 값 사용 예시

    (first, second, ...rest). 첫번째, 두번째,...나머지 argument

function firstWords() {
  let word = '';
  for(let arg of arguments) {
    word += arg[0];
  }
  console.log(word);
}

firstWords('나만', '없어', '고양이');

//'나없고'

---------------------------
// 여기에 코드를 작성해 주세요.
function ignoreFirst (first, ...argu) {
  for (const el of argu) {
    console.log(el);
  }
}

ignoreFirst('1세대', '2세대', '3세대');
ignoreFirst('곰팡이', '강아지', '고양이');

//2세대, 3세대, 강아지, 고양이

> rest parameter

const name = (first, second, ...others) => {
  console.log('hi');
  console.log(`${first}`);
  console.log(`${second}`);
  for(const arg of others) {
    console.log(`참가자: ${arg}`)
  }
}

name('kim', 'won','emma', 'manon')

 

---

 

 

중복함수

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

> cal~함수내부에서 getTax함수를 호출

//반복문 + 조건문
const home = "대전";
const cities = ["서울", "대전", "대구", "부산", "광주", "제주도"];
 
for (let i = 0; i <= 5; i++) {
   if (cities[i] === home) {     
        console.log("아, "+ cities[i] +" 사시는군요");
   }
}

 

 

 

---

 

 

Arrow function  화살표 함수

 

> 함수 표현식보다 간결하게 함수만드는 방법 (callback 함수로 많이사용 : 인자로 전달되는 함수)

> 대부분 기존함수와 동일하지만, arguments 객체가 없어서 예외적으로 arguments 활용하는 함수는 변환못함.

> 모든 화살표함수는 익명함수라서 변수에 할당하거나 다른 함수를 호출할 때 아규먼트로 사용됨

> 기존의 function과 용도가 완전히 같지는 않다.

 

 

   (변수에 할당하고) fuction을 지워주고 ()소괄호 오른쪽에서 =>

function hi(name){
  return "안녕하세요" + name
}

// allow function
const hi = name => {return "안녕하세요" + name};
const hi = name => "안녕하세요" + name;            //retrun생략할때 중괄호도 같이 생략!

 

 

> parameter 하나면 괄호 생략가능 

*/
parameter 없거나 두개이상이면 소괄호 생략불가
/*
let sayHi = () => alert("hello");
sayHI ();


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

alert( sum(1, 2) ); // 3
/* a,b 인자를 받는 함수 sum이 만들어짐.
   함수 sum은 화살표 => 우측의 표현식을 평가하고, 평가 결과를 반환.
   */

/* 리턴값 객체인경우
소괄호로 감싸줌 */

const getCode = () => {
 return ({ name : 'code' });
};

 

 

예시 1) forEach callback function

[1,2,3,4].forEach( a=> console.log(a))

 

 

예시 2) EventListener

    document.getElementById("btn").addEventListener("click", (e) => {
      console.log(this);
    });
    
    출력 : window
    //콜백함수 안에서 arrow쓰면 여기 내부의 this는 밖에있던 this값을 그대로 사용한다.

 

 

예시 3) object

let object = {
 함수 : () => {
  return this
 }
}
object.함수 ();