Leeyanggoo
[JS] 자바스크립트 함수를 알아보자!! 본문
함수function란?
자바스크립트로 작성한 프로그램은 작성한 소스에 따라 많은 명령을 순서대로 하나씩 처리합니다.
이때 프로그래머가 기능별로 다양한 명령을 묶어놓은 것을 '함수'라고 합니다.
즉 자바스크립트에서 함수는 일련의 작업을 수행하거나 값을 계산하는 코드 블록입니다.
함수는 프로그램의 여러 부분에서 재사용 가능한 코드를 작성할 수 있도록 해줍니다.
선언적 함수
선언적 함수의 형식과 호출
함수명();
function 함수명(){
실행문; //console.log() //document.write
}
함수명(); //선언적 함수는 함수를 호출할 때 앞 또는 뒤에서 호출 가능합니다.
선언적 함수는 'function'이라는 예약어로 함수명을 명시하고, 함수 내용을 중괄호({ })로 감싸는 방식입니다.
이렇게 함수 이름을 지정하고 실행할 명령들을 묶는 것을 '함수를 선언한다'고 합니다.
그리고 이렇게 미리 선언해놓은 함수를 실행할 때는 '함수명( )'과 같이 함수 이름뒤에 소괄호'( )'를 붙여 사용합니다.
이걸 '함수를 호출한다'고 합니다.
웹 브라우저에서는 자바스크립트 소스를 해석할 때 변수나 함수 선언을 먼저 해석합니다.
때문에 앞에 쓰인 호출 선언은 변수나 함수를 선언하기 전에 해당 변수나 함수를 사용할 수 있는 것처럼 보이게 됩니다.
이런 자바스트립트 성질을 끌어올려 해석하는 것을 '호이스팅(Hoisting)'이라고 합니다.
say(); //함수가 호출되기 전에 선언
function say(){
console.log("Hello, World!");
}
이 코드는 'say' 함수가 호출되기 전에 함수가 선언되었습니다.
하지만 자바스크립트는 함수 선언문을 상단으로 끌어올리기 때문에, 코드가 실행되면 함수가 정상적으로 호출됩니다.
함수의 호이스팅은 코드의 가독성을 떨어뜨리고 예기치 않은 동작을 유발할 수 있기 때문에, 함수의 선언을 최상단에서 선언하는 것이 좋습니다.
익명 함수
익명 함수의 형식과 호출
const 변수명 = function(){
실행문;
}
변수명(); //익명 함수는 변수 선언 이후에 함수 호출을 해야 한다.
익명 함수는 변수에 함수를 저장하여 변수를 함수처럼 사용할 수 있도록 만들어줍니다.
익명 함수는 함수명이 없기 때문에 함수명을 생략하고, 해당 함수를 다른 변수에 할당하거나 다른 함수의 인수로 전달할 수 있습니다.
let addNumbers = function(){
let x = 2;
let y = 3;
let result = x + y;
console.log(result);
}
addNumbers(); //변수를 호출하면 변수 안의 함수가 실행
이 코드는 'addNumbers'라는 변수에 함수가 저장되어 있습니다.
변수를 호출하게 되면 변수 안의 함수가 실행이 되면서 마지막 console.log에서 구한 값을 호출하게 됩니다.
매개변수 함수
함수를 선언할 때 사용되는, 외부에서 값을 받는 변수를 '매개변수parameter'라고 합니다.
함수가 호출될 때 넘기는 매개변수 값을 '인수argument'라고 합니다.
매개변수 함수의 형식과 호출
function 함수명(매개변수1, 매개변수2, ...){ //매개변수 parameter
실행문;
}
함수명(매개변수1 값, 매개변수2 값, ...); //인수 argument
매개변수는 함수의 소괄호'( )' 안에 매개변수의 이름을 넣고, 여러 개의 매개변수가 필요한 경우 쉼표' , '로 나열합니다.
매개변수는 어떤 값을 받느냐에 따라 함수의 다양한 결과를 보여주게 됩니다.
이렇게 하나의 함수를 여러 상황에서 사용하는 것을 '함수의 재사용성'이라고 합니다.
function allSum(n){
let sum = 0;
for(let i = 1; i <= n; i++){
sum = sum + i; //sum += i
}
console.log(`1부터 ${n}까지 더하면 ${sum}입니다.`);
}
allSum(10);
위의 코드는 인수에 어떤 숫자를 넣느냐에 따라 1부터 n까지 더하는 코드입니다.
함수가 호출되는 순서는 다음과 같습니다.
- 함수를 호출하는 맨밑의 allSum( )에 인수 10이 들어갑니다.
- 인수 10은 매개변수 n에 넘겨집니다.
- 함수 안의 실행문이 진행되고 console.log에 n과 sum의 값이 들어갑니다.
리턴 함수
'return'은 함수를 통해 처리된 결과를 반환시켜주는 명령어입니다.
리턴 함수의 형식과 호출
function 함수명(){
실행문;
return 실행문 결과; //함수의 실행문 계산 값 //반환할 함수 내용
}
console.log(함수명()); //반환한 결과 호출
'함수명()'로 함수를 호출하게 되면 함수가 실행되면서 함수 안의 실행문이 실행됩니다.
예악어 'return'은 실행문을 마친 뒤의 결과를 호출한 곳으로 반환해주고 함수는 종료가 됩니다.
function allSum(n){
let sum = 0;
for(let i = 1; i <= n; i++){
sum = sum + i; //sum += i
}
return sum;
}
let num = parseInt(prompt("1부터 몇까지 더할까요?"));
console.log(`1부터 ${num}까지 더하면 ${allSum(num)}입니다.`);
위의 코드는 매개변수 함수에서 사용했던 코드에 return을 추가한 코드입니다.
return을 추가하게 되면 allSum() 함수의 결과를 밖으로 넘겨줄 수 있게 되어 좀 더 자유롭게 사용할 수 있습니다.
화살표 함수
화살표 함수는 ECMAScript 2015 (ES6)에 추가된 내용으로 ' => '를 이용하여 함수를 간결하게 표현할 때 사용합니다.
화살표 함수는 function 키워드를 생략하고 부등호 ' = '와 ' > '를 사용하여 표현합니다.
allSum = (n) => {
let sum = 0;
for(let i = 1; i <= n; i++){
sum = sum + i; //sum += i
}
return sum;
}
let num = parseInt(prompt("1부터 몇까지 더할까요?"));
console.log(`1부터 ${num}까지 더하면 ${allSum(num)}입니다.`);
- function을 지운다.
- 함수명 또는 변수명과 (매개변수) 사이에 부등호 ' = ' 를 추가합니다.
- (매개변수)와 중괄호({ }) 사이에 ' => '를 추가합니다.
