함수의 기본 / 데이터 반환하기 (1)

레플릿 문제들 중 모르겠는 문제들을 처음부터 코드리뷰 해보며 정리하는 시간을 가져보겠습니다.

Function(함수) - 기본

04-1. 함수의 정의

• 함수란? 하나의 특정한 작업을 수행하도록 설계된 독립적인 블록입니다.

04-2. 함수의 호출

변수에 이름이 있듯이, 함수도 이름이 있습니다. 함수 이름을 부르면 함수 내에 있는 코드가 실행됩니다. 함수를 불러 실행시키는 것을 앞으로 "함수를 호출한다" 라고 표현하겠습니다.

아래 코드를 봐주세요.

function checkCorrect() {
  let hi = "안녕하세요";
  
  return hi;
}

함수가 정의되어 있습니다. 이름은 checkCorrect 입니다. 위와 같이 함수를 생성하고, 아래와 같이 이름을 불러 호출할 수 있습니다. checkCorrect(); 함수를 정의만 하고 호출하지 않으면 실행되지 않으니 꼭 유의해주세요!

04-3. 함수의 형태

함수의 형태는 아래와 같습니다. 함수 형태를 꼭 기억해서 원하는 대로 함수를 작성할 수 있어야 합니다.

• function 키워드로 시작하여
• 함수 이름을 지어주고
• 함수를 알리는 소괄호(() : parentheses)를 열고 닫고
• 함수의 시작을 알리는 중괄호({ : curly bracket)을 열어줍니다.
• 실행할 코드를 중괄호와 중괄호 사이에 작성합니다. 함수의 body 라고 부르기도 합니다. 이 부분에 들여쓰기가 되어있습니다. 함수 내부에 있는 코드라는 것을 알기 좋게 하려고 들여쓰기 하였습니다.
• return(반환) 할 것이 있다면 return문을 작성합니다.
• 중괄호(}: curly bracket)로 닫아줍니다. 함수의 작성이 끝났음을 알립니다.

04-4. 함수의 정의 vs 함수의 실행 (함수의 호출)

위 처럼 함수를 정의하는 것만으로는 함수 내부가 실행되지 않습니다.

1) add 함수 정의

function add() {
  let sum = 3+3;
  return sum;
}

위는 add라는 이름을 가진 함수입니다. add 함수가 어떤 동작을 하게 될지 정의만 해둔 것입니다. ( 실행문만 적어 놓은 것 )

2)add함수 실행(호출)

add()

• add 함수 이름을 부르기 전까지는, sum 변수가 생성되지도 않고, 3+3 더하기도 되지 않습니다.
• 함수 내부가 실행되려면 위와 같이 함수를 호출해야합니다.
• 함수를 호출하면, 그제서야 add 함수가 실행되므로
• 그때 3+3 더하기가 되고 sum 변수에 저장되는 것입니다.
• 함수를 호출하는 형태는 아래와 같이 함수 이름에 괄호()를 여닫아주면 됩니다.

Function(함수) - 데이터 반환하기 (1)

05-2. 수의 반환(return)

모든 함수는 반환(return)을 합니다. 함수는 항상 데이터를 반환하기 때문에 그 결과를 변수에 저장할 수도 있고, 다른 로직에 다시 사용할 수도 있습니다. 함수의 반환 값을 확인하는 법을 다시 한 번 볼까요?

아래와 같이 함수를 호출해서, 변수에 저장하고 그 변수를 console.log()로 확인하면 됩니다. 간단하죠?

let result4 = noParameter(); // result4f라는 변수에 noParameter 함수 호출한 결과값을 할당
console.log(result4);

위와 같이 함수를 호출해서 반환한 값을 다시 변수에 저장해서 확인할 수도 있지만, 아래와 같이 함수를 호출한 것을 바로 console.log()로 바로 확인할 수도 있습니다.

console.log(noParameter());

덧붙이자면, 모든 함수가 return을 포함해야 하는 건 아닙니다. 함수 내부에 return키워드를 생략할 수도 있습니다. 하지만 이 경우에도 함수는 무언가를 반환하고 있습니다. 함수가 반환을 생략하면 undefined라는 값을 반환합니다.

05-3. 매개변수(parameter)와 인자(argument)

위에서는 return키워드를 통해 함수를 호출할 때 데이터를 반환하는 법을 배웠습니다.
이제는 함수가 외부에서 입력받은 데이터를 처리하는 경우에 대해 배워보겠습니다.

함수는 어떻게 외부의 값을 받을까요? 코드 블럭 12번째 줄, getName 함수를 보겠습니다.
정의된 함수의 소괄호 내부에 지금까지 본 함수와 달리 name 이라는 단어가 들어 있습니다. 이처럼 함수 이름 옆 소괄호 자리에 적혀 있는 단어는 매개변수(parameter)라고 부릅니다.

function getName(name) {
  return name + '님';
}

매개변수는 외부로부터 들어오는 값을 담아 함수 내부에서 사용하도록 하는 변수의 역할을 합니다. 당장 잘 이해되지 않는 다면 일단 함수 외부로부터 들어온 값이 담길'자리' 혹은 '변수의 이름' 으로 기억해주세요!

함수는 입력받은 정보에 따라 다르게 실행되도록 만들 수 있습니다. 또란 입력받은 정보를 가공해서 반환 하도록 만들 수도 있습니다. getName함수를 한번 호출해보겠습니다.

함수의 파라미터 자리에 "이름"을 넣어주세요. 이제 이 값("이름")은 함수 내의 name이라는 변수에 전달되고, "님"이라는 문자열이 붙어 리턴됩니다.

function getName(name) {
  return name + '님';
}
let result1 = getName('개발자');

console.log(result1); // 콘솔에 '개발자님'이 출력됩니다.

한 번 만든 함수는 여러 번 호출할 수 있습니다. 반환값을 변수에 저장해 두면 매번 확인할 수 있습니다.

let result1 = getName('개발자'); // '개발자님' 출력
let result2 = getName('프론트엔드 개발자'); // '프론트엔드 개발자님' 출력
let result3 = getName('백엔드 개발자'); // '백엔드 개발자님' 출력

위와 같이 '개발자'라는 값을 보내서 호출할 수 있고, '디자이너','기획자'등 또 다른 값을 넣을 수도 있습니다. '개발자'와 같은 실질적인 값을 인자(argument) 라고 합니다.

앞서 매개변수(parameter) 는 '자리'혹은 '변수의 이름'이라고 말씀드렸습니다.
반면, 인자(argument) 는 그 자리에 들어갈 구체적인 값을 뜻합니다. 이 두종류의 값을 잘 구분해주세요.

참고: 위코드 레플릿