[Codecademy] Learn JavaScript 3. Functions

3. Functions

● Functions

1. What are Functions? 함수란 무엇인가?

 함수는 특정한 작업을 수행하기 위해, 일련의 명령을 그룹화한 재사용 가능한 코드 블록이다. 프로그래밍에서는 특정 작업을 여러 번 수행하기 위해 코드를 반복 사용하는 경우가 많다. 이때 동일한 코드를 반복해서 적는 대신, 함수를 이용하면 보다 간편한 방법으로 코드를 재사용할 수 있다.

 이번 학습에서는 함수를 사용하는 방법과, 명확하고 간결한 코드를 작성하는 법을 배운다.

---

2. Function Declarations 함수 선언

 함수를 선언하면, 특정 코드 블록을 함수 이름 또는 식별자에 할당한다. 변수를 선언할 때, 변수 이름에 값을 할당하는 것과 비슷하다.

https://content.codecademy.com/courses/learn-javascript-functions/Diagram/declaration.svg

함수 선언식의 구성

1) function 함수를 선언하기 위한 예약어

2) 함수의 이름 또는 식별자(identifier)

3) 함수의 내용 (특정 작업을 수행하는 데 필요한 명령문 블록. 중괄호 { }로 둘러싸여 있다)

 

Instruction

1. getReminder() 함수 선언

2. 함수의 몸체에 코드 채우기 : 'Water the plants.' 출력

function getReminder() {
  console.log('Water the plants.');
}

3. greetInSpanish() 함수 선언

4. 함수의 몸체에 코드 채우기 : console.log()로 'Buenas Tardes.' 출력

function greetInSpanish() {
  console.log('Buenas Tardes.');
}

---

3. Calling a Function 함수 호출

 함수는 선언하는 것만으로는 동작하지 않는다. 반드시 호출하는 과정이 있어야 선언해둔 작업을 수행한다. 다음과 같은 형식으로 코드를 호출할 수 있다.

https://content.codecademy.com/courses/learn-javascript-functions/Diagram/name.svg

함수를 호출하면 중괄호로 둘러싸인 함수 내부의 모든 동작을 실행한다. 코드의 진행 순서는 다음과 같다.

https://content.codecademy.com/courses/learn-javascript-functions/Diagram/function%20execution.svg

 함수 호출은 필요한 만큼 얼마든지 반복할 수 있다.

 

Instruction

1. sayThanks() 함수를 선언해 'Thank you for your purchase! We appreciate your business.' 출력

2. sayThanks() 호출

3. sayThanks() 세 번 호출

function sayThanks() {
  console.log('Thank you for your purchase! We appreciate your business.');
}

---

4. Parameters and Arguments 매개변수와 인수

 어떤 함수는 데이터를 필요로 하고, 투입된 데이터를 이용한 작업을 수행한다.

- 인수(argument): 함수가 필요로 하는 input data. 함수를 선언하는 과정에서 명시할 수 있다.

- 실인수: 함수 호출 측에서 넘겨지는 실제 데이터.

- 매개변수(parameter): 함수가 동작하는 동안 실인수를 저장해두는 공간.

 위의 예시에서 calculateArea()는 직사각형의 넓이를 계산하는 함수로, width와 height 두 개의 인수를 받는다. 함수 내부에서는 width와 height를 곱한 값을 출력하는 동작을 수행한다.

 

 

 함수 호출문에서 괄호 안에 전달되는 인수는 값 또는 변수의 형태로 기입될 수 있다. 인수가 전달되고 할당되는 순서는 매개변수가 선언되는 순서를 따른다.

 

Instruction

1. 함수 sayThanks()에 매개변수 name을 추가

function sayThanks(name) {
  console.log('Thank you for your purchase! We appreciate your business.');
}

 

2. 문자열 연결을 이용해 name도 연결

function sayThanks(name) {
  console.log('Thank you for your purchase '+ name + '! We appreciate your business.');
}

 

