[JAVA SCRIPT] FUNCTION - 함수

 

기본 함수 형식

// 함수 형식 1 - 선언과 사용을 순서 관계 없이 사용 가능 : 호이스팅 가능
f1(); // 함수 호출

function f1() {
    console.log("f1");
}


// 함수 형식 2 - 호이스팅 불가
// 함수는 코드 자체가 수정 불가이기 때문에 함수이름 앞에는 const를 사용
const f2 = function () {
    console.log("f2");
}

f2(); // 함수 호출


// 함수 형식 3 - 살찐 애로우 or 애로우 함수
const f3 = () => {
    console.log("f3");
}

f3(); // 함수 호출

 

함수 모양 4개

// 인수 전달 없고, return값 없음
function f1() {
    console.log("f1");
}
f1();


// 인수 전달 있고, return값 없음
// 인수 전달 a의 타입은 무의미하기 때문에 안붙힘 -> 오류
// 뭘 던지던 알아서 받음
function f2(a, b) {
    console.log(a, b);
    console.log(typeof (a));
    console.log(typeof (b));
}
f2(10, '호랑이');


// 인수 전달 없고, return값 있음
// return 키워드를 넣으면 알아서 해줌
function f3() {
    console.log("f3");
    return 100;
}
// return이 있을 때 호출 방법 1
let num = f3();
console.log(num);

// return이 있을 때 호출 방법 2
console.log(f3());


// 인수 전달 있고, return값 있음
function f4(n, s) {
    console.log("f4");
    return n + s;
}
console.log(f4(10, '호랑이'));
console.log(f4(10, 20));

 

함수 모양 4개 -> 화살표 함수로 변형

//인수 전달 없고, return 없음
const f1 = () => {
    console.log("f1");
}
f1();


//인수 전달 있고, return 없음
const f2 = (n, s) => {
    console.log("f2");
    console.log(n, s);
}
f2(10, '호랑이');


//인수 전달 없고, return 있음
const f3 = () => {
    console.log("f3");
    return 100;
}
console.log(f3());


//인수 전달 있고, return 있음
const f4 = (n, s) => {
    console.log("f4");
    return n + s;
}
console.log(f4(10, 20));

 

화살표 함수 모양 - 생략

// 인수전달이 하나일 때에는 ( ) 생략 가능
const f1 = num => {
    console.log("f1");
    console.log(num);
}


// 실행 문장이 한문장이일 때에는 { } 생략
// { } 생략하면 return도 생략
// 무조건 return 스코프가 생략된 모양
const f2 = () => 100;
const f3 = num => 100;

 

화살표 함수 객체 전달

// 객체 전달 1
const f4 = () => {
    let n = {
        a: 10,
        b: 20,
    };
    return n;
}


// 객체 전달 2
const f5 = () => {
    return {
        a: 10,
        b: 20,
    };
}


// 객체 전달 3
// return { 객체 } -> ({ 객체 })
const f6 = () => ({
    a: 10,
    b: 20,
});

// return { 객체 } 생략 전
const f6 = () => {
    return ({
        a: 10,
        b: 20,
    });
}

// 디버깅 용으로 코드를 추가해야할 경우가 있을 수 있으면 원상복구 시켜야함
const f6 = () => {
    console.log("f7");
    return ({

    });
}