TIL | 08 Function

Soojeong Lee·2021년 6월 14일

JavaScript

javascript

목록 보기

2/3

Function

1. 함수란?

하나의 특정한 작업을 수행하도록 설계된 독립적인 블록 {}

1.1. 함수의 정의

'이 함수는 이런 동작을 할 것이다.'라고 정의 하는 것이다. 함수는 정의만 하면 함수 내부가 실행되지 않는다.

1.2. 함수의 호출

함수를 실제로 부르는 것. 함수를 호출하면 함수가 실행된다.

add(); // 함수가 호출이 되면서 실행된다.

1.3. 함수의 형태

1.4. 예제

함수 이름은 checkYear로 해주세요.

올해 년도를 return 합니다.

년도를 작성할 때는 ""(쌍따옴표)없이 숫자만 4자리 써주세요.

최초 코드

function checkYear() {
  const thisYear = 2021;
  
  return thisYear;
}

리팩토링

function checkYear() {
 return 2021;
}

return 값을 출력할 때, 변수로 정의하지 않아도 출력할 수 있다.

2. Function - 데이터 반환하기(1)

2.1. return

모든 함수는 반환(return) 한다. 항상 데이터를 반환하기 때문에 그 결과를 변수에 저장할 수 있고 혹은 다른 로직에 다시 사용할 수 있다. 호출한 함수는 consloe.log()로 출력하여 확인할 수 있다.

📍 consloe.log()로 출력하는 습관을 기르자. 어디에서 코드가 잘못되었는지 쉽게 추적이 가능하기 때문이다.

하지만, 모든 함수가 return을 포함해야하는 것은 아니다. 함수 내부에 return 키워드를 생략할 수 있지만, 이때에도 함수는 무언가를 반환하려고 한다. 즉 함수가 반환을 생략하면 undefined 값을 반환하게 된다.

2.2. parameter(매개변수)와 argument(인자)

: 함수가 외부에서 입력 받은 데이터를 처리하는 경우 사용된다.

parameter(매개변수)
: 외부로부터 들어오는 값을 담아 함수 내부에서 사용하도록 하는 변수
쉽게 설명하자면, 함수 외부로부터 전달된 값(인자)들이 담기는 공간.
argumemt(인자)
: 함수를 호출할 때 실질적으로 전달 되는 값. 즉, 그 자리에 들어갈 구체적인 값.

2.3 예제

함수 이름은 addTen 입니다.

받은 parameter에 10을 더해서 반환(return)해주세요.


function addTen(num) {
  return num + 10;
}

3. Function - 데이터 받기

3.1. 데이터를 전달 받는 함수의 정의

function alertSuccess(message) {
  alert(message);
}

3.2. 함수의 호출(데이터 전달)

alertSuccess("수정님 로그인 성공!");

3.3. 데이터를 전달 받는 함수의 재정의

중복되는 값이 있다면, 중복을 줄이는 방식으로 함수를 재정의 할 수 있다.

function alertSuccess(name) {   
  alert(name + "님 로그인 성공!"); 
}

3.4. 함수의 호출(데이터 전달)

alertSuccess("수정");

이렇게 호출한다면, 아래와 같이 출력된다. (Run Js에서 값 확인을 위해 alert 대신 return으로 변환)

📍주의 사항 : 함수 내부에서 인자로 받은 변수에 새로운 값을 넣으면 안된다.

함수 내부에서 인자로 받은 변수(name)에 새로운 값("hi")을 넣으면 안 된다. 왜냐하면 인자(parameter)에 실제로 어떤 데이터가 전달될지는 호출할 때 결정하기 때문이다.

(⬇️) 아래는 let 변수 선언을 주석처리하였을 때 함수가 실행되는 모습이다.

3.5. 예제

데이터를 전달 받는 isbiggerThanHundred이라는 이름의 함수를 만들어주세요.

isbiggerThanHundred 함수에서 받은 argument를 myNumber라는 parameter에 저장해주세요.

isbiggerThanHundred 함수에서

myNumber가 100보다 크면 "크다!"라는 문자열을 return 해주세요.

myNumber가 100보다 작거나 같으면 "작다!"라는 문자열을 return 해주세요.

최초 코드

function isbiggerThanHundred(myNumber) {
  if(myNumber > 100) {
    return "크다!";
  } else if (myNumber <= 100) {
    return "작다!";
  }
}

