[JavaScript] 익명함수와 즉시 실행 함수 (TweeksStudy:0)

Haeun Noh·2023년 6월 4일
TweeksTweeksStudyjs익명함수자바스크립트즉시실행함수함수
0

TweeksStudy:0 (JavaScript)

목록 보기
2/5
post-thumbnail

0604

들어가며

  • 익명함수
  • 익명함수의 화살표 표기법
  • 즉시 실행 함수
  • 변수의 scope 알아보기

안녕하세요!
트윅스스터디 그 두 번째 과제에서는 함수 더 알기 에서는 JavaScript의 다양한 함수에 대해 알아보도록 하겠습니다.


🧁1. 익명함수 (Anonymous function)

👉1.1. 형태

자바스크립트의 익명함수는 다음과 같은 형태를 가지고 있습니다.

function() {
  console.log("javascript");
}

보면 함수의 이름이 없는 것을 확인할 수 있는데요,
익명함수는 재사용하지 않는 한 번만 사용할 함수이므로 따로 함수의 이름을 갖지 않고 변수에 담겨 사용됩니다.

주의할 점은 함수의 이름 != 변수 라는 것입니다.
리터럴방식(literal)으로 변수에 담겨 사용하는 것일 뿐이죠.


👉1.2. 예시

예시를 한 번 볼까요?

// console.log(tweeks()); -- 오류 발생

var tweeks = function() {
  return "트윅스스터디의 제 2막";
};

console.log(tweeks());

위와 같이 tweeks변수에 함수를 넣어 사용하기 위한 준비를 합니다.
변수와 같이 사용이 되기 때문에 반드시 ;를 붙여주어야 합니다.


👉1.3.단점 : 호이스팅 불가

또 여기서 주의할 점은 tweeks라는 익명함수가 정의되기 전에 호출하게 된다면 에러가 발생하게 됩니다.
이는 변수를 초기화하지 않고 사용한 것과 비슷합니다.
호이스팅이 안된다고도 합니다.
이것이 일반함수와 익명함수의 차이점이라고 할 수 있죠.


🧁2. 익명함수의 화살표 표현식

👉2.1. 화살표함수란?

화살표함수란 function이라는 키워드 없이 => 를 이용해 함수를 생성하는 방법입니다.
그래서 좀 더 간결한 코드를 작성할 수 있습니다.

또 화살표 함수는 블록 스코프(scope)로 취급됩니다.
scope에 관해서는 뒤에서 더 자세히 다루겠습니다.


👉2.2. 화살표함수의 형태

화살표함수의 형태는 다음과 같습니다.

var/let/const 함수명 = (매개변수) => {실행문};
var tweeks = () => "트윅스스터디의 제 2막";

위의 예시는 매개변수가 없으므로 ()로 대신하고 실행문이 한 줄이기 때문에 {}를 생략해주었습니다.


👉2.3. 익명함수의 화살표표현식

기본적으로 화살표함수는 익명함수로만 사용할 수 있기 때문에 함수를 호출하기 위해서는 표현식으로 써야 합니다.

// 표현식 이용
var tweeks() => {
  return "트윅스스터디 제 2막";
};

👉2.4. 화살표함수를 사용할 수 없는 경우

화살표함수를 사용할 수 없는 경우는 다음과 같습니다.

  1. 객체의 메서드를 정의하는 경우
  2. prototype에 메서드를 할당하는 경우
  3. 생성자 함수로 사용하는 경우

🧁3. 즉시 실행 함수 (IIFE, Immediately Invoked Function Expression)

👉3.1. 형태

정의되자마자 즉시 실행되는 함수인 즉시 실행 함수는 다음과 같이 ()로 함수를 감싸 실행하는 문법을 사용합니다.

(function() {
  console.log("트윅스스터디 많관부!");
})();

위의 예시를 실행하게 된다면 선언과 동시에 트윅스스터디 많관부!가 출력됨을 확인할 수 있습니다.


👉3.2. 즉시실행함수에 익명함수를 사용해야 할까?

앞서 말했듯 익명함수는 따로 함수의 이름을 갖지 않고 변수에 담겨 사용되었습니다.
하지만 즉시실행함수에는 이름이 없죠.

즉시실행함수에 익명함수를 사용해야 할까? 라고 물으신다면 일단 사용은 가능하다.라고 말씀드릴 수 있겠습니다.
하지만 즉시실행함수는 선언과 동시에 호출되기 때문에 재사용이 불가능합니다.
따라서 이름을 지어주는 것이 의미가 없게 되는 것이죠.


👉3.3. 즉시실행함수 사용 이유

1. 필요없는 전역 변수의 생성을 줄일 수 있습니다.

선언과 동시에 호출되어 실행되기 때문에 한 번 사용할 변수가 있다면 즉시실행함수를 사용하는 것이 메모리 관리에 좋습니다.

2. private한 변수를 만들 수 있습니다.

즉시실행함수는 외부에서 접근할 수 없는 자체적인 스코프를 가지게 됩니다.
내부변수를 외부로부터 private하게 보호할 수 있다는 장점이 있습니다.


👉3.4. 즉시실행함수 활용

즉시실행함수는 한 번의 실행 이후 없어지므로 단 한 번의 사용에 필요한 함수에 사용됩니다.
예시로는 변수 초기화가 있습니다.

let tweeks;

(function init(page) {
    let currentPage = page;
    if (age >= 20) {
        tweeks = true;
    } else {
        tweeks = false;
    }
})(2);