3. 인수로 'Cole'을 전달하며 sayThanks() 호출

function sayThanks(name) {
  console.log('Thank you for your purchase ' + name + '! We appreciate your business.');
}

sayThanks('Cole');

---

5. Default Parameters 기본 매개변수

ES6에 추가된 기능 중 하나는 기본 매개변수이다. 매개변수에 기본값을 지정해두면, 함수에 전달된 인수가 없거나 undefined가 전달되었을 때, 매개 변수에 미리 결정된 값을 갖도록 한다.

function greeting (name = 'stranger') {
  console.log(`Hello, ${name}!`)
}
 
greeting('Nick') // Output: Hello, Nick!
greeting() // Output: Hello, stranger!

- 위 예시에서 = 연산자가 name에 'stranger'를 할당한다. 이름이 없는 사용자를 명명하고자 하는 경우에 유용하다.

- 함수가 greeting('Nick')과 같이 호출되면 name에 할당되어 있던 'stranger'를 덮어씌우고, 콘솔에는 'Hello, Nick!'이 출력된다.

- 함수가 greeting()과 같이 호출되면 name에 할당되어 있던 기본값 'stranger'가 사용되어, 콘솔에는 'Hello, stranger!'가 출력된다.

 

Instruction

1. makeShoppingList()의 매개변수 item1의 기본값을 'milk', item2의 기본값을 'bread', item3의 기본값을 'eggs'로 설정

function makeShoppingList(item1='milk', item2='bread', item3='eggs'){
  console.log(`Remember to buy ${item1}`);
  console.log(`Remember to buy ${item2}`);
  console.log(`Remember to buy ${item3}`);
}

---

6. Return 반환

 함수가 호출되었을 때, 컴퓨터는 함수의 코드를 실행하고 결과값을 만들어낸다. 기본 결과값은 undefined이다.

function rectangleArea(width, height) {
  let area = width * height;
}
console.log(rectangleArea(5, 7)) // Prints undefined

 위의 예시에서, area를 계산하기 위해 매개변수 width와 height를 만들고, 5와 7을 전달했으나 출력 결과는 undefined이다. 왜 35가 나오지 않았을까? 함수가 계산은 수행했지만 값을 반환하지 않았기 때문이다.

 return 예약어를 이용해 함수 호출 측에 데이터를 넘겨줄 수 있다. rectangleArea()의 내용을 다음과 같이 수정하면 35가 출력된다.

https://content.codecademy.com/courses/learn-javascript-functions/Diagram/function%20return.svg

 return을 포함한 문장이 실행되면 함수는 동작을 멈추고 호출 측으로 반환값을 전달하며 복귀한다. 아래의 예시를 보자. width 또는 height의 값이 0보다 작을 경우 함수는 return된다. 그보다 아래의 return문에 쓰인 width * height 는 반환되지 않는다.

function rectangleArea(width, height) {
  if (width < 0 || height < 0) {
    return 'You need positive integers to calculate area!';
  }
  return width * height;
}

 

Instruction

1. monitorCount() 함수를 선언하고 매개변수로 rows, columns를 갖게 한다.

2. return을 이용해 rows*columns를 반환하게 한다.

3. const로 numOfMonitors를 생성하고, monitorCount()에 5와 4를 전달한 값을 할당한다.

4. numOfMonitors을 출력한다.

function monitorCount(rows, columns) {
  return rows * columns;
}

const numOfMonitors = monitorCount(5, 4);

console.log(numOfMonitors);

---

7.  Helper Funtions

 함수의 반환값을 또다른 함수 내에서 사용할 수도 있다. 그를 위해 다른 함수 내에서 호출되는 함수를 도우미 함수라고 부른다.

Instruction

1. monitorCount() 함수 아래에 costOfMonitors 함수를 만들어 rows, columns를 매개변수로 갖도록 한다.

