기초부터 완성까지 프런트엔드 4장, 타입 변환과 함수

논리 연산자

const b = 'javascript';
const c = 1;

console.log(b || c); // 'javascript'

4.1.2 함수란 무엇인가?

함수는 객체의 특별한 형태이며 문(statement)으로 구성된 몸체를 가진 하나의 실행 단위이다.

자바스크립트의 함수는 일급 함수(first-class function) 로서 다른 함수의 매개변수나 반환 값으로도 사용할 수 있다.

다른 함수의 인자로 넘어가는 함수를 콜백 함수 라고 부른다.
가장 대표적인 예로는 DOM에 이벤트를 추가하는 addEventListener() 함수가 있다.

button.addEventListener

4.2.2.1 함수 선언문

• 함수의 이름이 반드시 정의되어야 한다.
• 호이스팅(hoisting) 으로 인해 함수가 선언된 위치에서 코드의 최상단으로 끌어올려진다. 따라서 함수는 선언된 위치보다 상단에서 호출될 수 있다.

4.2.2.2. 함수 표현식

• 함수 표현식은 함수 선언문과 달리 함수 이름이 선택 사항 이며, 변수에 함수를 직접 할당한다.
• 이름이 없는 익명 함수 표현식과 이름이 있는 기명 표현식으로 나뉜다.
• 기명 표현식은 주로 함수 표현식을 재귀적으로 호출할 때 사용한다
• 함수 표현식은 호이스팅이 되지 않는다.

해체 할당과 매개변수 기본 값

매개변수 해체 할당은 객체와 배열 모두 가능 하며 프로퍼티가 없는 변수는 undefined를 할당 받는다

4.2.3.2 arguments

화살표 함수를 제외한 모든 함수 에서 arguments라는 객체를 사용할 수 있다.

• arguments객체를 사용하여 함수에 실제로 전달된 인자들을 참조할 수 있다.
• 유사 배열 객체이기 때문에, 인덱스 로 프로퍼티에 접근할 수 있고, length 프로퍼티를 가지고 있다.
• ES2015에서 등장한 나머지 매개변수 로 대체할 수 있다.
• 나머지 매개변수는 유사배열 객체가 아닌 진짜 배열이기 때문에 인자들을 배열로 다루고 싶은 경우 유용하게 사용 가능하다.

4.2.4.1 화살표 함수의 특징

• arguments 객체와 this를 바인딩하지 않기 때문에 기존 함수와는 다르게 동작한다.
• 나머지 매개변수를 사용하여 arguments 객체를 대체할 수 있다.

4.2.5. this

• this는 읽기 전용 값으로 런타임 시 설정할 수 없으며, 함수를 호출한 방법에 의해 값이 달라진다.

4.2.5.1. 일반 함수

• 전역 실행 컨텍스트에서의 this는 항상 전역 객체 를 참조한다.
  • 전역 실행 컨텍스트는 자바스크립트 엔진이 코드를 실행할 때 처음으로 생성되는 컨텍스트이다.
• 전역 객체는 브라우저 환경에서 js 실행 시, window 객체가 전역 객체가 되고, Node.js 환경에서 실행 시 global 객체가 전역 객체가 된다.

4.2.5.2. 생성자 함수

new 키워드를 사용하여 함수를 호출하면 생성자 함수로 동작한다. 생성자 함수의 this 바인딩은 일반 함수 호출과는 다르게 동작한다.

생성자 함수를 호출하여 객체를 생성 하였다. 생성자 함수를 호출하여 객체가 생성될 때 아래와 같은 단계로 동작한다.

1. 객체를 생성하여 this에 바인딩

   • 생성자 함수 내의 코드를 실행하기 전에 객체를 만들어 this에 바인딩한다
   • 생성된 객체는 생성자 함수의 prototype 프로퍼티 에 해당하는 객체를 프로토타입([[Prototype]])으로 설정한다.

2. 프로퍼티 생성

• this에 바인딩한 객체에 프로퍼티를 생성한다

3. 객체 반환

• 생성된 객체, this에 바인딩한 객체를 반환한다. 또한 반환 값을 따로 명시하지 않아도 this에 바인딩한 객체가 반환된다.
• 다만, this가 아닌 다른 반환 값을 명시적으로 지정하였다면 this가 아닌 해당 값이 반환된다.

생성자 함수 호출 시 객체가 생성되는 과정과 함께 this 바인딩이 어떻게 되는지 알아보았다. 이러한 과정은 반드시 new 키워드와 함께 생성자 함수를 호출한 경우에만 실행된다.

4.2.5.3. 메서드

자바스크립트에서는 객체의 프로퍼티인 함수를 일반 함수와 구분하여 메서드라고 부르며, this 바인딩도 일반 함수와는 다르게 동작한다. 메서드를 호출하면 this는 해당 메서드를 소유하는 객체로 바인딩된다.