console.log(tweeks); //  true
console.log(page); //  Uncaught ReferenceError: currentAge is not defined

🧁4. 변수의 scope 알아보기

👉4.1. 스코프(scope)란?

스코프는 간단히 말해 유효범위입니다.
JavaScript를 포함한 모든 프로그래밍 언어의 기본적 개념으로 확실한 이해가 필요하죠.
예제를 먼저 볼까요?

var tweeks = 2;
function season() {
  var tweeks = "트윅스";
  console.log(tweeks);
}

season();
console.log(tweeks);

이름이 같은 변수 tweeks가 중복 선언되었죠.
전역에서 변수 tweeks를 출력할 때, 함수 season()내부에서 tweeks를 출력할 때 중복된 2개의 변수 중 어떤 변수가 출력이 되어야 할까요?
어떻게 자바스크립트는 변수를 식별할까요??

scope는 참조 대상 식별자를 찾아내기 위한 규칙입니다. 자바스크립트는 이 규칙대로 식별자를 찾습니다.

위의 예제에서 전역에 선언된 tweeks변수는 어디에든 참조할 수 있지만,
함수 season()내에서 선언된 tweeks변수는 함수 season()안에서만 참조할 수 있고 함수 외부에서는 참조가 불가능합니다.

이러한 규칙을 스코프라고 부릅니다.


👉4.2. 스코프의 구분

자바스크립트에서 스코프를 구분한다면 2가지로 구분할 수 있습니다.

전역 스코프 (Global scope)지역 스코프(Local scope or Function-level scope
코드 어디에서든지 참조 가능함수 코드 블록이 만든 스코프로 함수 자신과 하위 함수에서만 참조할 수 있다.

쉽게 비유하자면 전역 변수와 지역 변수의 개념입니다.


변수는 선언 위치에 따라 스코프를 달리 가집니다.

  • 전역에서 선언된 변수는 전역 스코프를,
  • 지역(함수 내부)에서 선언된 변수는 지역 스코프를 갖는 지역 변수가 됩니다.

👉4.3. 스코프의 특징

4.3.1. 블록 레벨 스코프

자바스크립트의 스코프는 타 언어와는 다른 특징을 갖고 있습니다.

대부분의 언어는 블록 레벨 스코프 (block-level scope)를 따릅니다.
블록레벨스코프란 코드 블록 내에서만 접근이 가능해지는 스코프를 의미합니다.

if (true) {
	int x = 10;
    println(x);
}

println(x);

위의 예시는 java언어로 쓰여진 코드로 블록 레벨 스코프를 따릅니다.
if문 안에서 선언된 x변수는 블록 레벨 스코프를 따르므로 if문 밖의 println출력에 응하지 않겠죠?


4.3.2. 함수 레벨 스코프

하지만 자바스크립트는 함수 레벨 스코프 (function-level scope)를 따릅니다.
함수 레벨 스코프란 함수 코드 블록 내에서 선언된 변수는 함수 코드 블록 내에서만 유효하고 함수 외부에서는 유효하지 않는, 즉 참조할 수 없습니다.

단, let 키워드를 사용하면 블록 레벨 스코프를 사용할 수 있습니다.

var x = 0;
{
  var x = 1;
  console.log(x);	// 1
}
console.log(x);	// 1

let y = 1;
{
  let y = 0;
  console.log(y);	// 0
}
console.log(y);	// 1

위의 예제에서 var로 선언한 변수 x는 함수 레벨 스코프를 따르지만,
let으로 선언한 변수 y는 블록 레벨 스코프를 따르는 것을 알 수 있죠.


👉4.4. 전역 스코프 (Global scope)와 지역 스코프 (Local scope)

전역 스코프는 전역에 변수를 선언했을 때 가질 수 있습니다.
지역 스코프는 함수 코드 블록이 만든 스코프로 함수 자신과 하위 함수에서만 참조할 수 있습니다.

자바스크립트는 c처럼 기본적인 main()함수가 없기 때문에 전역 스코프를 갖는 전역 변수를 남발하기가 굉장히 쉽기 때문에 주의해야 합니다.

var tweeks = 2;

function fun() {
  var season = 0;
  console.log(tweeks);
  console.log(season);
}
fun();

console.log(tweeks);
console.log(season);	// Uncaught ReferenceError: local is not defined

변수 tweeks는 전역에 선언하였기 때문에 전역 스코프를 가지게 되어 어디서든 참조할 수 있습니다.
하지만 변수 season은 함수 내에 있는 지역 변수이므로 지역 스코프를 가지게 되어 참조하지 못해 console.log(season);에서 오류가 나게 됩니다.


이번 게시물에서는 자바스크립트의 좀 더 다양한 함수에 대해 알아보았습니다.

언뜻 익숙한 함수와,
익숙하지만 새로운 개념이었던 스코프,
생소했던 익명함수와 화살표표기법.

이제 자바스크립트의 함수에 대해 조금이나마 알게 된 느낌이라 굉장히 뿌듯하군요.
그럼 다음 게시물에서는 자바스크립트의 이벤트와 이벤트 리스너에 대해서 공부해보겠습니다.


profile
Haeun Noh
기록의 힘을 믿는 개발자, 노하은입니다!
이전 포스트

[JavaScript] 자바스크립트의 함수 알기 (TweeksStudy:0)

다음 포스트

[JavaScript] 이벤트와 이벤트 리스너 (TweeksStudy:0)

0개의 댓글