728x90
반응형
SMALL
함수에는 함수 선언문, 함수 표현식, 화살표 함수가 있습니다.
함수 선언문 - function 키워드로 함수를 정의하는 방법
function 식별자(){}
function gugudan() {
for(let i = 1; i <=9; i++){
console.log(`e*${i} = ${3*i}`);
}
}
이렇게 작성하고 나면, 아래와 같이 함수명 ();로 함수를 실행할 수 있습니다.
gugudan();
함수 표현식 - 변수에 할당하는 함수에 식별자가 있으면 네이밍 함수, 없으면 익명 함수로 구분합니다.
const 변수명 = function(){}; // 익명 함수
const 변수명 = function 식별자(){}; // 네이밍 함수
const gugudan = function(){
for(let i=1; i <=9; i++){
console.log(`3*${i} = ${3*i}`);
}
};
gugudan(); // 함수 호출 문제 없음
const gugudan = function naming(){
for(let i=1; i<=9; i++){
console.log(`3*${i} = ${3*i}`);
}
};
naming(); // 함수 호출하면 오류가 발생
즉, 식별자가 아닌 변수명으로 호출해야됨
함수는 일관된 목적을 가진 코드 집합이라서 const 키워드로 작성하는 것을 권장합니다.
화살표 함수 - 익명 함수로 정의가 가능하며 화살표를 사용해 함수를 정의하는 방법
() => {};
const gugudan = () => {
for(let i=1; i <=9; i++){
console.log(`3*${i} = ${3*i}`);
}
};
gugudan(); // 함수 호출 문제 없음
매개변수 : 함수를 정의할 때, 외부에서 전달하는 데이터를 함수에서 받을 수 있도록 정의하는 변수
인수 : 정의한 함수를 호출할 때, 소괄호 안에 전달하고 싶은 데이터를 작성
// 함수 선언문
function 함수명(매개변수1, 매개변수2, ..., 매개변수N){}
// 함수 표현식
const 함수명 = function 식별자(매개변수1, 매개변수2, ..., 매개변수N){};
// 화살표 함수
const 함수명 = (매개변수1, 매개변수2, ..., 매개변수N) => {};
// 함수 호출
함수명(인수1, 인수2, ..., 인수N);
function gugudan(dan){
for(let i = 1; i <= 9; i++){
console.log(`${dan} * ${i} = ${dan * i}`);
}
}
gugudan(3);
gugudan(5);
gugudan(8);
여기서 조건문 내부 dan이 매개변수
화살표 함수에서 매개변수 정의
const sum = (num1, num2) => {
console.log(num1, num2);
};
sum(10, 20);
단, 화살표 함수는 매개변수 1개일 경우 ()를 생략할 수 있습니다.
const sum = num1 => {
console.log(num1);
};
sum(10);
return문 - 함수 외부로 데이터를 반환할 때 사용합니다.
return 식(또는 값)
function sum(num1, num2){
let result = num1 + num2;
}
sum(10,20);
console.log("out: " + result); // ReferenceError: result is not defined
이때, return문을 사용하여 함수 내부의 변수를 함수 외부로 전달하면 오류가 발생하지 않습니다.
function sum(num1, num2){
let result = num1 + num2;
return result;
}
const result = sum(10,20);
console.log("out: " + result); // out: 30
이때, return에 할당된 값을 밖으로 내보내기에 반환값이라고 합니다.
함수 내부 - 지역 스코프( 지역 스코프는 함수 내부에서만 참조 가능)
함수 외부 - 전역 스코프 (전역 스코프는 스코프와 상관없이 모두 참조 가능)
즉시 실행 함수 - 함수를 정의하면서 동시에 실행까지 하는 함수
(function(){})();
728x90
반응형
LIST
'프론트엔드(Web) > JavaScript' 카테고리의 다른 글
JavaScript 문서 객체 모델 및 이벤트 (0) | 2024.07.18 |
---|---|
JavaScript 객체 (0) | 2024.07.16 |
JavaScript 조건문, 반복문 (1) | 2024.07.16 |
JavaScript 함수 및 자료형, 연산자 (1) | 2024.07.16 |
JavaScript 코드 작성 방법 (0) | 2024.07.14 |