여기서 중요한 것은 메서드를 어떻게 호출했느냐에 따라 this 바인딩이 달라진다 는 것이다.

함수의 컨텍스트가 어디에 속하는지 알 수 없다. 이 경우 this는 전역 객체를 참조하거나 엄격 모드인 경우에는 undefined로 남아 있게 된다.

4.2.5.4. call(), apply() 와 bind()

일반 함수, 메서드, 생성자 함수의 예시를 보며 js 가 내부적으로 this를 어떻게 바인딩 하는지 알아보았다.

자바스크립트에서는 함수의 내장 메서드인 call, apply, bind 메서드를 이용하여 this로 바인딩될 객체를 변경할 수 있다. 이러한 방법을 명시적 바인딩 이라고 부른다.

call()

• 어떤 함수를 다른 객체의 메서드처럼 호출할 수 있게 한다.
• 두 메서드는 넘겨받는 인자의 형식만 다를 뿐 this를 특정 객체에 바인딩하여 함수를 호출하는 역할 을 한다.
• call() 메서드는 첫 번째 인자로 this로 바인딩할 객체를 지정한다.
• call 메서드를 통해 호출하는 함수로 인자를 전달할 수도 있다.
• call() 메서드의 첫 번째 인자 이후의 인자들은 모두 호출하는 함수로 전달된다.

apply()

• call() 메서드와 동일하지만 호출하는 함수에 전달할 인자들을 배열 형태로 전달해야 한다.

bind()

• call 과 apply 메서드와 두 가지 차이점이 있다
• bind 메서드는 함수의 this 바인딩을 영구적으로 변경한다. 단, 생성자 함수로 사용되는 경우는 예외이다.
• bind 메서드로 this가 변경된 함수는 call, apply 또는 다른 bind 메서드를 사용해도 this 바인딩을 변경할 수 없다.
• this를 바인딩하여 함수를 호출하는 것이 아니라 새로운 함수를 반환한다.
• bind 메서드는 함수가 어디서 어떻게 호출되는지에 상관없이 this를 고정하고 싶을 때 사용한다.
• bind 메서드는 this 뿐만 아니라 함수에 전달할 인자도 고정시킬 수 있다.
• call, apply 메서드를 사용하여 this를 변경해야 하는 경우 bind 메서드로 this를 고정한다면 문제가 될 수 있으니 주의하자.

4.2.5.5. 화살표 함수와 렉시컬 this

화살표 함수는 this를 바인딩하지 않는다. 그렇기 때문에 이전의 this 바인딩 규칙과는 완전히 다르게 동작한다.

렉시컬 this

• 함수를 어디에 선언하는지에 따라 this의 값이 결정된다.
• 화살표 함수의 this는 화살표 함수를 둘러싸고 있는 렉시컬 스코프에서 this의 값을 받아 사용한다.
  • 이러한 this를 렉시컬 this 라고 하며, 이 값은 변경되지 않는다.
• 렉시컬 스코프 는 자바스크립트 엔진이 변수를 찾는 검색 방식에 대한 규칙이며, 함수를 어디에 선언했는지에 따라 결정된다.

화살표 함수의 특징

• 화살표 함수는 this를 따로 바인딩하지 않고 변경되지 않는 렉시컬 this를 갖는다. 이러한 특징 때문에 화살표 함수의 this는 call, apply, bind 함수를 사용하여 변경할 수 없다.
• 화살표 함수는 생성자 함수로도 사용할 수 없다.
  • 생성자 함수는 객체를 생성하여 this에 바인딩하지만, 화살표 함수는 렉시컬 this의 특징 때문에 이러한 동작을 할 수 없다.
• setTimeout() 함수 내에서 실행되는 콜백 함수의 this는 전역 객체로 바인딩된다.
• DOM에 이벤트를 추가하는 addEventListener() 함수에서는 화살표 함수를 주의해서 사용해야 한다.
• 일반 함수를 addEventListener() 함수의 콜백으로 넘긴 경우 this는 event.currentTarget 프로퍼티와 동일한 값을 가진다. 하지만 화살표 함수를 사용하는 경우에는 렉시컬 this로 동작이 완전히 달라지기 때문에 this를 통해 요소에 접근할 수 없다.

4.3. 정리하기

this 바인딩은 함수 호출에 따른 컨텍스트에 따라 달라지며 call(), apply(), bind()와 같은 메서드를 사용하여 변경할 수 있다.

단, ES2015에서 등장한 화살표 함수는 이전의 함수 선언문, 함수 표현식과는 다르게 렉시컬 this 를 가지기 때문에 생성자 함수로 사용할 수 없으며, this 바인딩을 변경할 수 없다.