[javascript] step01. datatype : function

function

    <script>
        // function type
        // undefined를 return 해주는 함수
        let f1 = function(){
            // 일괄 실행할 javascript를 {} 안에 작성해서 준비할 수 있다.
            console.log("하나");
            console.log("둘");
            console.log("셋");
        };

        // number type을 return 해주는 함수
        let f2 = function(){
            console.log("f2() 호출됨!")
            return 999; // return : 되돌려준다. 함수를 끝낸다.
        };              //         함수를 호출한 곳으로 돌아간다.

        // string type을 return 해주는 함수
        let f3 = function(){
            console.log("f3() 호출됨")
            return "hello~"
        };

        // object type을 return 해주는 함수
        let f4 = function(){
            console.log("f4() 호출됨")
            return {num:1, name:"kim"};
        };

        // array type을 return 해주는 함수
        let f5 = function(){
            console.log("f5() 호출됨")
            return [10, 20, 30];
        }
    </script>

1. function type은 특정 시점에 실행할 작업들을 모아둘 수 있다.
2. function도 data이기 때문에 사물함의 특정 값을 차지한다. 때문에 변수에 대입하는 것도 가능하다.
3. function 자체가 사물함을 만드는 것이다. 그 번호를 변수에 넣으면 사물함 열쇠를 copy한 것이고, 그러면 그것을 불러와서 사용하면 되는 것이다.
4. return은 '되돌려준다.'로 해석하면 좋다. 함수가 끝나면 어떤 값으로 바뀌는데, 그것을 return으로 정해줄 수 있다. return을 object로 해준다면 heap 영역에 만들어지고 그 자리에 key 값이 들어오게 된다.
5. 함수는 참조를 할 수 있고, 호출을 할 수 있다.
   함수는 heap 영역에 생성되는데, 이 사물함의 reference value(사물함 key 값)를 가져오는 것이 참조.
   함수를 실행하는 것이 호출이다.
   이 두 가지를 구분해야 한다.
   (ex - let result=f5; (참조) / let result=f5( ); (호출))
   

   

   ture -> true, string 설명에 오류

   

   문자열 설명

6. memory에는 stack 영역과 heap 영역이 있다고 한다. stack 영역이 변수가 만들어지는, heap 영역이 사물함 영역이라고 이해를 돕기 위한 이미지이다. 이미지는 문자열이 stack 영역에 있다고 표기되어있지만 사실 이것은 오류이다. 문자열도 함수처럼 heap 영역에 있는 내용인데, 그것이 아래 그림에 해당한다.
   내용이 같은 문자열이라면 heap 영역에 하나만 만들어진다고 했다. object와 다르다. 만약에 "lee"를 "park"으로 수정한다면 기존의 22의 연결이 끊어지고 새롭게 30으로 연결된다고 했다. 문자열 자체가 "lee"에서 "park"으로 수정되는것이 아니라 기존의 것은 garbage가 되고 새롭게 heap 영역에 만들어지는 것이라고 한다.
7. 가장 상단의 999를 return하는 함수가 변수에 대입되지 않는다면 어떨까?
   함수가 return된 그 자리가 999로 바뀌는 것이 아니라 버려진 값이 된다. garbage도 아니고 그냥 사용되지 않는 값이 된다고 한다. 만약에 값을 버리기 싫다면 변수에 대입해주면 된다.
8. 이렇게 heap 영역에 생기는 object, array, function들을 통틀어서 객체라고 한다. 그리고 사물함 열쇠에 해당하는 것을 객체의 참조값, 혹은 주소값, 혹은 reference 값이라고 한다.
9. 객체에는 document object(문서 객체)도 포함된다.
   <h1> xxx </h1> 등등이 문서 객체이다.
10. 모든 변수의 이름은 숫자 단독으로 명명할 수 없고, 숫자로 시작할 수도 없다.

 

    <button onclick = "removeAll()">삭제</button>
    <script>

        let removeAll = function(){
            let isDelete = confirm("정말로 삭제하시겠습니까?")
            
            // 웹브라우저야 만약에 isDelete 에 true가 있으면 아래의 한줄을 수행하고
            // false가 들어있으면 수행하면 안된다.
            if(isDelete == true){
                console.log("모든 자료를 삭제했습니다.");
            }
        };
        ///let first = 10;
        ///let second = 20;
        // 두 개의 숫자를 전달받아서 합계를 console에 출력하는 함수 
        let showSum = function(first, second){
            // 1. 함수에 전달된 두 개의 숫자를 더한 결과를 얻어낸다.
            let result = first + second;
           
            // 2. 결과 값을 console 창에 출력한다.
            console.log(result);
        };
    </script>

1. function의 소괄호 (  ) 안에는 변수를 전달받을 준비를 한다. 예시의 first, second처럼 매개변수에는 let을 사용하지 않고 전달받을 변수를 선언한다.
   물론 alert("xxx"); 처럼 값을 직접 전달하기도 한다.

2. document.querySelector("#one").innerText;

   이 경우를 생각해보면 let document={querySelector : function(arg){return xxx;}} 라고 생각할 수 있다. "#one" 라는 argument를 전달해서 무언가를 return한 자리로 바뀌는 것이다. 이 경우는 object를 return하는 것이라 할 수 있다.
3. 예시처럼 함수 안에 조건문을 넣어 특정 함수를 조건부 동작하게 만들 수 있다. isDelete가 true라면 수행, false라면 수행하지 않는 것이다. confirm은 예/아니오에 따라 true와 false를 return하기 때문에 if의 소괄호 (  ) 안쪽에 단순히 isDelete만 넣어주어도 된다. 소괄호에 confirm 자체를 넣어주어도 가능하다.
4. javascript에서는 함수에 매개변수를 전달하지 않아도, 함수 안에서 에러가 날지언정 호출 자체가 가능하지만, 나중에 java에서는 호출조차 되지 않는다.

 

조만간 다음과 같은 code를 마주하게 될 것이다.

document.querySelectorAll("div")[0].innerText

1. xxx. : plane object
2. yyy[#] : array
3. zzz(  ) : function call