JavaScript : Function

camille·2022년 4월 2일
0

JavaScript

목록 보기
2/7
post-thumbnail

Function

함수라는 데이터 타입으로 함수 이름을 붙이고 중괄호 안에는 함수가 담당할 기능이 들어가 있다.

function camille() {
  let petName = "bbachon",
  console.log(petName)
  return petName
  };

📌 함수를 구성하는 세가지 구성요소

  1. input 받기
  2. 기능 수행
  3. output 반환
    But, 늘 이세가지 요소가 있어야만 함수로서 동작하는 것은 아님, 간혹 (리턴)아웃풋 없이 인풋과 기능을 수행하는 것 만으로도 함수가 작동할 수 있다.


함수는 변수와 마찬가지로 선언을 하고 시작한다. 그런데 선언하는 것만으로 끝나지 않고 실행을 시켜줘야한다. 따라서 선언과 실행은 같이 짝을 지어 다닌다고 볼 수 있다.
= 함수를 정의 한다. = 함수를 호출한다.

function sayHello(**INPUT**){
	console.log('Hello! Camille💛')
}

📕 기능만 출력하는 함수

여기서 함수의 이름은 sayHello 이라고 볼 수 있다. 또한 ( )안이 INPUT의 자리이다.
console.log('Hello! Camille💛')는 내부에 작동할 기능이라고 볼 수 있다.

호출을 하는 방법 sayHello();

아웃풋을 반환한다. = 아웃풋을 return한다.

function sayHello(){
  let friend = 'Camille'
  console.log('Hello!'+' ' + friend)
}

function sayHello2(){
  let friend = 'Camille'
  return 'Return' + friend
}
sayHello();
sayHello2();

< "Hello! Camille"

문자열 하나만 출력되었다. 이유는? console.log가 찍은 콘솔만 출력 결과물이 나타나고
sayHello2의 함수는 콘솔에 아무것도 찍히지 않는데 --> 정상
return은 콘솔로그가 아니고 아웃풋으로 반환을 하긴하지만 콘솔에 어떤 대상을 출력하는 기능을 하는 것이 아니다. 콘솔에 어떤 대상을 출력하는 것은 console.log뿐이다.
따라서 return 은 결과물로서 반환한다는 뜻이지 이 결과물이 바로 눈에 보이는 것은 아니다.

  • return 한 값을 변수에 할당 할 수 있다.
1.스트링
let myFriend - sayHello2();
console.log(myFriend);
< Return Camille

2.숫자
function addNumbers(){
	return 100 + 200
}
let myNumber = addNumbers();
console.log(myNumber);
< 300

👩‍🏫 retun VS console.log

return 함수의 output을 반환해주는 역할 / 반환해주는 결과물을 지칭
아웃풋이 분명히 있기때문에 아웃풋을 변수에 할당하는 것도 가능

console.log 단순히 화면에 출력 / 결과물을 내지는 못함/ 변수에 할당할 수 없음
ex)
let number = console.log (1000);
< 1000
console.log(number)
< undefined

📕 input이 있는 함수

  1. input 받기 -> 2. 기능 수행 -> 3.output return
기본형

function sayHello4 (input){
	...input...
	return output
}
응용 1

function sayHello4 (name){
	return'Hello, '+ name + '!'
}

여기서, 인풋자리에는 꼭 인풋이라는 글자가 아니라도, 내가 인풋을 어떤 변수명으로 받고 싶은지만 생각하면되며 name, age, gender, color 하지만 인풋자리에 들어온 변수는 내부에서도 꼭 같은 이름으로 사용해줘야한다.

⭐ 함수를 선언할 때의 input = parameter = 매개변수 = 변수

응용 2

function sayHello4 (name){
	return'Hello, '+ name 
}

function sayHello5 (name){
	console.log('Hello '+ name)
    console.log('Nice meet to you, ' + name)
}

sayHello5('camille');
sayHello5('son')

< "Hello camille"
"Nice meet to you, camille"
"Hello son"
"Nice meet to you, son"

camille 파라미터(name) 자리에 넣어줄 다른 값을 써줘야함

응용 3

function sayHello4 (name){
	return'Hello, '+ name 
}//input 값인 name은 여기서 parameter를 뜻함

<let greeting = sayHello4('camille')//여기서 camille은 argument를 의미
console.log(geeting);

< Hello, camille

⭐ 함수를 호출할 때의 함수명(name);-> argument = 전달인자 = 값

🧷 argument는 인수 = 전달인자 , parameter를 인자 = 매개변수

응용 4 :  좀 더 효율적인 호출 방식

function sayHello4 (name){
	return'Hello, '+ name 
}

let firtstGreeting = sayHello4('Camille');
let secondGreeting = sayHello4('Son');
let thirdGreeting = sayHello4('Ka');

console.log(firtstGreeting);

< Hello, Camille
응용5 : addedNumber

function addedNumbers(num1, num2){
  let result =  num1 + num2
  return result
}

let addNumber= addedNumber(3,5);

console.log(addNumber);

< 8

0개의 댓글