data life

[JavaScript] 함수 본문

Front-end/JavaScript

[JavaScript] 함수

주술회전목마 2023. 2. 1. 22:19

✅ 함수 선언

- 함수 선언문

function func() {

}

- 메서드

const obj = {
	prop : function() {
    }
}

- 생성자 함수

function Myobj() {

}

- 화살표 함수 (ES2015+, ES6)

const arrowFunc = () => {}

 

✅ 함수 표현식

- 기명 함수 표현식

>> 중복, 호이스팅의 문제 해결 가능

const func = function func() {
	return '기명함수표현식';
}

- 익명 함수 표현식

const func = function() {
	return '익명함수표현식';
}

 

 

 

✅ 매개변수(parameter)와 인자 다루기

function func(params){
	params = params + 10
    
    return params
}

- params가 지역변수로 작용

- 순서 중요

function func(param1, param2, param3, param4) {
	console.log(param2, param4); //param2, param4
    return
}

const result = func(undefined, 'param2', undefined, 'param4')
console.log(result); //undefined

 

✅ arguments

: 함수에 전달된 인수에 해당하는 Array형태의 객체

: 화살표 함수에는 존재하지 않음

const func = function() {
	const convertArr = Array.from(arguments) //array변환 메소드
    return convertArr.reduce((prev, curr)=> prev+curr);
}

console.log(func(1,2,3,4,5));
// 15

 

✅ rest parameter

const func = (...nums) => {
	return nums.reduce((prev, curr)=> prev + curr);
}

console.log(func(1,2,3,4,5));
//15

- 굳이 배열형태로 만들어주지 않아도됨

- 다른 매개변수와 연관지어 사용이 가능

const func = (first, second, ...nums) => {
	console.log(first); //1
    console.log(second); //2
    console.log(Array.isArray(nums)); //true
	return nums.reduce((prev, curr)=> prev + curr);
}

console.log(func(1,2,3,4,5));
//15

- 항상 마지막에 들어감

'Front-end > JavaScript' 카테고리의 다른 글

[JavaScript] 객체  (0) 2023.02.10
[JavaScript] DOM  (0) 2023.02.03
[JavaScript] 값(Value)에 대해 알아보자  (0) 2023.01.10
Canvas  (0) 2022.11.24
JS - forEach()  (0) 2022.11.06