안녕하세요~ 오늘은 프로그래밍의 꽃이라 할 수 있는 함수를 알아보겠습니다!
자바스크립트 함수
자바스크립트에서 함수는 코드를 모듈화하고 재사용 가능하게 만들어주는 중요한 개념입니다.
함수는 특정 작업을 수행하고 필요한 데이터를 반환할 수 있습니다!
자바스크립트에서 함수를 사용하는 이유는 소스가 복잡해지거나 처리해야 할 기능이 많다면 이것들을 기능별로 나누는 것이 좋은데, 기능별로 함수를 따로 만들어둔다면 필요할 때마다 적절한 함수를 사용해서 함수별로 실행할 수 있는거죠!
함수를 표현하는 스타일은 다 다른데, 총 4가지가 있습니다!
화살표 함수를 포함하면 8가지구요. 한 번 하나하나씩 살펴볼게요~
👑선언적 함수
선언적 함수는 함수를 선언할 때 함수 이름과 함수 내용을 함께 작성하는 방식입니다.
자바스크립트 코드
function func(){
document.write("선언적 함수.");
}
func();
// 선언적 함수는 함수를 호출할 때 함수의 앞 또는 뒤에서 호출이 가능함.
호이스팅
변수나 함수를 선언하지 않고 호출하였을 때는 에러가 발생해야 하는 것이 맞지만, var로 선언한 변수와 선언적 함수는 변수, 함수 선언 이전에 호출하여도 에러를 발생시키지 않습니다. 이러한 자바스크립트 성질을 '끌어 올리기' 호이스팅 (Hoistiong)이라고 합니다.
👑익명 함수
익명 함수란 이름이 없는 함수를 의미합니다.
보통 함수를 정의할 때 함수 이름을 지정하는데, 익명 함수는 이러한 이름이 없습니다.
대신 변수에 함수 자체를 할당하여 사용합니다.
자바스크립트 코드
const func = function(){
document.write("실행되었습니다.<br>");
}
func();
// 변수를 지정해주고 실행시킴.변수에 함수 데이터를 저장하여 변수를 마치 함수처럼 사용할 수 있도록 만들어줍니다.
즉시 실행 함수
익명 함수 중에는 필요에 따라 일회성으로 사용되는 함수도 있습니다. '즉시 실행 함수'는 선언과 동시에 함수가 실행되며 함수명이 없기 때문에 재호출 할 수 없습니다. 보통 처음 한 번만 실행하는 초기화 코드에 사용됩니다.
(function() {
실행문;
})();
👑매개변수 함수
매개변수 함수는 입력값을 받아 처리하는 함수를 의미합니다.
함수를 정의할 때 매개변수를 정의하여 함수 내부에서 사용할 수 있도록 할 수 있습니다.
매개변수 함수는 다른 함수와 함께 사용하여 더욱 유용하게 사용될 수 있습니다.
자바스크립트 코드
function func(str){
document.write(str);
}
func("실행되었습니다.<br>");
// 변수를 저장하고 전달하여 함수에 출력시킴.👑리턴값 함수
함수는 입력값을 받아서 처리하고 결과를 출력하는 기능을 수행합니다.
이때, 함수에서 처리한 결과값을 호출한 곳으로 전달하는데, 이를 리턴값이라고 합니다.
자바스크립트 코드
function func(){
const str ="실행되었습니다.";
return str;
}
document.write(func());
// return은 함수를 통해 처리된 결과를 반환시켜주는 명령어.👑화살표 함수
화살표 함수(arrow function)는 ES6에서 추가된 함수 선언 방식입니다.
기존의 함수 선언 방식과는 다르게 함수를 간결하게 선언할 수 있습니다.
화살표 함수와 기존 선언 방식의 차이점
- 함수 이름이 없는 익명 함수로만 선언 가능합니다.
- 함수 내부에서 this 키워드를 사용할 경우, this는 상위 스코프의 this를 가리킵니다.
- 함수 내부에서 arguments 객체를 사용할 수 없습니다.
자바스크립트 코드_화살표 함수(선언적 함수)
function func(){
document.write("실행되었습니다.<br>");
}
func();
// 기존의 선언적 함수 표현 방식
func = () => {
document.write("실행되었습니다.<br>");
}
func();
// 화살표 함수 표현 방식
자바스크립트 코드_화살표 함수(익명 함수)
const func = function(){
document.write("실행되었습니다.<br>");
}
func();
// 기존 익명 함수 표현 방식
const func = () => {
document.write("실행되었습니다.<br>");
}
func();
// 화살표 함수 표현 방식
자바스크립트 코드_화살표 함수(매개변수 함수)
function func(str){
document.write(str);
}
func("실행되었습니다.<br>");
// 기존 매개변수 함수 표현 방식
func = (str) => {
document.write(str);
}
func("실행되었습니다. <br>");
// 화살표 함수 표현 방식자바스크립트 코드_화살표 함수(리턴값 함수)
function func(){
const str ="실행되었습니다.";
return str;
}
document.write(func());
// 기존 리턴값 함수 표현 방식
func = () => {
const str = "실행되었습니다 <br>";
return str;
}
document.write(func());
// 화살표 함수 표현 방식
함수와 화살표 함수는 똑같지만 function을 약식으로 표현한 것이다.
오늘은 이렇게 함수에 대해 알아보았는데요~
도움이 되셨다면 공감과 댓글 많이많이 부탁드려용!~!! (╹ڡ╹ )
