지지 On Air

JavaScript 기초 : 함수와 호이스팅 본문

개발/JavaScript

JavaScript 기초 : 함수와 호이스팅

슈스 지지 2025. 7. 25. 11:13
반응형

함수 (Function)

유사한 기능을 하는 중복으로 작성된 코드들을 묶어서 함수로 만든다.

// 함수 선언
function sayHello(){
	console.log("HELLO!");
}

// 함수 호출
sayHello(); // 반드시 소괄호()가 있어야 한다
// --> 콘솔창에 HELLO! 가 출력된다.

// [참고] 프로그램의 실행 순서
console.log("호출하기전");
sayHello();
console.log("호출한후");
// --> 함수가 호출되면 함수 내부가 실행 되므로
// 호출하기전
// HELLO!
// 호출한후
// 순서로 출력된다.

 

 

함수를 선언할때 소괄호 안에 변수명을 쓰면 매개변수가 된다.

function calcSum(num1, num2){ // num1과 num2를 매개변수로 받는다
	let sum = num1 + num2;
    console.log(sum);
}

calcSum(10,20); // 인수를 각각 10, 20을 넘겨주면, 함수안의 코드가 실행되어 30이 출력된다.

 

 

함수 안에 또 다른 함수를 만들 수 있다 = 중첩함수

function fnEtc(){
	function sayHello(){
    	console.log("Hello!");
    }
    
    sayHello();
}

fnEtc(); // 내부의 sayHello 함수가 실행되어 Hello! 가 출력된다.

 

 

호이스팅 (Hoisting)

호이스팅 : 끌어올리다

다른 언어와 다르게 자바스크립트는 자바스크립트 엔진이 실행 전에 변수와 함수의 선언을 미리 메모리에 등록해놓기 때문에

함수 선언보다 함수 호출이 먼저 되어도, 밑에 있는 함수가 호이스팅 되어 문제 없이 동작한다.

sayHello();

function sayHello(){
	console.log("Hello!");
}

// 함수 선언을 밑에 했지만 함수선언 전체가 호이스팅 되어 문제 없이 동작한다.

 

반응형
Comments