함수

:특정 기능을 수행하는 소스코드를 하나로 묶어서 필요할 때마다 사용하기 위한 구조

◉ 함수 작성

함수를 작성하는 방법은 3가지로 나눌 수 있습니다.
함수 선언문(Function Declaration), 함수 표현식 (Function Expression), 화살표 함수 (Arrow Function) 3가지가 있습니다.

함수 선언문

function 키워드를 사용하여 함수를 선언하는 방식

• 호이스팅에 영향을 받기 때문에 함수 선언문 이전에도 함수 호출 가능

function 함수명(파라미터) { // 3가지 중 이것만 호이스팅 적용됨!
  실행문;
  [return 반환값;] // 생략가능
}

함수 표현식

function 키워드를 사용하여 정의한 함수를 변수에 할당하는 방식

• 변수에 함수를 할당하는 과정이므로, 호이스팅이 발생하지 않음
• 함수 표현식 이전에는 해당 함수 호출 불가능

const/let/var 변수명 = function(파라미터) {
  실행문;
  [return 반환값;]
}

화살표 함수

=> 화살표를 사용하는 방식

• 간결한 문법과 this 바인딩 방식을 제공하여 코드를 더욱 간결하게 작성 가능
• 함수 표현식의 일종으로 함수가 변수에 할당되므로, 호이스팅이 발생하지 않음

const/let/var 변수명 = (파라미터) => {
  실행문;
  [return 반환값;]
}
함수명(값); // 함수 호출

• 파라미터가 1개이면 소괄호 생략 가능

  const/let/var 변수명 = 파라미터1 => { 실행문; [return 반환값;] }

◉ Hoisting (호이스팅)

: 자바스크립트 엔진이 코드를 실행하기 전에 변수와 함수 선언을 끌어올리는 동작

• 선언문이 코드의 선두로 끌어올려진 것처럼 동작하는 현상

자바스크립트 코드 처리 과정

: 평가(모든 선언문 등록) → 실행(런타임)

평가

• 코드 전체를 훑으면서 변수 선언문이나 함수 선엄문을 만나면 해당 식별자를 메모리에 등록하고 초기화 + 코드의 값이나 표현식의 결과를 평가
• 호이스팅이 평가 과정에서 발생하여 선언문을 먼저 처리!!

실행

• 평가된 코드를 실행하여 원하는 동작 수행

정리 : 자바스크립트는 순차적 실행이므로, 쭉 훓어보고 변수 선언(var 등), 함수 선언은 위로 올려서 먼저 실행
주의 : 변수와 함수의 할당은 호이스팅 되지 않으므로, 선언과 할당 작성에 주의

변수 호이스팅

• 선언한 시점과 상관 없이 끌어올려져서 선언 된 것처럼 작동
• var, let, const 3가지 중 어느 걸로 선언한 지에 따라 다름
  • var로 선언된 변수는 호이스팅에 의해 위로 올려지고 초기화되지 않은 변수는 undefined로 값이 할당
  • let과 const로 선언된 변수는 호이스팅되지만 초기화되기 전에는 사용할 수 없고 에러가 발생

// var 호이스팅
console.log(x); // undefined
var x = 10;
console.log(x); // 10

// let 호이스팅
console.log(x); // ReferenceError: Cannot access 'x' before initialization
let x = 10;
console.log(x); // 10

함수 호이스팅

• 함수 선언이 아래에 있어도 함수가 선언된 것처럼 작동
• 함수 표현식과 화살표 함수는 호이스팅 적용 안 됨
• 함수 선언문은 호이스팅 적용
• 함수 선언문으로 작성된 함수는 선언된 곳 이전에 호출하여도 함수 내 소스코드가 실행됨

greet(); // "Hello"

function greet() {
  console.log("Hello");
}

◉ 예시

삼각형 만들기
두 가지 정보(이모티콘, 숫자)를 입력받고,
숫자만큼의 길이(층)을 가진 직각삼각형을 이모티콘으로 만들기

// 이모티콘과 숫자 입력받기
let heart = prompt('이모티콘을 입력하세요');
let number = Number(prompt('숫자를 입력하세요'));

// 화살표 함수로 삼각형 만들기 함수 작성
const triangle = (icon, num) => {
  for (let i=1; i<=num; i++){
    document.write(icon.repeat(i),'<br>'); // 문자열.repeat(n) : 문자열을 n번 반복
  }
}

// 함수 실행
triangle(heart, number);