목차
- 함수
1-1. 함수 선언 및 호출
1-2. 변수 범위 - 함수의 매개변수
- 함수의 반환형
- 함수 표현식 함수가 변수의 값, 변수명();
4-1. 함수 복사
4-2. 함수 선언문과 함수 표현식의 차이 - 콜백 함수
- 화살표 함수
1. 함수
- 함수(function)은 소스 코드의 집합으로 메소드(method), 모듈(module), 프로시저(procedure) 등을 말한다.
- 함수는 매개변수 및 인자, 리턴값을 가질 수 있다.
1-1. 함수 선언 및 호출
- 함수 선언(function declaration)에서는 반환값 선언 없이 function 키워드만 쓰인다.
- 자바 언어의 메소드(method)와의 대표적 차이로서 '반환형'이 존재하지 않는다. 또, 함수는 메소드보다 더 포괄적인 개념이기도 하다.
- function 키워드에 함수명을 작성해 사용하는 방법인 함수 선언문과 function 키워드에 함수명 작성하지 않고 변수에 대입하는 방법인 함수 표현식이 있다.
<body>
<script>
function test() {
alert('test 함수 실행!');
}
test();
</script>
</body>- 함수 본문에 alert('test 함수 실행!'); 작성한 뒤 바깥에서 함수를 호출해야만 실행으로 이어진다: test();
1-2. 변수 범위
함수 내의 지역변수 선언
<body>
<script>
function test() {
let local = 'local';
}
//console.log('test2 밖의 local ' + local);
</script>
</body>
- 지역변수는 함수 외부에서 접근 자체가 불가하다. 따라서 위 예시의 console.log() 구문은 다음과 같은 오류를 발생시킨다: local is not defined
함수 바깥서 외부변수(전역변수) 선언
<body>
<script>
let outer = 'outer';
function test() {
console.log('test 안의 outer : ' + outer);
outer = 'changed outer';
}
test();
console.log('test3 호출 후 outer : ' + outer);
</script>
</body>- 외부변수는 함수 내부에서 당연히 접근할 수 있다: console.log('test 안의 outer : ' + outer);
- 새로운 값 대입 역시 가능하다. 즉 접근뿐 아니라 값 수정도 정상적으로 이뤄진다: outer = 'changed outer';
- 예시 결과는 최종적으로 다음과 같다: test 호출 후 outer : changed outer
같은 이름을 가진 지역변수와 외부변수
<body>
<script>
let test = 'outer';
function test() {
let test = 'local';
console.log('test 안의 test : ' + test);
}
test();
console.log('test 밖의 test : ' + test);
</script>
</body>- test(); 호출 시 test 안의 test : local 값이 반환된다. 함수 내부에서는 같은 지역에 있는 내부변수를 인식하기 때문이다.
- 반면 함수 바깥의 console.log(); 구문 실행하거든 결과는 다음과 같다: test 밖의 test : outer
- 이처럼 변수가 가지는 위치와 범위에 따라 출력으로 이어지는 대상도 다르다는 점에 유의하자.
2. 함수의 매개변수
<body>
<script>
function test(value = "no value") {
console.log('입력된 메세지 : ' + value);
}
test(prompt("메시지를 입력하세요"));
test('안녕하세요', '반갑습니다');
</script>
</body>매개변수의 타입또한 작성이 요구되지 않는다.- 전달되는 값이 없을 때 대신될 기본값(default)을 설정할 수 있다. 예시에서처럼 함수 헤드의 매개변수부에 (value = "no value")처럼 명시하는 것이 방법이다.
지정된 매개변수보다 많은 개수 호출 허용
초과하면 무시
- 이때 ('안녕하세요', '반갑습니다')처럼 지정된 개수보다 많은 값들을 인자로 전달할 수는 있다. 하지만 초과된 인자에 대해서는 출력 시 무시된다: 입력된 메세지 : 안녕하세요
지정된 매개변수보다 적은 개수 호출 허용
빈 자리에 undefined 또는 기본값 자동 설정
- 반대로 지정 개수보다 적게 전달하는 것도 가능하다. 단, 전달되지 않은 자리에 대해서는 undefined로 자동 설정된다.
- 매개변수부에서 설정한 기본값이 있다면 해당 기본값이 undefined를 대신하게 된다. 예시에서는 no value라는 기본값이 출력되고 있다.
3. 함수의 반환형
1에서 100 사이 랜던한 숫자를 반환하는 함수에 대해 정의한 예시이다. 이때 Math.random()은 0~1 사이 실수를 다루므로 Math.floor()로 감싸 내림처리 하도록 한다.
<body>
<script>
//1~100 사이의 랜덤 값을 반환하는 함수
function returnFunction() {
return Math.floor(Math.random() * 100) + 1;
}
function test() {
for(let i=1; i <= 10; i++) {
let random = returnFunction();
console.log('random' + i + ": " + random);
}
}
test();
</script>
</body>
- return문이 없거나, return 지시자만 있는 함수의 경우 undefined를 반환한다.
4. 함수 표현식 함수가 변수의 값, 변수명();
<body>
<script>
let test = function () {
alert('함수 표현식!');
}
console.log(test);
test();
</script>
</body>- 함수 표현식(function expression)은 함수가 변수에 할당되는 것을 말한다.
- 즉 이제까지 생성한 함수 안에서 변수에 값을 할당해왔듯 함수가 갖는 기능과 의미만 '변수에 직접 대입될 값'으로 달라진다.
- 콘솔창에 함수 표현식으로 만든 변수를 출력하자 위와 같은 결과가 출력된다. 따라서 자바스크립트에서 함수는 값이라고 할 수 있음이다.
- 함수 표현식을 호출할 때는 변수명에 소괄호 () 붙여서 호출한다. 변수 안에 작성된 alert() 구문이 결과로서 정상 실행됨을 확인할 수 있다: test();
4-1. 함수 복사
<body>
<script>
let copy = test;
copy();
</script>
</body>- 한편, 함수 복사 역시 가능하다. 별도 변수를 선언해 미리 작성해둔 함수를 대입하는 과정만으로 간단히 치를 수 있다: let copy = test;
- 복사한 함수를 실행할 때 역시 변수명(); 으로 호출 및 출력에 옮긴다: copy();
4-2. 함수 선언문과 함수 표현식의 차이
| 함수 선언문 | 함수 표현식 |
| function test() {} | let test = function() {} |
| 스크립트 실행 전 문서 초기화 단계에서 읽힘 | 스크립트 실행 시 읽힘 |
| 어디에서든 호출 가능 | 중괄호 {} 끝난 다음 호출 가능 |
A. 함수 선언문
<body>
<script>
testA();
function testA() {
alert('함수 선언문으로 작성된 함수!');
}
testA();
</script>
</body>- 스크립트가 실행되기 전에 생성돼 어디서든 불러올 수 있는 전역함수로서 선언문 위에서도 호출이 가능하다.
- 전역함수는 스크립트 실행 전 초기화 단계에서 생성된다. 즉 함수 선언문이 모두 처리된 이후에 → 실행 구문에 대한 요청이 처리되므로 스크립트 내부의 어디에서든 정상 동작이 가능한 것이다.
- 이러한 함수 선언문의 특성을 활용하여 해당 함수가 여러 번 쓰이게 될 경우에 활용하는 것이 효율적이라 할 수 있다.
B. 함수 표현식
<body>
<script>
//testB(); -- 오류
let testB = function() {
alert('함수 표현식으로 생성된 함수!');
}
testB();
</script>
</body>- 함수 표현식으로 선언된 함수를 그보다 앞서서 호출하면 초기화 전에는 접근할 수 없다는 오류가 발생한다: Uncaught ReferenceError: Cannot access 'testB' before initialization
- 함수 표현식은 블럭 내부에 위치한 존재로서 해당 스크립트가 동작할 때 생성된다. 즉 스크립트 실행 흐름이 진행조차 되기 전에 접근 요청한 경우이므로 호출되지 못하고 오류는 내놓는 것이다.
- 함수 표현식의 경우는 중괄호 {} 이후, 다시 말해 함수 표현식 아래에 호출 구문을 작성해야만 정상 동작한다.
5. 콜백 함수
<body>
<script>
function test(func1, func2) { //매개변수 이름 전달
let name = func1();
let age = func2();
console.log('이름 : ' + name + ", 나이 : " + age);
}
function question1() {
return prompt("당신의 이름은 무엇입니까?");
}
function question2() {
return prompt("당신의 나이는 몇 살입니까?");
}
// 함수 question1과 question2를 test8 함수로 전달
test(question1, question2);
</script>
</body>- 콜백 함수는 매개변수로 넘겨지는 함수를 일컫는다.
- 따라서 test()를 호출할 때 소괄호 () 안에 해당 함수명을 전달한다.
- 이때
test(question1(), question2())처럼 작성하면 오류가 발생한다. test()가 가지는 매개변수는 (func1, func2)라는 함수명이기 때문이다: Uncaught TypeError: func1 is not a function
<body>
<script>
test(function() { return prompt("당신의 이름은 무엇입니까?")},
function() { return prompt("당신의 나이는 몇 살입니까?")});
</script>
</body>- 함수 표현식으로 작성한 예시는 위와 같다.
- 이처럼 test() 함수의 매개변수로서 소괄호 () 안에 function()을 직접 정의할 수도 있다.
6. 화살표 함수
- 화살표 함수는
function 키워드,return 키워드,중괄호 {}를 생략한 형태로서 함수 표현식 작성에 있어 짧은 구문을 허용한다. - 특히 콜백 함수로서 활용할 수 있을 것이다.
<body>
<script>
let hello;
// 기존 function 정의
hello = function () {
return "Hello World!";
};
console.log(hello());
// function 키워드 생략
hello = () => {
return "Hello World!";
};
console.log(hello());
// return 키워드 및 중괄호 {} 생략
// (단, 명령문이 하나만 있는 경우 생략 가능하다)
hello = () => "Hello World!";
console.log(hello());
// 매개변수가 있을 경우
hello = (val1, val2) => "Hello " + val1 + val2;
console.log(hello('World', '!!!'));
// 매개변수가 하나면 소괄호 생략 가능
hello = val => "Hello " + val;
console.log(hello('World!!!'));
</script>
</body>- 매개변수가 하나인 경우에는 소괄호 () 또한 생략 가능하다.
- 예시에서의 마지막 구문을 다시 함수 표현식으로 고치면 다음과 같다.
hello = val => "Hello " + val;
hello = function(val) {
return "Hello " + val;
};
'Frontend > JavaScript' 카테고리의 다른 글
| [JavaScript] 객체 | for in | 메소드 | 객체 배열 | filter (0) | 2022.02.19 |
|---|---|
| [JavaScript] 배열 | for of | forEach | map | Array 객체 메소드 (0) | 2022.02.18 |
| [자바스크립트/수업 과제 practice] 기본 문법 실습 (0) | 2022.02.16 |
| [JavaScript] 변수 | 자료형 | 입출력 | 형변환 | 연산자 (0) | 2022.02.16 |
| [JavaScript] 클라이언트 | 서버 | 개발자 도구 | 자바스크립트 개요 (0) | 2022.02.16 |
