#2-1 너의 첫번째 함수! (Your first JS Function)

 

 

 

안녕하세요 ^_^ 이 코드를 봐보세요. console.log 그리고 dalleinfo.favFood에서 말입니다. 어때요? 비슷해 보이지 않나요?

console.(점)log   /   dallaeinfo.(점)favFood

console은 Object입니다. dallaeinfo가 Object 인 것 같이 .log는 자바스크립트 안에 있는 것들을 말합니다. 이 컴퓨터 소프트웨어에 console이라는 object가 있고 log라는 키가 있는거죠.이 경우에는 log는 function(함수)인거예요. 근데 object지요. 그렇다면 오브젝트를 console.log로 찍어 보면 어떨까요?

 

console은 nicoinfo보다 더 큰 오브젝트입니다. 

 

dallaeinfo에 console.log를 했습니다. log, error, info, warn, dir, time .... 벌써 흥미롭지 않나요? 이게 여러분에게 어떻게 자바스크립트가 생겼는지에 대한 매우 좋은 시각을 주는 것 같습니다. 여기서 보듯이 브라우저가 가지고 있는 자바스크립트는 object에 넣을 수 있습니다. 멋지죠? 이제 여러분은 궁금할 수 있습니다.

"console.log는 어디서 온거야?"

console.log, alert 등 우리가 곧 볼 다른 많은 함수들은 내장함수(built-in function)라고 합니다. 근데 잠깐🖐 함수(function)이란 단어를 많이 언급했는데 그게 무슨 의미인지를 설명하지 않았네요🤦‍♀️ 함수란... 함수는 함수입니다!
어떤 것의 기능, 기능적인 것이요. 함수는 어떤 걸 수행하려는 한 부분으로 여러분이 원하는 만큼  쓸 수 있습니다. 여기까지. 이게 함수입니다! 한 코드 조각으로 여러분이 원하는 만큼 쓸 수 있는 것 말이에요! 그럼 어떻게 우리의 코드를 여기에 넣을 수 있을까요?

 

예를 들어 console.log로 hello라고 찍히게 하는 코드 조각을 하나 갖고 싶다고 가정해봅시다. 함수를 가지고 있지 않다고 하면 그냥 console.log("hello")라고 쓰면 됩니다.
hello hello hello hello 라는 결과가 나왔네요. 이것도 괜찮습니다.

만약에 이렇게 해보고 싶으면 어떻게 할까요?

"Hello Dallae"
"Hello Mong"
"Hello Choco"

혹은 "Hello Dal" 이라고 쓰고 싶으면 다 각각 따로 입력해야 할 것입니다. 만약 이렇게 해보고 싶다면요? 저런 Hello 대신에 Greetings 로 바꾸는 겁니다. 그럼 4개 모두를 바꿔 줘야 하겠죠? 이건 전혀 효과적이지 않습니다. 지금은 단순한 코드기 때문에 바꾸는게 어렵지 않지만 긴 코드라고 생각하면... 네 효과적이지 않아요. 프로그래머들은... 우리는 게으른 종족입니다.😗 필요하지 않는 코드는 원하지 않아요.

이제 우리가 가져야 할 건 이름을 받아 와서 무슨 이름을 주든 Gretting을 나오게 하는 함수입니다. 그럼 자바스크립트에서 어떻게 함수를 만들 수 있을까요?

 

여기 집중하세요!💥💥💥 아마 중간에 헷갈릴지도 모르니까요. 이거 꽤 복잡한 프로세스예요. 

 

먼저 우리가 해야 할 건 function을 써주는 겁니다. 색깔이 파란색으로 바뀌죠? 그리고 함수 이름을 주는 겁니다. 여기서 창의력이 필요해요! 창의적인 내 생각이 말하길 이 함수 이름은 sayHello라고 하는게 좋겠다네요. sayHello라고 주었습니다. 바로 이것이 자바스크립트 함수를 정의 하는 문법입니다. 왜 이걸 써야 하는지는 다음 글에서 보게 될거예요.

자. 위에서 말했듯이 함수는 한 조각의 코드입니다. 많이 많이 내가 가져다 쓸 수 있는 코드요! 여기에 하나의 인스트럭션을 넣을 겁니다. 그리고 sayHello라고 함수이름을 주고 같은 코드 console.log("Hello");를 다시 쓸 건데 이제 여기에 console.log를 쓰는 대신에 sayHello();라고 썼습니다. 왜냐면 우린 이미 sayHello가 뭘 할지 알잖아요?

그럼 sayHello();는 Hello라고 나옵니다. 이게 여러분의 첫 함수입니다!!! 축하햄!🎈

 

이번엔 그냥 Hello만 할게 아니라 친구들 모두에게 Hello라고 하고 싶어요.
Hello Choco, Hello Mong, Hello Bbo, Hello XX 그러기 위해서는 sayHello를 조금 바꿔야 합니다.

 

여기서 복습을 좀 해볼까요?
console.log(); 에서 log(); 를 보면 생긴게 비슷합니다.

log도 함수인데 console object 안에 있는 함수라는 뜻입니다. console.log는 안에 메세지가 없이는 동작하지 않아요! 그래서 console.log("Hi");  Hi라는 메세지를 넣었습니다. Hello / Hi라고 나오네요. 즉 console.()에 뭐든 넣고 싶은 것을 두 개의 따옴표 사이에 넣으면 함수는 그걸 사용합니다.

 

그런데 () 사이에 "Dallae"를 넣었는데 왜 Hello Dallae라고 나오지 않는 걸까요? 뭐든 () 안에 적으면 함수가 그걸 사용하게 된다고 했는데 말이에요. 왜 안될거 같나요? 잠시 생각해봐요.

논리적으로 생각해 봅시다.

sayHello("Dallae")에서 "Dallae"를 인자(argument)라고 합니다. 오늘의 단어! ✨인자(argument)✨
함수는 인자(argument)를 받습니다. argumet는 변수 같은 거예요. 우리가 주는 값을 저장합니다. 우리는 함수 sayHello를 준비시켜서 우리가 주는 argumet를 가지고 갈 수 있게 해야합니다. 함수를 준비시키는 방법은 function 변수명() 이 괄호 사이에 함수명을 써주는 겁니다.

 

argument를 넣는거죠. 뭐든 여러분이 원하는 이름을 넣으면 됩니다. 포테이토라고 해도 상관 없어요. 감자. 이건 이름인데 변수명 같은 거라고 보면 됩니다. parameter 혹은 argument. 이건 함수 안에서 사용하게 될 이름이 되는 거예요. 프로그래머니깐 알아야 하는 거고 사용자는 알 필요 없어요. 그리고 "Hello" 대신에 ("Hello", potato); 를 쓰면... 네! 잘 동작하네요. 자바 스크립트가 하는건

"Dallae" 값을 potato라는 것에 넣고 potato는 ("Dallae")에 들어 가게 되는 겁니다. Hello Dallae를 찍는 것과 동일한 방법이에요. 이것이 외부에 있는 데이터를 읽는 함수를 만드는 방법입니다.

이 정도면 함수의 첫 번째 글로는 충분한 것 같네요. 다음 글에서는 어떻게 console.log를 향상 시킬지 알아볼겁니다.
축하해요!! 오늘 여러분의 첫 함수를 만들어 보았네요! Hello 여러분의 이름. 나이를 찍어봐요!

다음 글에서 봐요. 바이바이!