[노마드코더] 바닐라 JS로 크롬 앱 만들기 - #2.7 ~ 2.8

#2.7 ~ #2.8 Functions 

 

개념

함수(Function)란? 계속 반복해서 사용할 수 있는 코드의 조각임.

우리가 넘겨주는 어떠한 이름이든 Hello 인사를 해주는 함수를 만들어보자.

함수가 없다면 아래와 같이 코드를 작성해야 할 것임.

 

/* 비효율적인 코드 */
console.log("Hello my name is Nico");
console.log("Hello my name is Dal");
console.log("Hello my name is Shigatsu");
console.log("Hello my name is Flynn");

 

이런 식의 코드는 좋지 않음.

이 코드에서 바뀌는 부분은 이름들 뿐임.

프로그래머는 가능한 효율적인 코드를 작성해야 함.

코드의 반복을 최소한으로 줄이기 위해 함수를 만드는 것이 필요.

함수는 어떤 코드를 캡슐화해서, 실행을 여러번 할 수 있게 함.

함수를 선언할 때 function 함수명(){ } 사용.

 

function sayHello(){
 /* 함수인 sayHello를 실행할 때마다 실행시킬 것을 작성하는 곳 */
}

 

 function sayHello() {
  console.log("Hello!");
 }
 
 sayHello(); // sayHello 함수를 실행 시키는 코드
 sayHello();
 sayHello();
 sayHello();

 

결과 값

결과 값을 통해 중괄호 {} 안에 있는 코드가 함수를 실행시킬 때마다 동작되는 것을 알 수 있음.

 

---

 

매개변수와 인수

 

매개변수(parameter)란? 함수의 정의에서 전달받은 인수를 함수 내부로 전달하기 위해 사용하는 변수.

매개변수는 {} 블록 밖에서는 존재하지 않음. 해당 함수 안에서만 존재함.

아래 예시에선 nameOfPerson

 

인수(argument)란? 함수가 호출될 때, 함수로 값을 전달해주는 변수.

아래 예시에선 nico, dal, lynn

 

function sayHello(nameOfPerson) {
	console.log("Hello my name is " + nameOfPerson);
}

sayHello("nico");
sayHello("dal");
sayHello("lynn");

 

function sayHello(nameOfPerson, age) {
	console.log("Hello my name is " + nameOfPerson + " and I'm " + age);
}

sayHello("nico", 10);
sayHello("dal", 23);
sayHello("lynn", 21);

 

결과 값

 

---

 

예제 - 계산기

 

 function plus(a, b) {
  console.log(a + b);
 }
 
 plus(8, 60);

 

함수를 실행시키면 첫번째 변수인 a에는 첫번째 argument의 데이터 8이 전달되고,

두번째 변수인 b에는 두번째 argument의 데이터 60이 전달됨.

순서가 매우 중요.

 

결과 값

 

---

 

응용 - Object 안의 함수

 

const player = {
	name: "nico",
	sayHello : function(otherPersonsName){
    	console.log("hello " + otherPersonsName + " nice to meet you!");
    }
};

console.log(player.name);
player.sayHello("lynn");

 

결과 값