[javascript] 함수

1. 함수

- 우리가 직접 만드는 기능을 의미한다.

- 기능 제작

function 함수명(매개변수){
	함수를 호출했을 때 실행할 명령문
}
// 매개변수와 데이터 반환은 옵션이다.

 

매개변수	데이터를 외부에서 받아와서 함수 안에서 이용하는 것이다. 필요 시 받아서 이용하는 것이기 때문에 옵션이다. 예를 들면 내장 함수에서 데이터를 받아야 되는 경우가 있을 수 있지만, 아닌 경우도 있을 수 있다.
데이터 반환	return 을 이용하여 결과 데이터를 반환하는 것을 의미한다. 필요 시 반환하는 것이기 때문에 옵션이다.

 

// 함수 실습

function sayHello() {
  console.log("안녕하세요.");
}
// undefined
sayHello();
// 안녕하세요.
// undefined

function sayHelloTo(name) {
  console.log(`${name}님, 안녕하세요.`);
}
// undefined
sayHelloTo("김코딩");
// 김코딩님, 안녕하세요.
// undefined
let name = "나코딩";
// undefined
sayHelloTo(name);
// 나코딩님, 안녕하세요.
// undefined

 

-  return ≠ console.log

return	결과 데이터를 반환한다. 그 값이 실제로 작동한다.
console.log	반환값 없고, 실제로 작동하지 않는다. 그저 개발자가 확인하는 창에서 결과를 보여주기만 한다. 중간 점검 과정 중 하나라고 생각하면 된다.

2. 함수 작성 방식

- 함수의 작성 방식은 달라도 실행 방식은 동일하다.

함수명(매개변수)

 

함수 선언식	함수 이름 선언한다고 생각하기. 호이스팅 문제가 있기 때문에 잘 사용하지 않는다.
함수 표현식	변수에 지정 및 익명 함수를 이용하기.
화살표 함수	함수 표현식의 변형이다.

 

// 함수 작성 방법

// 1. 함수 선언식
function sayHelloTo(name) {
  console.log(`${name}님, 안녕하세요.`);
}
// undefined
sayHelloTo("김코딩");
// 김코딩님, 안녕하세요.
// undefined
sayHelloTo(name);
// 나코딩님, 안녕하세요.
// undefined

// 2. 함수 표현식
const sayHiTo = function (name) {
  console.log(`${name}님, 안녕하세요.`);
};
// undefined
sayHiTo("김코딩");
// 김코딩님, 안녕하세요.

// 3. 화살표 함수
const sayByeTo = (name) => {
  console.log(`${name}님, 안녕히 가세요.`);
};
// undefined
sayByeTo("김코딩");
// 김코딩님, 안녕히 가세요.
// undefined

3. 내장 함수

- 자주 사용하는 함수를 자바스크립트 안에 내장하여 편리하게 이용할 수 있도록 만든 것이다.

- 시간 내장 함수는 ms 기준으로 움직인다.

- setTimeout : 몇 초뒤에 명령문을 실행시킬 것인지 결정하는 함수이다. 시간 지연 함수

- setInterval : 몇 초 간격으로 명령문을 실행시킬 것인지 결정하는 함수이다. 시간 반복 함수

 

  setTimeout(익명함수, time)
  setInterval(익명함수, time)

// 내장 함수
// 1. setTimeout
setTimeout(function () {
  console.log("안녕하세요.");
}, 3000);
// 2
// 안녕하세요.

for (let i = 0; i < 10; i++) {
  setTimeout(function () {
    console.log(`${i}회 진행 중...`);
  }, 1000 * i);
}
// 52
// 0회 진행 중...
// 1회 진행 중...
// 2회 진행 중...
// 3회 진행 중...
// 4회 진행 중...
// 5회 진행 중...
// 6회 진행 중...
// 7회 진행 중...
// 8회 진행 중...
// 9회 진행 중...

// 2. setInterval
setInterval(function () {
  console.log("1초가 지났습니다.");
}, 1000);
// 1초에 한 번씩 "1초가 지났습니다." 출력된다.

// setInterval을 통하여 1초마다 하나씩 줄어드는 기능을 만들 수 있다.
let time = 10;
undefined;
setInterval(function () {
  if (time >= 0) {
    console.log(time);
    time--;
  }
}, 1000);
// 2
// 10
// 9
// 8
// 7
// 6
// 5
// 4
// 3
// 2
// 1
// 0