함수
- 코드에서 중복되는 부분을 하나로 묶어서 사용하는 것
- 함수는 배열, 조건, 변수 어디에나 쓰인다.
- 함수는 코드의 재사용 가능한 일부로써 언제든 사용할 수 있도록 이름 붙인 것
- 코드의 중복을 줄이는 데 유용하다.
- 코드를 더 읽기 쉽고 이해하기 쉽게 만든다.
//함수를 사용하기 전
let num1 = 10;
let num2 = 15;
let sum = num1 + num2; //25
//함수를 사용한 경우
function add(num1, num2) {
return num1 + num2;
console.log(num1 + num2); // 실행X
}
let sum1 = add(10, 15); // 25
let sum2 = add(5, 5); // 10
함수 선언방식의 함수 생성
- 함수를 작성하고 사용하는 법
- 함수를 사용하기 전에 먼저 정의하기
인수 개요
- 인수(arguments)는 함수에 입력하는 값
- 모든 메서드는 곧 함수다. (인수를 필요로 하는 메서드 생각하기)
- 인수를 정의하는 방법
- 함수를 정의할 때 괄호 안에 변수 이름을 넣는다. ⇒ 매개변수(parameter)
- 함수의 인수로 전달되면 매개변수에 저장되어 접근할 수 있다.
- 주어져야 할 인수가 전달되지 않으면 기본값은 undefined
💡 인수는 함수를 실행할 때 괄호 안에 전달되는 것 매개변수는 함수를 정의할 때 일종의 placeholder로써 용도에 따라 정해줄 수 있다.
인수가 여러 개인 함수
- 함수를 정의할 때 매개변수 사이에 쉼표를 넣어 구분한다.
- 함수를 실행할 때 인수의 순서를 지켜야 한다.
function repeat(str, numTimes) {
let result = '';
for (let i = 0; i < numTimes; i++) {
result += str;
}
console.log(result);
}
repeat(3, 'I LOVE MY CHICKENS!');
// I LOVE MY CHICKENS! I LOVE MY CHICKENS! I LOVE MY CHICKENS!
- 인수가 코드에서 이용되어 오류를 일으키지만 않는다면 인수를 필수로 넣지 않아도 된다.
반환(return) 키워드
- 함수의 출력 값(output)
- console.log()로 단순히 출력하는 것과는 다르다.
- 함수 밖으로 하나의 값을 내보낼 수 있다.
- return 키워드는 함수 실행을 중단시킨다.
function add (x, y) {
if (typeof x !== number || typeof y !== 'number') {
return false;
}
return x + y;
}
- 단, 함수 안에 return이 있기만 해서는 중단되지 않고 return이 있는 줄이 실행되어야만 함수가 중단된다.
함수 범위
- 범위는 변수 가시성(variable visibility)을 참조한다.
- 변수를 JavaScript의 어느 부분에 정의하느냐가 액세스 지점을 결정한다.
- 함수 안에서 let 키워드를 사용해 그 값을 정의한 변수들은 그 함수로 범위가 한정된다. ⇒ 함수 밖에서는 액세스 할 수 없다.
- 전역 변수를 함수 안에서 업데이트하기보다는 보통은 내부 변수를 쓴다.
- JavaScript는 함수 안에 전역 변수와 같은 이름으로 정의된 내부 변수가 있을 경우, 내부 변수를 먼저 참조한다.
let bird = 'Scarlet Macaw';
function birdWatch() {
console.log(bird); // Scarlet Macaw
}
birdWatch();
console.log(bird); // Scarlet Macaw
let bird = 'Scarlet Macaw';
function birdWatch() {
console.log(bird); // Uncaught ReferenceError: Cannot access 'bird' before initialization
let bird = 'Great Blue Heron';
console.log(bird); // Great Blue Heron
}
console.log(bird); // Scarlet Macaw
birdWatch();
console.log(bird); // Scarlet Macaw
블록 범위
- var 키워드를 쓰면 변수의 범위가 함수로 지정되지만 블록으로 지정되진 않는다.
- let과 const는 범위가 블록으로 지정되는 변수들. 유효 범위 규칙을 따른다.
- 블록 스코프도 함수 스코프와 비슷하다. 블록 범위는 조건문 등의 중괄호 {} 안이다.
렉시컬 범위
- 외부(부모) 함수 안에 중첩된 내부(자식) 함수가 있으면 자식 함수에서 부모 함수 범위의 값이나 변수에 엑세스할 수 있다.
function bankRobbery() {
const heroes = ['Spiderman', 'Wolverine', 'Black Panther'];
function cryForHelp() {
for (let hero of heroes) {
console.log(`PLEASE HELP US, ${hero.toUpperCase()}`);
}
}
cryForHelp();
}
bankRobbery();
댓글