리팩토링 : 이렇게 else if로 조건식을 주기보다 간편하기 위해서 else를 사용하려 했다. 하지만, 이 경우 함수에 아무것도 전달하지 않을 때 조차 '작다!'라는 값을 반환한다. 따라서 이에 유의하여 상황에 맞는 코드를 짜야 한다.

function isbiggerThanHundred(myNumber) {
  if(myNumber>100) {
    return `크다!`
  } else {
    return `작다!`
  }
}

4. Function(함수) - parameter, argument

개념은 이전에 정리해 두어서, 아래 예제로 개념 확인을 하였다.

✔️ Assignment 1 : 함수 halfNumber 를 선언하고 구현하세요.

숫자로 된 인자 하나를 받습니다.

받은 값을 2로 나눈 결과를 리턴합니다.

매개변수 이름은 마음대로 정해서 사용합니다.

function halfNumber(value) {
  return value / 2;
}

✔️ Assignment 2 : 함수 `halfAndAddNumber`를 선언하고 구현하세요.

숫자로 된 인자 하나를 받습니다.

1번 문제에서 만들었던 halfNumber를 호출하면서, 인자로 받았던 값을 다시 halfNumber 함수에 전달해줍니다.

halfNumber의 리턴결과를 함수 안쪽에서 변수명 result에 정의합니다.

result에 1을 더한 값을 리턴합니다.

최초 코드

function halfAndAddNumber(value) {
  let result = value / 2;
  return result + 1; 
}

리팩토링 : result 값에 그대로 식을 써 줄 것이 아니라, 함수 자체를 호출해도 문제는 해결된다.

function halfAndAddNumber(value) {
  let result = halfNumber(value);
  return result + 1; 
}

5. Function(함수) - 여러 인자

함수에 인자는 한개가 아닌 여러개도 전달 가능하다. 아래 예제를 통해 확인 할 수 있다.

Assignment

index.js에서 meetAt 함수를 만들어주세요.

인자를 세개 받습니다.

첫번째 인자는 년도에 해당하는 숫자입니다.

두번째 인자는 월에 해당하는 숫자입니다.

세번째 인자는 일에 해당하는 숫자입니다.

년도 인자만 받았을 경우 → "1234년" 과 같은 형식의 문자열을 리턴 해주세요.

년도,월 인자를 받았을 경우 → 년도와 월을 조합해서 "1234년 5월" 과 같은 형식의 문자열을 리턴 해주세요.

년도,월,일 인자를 전부 받았을 경우 → 년도,월,일을 조합해서 "1234/5/6" 과 같은 형식의 문자열을 리턴 해주세요.

최초 코드 : 다시 보니 조건에 꼭 인자를 두개를 줘야할까 하는 의문이 들었다.

function meetAt(year, month, date) {
  if(year, month, date){
      return `${year}/${month}/${date}`;
    }
    if(year, month){
      return `${year}년 ${month}월`;
    }
    if(year){
      return `${year}년`;
    }
}

meetAt(2022);
meetAt(2022, 3);
meetAt(1987, 10, 28);

다시 풀기 ! 다시 풀 땐, if의 조건을 더 간단하게 작성해보았다.

function meetAt(year, month, date) {
  if(date){
      return `${year}/${month}/${date}`;
    }
    if(month){
      return `${year}년 ${month}월`;
    }
    if(year){
      return `${year}년`;
    }
}

리팩토링 : if문을 더 간단하게 작성하는 방법이 있었다. if ( parameter ) return 해주면 {}블럭 없이도 출력이 된다. 😲

function meetAt(year, month, date) {
  if (date) return year + '/' + month + '/' + date;
  if (month) return year + '년 ' + month + '월';
  if (year) return year + '년';
}

6. Function - 데이터 반환하기(2)

6.1. return 함수 정의

return은 함수를 호출했을 때 함수가 값을 반환한다는 것이다.

6.2. return 함수의 호출

함수는 여러번 호출도 가능하다.

callfunction(2);
callfunction(3);
callfunction(5);

6.3. return 함수의 호출 결과 확인

함수의 호출 결과를 확인하는 방법은 두 가지이다.

let result = callfunction(2);

console.log(result); // 함수의 호출 결과를 변수에 담아서 출력
consloe.log(callfunction(2)); // 결과값 바로 출력

6.4. 함수와 return 키워드

return이 없는 함수도 존재한다. 하지만 이 때에도 "return"이라는 키워드를 생략했을 뿐 함수는 return 한다. 단 이때 함수는 undefined 값을 반환한다.

6.5. 함수 내부에서 다른 함수 호출하기

