바닐라 JS로 크롬앱 만들기 #2 (4)

#2.7 Functions part One

Function은 어떤 코드를 캡슐화해서, 여러 번 실행 할 수 있도록 해준다.

 

자신의 이름을 소개하는 코드를 만드려고 할 때, 위와 같은 코드는 비효율적이다.

복사 붙여넣기를 여러번 하면서 맨 뒤의 자신의 이름만 바꾸는 작업을 계속 해야하기 때문이다.

위 코드의 목표는 친구들에게 인사를 하면서, 코드를 최소한으로 줄이는 것이다.

 

그러기 위해서는 function을 만들어야한다.

 

배열이나 리스트가 [ ]을 사용하는 것처럼, 함수는 ( )가 필요하다.

그리고 실행하게 될 코드 블록이 필요하다.

이제 sayHello가 실행될 때마다 { } 안에 작성한 것이 실행된다.

왼쪽 코드의 경우에는 sayHello이 실행될 때마다 console.log("Hello!")가 실행된다.

 

function을 실행하는 방법으로는!! sayHello()를 사용하면 실행 될 때마다 "Hello!"라는 출력된다.

근데 바로 위 코드는 목표와는 다르게 이미 입력된 Hello라는 값을 계속해서 출력한다.

실제로 원했던 코드는 "Hello my name is "라고 한 뒤 이름을 보내는 코드이다. 

 

그러기 위해서는 argument를 사용해야한다.

argument(인수)는 함수를 실행하는 동안 어떤 정보를 함수에게 보낼 수 있는 방법이다.

alert을 하고 아무것도 하지 않으면 보다시피 아무것도 없다고 뜬다!

그 이유는 함수 실행버튼을 눌렀지만 아무것도 안 보냈기 때문이다.

 

우리의 목표는 C가 아닌 이름을 넣는 것이다.

목표를 달성하기 위해서 데이터를 보내는 코드를 추가해줬지만 결과는 바뀌지 않았다.

 

 

 

#2.8 Function part Two

 

C를 각각의 이름이 들어가게 하는 방법은 강의 2.8에서 나온다.

즉, 강의 2.8에서는 어떻게 데이터를 받는지에 대한 내용이 나온다!

데이터를 받는 방법은 ( )에 데이터를 추가하는 것이다.

그리고 사용자가 원하는 어떤 이름이든, 어떤 변수 이름이든 넣어도 상관없다.

 

( ) 안에 nameOfPerson이라고 입력하면

JS는 sayHello로 보내진 첫번째 데이터가 nameOfPerson이라는 변수로 가게 된다는 것을 안다.

브라우저 콘솔창의 실행결과를 보면 데이터를 성공적으로 받은 것을 알 수 있다!!

 

함수에서는 하나의 인수만 받을 수 있는가? 그것은 아니다!

sayHello라는 함수는 2개의 인수를 받고 있다! 첫번째는 nameOfPerson이 되고, 두번째는 age가 된다.

 

처음 목표한대로 코드를 작성하기 위해서 현재의 코드를 약간 수정해보면

목표한대로 코드를 작성했다!!

 

함수에 적응하기 위해서 새로운 예제로 계산기를 만들어보자!

plus라는 함수를 만들고 인수 a와 b를 만든다.

plus에 아무것도 넣지 않고 콘솔창에 출력을 하면 당연하게도 아무것도 출력되지 않는다!

* plus()에 ; 를 붙이지 않는 실수를 했다.. 원래는 plus(); 이다...

 

console.log(a, b)가 아닌 console.log(a+b)로 코드를 수정한다면 NaN이라는 결과가 나온다

NaN은 Not a Number 즉, 숫자가 아니라는 뜻이다.

* plus()에 ; 를 붙이지 않는 실수를 했다.. 원래는 plus(); 이다...

 

plus에 8과 60을 넣으니 함수에 입력한대로 인수 a와 b를 더한 값인  68이 콘솔창에 출력되었다.

 

 

object 안에서의 함수는 약간 다르게 만들어지는데, 그 코드는 아래와 같다.

위와 같은 코드에서 sayHello가 밖에서부터 인수를 받도록 코드를 수정해보자.

 

이처럼 우리는 player을 원하는 누구와든 인사하게 만들 수 있다!

즉, 나만의 console.log 혹은 array.push 같은 걸 가지게 됐다!!