노마드코더 - 바닐라JS로 크롬 앱 만들기(function-1)

function

 

console.log("Hello my name is Ju")
console.log("Hello my name is Nico")
console.log("Hello my name is Cha")
console.log("Hello my name is Ora")
console.log("Hello my name is Miki")
console.log("Hello my name is Bora")

만약 내가 친구들에게 인사를 하고 싶다면 위와 같은 코드를 짤 수 도 있다.

하지만 개발자들은 귀찮고 중복되는 일을 또 하는 것을 매우 싫어한다.....

위에 코드에서 이름 빼고 모든 게 반복된다는 사실을 알고 있는 이상 

저 코드는 도저히 쓰기가 싫은 것이다!!

 

오늘은 이런 반복되는 코드를 function을 이용해 해결하는 방법을 배워보도록 하자.

 

 

 

함수는 어릴 때 수학 시간에 많이 보았던 위 그림처럼 

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

 

 

function의 형태

function sayHello() {
    heheeheheheheh
}

function의 형태는 

function이라고 쓴 다음 내가 이름을 정해주고(sayHello 자리) 소괄호를 쳐준다.

그다음 { } 으로 블록을 만든다.

{ } 블록 안에는 이 함수를 실행할 때마다 실행되야하는 내용을 적어준다.

 

 

 

 

function작성과 실행법

function sayHello() {
    console.log("Hello!")
}

sayHello();
sayHello();
sayHello();

이 function을 실행했을 때 실행되어야 하는 내용을 중괄호 안에 적어준다.

즉 위의 코드를 보면 내가 sayHello를 실행할 때마다 console.log("Hello!")가 실행되는 것이다.

 

ㅋㅋㅋㅋ실행 실행의 반복...

 

그렇다면 sayHello라는 함수는 어떻게 실행할까?

그건 바로 함수의 이름 뒤에 ()를 붙여주면 된다.

즉 sayHello(); 라고 쓰면 함수가 실행되는 것이다.

 

그래서 위의 코드를 실행시키면 나오는 결과가

이렇게 되는 것이다. 

 

 

 

 

그럼 이제 처음으로 돌아가서.... 함수는

function sayHello() {
    console.log("Hello my name is A")
}

라고 써야 하는 것은 알겠는데...

 

저 A 자리에 어떻게 각각의 친구 이름을 넣어 출력할 수 있을까??

그건 바로...!

 

다음 페이지로......^&^

 

 

 

 

 

 

 

 

썸네일