[JavaScript] 기초문법-5 (함수 / 화살표 함수)

[JavaScript] 기초문법-5 (함수 / 화살표 함수)

---

✅ 함수

 

function 함수명(매개변수){

    함수에서 실행할 문장;

}

 

장점

- 여러번 반복해서 같은 코드를 작성할 필요가 없어 중복을 줄여줌.

- 코드의 유지 보수가 쉬움. (일부 함수만 수정하면 됨)

 

 

1. 매개변수가 없는 함수

1-1. 'error'를 출력하는 함수

function showError(){
  console.log("error");
}

showError();

 

 

2. 매개변수가 있는 함수

2-1. 매개변수로 이름을 받아 'Hello, 이름'을 출력하는 함수

function sayHello(name){
  const msg = `Hello, ${name}`;
  console.log(msg);
}

sayHello('Hyunjin');  // Hello, Hyunjin
sayHello('Mike'); // Hello, Mike
sayHello('Jane'); // Hello, Jane

▶ 중복을 줄여줌

 

 

2-2. 매개변수가 있으면 2-1 출력, 아니면 'Hello'만 출력하는 함수

function sayHello(name){
  let msg = 'Hello';
  if(name){
    msg = `Hello, ${name}`;
  }
  console.log(msg);
}

sayHello(); // Hello
sayHello('Hyunjin'); // Hello, Hyunjin

 

 

2-3. 2-2의 코드 간단하게 수정

function sayHello(name){
  let msg = 'Hello';
  if(name){
    msg += ', ' + name;
  }
  console.log(msg);
}

sayHello(); // Hello
sayHello('Hyunjin'); // Hello, Hyunjin

📛 주의사항 📛
msg 는 sayHell() 함수 안에서만 쓰이는 지역변수 ▶ 함수 바깥에서 사용하면 오류발생

 

 

2-4. 매개변수의 유무에 따라 다르게 출력하는 함수

function sayHello(name){
  let newName = name || 'friend';
  let msg = `Hello, ${newName}`;
  console.log(msg);
}

sayHello(); // Hello, friend 
sayHello('Jane'); // Hello, Jane

---

✅ 전역변수와 지역변수

- 전역변수 : 전체 영역에서 사용 가능

- 지역변수 : 선언된 해당 함수에서만 사용 가능

 

1. 전역변수와 지역변수 msg를 출력하는 함수

let msg = "Hello"; // 전역변수
console.log(msg); // 1

function sayHello(name){
    let msg = "Welcome" // 지역변수
    console.log(msg + ' ' + name); // 2
}

sayHello('Hyunjin'); // 3
console.log(msg);

// 결과
/*
1) Hello 
2) Welcome Hyunjin
3) Hello 
*/

 

2. 전역변수로 선언된 msg 수정해서 출력하기

let msg = "Hello";
console.log("함수 호출 전"); // 1
console.log(msg); // 2

function sayHello(name){
    console.log("함수 내부"); // 3
    if(name){
        msg += `, ${name}`;
    }
    console.log(msg); // 4
}

sayHello();
sayHello('Hyunjin');
console.log("함수 호출 후"); // 5
console.log(msg); // 6

// 결과
/*
1) 함수 호출 전
2) Hello
3) 함수 내부
4) Hello
3) 함수 내부
4) Hello, Hyunjin
5) 함수 호출 후
6) Hello, Hyunjin
*/

---

✅ 매개변수의 기본 값 설정하기

 

1. 매개변수가 있으면 name을 아니면 default 값을 출력하는 함수

function sayHello(name = 'friend'){
  let msg = `Hello, ${name}`;
  console.log(msg);
}

sayHello(); // Hello, friend
sayHello('Jane'); // Hello, Jane

 

매개변수에서 default 값을 설정하면, 매개변수가 들어오지 않을 때 해당 변수에 default 값을 저장함!

---

✅ 반환형 함수

반환?

return을 통해 값을 함수 밖으로 전달하는 것

 

1. 반환형 ❌ 함수

function showError(){
    AudioListener('에러 발생');
}

📛 주의 📛
return문이 없다고 해서 아무 값도 반환하지 않는 것은 아님!
항상 undefined를 반환함!

 

 

2. 반환형이 있는 함수

function showError(){
    AudioListener('에러 발생');
    return;
}

 

여기서 return은 함수 종료의 의미로 볼 수 있음!

 

 

3. 매개변수로 숫자 두개를 받으면, 두 수의 합을 출력하는 함수

function add(num1, num2){
  return num1 + num2;
}
const result = add(2,3);
console.log(result); // 5

💡 함수 이것만 생각하자! 

함수는 한가지 동작만 하는 것이 좋음!

함수의 이름은 동작과 관련이 있어야 함!

---

✅ 함수의 여러가지 선언 방법

 

1. 함수 선언문 : 어디서든 호출 가능

sayHello();

function sayHello(){ // 호이스팅 - 밑에서 선언했지만 범위가 위까지 가능
    console.log('Hello');
}

// Hello

호이스팅이란?
인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것
즉, 함수 선언보다 호출을 먼저해도 사용 가능한 것!
(단 let, const에는 적용 불가능)

 

 

2. 함수 표현식 : 코드에 도달해야지만 실행 가능

let sayBye = function() {
  console.log('Bye');
}
sayBye(); // Bye

 

만약 함수 선언문처럼 함수 호출을 먼저한다면?

sayHi(); // 오류 발생
let sayHi = function() {
  console.log('Hi');
}

오류 발생으로 실행이 안됨!

 

3. 화살표 함수

 

3-1. 매개변수가 없는 함수

let showError = () =>{
    console.log("error");
}

 

3-2. 매개변수가 있는 함수

let add = (num, num2) =>{
    num1 + num2;
};

 

3-3. 매개변수가 하나일 경우 ( ) 생략가능

let sayHello = name => `Hello, ${name}`

 

3-4. return문이 한 줄일 경우 축약 가능

let add = (num, num2) => num1 + num2;

---

✅ 함수를 이용한 다양한 예제

함수 표현식을 화살표 함수로 바꿔보기

 

1. 매개변수로 이름을 받아서 'Hello, 이름'을 출력하는 함수

1) 함수 표현식

const sayHello = function(name){
  const msg = `Hello, ${name}`;
  console.log(msg);
};
sayHello('hyunjin') // Hello, hyunjin

 

2) 화살표 함수

let sayHello = name => {
  const msg = `Hello, ${name}`;
  console.log(msg);
};
sayHello('Hyunjin'); // Hello, hyunjin

 

 

2. 매개변수로 숫자 두개를 받아 두 수의 합을 반환하는 함수

1) 함수 표현식

const add = function(num1, num2){
  const result = num1+num2;
  return result;
}
console.log(add(1, 2)); // 3

 

2) 화살표 함수

let add = (num1, num2) => {
  const result = num1 + num2;
  return result;
}
console.log(add(1,2)); // 3

 

3) 함수 선언문

console.log(add(1, 2)); // 3
function add(num1, num2){
  return num1 + num2;
}