자바스크립트_4-1 / 함수의 선언과 표현

1. 함수

- 함수는 input이 주어질 때 일정한 조건에 의해 이를 처리하고 output을 출력하는 것을 의미한다.

- 함수의 이름은 대부분 해당 함수가 어떤 기능을 가지는지를 나타낸다.

    * 하나의 함수에서 여러가지 기능을 가지는 경우는 함수를 기능별로 분할해서 사용하는 것이 좋다.

 

1-1. 자바스크립트에서의 함수

- 자바스크립트에서 함수는 block내에 있는 명령어를 실행한다.

- 자바스크립트에서 함수는 오브젝트 타입을 가지고 있다.

    * 따라서 함수의 속성값들을 확인할 수 있다.

// Function
// - fundamental building block in the program
// - subprogram can be used multiple times
// - performs a task or calculates a value

// 1. Function declaration
// function name(param1, param2) { body ... return; }
// one function === one thing
// naming: doSomething, command, verb
// e.g. createCardAndPoint -> createCard, createPoint
// function is object in JS
function printHello() {
    console.log('Hello');
}
printHello();

function log(message) {
    console.log(message);
}
log('Hello@');
log(1234);
// 자바스크립트에서는 데이터 타입과 상관없이 사용 가능
// 하지만 타입스크립트는 데이터 타입과 리턴값까지 적어줘야함 -> 훨씬 용이함

 

2. 파라미터

- 함수의 파라미터로는 premitive 파라미터와 object 파라미터를 둘 다 사용할 수 있다.

- premitive 파라미터를 사용할 경우 value를 전달한다.

- object 파라미터를 사용할 경우 reference를 전달한다.

- 자바스크립트에서는 입력 파라미터와 리턴 값의 데이터 타입을 안적지만 이 때문에 문제가 발생할 수 있다. 이를 개선하기 위해 타입스크립트에서는 파라미터와 리턴 값의 데이터 타입을 적어준다.

// 2. Parameters
// premitive parameters: passed by value
// object parameters: passed by reference
function changeName(obs) {
    obj.name = 'coder';
}
const ellie = { name: 'ellie' };
changeName(ellie);
console.log(ellie);

 

 

3. default 파라미터

- 파라미터의 값이 입력되지 않을 경우를 대비해 디폴트 값을 정해줄 수 있다.

// 3. Default parameters (added in ES6)
function showMessage(message, from = 'unknown'){
    console.log(`${message} by ${from}`);
}

showMessage('Hi');

 

 

4. rest 파라미터

- 배열의 형태로 파라미터가 입력될 수 있다.

- 입력 파라미터의 값이 배열의 형태로 입력될 경우 반복문, of 문, forEach 문 등을 사용해 표현할 수 있다.

// 4. Rest parameters (added in ES6)
function printAll(...args) {
    for (let i = 0; i < args.length; i++) {
        console.log(args[i])
    }
    for (const arg of args) {
        console.log(arg)
    }
    args.forEach((arg) => console.log(arg));
}
printAll('dream', 'coding', 'ellie');

 

 

5. 지역 변수

- 함수 내에서 선언되는 변수로서 지역 변수는 함수 밖에서 사용이 불가능하다.

- 이중 함수 구문의 경우 상위 함수에서 선언된 지역 변수는 하위 함수에서 사용이 가능하지만 반대는 불가능하다.

// 5. local scope
let globalMessage = 'global'; // global vairable
function printMessage() {
    let message = 'hello';
    console.log(message); // local vairable
    console.log(Message);
    function printAnather() {
        console.log(message);
        let childMessage = 'hello!';
        console.log(childMessage);
    };
    // console.log(childMessage); 에러
};
printMessage();
// console.log(message); 에러

 

 

6. 리턴

- 리턴이 없는 경우는 return undefined이 생략된 것이다.

// 6. Return a value
// return이 없는 경우는 return undefined 임
function sum(a, b) {
    return a + b;
};
const result = sum(1, 2); // 3
console.log(`sum: ${sum(1, 2)}`);

- 좋은 코드와 나쁜 코드

// 7. Early return, early exit
// bad
function upgradeUser(user) {
    if (user.point > 10) {
        // long upgrade logic ...
    };
};
// good
function upgradeUser(user) {
    if (user.point <= 10) {
        return ;
    };
    // long upgrade logic ...
};