JavaScript 이해하기 -1

믕듀·2021년 12월 3일
0

JavaScript

목록 보기
1/4

이벤트 기반 언어 JavaScript

자바스크립트는 이벤트 기반 언어이다. 즉 명령을 수행하는 과정에 있어, 다음 명령어를 실행하기 전 이전 명령어의 응답을 기다리지 않는다.

-> 비동기 처리

CallBack

자바스크립트에서 함수는 object이다. 따라서 함수는 다른 함수의 인자로, 어떤 함수에 의해 리턴 될 수도 있다.
이러한 함수를 고차 함수(higher-order functions)라 부르고, 인자로 넘겨지는 함수를 콜백 함수(callback function)이라 한다.

즉, 콜백 함수는 다른 함수가 실행을 끝낸 뒤 실행되는 함수이다.

함수 표현식

일반적인 프로그래밍 언어의 함수 선언과 비슷한

함수 선언식(Function Declarations)

function test(){
  //logic
}

유연한 자바스크립트 언어의 특징을 활용한 선언 방식

함수 표현식(Function Expressions)

let test = function(){
  //logic
};

그럼 왜, 굳이?

함수 선언식 vs 함수 표현식

함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않는다

호이스팅(Hoisting)?

호이스팅이란, 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다.

test1();
test2();

function test1(){
	return 'test1';
}

var test2 = function () {
	return 'test2';
};

위와 같은 코드는 자바스크립트 해석기에서(parser) 다음과 같이 해석한다.
실제로 코드가 변환하는 것은 아님!!

function test1(){
	return 'test1';
}
test1();
test2();
var test2 = function () {
	return 'test2';

이때 test2 함수는 선언되어있지 않으므로 error를 호출한다. 자바스크립트 특성상 test2는 변수로 인식된다.

함수 표현식의 장점

이러한 특성을 활용하여(함수 표현식이 호이스팅에 영향을 받지 않는다) 함수 선언식보다 유용하게 쓰일 수 있다. 그 예로

  • 클로저로 활용
  • 콜백으로 활용

클로저

클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 이를 이해하기 위해서는 어떻게 변수의 유효범위를 지정하는지(Lexical scoping)를 이해해야 한다.

어휘적 범위 지정(Lexical scoping)

function init() {
      var name = "Mozilla"; // name은 init에 의해 생성된 지역 변수이다.
      function displayName() { // displayName() 은 내부 함수이며, 클로저다.
        alert(name); // 부모 함수에서 선언된 변수를 사용한다.
      }
      displayName();
    }
    init();

중첩된 함수는 외부 범위(scope)에서 선언한 변수에도 접근할 수 있다. 위의 코드를 통해 init() 함수 내에 선언된 것은 name이라는 변수와 displayName()이라는 함수이다.

이때 displayName()에서는 외부에 선언된 name 변수를 사용할 수 있다.

만약 displayName 함수 내에 name이라는 변수를 갖고 있었다면 this.name으로 접근하였을 것이다.

다른 프로그래밍 언어에서는 함수 안의 지역 변수들은 그 함수가 처리되는 동안에만 존재한다.

하지만 자바스크립트에서는 함수를 리턴할 수 있으며, 리턴하는 함수가 클로저를 형성한다. 클로저는 함수와 함수가 선언된 어휘적 환경의 조합으로 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다.

함수 표현식을 다른 함수의 인자값으로 넘기기

함수 표현식은 일반적으로 임시 변수에 저장되어 사용한다.

var logMessage = function () {
	//logic
}

함수 표현식을 임시 변수에 넣지 않고 콜백함수로 활용할 수 있다.

var logMessage = function(){
  console.log('error');
};

var logMessage = function () {
  console.log('An anonymous function');
};

$(document).ready(logMessage); // 'An anonymous function'	

참고 자료: 캡틴판교

profile
Front-End 개발자가 되는 꿈을 꾸는ing

0개의 댓글