자바스크립트 5️⃣ - 함수

 

함수

: 호출될 수 있는 코드 조각 

함수를 선언하면 함수의 이름을 코드 조각 대신 사용할 수 있음 

 

1. 함수 선언식 

function 함수명 () {
  // 함수의 기능을 표현한 구문
}

 

 

2. 함수 표현식 

const codes2 = function () {
  //함수의 기능을 표현한 구문
};

 

함수 호출 시 함수의 이름 뒤에 반드시 소괄호() 를 붙여줘야 함

호출은 원하는만큼 무제한으로 할 수 있다.

선언식은 함수 정의보다 호출문을 먼저 작성할 수 있음 (표현식은 X)

 

연습 1️⃣ ) 

//함수 선언식 
function codes1() {
  console.log("Hi");
  console.log("Hello");
}

//함수 표현식
const codes2 = function () {

  console.log("oh");
  console.log("yes");
};

codes1()
codes2()

 

 

 

[함수 이름 짓기]

- 함수의 기능을 적절하게 표현할 수 있는 이름 사용하기 

- 명사보다는 동사로 된 이름으로 

- 소문자로 시작하되, 여러 단어가 섞인 경우 카멜 표기법 사용하기 

 

(*) 카멜 표기법 

: 단어가 두 개 이상 붙어있을 때, 두 번째 단어부터는 대문자로

ex) goodBye, listenMusic

 

return

 

1. 함수로부터 데이터를 반환

return + 데이터 : 데이터를 반환하며, 데이터는 하나만 반환할 수 있음 

데이터 반환시 반드시 return 뒤에 반환값을 적어줘야함 ! 

 

2. 함수를 종료 (뒤에 값 안 붙여주는 경우)

 

연습 1️⃣ ) 

function getData() {
  console.log("Hi");
  return "this is return";
  console.log("Noooo"); // return으로 함수가 종료되어 이 값은 안나옴
}

let data = getData();
console.log(data);

 

 

 

함수에서 소괄호의 역할

 

1. 함수임을 표기 

2. 함수가 실행될 때 사용할 매개변수를 기입하는 공간 

 

 

 매개변수

 : 함수가 실행될 때 사용하는 데이터 

- 이름을 먼저 짓고, 값을 나중에 받음 

- 원하는 만큼 추가할 수 있음 

  -> 구분자 쉼표 (,) 를 사용하여 구분하며 호출시에도 그에 맞게 값을 적어 줌 

- 매개 변수는 선택사항 (있어도 되고 없어도 된다 ➡️ return 처럼) 

 

연습 1️⃣ ) 

function sayWord(word){
  console.log(word);
}

sayWord("word1")
sayWord("word2")
sayWord("word33")

 

 

[만들수 있는 함수의 종류] 

매개변수	반환
X	X	매개변수도, 반환도 없는 함수
O	X	매개변수는 있지만, 반환은 없는 함수
X	O	매개변수는 없지만, 반환은 있는 함수
O	O	매개변수와 반환이 모두 있는 함수

 

 

연습 2️⃣ )

function setContent() {
  const content = prompt("please write something");
  return content
}

function writeText(content) {
  const p = document.getElementById("text");
  p.textContent = content
}

const result = setContent()
writeText(result)

 

 

 - 함수와 함수 사이는 자동으로 연결되지 않으므로 return 값을 이용하여 연결해주기