JS function 코딩하면서 이해하기

문제 함수 매개변수의 기본 디폴트 값은 무엇인가?

---

function check(a,b){


    return typeof a

}
undefined
check()
'undefined'

답은 'undefined'

함수는 값이고 속성 값이 될 수 있다.

---

 

함수의 모형을 보면 다음과 같고 함수의 값이 결국 속성 값으로 연결되서 생각 할 수 있음을 쉽게 볼 수 있다.

function cal(a){


    return a

}
undefined
// 이를 다시 쓰면 a의 값이 함수임을 알 수 있다


let a=function(){


    return a

}
undefined


// 값을 쓸 수 있다는 것은 객체로 확장해서 생각하면 객체의 값으로 쓸 수 있다는 말이다



let a={


    b: function cal(){

}


}

 

함수는 객체이다!?

함수는 자바스크립트에서 일급객체이기 때문에 key와 value를 가질 수 있다.  

---

function sum(a,b){


    return a+b


}
undefined
sum.number=7
7
sum.string="string"
'string'
Object.keys(sum).length
    
2

 

 

 

콜백함수의 이해 

---

우리가 전에 함수는 값으로서 사용이 가능해서 변수에 할당될 수 있고 속성 값으로 사용될 수 있다고 말했다.  이는 어떤 함수에 매개변수에도 값으로로 전달이 가능하다는 것을 의미한다. 값으로 전달된 함수가 호출이 되면 이제 우리는 그 함수의 계산을 통해서 새로운 식을 하나 더 세울 수 있다. 얼마나 좋은가 여러가지 식을 미리 다 짜놓지 않고 혹시 필요하면 인자로 콜백함수를 줘서 데이터를 콜백함수에 넣어서 새로운 리턴 값을 얻을 수 있다는 것이다. 이는 계산식의 독립적이면서도 재사용성이 가능하기 때문에 미친 장점을 가진다. (글을 쓰면서 이해가 되서 너무 설램.. 독자들도 꼭 글 쓰면서 동작 원리를 하나씩 이해해보기를...)

JSResult Skip Results Iframe
EDIT ON
function calc(option, num1, num2, callback) {
  var result = "";

  switch (option) {
    case "+":
      result = num1 + num2;
      break;
    case "-":
      result = num1 - num2;
      break;
    case "*":
      result = num1 * num2;
      break;
    case "/":
      result = num1 / num2;
      break;

    default:
      result = "올바른 연산자를 사용해주세요.";
  }

  callback(result);
}

function println1(result) {
  document.write("두 수의 합은 = " + result + "입니다.", "<br>");
}

function println2(result) {
  document.write("정답은 =" + result + "입니다.<br>");
}

calc("+", 10, 20, println1);
calc("+", 10, 20, println2);

 

콜백함수의 콜스택 큐의 이해 

---

//JS의 콜스택과 큐의 모습 이해하기 



console.log("1")
//선언



function printNow(print){return print()}
//호출 : 호이스팅에 의해 위로 올라가서 맨 위에  선언됨
printNow(()=>{return console.log("동기식 호출이다!!")})

console.log("2")


//비동기식 방법 : setTimeout 엡 API를 이용하면 동기식으로 호출된 함수들이 종료되고 큐 루프를 통해 다시 콜스택으로 들어가 웹 API들이 콜백된다.

function printDelay(print,timeout){
	return setTimeout(print,timeout)
}


printDelay(()=>{return console.log("비동기식으로 출력")},2000)

콜백함수의 콜스택 큐의 이해  2

 

문제:  웹 API를 호출할 때 결과가 뒤죽박죽 나온다. 다음의 상황을 봐보자!!

 

---

function printString(string){

	setTimeout(() => {
		console.log(string)
	}, Math.floor(Math.random()*100)
	
	);



}
function printStringAll(){

	printString("a")
	printString("b")
	printString("c")




}


printStringAll()

결과  :abc acb bac 

 

해결 :  printString함수에 인자에 callback 함수를 넣음으로써 먼저 콜스택에서 실행되는 console.log가 "a"가 실행이 되고 기다리고 있던 callback함수가 비어있는 콜스택을 보고 들어가서 실행이되고 이후 "b"가 실행이 되고 그 다음 똑같은 원리로 "c"가 실행이 됩니다.

---

function printString(string,callback){

	setTimeout(() => {
		console.log(string)
		callback()
	}, Math.floor(Math.random()*100)
	
	);



}
function printStringAll(){

	printString("a",()=>{
		printString("b",()=>{

			printString("c",()=>{
				
			})
		})

	})




}


printStringAll()

 

 

 

 

배열 요소들을 계산하고 싶을 때 

 

---

let array =[1,2,3]
undefined
function sum(a,b,c){


    return a+b+c


}
undefined
sum(...array)
6

 

결론

---

함수는 객체입니다.

이는 함수도 일반 객체처럼 취급될 수 있다는 것을 말합니다.

때문에 자바스크립트 함수는 다음과 같은 동작이 가능합니다.

 

1. 함수는 리터럴에 의해 생성된다.

2. 함수는 함수의 인자로 전달이 가능하다.

3. 변수나 배열의 원소, 객체의 프로퍼티 등에 할당이 가능하다.

4. 함수는 함수의 리턴값으로 리턴이 가능하다.

5. 함수는 동적으로 프로퍼티를 생성 및 할당이 가능하다.

 

이와 같이 앞에서 나열한 기능이 모두 가능한 데이터 타입을 프로그래밍에서는 first-class object(일급객체), first-class citizen, entity 라고 부릅니다.

출처: https://webclub.tistory.com/114 [Web Club]