본문 바로가기
JavaScript

[JS] 함수

by 홍code 2022. 8. 3.

함수

  • 코드에서 중복되는 부분을 하나로 묶어서 사용하는 것
  • 함수는 배열, 조건, 변수 어디에나 쓰인다.
  • 함수는 코드의 재사용 가능한 일부로써 언제든 사용할 수 있도록 이름 붙인 것
  • 코드의 중복을 줄이는 데 유용하다.
  • 코드를 더 읽기 쉽고 이해하기 쉽게 만든다.
//함수를 사용하기 전

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

함수 선언방식의 함수 생성

  • 함수를 작성하고 사용하는 법
      1. 함수를 정의하기 
      • 함수를 설명할 수 있는 이름 붙이기
      • 중괄호 안의 코드는 바로 실행되지 않는다 → 함수를 실행할 때 동작
      function funcName() {
      	// do something
      }
      
      funcName();
      
         
    •     2. 함수를 실행하기
      • native code. 그냥 함수 이름만 입력하면 단순히 함수임을 알려준다.
      • () 괄호를 함께 입력하면 실행된다.
  • 함수를 사용하기 전에 먼저 정의하기

인수 개요

  • 인수(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();

'JavaScript' 카테고리의 다른 글

[JS] 함수 표현식 & 화살표 함수 & 콜백함수  (0) 2022.08.03
[JS] 스코프와 호이스팅  (0) 2022.08.03
[JS] 반복문  (0) 2022.07.02
[JS] 객체  (0) 2022.07.02
[JS] 배열  (0) 2022.07.02

댓글