코딩앙마 자바스크립트 기초 강의 10. 함수

함수 작성하는 법

fucntion sayHello(name){

    console.log(`Hello, ${name}`);

}

함수 함수명 매개변수

 

매개변수 = 인수

매개변수는 없을 수도 있고, 1개일 수도 있고, 여러 개 일 수도 있음

2개 이상이면 ,를 사용해서 구분

 

sayHello(name);

함수를 작성하고 후에 이렇게만 적어서 호출할 수 있음

사용시마다 매번 귀찮게 여러 줄을 사용하지 않아도 되고

맨 처음 함수만 수정하면 돼서 유지보수가 편함

 

 

 

function sayHello(name){

    let msg = `Hello`;

    if(name){

        msg = `Hello, ${name};`

    }

        console.log(msg);

}

 

sayHello();

 

>Hello

 

이렇게 실행하면 Hello만 나옴

그 이유는 매개변수를 받지 못했기 때문에 undefined가 나오고

undefined는 false이므로 if문이 작동하지 않아서 먼저 선언한 msg만 나옴

 

 

 

지역변수

함수 안에서만 사용할 수 있는 변수

fucntion sayHello(name){

    let msg = `Hello, `;

    if(name){

        msg += `, ${name}`;

    }

   console.log(msg);

}

 

 

sayHello();

sayHello(name);

 

함수 밖에서도 사용하고 싶으면 함수 밖으로 선언하면 됨(전역변수)

 

전역변수

어디서나 접근 할 수 있는 변수

let msg = 'Hello'

 

fucntion sayHello(name){

    if(name){

        msg += `, ${name}`;

    }

   console.log(msg);

}

 

sayHello();

sayHello(name);

 

 

전역변수와 지역변수로 구분되어 있을 때는

let 선언 이름을 중복으로 사용할 수 있음 (서로 간섭하지 않음)

 

 

tip)

매개변수로 받은 값은 복사된 후 함수의 지역변수가 됨

 

전역변수가 많아지면 관리가 힘들어지므로 전체 서비스에서 공통으로 사용해야하는 변수를 제외하고는 

함수에 특화된 지역변수를 쓰는 습관을 들이면 좋다.

 

 

function sayHello(name){

    let newName = name || 'friend';

    let msg = `Hello, ${newName}`;

    console.log(msg)

}

 

sayHello(); > "Hello, friend" >name이 undefined이므로 false라 friend가 출력됨

sayHello('Jane'); > "Hello, Jane" >name이 true라서 평가를 종료하고 Jane이 출력됨

 

 

매개변수의 기본값 설정

function sayHello(name = 'friend'){ name이 없을 때 반환

    let msg = `Hello, ${name}`;

    console.log(msg)

}

 

sayHello(); > "Hello, friend" 

sayHello('Jane');  > "Hello, Jane"

 

 

return문으로 값 반환

function add(num1, num2){

    return num1 + num2;

}

 

const result = add(2, 3);

console.log(result);

>5

 

return문이 없는 함수도 undefined을 반환

 

return;

return만 있어도 undefined을 반환 (+반환할 값으로 사용할 표현식을 생략할 경우)

 

return문에 도달하면 함수의 실행은 그 지점에서 중단된다.

함수를 종료하는 목적으로 사용하기도 함

 

+함수 실행을 중단하는 return문

return;

return true;

return false;

return x; 

return x + y / 3;

 

+return 키워드와 표현식 사이에는 줄바꿈 문자가 올 수 없음

문제를 해결하고 싶으면 괄호를 사용

return

a + b;

위 코드는 아래 코드와 같다.

return;

a + b;

 

tip)

1. 함수는 한 번에 한 작업만 하는게 좋음

한 함수가 여러 작업을 한다면 더 잘게 나눠서 쓰는게 좋음

 

2. 읽기 쉽고 이름만 봐도 어떤 동작인지 알 수 있게 네이밍

(예 :

showError // 에러를 보여줌

getName // 이름을 얻어옴

createUserData // 유저데이터 생성

checkLogin // 로그인 여부 체크)