자바스크립트 기초 강좌(함수 표현식, 화살표 함수)

히대·2023년 12월 20일

Javascript

목록 보기
8/28

함수 선언문

function sayHello(){
	console.log('Hello');
}

어디서든 호출 가능
자바스크립트는 실행전 초기화 단계에서
코드의 모든 함수 선언 문을 찾아서 생성해줌
그래서 함수를 사용할수 있는 범위는 코드 위치보다 위로 올라감
이를 호이스팅(hoistin) 이라함

  • 실제로 코드가 위로 올라가는건 아님!

함수 표현식

let sayHello = function(){
	console.log('Hello');
}

코드에 도달하면 생성
함수 표현식은 자바스크립트가 한줄씩 읽으면서
실행하고 해당 코드의 도달해서야 비로소 생성됨
그렇기 때문에 그 이후에만 사용할 수 있음

화살표 함수

function이 사라지고 () 뒤에 => 생성

let add = function(num1, num2){
	return num1+num2;
}
∥
let add = (num1, num2)=>{
	return num1+num2;
}

return 생략 가능하여 () => ()로 사용 가능

let add = (num1, num2)=>(
	return num1+num2;
)

return문이 한줄이면 () 생략가능

let add = (num1, num2)=>num1+num2;

인수가 각각 하나라면 괄호를 생략할 수 있음

let sayHello = (name) => `Hello, ${name}`;

만약 인수가 없는 함수라면?

괄호를 생략할 수 없음

let showError = () => {
	alert('Error!');
}

return전에 여러줄의 코드가 있을 경우 () 사용 불가

let add = (num1, num2) => {
	const result = num1 + num2;
    return result
}

예제

showError();

//함수 표현식
let showError = function(){ -> 에러
	console.log('error')
}

//함수 선언문
function showError(){ -> 'error' 출력
	console.log('error')
}

// 화살표 함수
let showError = () => { -> 에러
	console.log('error')
}

// 화살표 함수를 이용하여 간결하게 만들기

const add = function(num1,num2) {
	const result = num1 + num2;
    return result;
}

const add = (num1,num2) => {
	const result = num1 + num2;
    return result;
}

const add = (num1,num2) => (
	num1 + num2;
)

const add = (num1,num2) => num1 + num2;
profile
아자아자 파이팅🔥

0개의 댓글