함수
작성해놓은 여러 명령, 기능들을 하나의 함수로 묶어서 사용합니다.
함수로 정의해놓으면 필요할 때 마다 해당 함수를 호출해서 이용할 수 있습니다.
function sayHello(count) {
for(let i = 1; i <= count; i++) {
console.log('Hello');
}
}
// 'count'라는 인자를 받아서 해당 값 만큼 콘솔에 'Hello'라고 호출하는 명령을 'sayHello'라는 함수로 정의함
sayHello(5);
//위에 정의한 'sayHello' 함수에 인자 '5'를 대입해서 호출함.
//실행결과 : 'Hello'가 콘솔에 5번 출력 됨.위 경우를 보면 함수 없이 사용할려면, console.log('Hello'); 명령을 직접 5번 입력해줘야하지만 함수로 정의해놓음으로써 원할 때 바로 호출해서 사용할 수 있게 해줍니다.
기본적인 작성방법 및 구조
작성방법 및 사용방법
//작성법
function 함수명(매개변수) {
명령문;
명령문2;
}
//실행법
함수명(전달인자);
//예시
function sayHello(count) {
for(let i = 1; i <= count; i++) {
console.log('Hello');
}
}
sayHello(5);함수는 기본적으로 function 함수명(매개변수) {명령문;}형식으로 선언 후 사용할 때는, 함수명(전달인자);로 호출하여 사용합니다.
매개변수(Pararmeter)와 전달인자(Argument)
매개변수(Parameter)
: 파라미터라고도 하며, 함수를 작성할 때 해당 함수 안에서 이용할 변수를 말합니다. 실제 함수를 호출하는 부분에서 값을 줘서 해당 매개변수로 작성해놓은 식에 대입하여 활용합니다.전달인자(Argument)
: 아규먼트 또는 인자(인수)라고도 부르며, 함수를 호출할 때 해당 함수에서 사용할 매개변수에 대입해줄 값을 뜻합니다. 함수 선언식에 작성되어있는 매개변수 순서대로 호출할 때 값을 작성하여 사용합니다.
//함수 작성
function introduceSelf(name, age, sex, job) {
//매개변수로 name, age, sex, job을 받아 사용할 함수로 작성
console.log('안녕하세요 저는 ' + name + ' 입니다.');
console.log('나이는 ' + age + '살 이며 ' + sex+ ' 입니다.');
console.log('직업은 ' + job + ' 입니다. 잘 부탁드립니다.');
}
//함수 호출
introduceSelf('장지현', 29, '여자', '무직');
//introduceSelf 함수를 호출하며 전달인자 전달💡 매개변수에 기본값 설정
함수를 작성할 때 매개변수에 기본값을 지정할 수 있습니다. 기본값을 지정 시 함수 호출하는 부분에서 해당 매개변수에 대해 인자를 전달해주지 않을 경우 설정된 기본값으로 자동 대입하여 함수를 실행합니다.//매개변수에 기본값 할당하기 function introduceSelf(name, age, sex, job = '무직') { //매개변수로 job에 대해 기본값으로 '무직'이라는 값을 할당 함 console.log('안녕하세요 저는 ' + name + ' 입니다.'); console.log('나이는 ' + age + '살 이며 ' + sex+ ' 입니다.'); console.log('직업은 ' + job + ' 입니다. 잘 부탁드립니다.'); } //함수 호출 introduceSelf('장지현', 29, '여자'); //job에 대한 인자를 전달하지 않아 자동으로 함수 실행 시 해당 파리미터의 기본값인 '무직'으로 대입됩니다.
return문
return 문이란 함수를 실행 후 특정 값을 반환받는 것을 말합니다.
주로 함수 실행후 그 결과값을 반환받는데 사용할 수 있습니다.
함수를 작성할 때 return문을 작성해주지 않으면 함수는 기본적으로 실행만 될 뿐 해당 함수 내에 있는 그 어떤 값도 그 함수내에서만 존재할 뿐 입니다.
즉, 함수를 실행하면서 특정 값을 받아 다른 곳에서 이용해줘야할 때는 return문을 통해 값을 받아 이용할 수 있습니다.
또한, 함수에서 return문을 만날 경우 해당 return문을 실행하고 그 즉시 해당 함수의 스코프를 빠져나온다는 특징이 있습니다.
function returnTest() {
let value = 10;
return value;
console.log(value);
//이 경우 위 return문이 실행되면서 해당 함수 스코프를 빠져나오기 때문에 console.log문은 실행되지 않습니다.
}
function noReturnTest() {
let value = 5;
console.log(value);
//return문이 없으므로 함수 끝까지 실행됩니다.
}
let returnValue = returnTest();
let noReturnValue = noReturnTest();
console.log(returnValue); //return문을 통해 받은 value값이 출력됨
console.log(noReturnValue); //반환 값이 정의되지 않았기 때문에 undefined가 출력됨 함수 표현식
함수를 작성해줄때는 기본적으로 함수명으로 정의하는 방식 외 에도 다양한 방식으로 상황에 맞게 활용할 수 있습니다.
기본 작성법 (네임드 함수)
함수명을 명명하여 작성하고, 사용시에도 해당 함수명을 이용하는 방법 입니다.
함수명을 사용하여 몇번이고 호출할 수 있어 재활용성이 좋습니다.
가장 일반적으로 사용되는 방법입니다.
//작성법
function 함수명() {
명령문;
}
//사용법
함수명();익명 함수
함수명 정의 없이 함수를 작성하는 방법으로 기본적으로 변수에 함수를 대입하여 해당 변수명을 이용해서 함수를 호출하는 방식으로 사용하고는 합니다.
작성하는 함수가 해당 문서에서 재사용 없이 일회용으로 사용하는 경우 주로 사용됩니다.
//작성법 (기본)
function() {
명령문;
}
//작성법 (변수에 할당)
let 변수명 = function() {
명령문;
}
//사용법
변수명();즉시 실행 함수
대부분의 함수는 함수 작성한 후 실제 필요할 때 호출해서 사용하는 방식으로 사용됩니다. 즉, 스크립트가 해석할 때 함수 정의 부분에서 함수 내용을 해석해놓았다가 실제 호출할때 해석해놓은 함수내용을 실행하는 방식으로 호출하지 않으면 함수가 실행되지 않습니다.
즉시 실행 함수는 이와 달리 함수 정의 부분을 스크립트가 해석하면서 즉시 실행되는 함수를 말합니다.
//작성 및 사용법 (매개변수 X)
(function() {
명령문;
}());
//작성 및 사용법 (매개변수 O)
(function(매개변수) {
명령문;
}(전달인자));화살표 함수
ES6에서 추가된 방식으로 => 기호를 활용하여 함수 작성 법을 더 간단히 작성할 수 있습니다.
익명함수로만 사용할 수 있습니다.
//기본형 (익명함수)
function () {
명령문;
}
//화살표 함수 (기본형)
(매개변수) => {
명령문;
}
//화살표 함수 (변수에 할당)
let 변수명 = (매개변수) => {
명령문;
}
//사용법
변수명(인자);참고
Do it! 한 권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석 - 고경희
위 책을 공부하며 작성하고 있습니다!
