[JavaScript] 함수 (Function) 총정리 2탄 (함수 호출, 함수 복사 및 할당, 내부변수, 외부변수, 화살표함수)

1탄 못보신 분들은 보고 오세요~!
https://dev-ini.tistory.com/40

 

 

목차 

1. 함수 호출하기
2. 함수 복사해서 다른 변수에 할당하기 
3. 내부변수, 외부변수 
4. 화살표 함수 (함수 표현식)

 

 

 

---

 

 

 함수 호출(실행)하기 

 

새롭게 정의한 함수는 함수 이름 옆에 괄호를 붙여 호출할 수 있다.

함수 이름인 sayHi 옆에 괄호( )를 붙여 호출 →호출하면 함수 본문 alert(" Hello "); 가 실행됨

 

function sayHi() {
  alert( "Hello" );
}

alert( sayHi() ); //함수의 값, 즉 ("Hello")알림창이 뜸

 

 

 

 

 

 비교) 괄호 없이 함수 이름만 언급하기 

 

자바스크립트는 괄호가 있어야만 함수가 호출된다.

따라서 괄호 없이 함수 이름만 언급하면, 함수가 실행되지 않고, 함수 자체가 등장한다. 

 

function sayHi() {
  alert( "Hello" );
}

alert( sayHi ); =>함수 그 자체(전체)가 알람창에 뜸

 

 

 

---

 

 

 함수를 복사해서 다른 변수에 할당하기 

 

자바스크립트에서 함수는 값이다. 따라서 함수를 값처럼 취급할 수 있고, 값에 할 수 있는 일을 함수에도 할 수 있다.

변수를 복사해 다른 변수에 할당하는 것처럼 함수를 복사해 다른 변수에 할당할 수도 있다.

 

 

 '함수 자체'를 변수에 복사하고, 변수를 호출하기 

 

function sayHi() {   // 함수 생성
  alert( "Hello" );
}

let func = sayHi;    // 함수 자체를 변수에 복사

func(); // Hello     // 복사한 함수를 실행한다. (정상적으로 실행된다)

sayHi(); // Hello    // 본래 함수도 정상적으로 실행된다.

 

- “Hello”알람창이 뜨는 본문을 가진 sayHi라는 함수를 만든다.
- func이라는 변수를 만들고, sayHi 함수 자체를 변수의 값으로서 할당한다.
- 함수이름 sayHi() 로 함수 호출한다.
- func 변수는 sayHi 함수랑 같아 졌으므로, 즉 func = sayHi 이름이 같아졌다고 보면 된다.
- func ( ) 가 정상적으로 실행된다.

 

 

 

 비교) '함수의 실행값'을 변수에 복사하고, 변수에 할당하기 

 

function sayHi() {    // 함수 생성
  alert( "Hello" );
}

let func = sayHi();  // 함수의 실행값을 변수에 복사

 

- “Hello”알람창이 뜨는 본문을 가진 sayHi라는 함수를 만든다.
- 여기서 sayHi 함수의 값은 sayHi() 이다. 즉, “Hello”알림창이 뜨는 것
- func이라는 변수를 선언하고, 그 변수에 sayHi() (함수의 값=”Hello”알림창)을 할당한다.
- 값을 할당할 때 함수가 실행되면서 바로 알림창이 뜬다.

 

 

---

 

 

 내부 변수 (=지역 변수) 

 

 

 특징 1) 내부 변수는 함수 안에서만 접근이 가능하다. 

 

= 코드 블록 {...} 안에서 선언한 변수는 블록 안에서만 사용할 수 있다.

function showMessage() {
  let message = "안녕하세요!";  // message는 지역 변수이다.

  alert( message );  // 지역변수는 함수 안에서만 접근 가능하다.
}

showMessage();  // 안녕하세요!  // 함수 호출

 

 

 

 

 특징 2) 내부 변수는 함수 밖에서 사용하면 에러가 발생한다. 

 

function showMessage() {
  let message = "안녕하세요!";  // message는 지역 변수이다.

  alert( message ); // 지역변수는 함수 안에서만 접근 가능하다.
}


alert( message ); // ReferenceError: message is not defined (message는 함수 내 지역 변수이기 때문에 에러가 발생합니다.)

 

 

 

이런 블록의 특징은 특정 작업을 수행하는 코드를 한데 묶어두는 용도로 활용할 수 있다.
블록 안엔 작업 수행에만 필요한 변수가 들어간다.

 

{
  // 메시지 출력
  let message = "안녕하세요.";
  alert(message);
}

{
  // 또 다른 메시지 출력
  let message = "안녕히 가세요.";
  alert(message);
}

 

 

 

---

 

 

 외부 변수 (=전역 변수) 

 

 

 특징 1) 함수 내부에서 함수 외부의 변수인 외부 변수에 접근(사용)할 수 있다. 

 

let userName = 'John';  // userName은 외부 변수이다.

function showMessage() {
  let message = 'Hello, ' + userName;  // 함수 내부에서 외부 변수(userName)를 사용
  alert(message);
}

showMessage(); // Hello, John

 

 

 

 특징 2) 함수 내부에서 외부 변수를 수정도 할 수 있다. 

 

let userName = 'John';  // userName은 외부 변수이다.

