[드림코딩 엘리] function 사용법 코딩 return이란?

자바스크립트의 꽃이라고도 불리는 functions와 objects를 2강에 거쳐서 배워볼 것이다. 여기서는 한번 끝까지 신청한 다음에 노트를 작성하면 될 것이다. 참고로 parameter는 매개 변수이다.

---

각각의 프로그램 안에서도 각각 저마다의 기능을 수행하는 함수들이 있다.

• API(Application Programming Interface)를 쓸 때, 이 함수의 이름을 보고 이 함수의 역할을 생각할 수 있다.
• input oupput, function의 이름 
• Subprogram 이라고 불리며 여러번 재 사용이 가능하다.
• 한 가지의 TASK 값을 계산하기 위해 쓰인다.

1. Function declaration

• 사용법: function 키워드를 이용하고, 이름을 지정한 다음, ( ) 안에 parameter를 쭉 나열한 다음, 바디 함수 { } 안에 기본적인 비즈니스 로직을 작성한 다음, return을 해주면 된다.
• 하나의 함수는 한 가지의 일만 하도록 만들어야한다.
• 변수의 이름을 정할 때 명사 noun 을 썼다.
• 함수의 이름을 정할 때 무언가를 동작하는는 것이기 때문에 verb 동사 형태로 만드는 것이 좋다.
• 이름을 짓기 힘들다면 함수 안에 너무 많은 것이 있지 않은가. 나눌 수 있지는 않은가 고민해라
• 자바스크립트에서 function은 object로 간주된다. 그래서 변수에다가 할당할 수 있다.
• 유용한 함수를 만들라면 (parameter)로 메세지를 전달하여 전달된 메세지를 화면에 출력하도록 만드는 것이 좋다.
• log라는 함수를 호출하면서 우리가 원하는 메세지를 입력할 수가 있다.
• 자바스크립트에서는 tpye이 없다. 그래서 함수 자체의 interface만 보았을 때, 이 메세지가 string 인지 number를 전달해야하는지 명확하지 않다. 숫자가 문자어로 변환이 되어서 출력이 된다.
• 다른 함수에서 타입이 중요한 경우 자바스크립트는 난해할 수도 있다.
• 타입스크립트에서는 말 그대로 타입을 붙여넣어서 출력이 가능하다.

// Function
// - fundamental building block in the program
// - subprogram can be used multiple times
// - performs a task or calculats 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 이 말은 우리가 printAll 이라는 함수를 선언하고 '.'을 누르면 ojbect로 전환이 되기 떄문에 이렇게 printAll의 속성 값들을 확인해 볼 수 있다. 
function printHello() {
    console.log('Hello');
}
printHello();
//이렇게 하면 Hello 밖에 출력을 못한다.

function log(message) {
    console.log(message);
}
log('Hello@');
// log라는 함수를 호출하면서 우리가 원하는 메세지를 입력할 수가 있다.
log(1234);
// 자바스크립트 tpye이 없어서 숫자가 문자열로 변환이 되어서 호출된다.

/* 타입스크립트는 밑에 처럼 작성한다.
function log(message: string): number{
    console.log(messege);
    return 0;
}
*/

2. Parameters (매개변수)

object는 reference로 전달되기 때문에 함수 안에서 object의 값을 변경하게 되면 그 변경된 사항이 그대로 메모리에 적용이 되어진다.

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

3. Default Parameters

// 3. Default parameters (added in ES6)
function showMessage(message, from) { // 메세지와 from은 파라미터다 
    console.log(`${message} by ${from}`);
}
showMessage('Hi!');
// 결과는 Hi! by undefined 인데 

function showMessage(message, from = 'unknown') { // 메세지와 from은 파라미터다 
    console.log(`${message} by ${from}`);
}
showMessage('Hi!');
// 이렇게 원하는 default 값을 지정해 놓으면 사용자가 파라미터를 전달하지 않을 떄 이 갑싱 대체되어서 사용되어진다.

 

4. Rest Parameters (ES6에 추가되었다)

• 배열 같은 것을 출력할 때는 for loop 로 이용해서 할 수도 있지만 for of 로 간단하게 할 수도 있다.
• args에 있는 모든 값들이 차례대로 arg에 지정이 되면서 console.log(arg)에 출력이 되는 것이다.
• 더 간단하게 하려면 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');

// 배열 형태로 전달된다. 이런게 있다만 이해하라. prinaall 호출 할 떄 인자 3개 전달
// 3개의 값이 담겨져 있는 배열이다. 배열이 ...ㅁrgs  args 갯수만큼 
// 결과 dream coding ellie
// for of를 사용하면 args에 있는 모든 값들이 차례대로 arg에 지정이 되면서 console.log(arg)에 출력이 되는 것이다.
// forEach 함수형 언어는 나중에 배열에서 배울 것이다.