함수 내부에서 다른 함수를 호출할 수 있다. 아래 예제를 통해 확인해보자.

function getTax(price) {
  return price * 0.1;
}
 
function calculateTotal(price) {
  return price + getTax(price);
}
 
const result = calculateTotal(3500);
console.log(result);

함수 안에서 함수가 또 호출되었다. 이때 함수가 실행되는 시점은 해당 함수를 호출하는 시간, 즉 console.log(result);로 호출하였을 때 실행되는 것이다.

6.6. 예제 풀이

index.js에서 getTotal 함수를 만들어주세요.

getTotal 함수는 가격을 2개 받아서 calculateTotal 호출 반환값을 더해서 리턴하는 함수입니다.

getTotal 이라는 이름의 함수를 만들어주세요. 가격정보 2개를 인자로 받습니다.

인자이름은 원하는대로 지어주셔도 됩니다.

getTotal 함수에서 인자로 받은 가격으로 각각 calculateTotal 함수를 호출해주세요. 그리고 그 결과값을 더해서 반환해주세요.

참고사항
getTax 함수는 가격의 tax를 구하는 함수입니다.
calculateTotal 함수는 상품의 가격에 tax를 더한 값을 구하는 함수입니다.
getTotal 함수는 두 상품의 가격을 더해서 반환하는 함수입니다.

최초코드 ! 이번 코드는 깔끔하게 잘 작성된것 같다.🙌🏻

function getTotal(price1, price2) {
 return calculateTotal(price1) + calculateTotal(price2);
}

Soojeong Lee

🍼 newbie frontend developer

이전 포스트

TIL07 | Number

다음 포스트

TIL | 08 Function

javascript

Function

1. 함수란?

1.1. 함수의 정의

1.2. 함수의 호출

1.3. 함수의 형태

1.4. 예제

2. Function - 데이터 반환하기(1)

2.1. return

2.2. parameter(매개변수)와 argument(인자)

2.3 예제

3. Function - 데이터 받기

3.1. 데이터를 전달 받는 함수의 정의

3.2. 함수의 호출(데이터 전달)

3.3. 데이터를 전달 받는 함수의 재정의

3.4. 함수의 호출(데이터 전달)

📍주의 사항 : 함수 내부에서 인자로 받은 변수에 새로운 값을 넣으면 안된다.

3.5. 예제

4. Function(함수) - parameter, argument

✔️ Assignment 1 : 함수 `halfNumber` 를 선언하고 구현하세요.

✔️ Assignment 2 : 함수 `halfAndAddNumber`를 선언하고 구현하세요.

5. Function(함수) - 여러 인자

Assignment

6. Function - 데이터 반환하기(2)

6.1. return 함수 정의

6.2. return 함수의 호출

6.3. return 함수의 호출 결과 확인

6.4. 함수와 return 키워드

6.5. 함수 내부에서 다른 함수 호출하기

6.6. 예제 풀이

TIL07 | Number

TIL 12 l Javascript Test

0개의 댓글

TIL | 08 Function

javascript

Function

1. 함수란?

1.1. 함수의 정의

1.2. 함수의 호출

1.3. 함수의 형태

1.4. 예제

2. Function - 데이터 반환하기(1)

2.1. return

2.2. parameter(매개변수)와 argument(인자)

2.3 예제

3. Function - 데이터 받기

3.1. 데이터를 전달 받는 함수의 정의

3.2. 함수의 호출(데이터 전달)

3.3. 데이터를 전달 받는 함수의 재정의

3.4. 함수의 호출(데이터 전달)

📍주의 사항 : 함수 내부에서 인자로 받은 변수에 새로운 값을 넣으면 안된다.

3.5. 예제

4. Function(함수) - parameter, argument

✔️ Assignment 1 : 함수 halfNumber 를 선언하고 구현하세요.

✔️ Assignment 2 : 함수 halfAndAddNumber를 선언하고 구현하세요.

5. Function(함수) - 여러 인자

Assignment

6. Function - 데이터 반환하기(2)

6.1. return 함수 정의

6.2. return 함수의 호출

6.3. return 함수의 호출 결과 확인

6.4. 함수와 return 키워드

6.5. 함수 내부에서 다른 함수 호출하기

6.6. 예제 풀이

TIL07 | Number

TIL 12 l Javascript Test

0개의 댓글

✔️ Assignment 1 : 함수 `halfNumber` 를 선언하고 구현하세요.

✔️ Assignment 2 : 함수 `halfAndAddNumber`를 선언하고 구현하세요.