function showMessage() {
  userName = "Bob";  // 함수 내부에서 외부 변수(userName)를 수정한다.

  let message = 'Hello, ' + userName;
  console.log(message);
}

console.log( userName ); // 함수 호출 전이므로 John 이 출력된다.

showMessage(); // 함수 호출

console.log( userName ); // 함수에 의해 Bob 으로 값이 바뀜

 

 

 

 특징 3) 하지만, 함수 내부에서 외부 변수를 사용하려면 (접근하고 수정하려면) 같은 이름으로 선언된 지역 변수가 없어야 한다. 

(외부변수와 동일한 이름을 가진) 내부변수를 선언하면 내부변수가 외부변수를 가리게 된다. (외부변수 사용 못해)
→ '재선언' 하면 접근, 수정이 안된다!  → 함수는 내부변수(수정안된것) 기준으로 사용한다.

 

let userName = 'John';  // userName은 외부 변수이다.

function showMessage() {
  let userName = "Bob"; // 외부 변수와 같은 이름을 가진 지역 변수(userName)를 "선언"한다.

  let message = 'Hello, ' + userName; // (내부 변수의 값(Bob)만 사용하게 된다)
  console.log(message);
}

showMessage(); // Hello, Bob  // 함수 호출 (내부 변수만 사용한다.)

console.log( userName ); // John
// userName 변수만 호출해본다.
// 앞서, 함수는 외부 변수에 접근하지 못하므로, 외부 변수를 수정하지 못했었다.  
// 따라서 외부변수의 값이 변경되지 않고 John 그대로 나오게 된다.

 

같은 이름으로 선언되면 내부변수와 외부변수는 따로 놀게 된다고 생각하자.내부변수는 본인이 선언한걸 사용하고, 외부 변수에 접근하지 못한다.

 

 

 

 

 특징 4) 전역 변수 사용을 지양하자. 

 

전역 변수는 같은 이름을 가진 지역 변수에 의해 가려지지만 않는다면(특징2의 경우만 아니라면) 모든 함수에서 접근할 수 있다.
하지만, 변수는 연관되는 함수 내에 선언하고, 전역 변수는 되도록 사용하지 않는 것이 좋다.
비교적 근래에 작성된 코드들은 대부분 전역변수를 사용하지 않거나 최소한으로만 사용한다.
(다만 예외적으로, 프로젝트 전반에서 사용되는 데이터는 전역 변수에 저장하는 것이 유용한 경우도 있으니 이 점을 참고하자.)

 

 

 

 내부 변수 & 외부 변수 특징 총정리 

- 내부 변수는 함수 안에서만 사용 가능 (함수 밖에서 사용하면 에러 발생)
- 함수 내부에서 함수 외부에 선언된 변수(외부 변수)를 사용 가능
- 내부에서 외부변수를 수정하는 것도 가능 (재할당해서)
-  만약 외부변수를 사용하려면 (접근하고 수정하려면) 같은 이름으로 선언된 지역변수가 없어야함.
- 즉, 전역 변수는 같은 이름을 가진 지역 변수에 의해 가려지지만 않는다면 모든 함수에서 접근할 수 있음.
- 변수는 연관되는 함수 내에 선언하고(지역변수를 선언하고), 전역 변수는 되도록 사용하지 않는 것이 좋음.

 

 

---

 

 화살표 함수 (함수 표현식) 

 

화살표 함수는 함수 표현식을 간단하게 만들어준다. 

 

 

 예시 1 

 

일반 함수 표현식

let func = function(arg1, arg2, ...argN) {
return expression;
};

 

화살표 함수를 사용해서 나타내면 아래와 같다.

let func = (arg1, arg2, ...argN) => expression

→ 인자 arg1..argN를 받는 함수 func이 만들어짐
→ 함수 func는 화살표(=>) 우측의 표현식(expression)을 평가하고, 평가 결과를 반환함

 

 

 

 예시 2 

 

일반 함수 표현식

let sum = function(a, b) {
return a + b;
};

alert( sum(1, 2) ); // 3

 

화살표 함수를 사용해서 나타내면 아래와 같다.

let sum = (a, b) => a + b;

alert( sum(1, 2) ); // 3

→ (a, b) => a + b는 인수 a와 b를 받는 함수

(a, b) => a + b는 실행되는 순간 표현식 a + b를 평가하고 그 결과를 반환한다.

 

 

 

 예시 3 

 

인수가 하나밖에 없다면 인수를 감싸는 괄호를 생략할 수 있다. 괄호를 생략하면 코드 길이를 더 줄일 수 있다.

let double = n => n * 2;
// let double = function(n) { return n * 2 }과 거의 동일합니다.

alert( double(3) ); // 6

 

 

 

 예시 4 

 

인수가 하나도 없을 땐 괄호를 비워놓으면 된다. 다만, 이 때 괄호는 생략할 수 없다.

let sayHi = () => alert("안녕하세요!");

sayHi();

 

 

 

 예시 5 

 

화살표 함수를 여러개 사용해보기

let age = prompt("나이를 알려주세요.", 18);

let welcome = (age < 18) ?
  () => alert('안녕') :
  () => alert("안녕하세요!");

welcome();

 

 

 

 

참고 자료 

https://ko.javascript.info/arrow-functions-basics