5. Local scope

scope(유효범위)란?

밖에서는 안이 보이지 않고 안에서만 밖을 볼 수 있다 = 차량 유리창에 틴트가 처리된 거랑 같다

밖에서 console.log(message); 를 출력하게 되면 오류가 난다. 안에서는 globalMessage가 출력이 가능하다. 이것이 scope 이다. 함수 안에서 다른 함수를 선언할 수 있는데 여기서도 똑같은 원칙이 적용된다.

closure란?

자식은 부모에게서 정의된 메세지들을 확인이 할 수 있지만 자식안에 정의된 메세지를 부모 상위 위에서 보려한다면 에러가 발생한다. 중첩된 함수에서 자식의 함수가 부모 함수에 정의된 변수들에 이렇게 접근이 가능한 것들이 바로 closer 이다. 나중에 더 자세한 설명을 할 것이다.

/ 5. Local scope
// 밖에서는 안이 보이지 않고 안에서만 밖을 볼 수 있다 = scope (차량 유리창에 틴트가 처리된 거랑 같다)
// 함수 안에서 다른 함수를 선언할 수 있는데 똑같은 원칙이 적용된다.
// 자식은 부모에게서 정의된 메세지들을 확인이 할 수 있지만 
// 자식안에 정의된 메세지를 부모 상위 위에서 보려한다면 에러가 발생한다
// 중첩된 함수에서 자식의 함수가 부모 함수에 정의된 변수들에 이렇게 접근이 가능한 것들이 바로 closer 이다. 나중에 설명

let globalMessage = 'global'; // 전역 변수인 global variable
function printMessage() {
    let message = 'hello';
    console.log(message); // local variable
    console.log(globalMessage);
    function printAnother() {
        console.log(message);
        let childMessage = 'hello';
    }
    // console.log(childMessage); // error 를 생성한다. 자식안에 정의된 메세지를 부모 상위에서 보지 못한다.
   // return undefined; 
}
printMessage();

6. Return

함수에서는 parameter로 값을 전달받아서 계산된 값을 이렇게 return 할 수 있다. sum 이라는 함수를 호출하게 되면 1과 2가 더해져 3이 return이 된다.

// 6. Return a value
// return 타입이 없는 함수들은 위 처럼 return undefined; 가 생략된 것이다.
// 즉, 모든 함수에서는 return이 생략되거나 값을 return 하는 경우 2가지 이다.
function sum(a, b) {
    return a + b;
}
const result = sum(1, 2); // 3
console.log(`sum: ${sum(1, 2)}`);

7. Early Return

이 뜻은 유저의 point가 10 이상일 경우에만 업그레이드를 진행하는 로직이 있다면  '~ 일 때 ~ 한다'고 작성하게 되면 블럭 안에서 로직을 많이 작성하게돼 가독성이 떨어진다. 그래서 이런 경우에는 if와 else를 번갈아가면서 쓰기 보다는 밑에 처럼 조건이 맞지 않을 때는 빨리 return해서 함수를 종료하고 조건이 맞을 때만 그 다음에 와서 이렇게 필요한 로직들을 쭉 실행하는 것이 좋다. 즉, 나중에 코드를 작성할 때 밑의 경우일 때는 빨리 return 을 하고, 필요한 로직들은 나중에 작성하는 것이 좋다.

1. 조건이 맞지 않는 경우
2. 값이 undefined인 경우
3. 값이 -1 인 경우

// 7. Early Return, early exit 현업에서 이 둘을 하라고 코드지적을 받을 수도 있다.
// 그 말은 유저의 point가 10 이상일 경우에만 업그레이드를 진행하는 로직이 있다면
// 이렇게 xx 일 때 이렇게 한다고 작성하게 되면 블럭 안에서 로직을 맣이 작성하게돼 가독성이 떨어진다.
// 그래서 이런 경우에는 if와 else를 번갈아가면서 쓰기 보다는
// 밑에 처럼 조건이 맞지 않을 때는 빨리 return해서 함수를 종료하고
// 조건이 맞을 때만 그 다음에 와서 이렇게 필요한 로직들을 쭉 실행하는 것이 좋다. 
// 나중에 코드를 작성할 때 조건이 맞지 않는 경우 값이 undefined인 경우, 값이 -1 인 경우 빨리 return 을 하고 
// 필요한 로직들은 나중에 작성하는 것이 좋다.
function upgraderUser(user) {
    if (user.point > 10) {
        return;
    } 
    // long upgrade logic...
}