2. costOfMonitors()가 monitorCount(rows, columns)의 반환값에 200을 곱한 값을 반환하게끔 한다.

3. const로 생성한 totalCost에 costofMonitors(5,4)의 반환값을 할당한다.

4. totalCost 출력

function monitorCount(rows, columns) {
  return rows * columns;
}

function costOfMonitors(rows, columns) {
  return monitorCount(rows, columns) * 200;
}

const totalCost = costOfMonitors(5,4);

console.log(totalCost);

---

8. Function Expressions 함수 표현식, 익명 함수

 함수를 선언하는 또다른 방법은 함수 표현식을 이용하는 것이다. 함수 표현식에서는 이름이 종종 생략되는데, 이때 선언되는 이름 없는 함수를 익명 함수라고 한다. function 키워드 뒤에 함수의 이름 없이 바로 매개변수가 오는 형태이다.

https://content.codecademy.com/courses/learn-javascript-functions/Diagram/expression.svg

함수 식을 호출하려면 함수가 저장되는 변수 이름 다음에 함수에 전달되는 인수를 포함하는 괄호를 적는다.

variableName(argument1, argument2)

Instruction

1. plantNeedsWater를 const로 선언하고, day를 매개변수로 갖는 익명 함수를 할당한다.

2. 함수의 몸체에 day === 'Wednesday' 를 판별하는 if문을 넣고 조건이 참이면 true를 return하도록 한다.

3. 요일이 Wednesday가 아니면 false를 return하도록 한다.

4. plantNeedsWater() 함수를 호출하고 매개변수에 'Tuesday' 전달한다.

5. plantNeedsWater('Tuesday')를 출력한 결과가 false임을 확인한다.

const plantNeedsWater = function(day){
  if (day === 'Wednesday') {
    return true;
  }
  else return false;
}

console.log(plantNeedsWater('Tuesday'));

---

9. Arrow Functions 화살표 함수

 function 키워드 대신 화살표(=>)를 사용하여 간략한 방법으로 함수를 선언할 수 있다. 소괄호 ( ) 안에 매개변수를 적고, 화살표 기호=>가 함수의 내용을 서술한 중괄호 { }를 가리키도록 한다. 

const rectangleArea = (width, height) => {
  let area = width * height;
  return area;
};

다른 프로그래머의 코드를 읽을 때 여러 형태의 선언식을 보게 될 수 있으므로, 다양한 작성 방법을 숙지하는 것이 좋다.

Instruction

1. plantsNeedsWater()를 화살표 함수 선언식의 형태로 바꾼다.

const plantNeedsWater = (day) => {
  if (day === 'Wednesday') {
    return true;
  } else {
    return false;
  }
};

---

10. Concise Body Arrow Functions 간결한 화살표 함수

화살표 함수의 특징

1. 선언하려는 함수의 매개변수가 1개일 때는 ( )가 필요하지 않으나, 매개변수가 0개이거나 2개 이상일 때는 ( )가 필요하다.

2. 선언하려는 함수의 내용이 코드 한 줄 뿐일 때는 { }가 필요하지 않다. 그 경우 연산 결과가 즉시 반환되며, 이를 암묵적 반환이라고 한다.

 

 

https://content.codecademy.com/courses/learn-javascript-functions/Diagram/parameters.svg

const squareNum = (num) => {
  return num * num;
};

즉, 우리는 위 코드를 아래와 같이 바꿀 수 있다.

매개변수 num을 둘러싼 ( )가 생략되었고, 코드가 한 줄이므로 { }와 return 키워드도 생략되었다.

const squareNum = num => num * num;

Instruction

1. plantNeedsWater()를 간결하게 바꾼다. if~else문은 이미 삼항연산자로 축약된 형태이다.

const plantNeedsWater = day => day === 'Wednesday' ? true : false;

---

Corner React Starter #2

Editor 유즈