function sum(a, b)

JavaScript(자바스크립트) - Function 함수에 대해서 알아보자 2022. 8. 11.

 

function name (param1, param2) {body... return;}

​하나의 함수는 한가지의 일만 하도록 만들어야한다.

함수의 이름을 정할 때에는 명사형으로 만들어야한다.

(ex. function doSomething)

 

위와 같이 function 함수를 사용할 수 있는데 맨위의 코드와 같이 한다면

hello만 출력을 하게 되는데 밑에 log(message) 로 하여 한다면

log() 로 하여 괄호 안에 원하는 문자를 넣어 해당 문자를 출력할 수 있다.

물론 숫자도 출력이 가능하긴 하지만 숫자를 문자 타입으로 변경하여 출력을 하는데

하지만 이럴 때 문제는 타입의 문제인데 숫자타입이 아닌 문자 타입으로 변경이 되기 때문에

이런 타입이 중요한 부분이라면 살짝 문제가 생기긴 한다.

 

 

위의 코드는 object Parameters 를 설명하기 위해 적어놓은 것인데

changeName 이라는 Function 은 전달된 object에 david 라는 이름으로

무조건 변경이 되게 하는 코드이다.

그래서 밑에 const james 라는 것을 정의 후에 james 라는 오브젝트를 만들면

해당 레퍼런스가 생기는데 그 레퍼런스가 가르키는 곳이 name 을 가리키고 있다.

그렇기 때문에 밑에 changeName(james) 를 하고 출력을 하면 david가 출력이 된다.

 

 

 

이에는 Default Parameters 를 설명을 해보려고 하는데

위의 코드를 출력하게 되면 Hi 는 지정이 되어있기 때문에 Hi !는 나오게 되지만

그 뒤에는 by undefined 가 나오게 된다.

왜냐하면 showMessage 라는 Function 이 Hi ! 라는 message를 받았지만

from 에 대한 부분을 전달된게 없기 때문에 undefined 로 출력되게 된다.

하지만 from = 'unknown' 을 하게 되면 원하는 default 값을 출력할 수 있게 된다.

위와 같이 하게 된다면 undefined 가 아닌 Hi! by unknown 이 출력되게 된다.

 

이번에는 Rest Parameters 인데 위에 보게 되면 ... 이라고 되어있는게

Rest Parameters라고 불리는데 이것은 바로 배열 형태로 전달이 되게 된다.

printAll 이라는 것을 부르게 되면 인자를 총 세개를 전달을 하게 되었으니

저 인자 세개는 배열 안에 각각 들어가게 되는거라고 보면 되며

for 문을 통해서 총 세개의 인자가 한줄에 하나씩 출력이 되게 된다.

왜냐하면 for 문을 통해서 printAll 에 들어간 인자를 하나씩 부르기 때문이다.

 

 

 

이번에는 Local Scope에 대해서 알아보려고 하는데

그 전에 한가지만 알아야한다면 안에서는 밖을 볼 수 있지만 밖에서는 안을 못본다.

즉, 이게 무슨 뜻이냐면 {} 안에 다른 코드들이 들어가있는 것들을 볼 수 있는데 이 {} 안에

들어가있는 것들이 지역변수라고 하는데 {} 안에 변수가 선언된 것을 뜻한다.

만약 console.log(message); 를 {} 안에가 아닌 밖에서 출력을 하게 되면 에러가 뜨게 된다.

왜냐하면 message 라는 변수는 {} 안에서 선언이 되었기 때문이다.

이런 것들을 바로 Scope 라고 하며 지역변수는 선언 된 곳에서는 출력이 되지만 그 밖에서

출력하려고 하면 에러가 뜨게 된다.

 

 

​

 

위의 코드는 return 에 대해서 설명을 하려고 하는데

위의 코드를 보게 되면 sum 이라는 함수에 a,b 만 줬고 바로 return 값으로

a+b 를 주었다 그리고 그 밑에 const result 라는 함수에 sum (1,2)를 주었고

console.log를 통해서 출력을 하게 되면 sum: 3 이 출력이 되게 된다.

즉, return 값인 a+b 가 적용이 되고 sum에도 (1,2)라는 값을 주었기 때문에

return 이 적용이 되어서 출력이 되게 된다.

 

 

위의 코드를 보게 되면 function 이라는 함수를 선언함과 동시에 print 라는 변수에

할당하는 것을 볼 수 있는데, 이렇게 하게 되면 function 이라는 함수에는 이름이 없게된다.

이 것을 익명함수라고 하게 되며 만약 function 이라는 함수에 이름을 주게 된다면

그건 우리가 평소 알고 있는 함수를 준 것이다.

 

 

.

 

위의 코드는 콜백 function 함수에 대해서 알아보려고 하는데

위의 코드는 randomQuiz 라는 function 함수에 정답인 answer 와

정답일 때와 아닐 때 출력 될 함수들인 printYes 와 printNo를 전달해주었고

함수를 전달해서 상황에 맞게 전달된 함수를 부르는 것을 콜백 function이라고 한다.

​

다시 한 번 코드를 보게 되면 if(answer === 'love you') 정답이 love you 인 경우에만

printYes 라는 콜백 함수를 호출하게 되고 정답이 아니게 되면 printNo 라는 콜백 함수를

호출하게 되는거라고 보면 되고 이것을 출력을 하려면 printYes 와 printNo 와 정답에게

expression 두가지를 정해줘야하는 하는데

그게 바로 const printYes = function () {

console.log ('yes!'); 와 그 밑의 줄에 있는 no를 전달해준게 보인다.

 

 

 

위의 코드는 화살표 함수라고도 불리는 Arrow function 에 대해서 알아보려고 한다.

코드에서 맨위의 코드를 보게 된다면 이 때 동안 예제를 보면서 대 부분의 코드를 저렇게 썼다

익명함수 코드를 활용해서 simplePrint 에 바로 넣어주는 형식으로 되었는데

Arrow function 은 코드를 정말 간결하게 만들어주는 거라고 생각하면 된다.

실제로 예도 그 밑에 적어놓았는데

const simplePrint = () => console.log ('simplePrint!') 라고 써도 가능하다.

또는 const add = (a,b) => a+b; 도 충분히 가능하다

이렇게 한줄인 경우에는 {} 없이도 가능하지만 함수 안에서 조금 더 다양한 일을

해야하는 상황이라면 {} 을 써서 도 사용할 수 있다.

대신에 {} 을 쓰게 되면 return 이라는 것을 활용해서 꼭 return 을 해야한다.