시베리안 허숙희의 자바스크립트 비기닝 7 (함수 function)

자바스크립트

by e7e 2023. 6. 3. 23:46

함수(function)

자바스크립트가 재밌어지려면 함수(function)를 잘 맹글고 활용해야 한당!.

보통 초보자들의 첫번째 고비당!, 일단 두가지 원칙을 기억하장!

DRY -> Do not Repeat Yourself(반복하지 마랑) 함수를 맹그는 이유당!

KISS -> Keep It Simple, Stupid(심플하게 유지행, 바보얌) 함수 맹글 때 생각해랑!

함수선언법 2가지

화살표함수(Arrow function)와 호이스팅(hoisting) 이야기는 일단 못 들은 척 하장

    // 원래 선언법
    function 함수명(/*매개변수명1,매개변수명2, 필요한 만큼*/){
        //실행블락
        //return  //명시적으로 쓰지 않는다면 생략되어 있음
    }

    // 표현식 선언법
    var 함수명 = function(/*매개변수명1,매개변수명2, 필요한 만큼*/){
        //실행 블록
        //return //명시적으로 쓰지 않는다면 생략되어 있음
    }

원래 선언법과 익숙해 진다면 나머진 표현의 다양성(나중에 아름답게 쓰장)일 뿐이니,

일단 원래 선언법에만 집중해 보장!

선언엔 function키워드가 필요하고, 호출엔 function키워드가 사용되지 않음에 주목하장

함수.html을 아래 내용으로 맹글고, 소스와 결과를 아기 고양이 눈빛으로 확인하장!

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
//매개 변수 없는 함수 선언!
function f_simpleOut(){
    alert("안농하삼 로제예용");
    return // 안 쓰면 자동으로 생략되어 있음
}

//호출은 함수이름으로 곧 실행하라는 의미
f_simpleOut();  // 호출
f_simpleOut();  // 호출

//매개 변수 있는 함수 선언!
function f_simpleMsg(fromName, message){
    alert(fromName + "님으로 부터 " + message + "가 왔어용");
    return // 안 쓰면 자동으로 생략되어 있음
}

f_simpleMsg("로제","Gone"); // 호출
f_simpleMsg("제니","Sole"); // 호출
</script>

느낌이 왔는가?, 왔을 것이당! 특히 함수명(매개변수명..)의 매개변수가 느낌이 오면 좋겠당!

예약된 키워드가 아니라면, 매개변수명은 맘대로 지어도 된당!

느낌이 왔다면 함수매개변수.html을 아래 내용으로 작성, 브라우져에서 결과를 꼼꼬미 확인하장

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
// 5개의 매개변수를 가진 함수 선언
function f_paraCheck(pArg1,pArg2,pArg3,pArg4,pArg5){
    //매개 변수 타입 확인
    alert("첫번째 매개변수 타입 : " +typeof(pArg1));
    alert("두번째 매개변수 타입 : " +typeof(pArg2));
    alert("세번째 매개변수 타입 : " +typeof(pArg3));
    alert("네번째 매개변수 타입 : " +typeof(pArg4));
    alert("다섯번째 매개변수 타입: " +typeof(pArg5));

    //매개변수의 값 확인
    alert("첫번째 매개변수 값 : " + pArg1);
    alert("두번째 매개변수 값 : " + pArg2);
    alert("세번째 매개변수 값 : " + pArg3[0]);
    alert("네번째 매개변수 값 : " + pArg4.name);
    // 함수이름을 FP(Function Pointer)라 부름
    alert("다섯번째 매개변수 확인 : " + pArg5);  
    // 함수 실행 (요따구로 쓰는 것을 콜백( callback) 이라 부름)
    alert("다섯번째 매개변수 실행 : " + pArg5());

}

// 함수 호출
f_paraCheck(
    272,
    "E7E",
    ["로제","제니","리사","지수"],
    {name:"로지",age:26},
    function(){ return "보이시나용?"}
);
</script>

매칭관계가 확실히 눈에 들어오지 않았다면, 꼬옥 다시 확인하장(중요하당!)

함수리턴.html을 아래 내용으로 작성하고, 역시 결과를 아주 꼼꼼히 확인하장!

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
    // return문 없음
    function f_noRet(){
    }

    //return문은 있지만 암것도 return 안함
    function f_retNo(){
        return;
    }

    // 숫자 return
    function f_retNumber(){
        return 272;
    }

    // 문자열 return
    function f_retString(){
        return "E7E";
    }

    // 배열 return
    function f_retArray(){
        return ["로제","제니","리사","지수"];
    }

    // 객체 return
    function f_retJSON(){
        return {name:"로제",age:26,alias:"로지"};
    }

    // 함수 return
    function f_retFuncton(){
        return function(pMsg){
            alert("넘어온 메세지는 " + pMsg + "임당!");
            return "요게 눈에 보이는 게 이해되면 완전 훌륭!";
        }
    }

    alert("f_noRet() : " + f_noRet());
    alert("f_retNo() : " + f_retNo()); // f_noRet()와 같은 결과에 주목
    alert("f_retNumber() : " + f_retNumber());
    alert("f_retString() : " + f_retString());
    alert("f_retArray() : " + f_retArray()[1]);
    alert("f_retJSON() : " + f_retJSON().alias);
    alert("f_retFunction() : " + f_retFuncton()("느낌이 오나용"));
</script>

마지막 함수 속에서 함수를 리턴하고, 마지막 alert문의 결과까지 느낌이 왔다면,

초보자인 당신은 정말 완전 훌륭하당! ( 경험치만 누적시키면 저절로 실력이 실력을 쌓을것이당)

매개변수와 return에 대해서 이미 자신감이 넘치는 거이 아닌가!

함수(function)에 대해서는 앞으로 할 이야기가 엄청 많지만, 걱정 NO! 이미 고비를 넘겼당!

일반인은 컴퓨터를 통해 일상을 좀 "더 편하겡, 좀 더 재밌겡"의 길을 가는뎅

개발자는 AI 챗GPT의 도움조차 맘이 편하지 않당!

정말 혀를 길게 내밀어 챗! 챗! 챗! 이당.

논리적 일을 업으로 삼더라도, 비 논리적 갬성이 논리의 원천임을 잊지 말자.

논리로만 일을 하거나, 삶을 유지하려 한다면, 인간에 대한 사랑은 히미해지고

따뜻한 온기를 가진 프로그램은 탄생하지 못할 것이다.

비논리적 갬성이 풍부하고, 긍정적인 당신!,

당신이 미래가 원하는 진정한 개발자일 것이다. 오늘만이라도 갬성의 눈물에 젖장!

https://www.youtube.com/watch?v=bDEFxTSrEZQ

'자바스크립트' 카테고리의 다른 글

시베리안 허숙희의 자바스크립트 비기닝 9 ( 문자열 메소드) (2)	2023.06.06
시베리안 허숙희의 자바스크립트 비기닝 8 (연산자) (0)	2023.06.05
시베리안 허숙희의 자바스크립트 비기닝 6 (반복문) (0)	2023.06.03
시베리안 허숙희의 자바스크립트 비기닝 5 (조건 & 자동 형변환) (0)	2023.06.02
시베리안 허숙희의 자바스크립트 비기닝 4 (변수동작: 복사와 참조) (0)	2023.06.01