TIR: 완벽가이드 1-2. 코어자바스크립트 함수(1)- 220702

Lumpen·2022년 7월 2일
0

TIR

목록 보기
14/40

함수

함수는 한 번 정의하면 계속 재사용, 호출할 수 있는 자바스크립트 코드 블록이다

함수 정의에는 매개변수, 형식 인자라고 불리는 식별자 목록이 포함될 수 있고, 함수 몸체 내에서 지역 변수처럼 취급된다

함수 호출시에는 함수의 매개변수에게 값(실 인자 - arguments) 들을 제공한다
이 반환 값은 함수 호출 표현식의 결과 값이 된다
호출에는 전달 인자 외에도 호출 컨텍스트가 포함되는데
this 키워드의 값이 해당 컨텍스트

어떤 객체의 프로퍼티에 할당된 함수는 메소드라 한다
함수를 객체의 대상으로, 또는 객체를 통해 호출하면 객체는 해당 함수의 호출 컨텍스트 - this 값이 된다
새로 생성된 객체를 초기화하는데 쓰이는 함수는 생성자(constructor)라고 한다

자바스크립트의 함수는 객체이고 프로그램 안에서 조작할 수 있다
함수를 변수에 할당하거나, 다른 함수의 인자로 전달할 수 있다
함수는 객체이기 때문에, 프로퍼티를 지정하거나 함수의 메소드를 호출할 수도 있다

다른 함수 내에 중첩되어 정의될 수 있고, 중첩된 함수는 해당 함수가 정의된 유효범위 내의 어떤 변수도 접근 가능하다
이는 자바스크립트 함수가 클로저이며, 클로저가 가능하게 하는 프로그래밍 기법을 구사할 수 있음을 뜻한다

함수 이름과 선언문, 표현식

함수 이름은 유효한 자바스크립트 식별자라면 모두 가능
함수 표현식에서 함수 이름은 옵션이다
함수 선언문이 실제로 하는 일은 변수를 정의하고 함수 객체를 변수에 할당하는 것
반면에 함수 표현식은 변수를 정의하지 않는다
재귀함수와 같이 자신의 이름을 참조할 때는 이름을 사용,
사용된 함수의 이름은 함수 이름이 해당 함수의 지역변수가 되는 것과 같다
함수 표현식으로 정의된 함수 대부분은 함수 이름이 필요하지 않고 함수를 더 단순히 정의할 수 있다

함수 선언문은 호이스팅이 일어난다
때문에 정의된 위치보다 위에서 사용 가능
표현식으로 정의된 함수는 변수에 할당되기 전까지는 참조할 수 없다

함수의 return문의 정의되어 있지 않다면 undefined 반환
리턴 값이 없는 함수를 가끔 프로시저 라고 부르기도 한다

중첩 함수

중첩 함수가 흥미로운 점은 유효범위 (scope) 규칙이다
중첩된 함수는 해당 함수가 속한 함수의 매개변수에 접근할 수 있다

함수 선언문은 진짜 문장이 아니다
ECMAScript는 함수 선언문을 최상위 레벨에만 두도록 규정한다
전역 코드나 다른 함수에서는 선언문이 등장할 수 있지만,
반복문, 조건문 등에는 들어갈 수 없다
표현식은 어디에서나 사용 가능

함수 호출

함수는 호출되지 않으면 실행되지 않는다
함수를 실행하는 4가지 방법

  • 일반적인 함수 형태
  • 메소드 형태
  • 생성자
  • call(), apply() 메소드를 통한 간접 호출

일반적인 함수 호출

일반적인 함수 호출에서 함수 호출의 값은 해당 함수의 반환 값이다
this는 기본적으로 전역 객체를 가리키지만
엄격 모드에서 호출 컨텍스트(this)는 undefined
ES6 부터 기본 엄격모드였던 것 같은데..

메소드로 호출

객체의 프로퍼티 접근 표현식에 함수 표현식이 결합된 형태로 호출
메소드로 호출시 일반 함수 호출과 다른점은 호출 컨텍스트 (this)다
this는 함수가 속해있는 객체를 가리키게 된다

메소드 체이닝

메소드가 객체를 반환하면 메소드의 반환 값을 후속 호출의 일부로 사용할 수 있다

메소드 사용 시 반환할 값이 없다면 this를 반환하는 것을 고려해봐야한다
메소드 체이닝은 객체의 이름을 한 번만 사용하고 메소드를 이어서 여러번 사용할 수 있다

shape.setX(100).setY(100).setSize(50)

this

this는 키워드로, 프로퍼티 이름이 아니다
this에 값을 직접 할당하는 것은 허용되지 않는다
this에는 유효 범위가 없고, 중첩 함수의 경우에는 호출자의 this 값을 상속하지 않는다
중첩 함수가 메소드 형태로 호출되면, 호출된 함수의 this 값은
그 함수의 호출 대상 객체가 된다.
중첩 함수에서 내부 함수가 외부 함수의 this에 접근하고 싶다면
this 값을 별도로 저장하거나, this 바인딩 메소드를 사용

this 값을 별도로 저장 시에는 self 라는 이름으로
외부 함수의 변수에 this를 저장하여 내부 함수에서 사용

cosnt a = {
  aa: function() {
  	const self = this; 
    function b() {
    	console.log(this); // 전역 객체 또는 undefined
      	console.log(self); // 외부 함수의 this 
    }
  }
}

생성자 호출

함수나 메소드 호출 앞에 new 키워드가 있다면 그 것은 생성자 호출이다
생성자 호출은 매개변수와 호출 컨텍스트, 반환 값을 다루는 방식이 다르다

전달 인자가 없다면 호출 시 괄호 생략이 가능하다

생성자 호출 시 생성자의 prototype 프로퍼티를 상속받은 새로운 빈 객체를 생성한다
생성자 함수는 객체를 초기화하고, 해당 객체는 생성자 함수의 호출 컨텍스트가 된다

생성자 호출이 메소드 호출 처럼 보이더라도 메소드가 속한 객체가 아닌 새로 생성된 객체가 호출 컨텍스트가 된다는 점을 꼭 기억해야 한다

new o.m() // this가 o를 가리키지 않고 새로 생성되는 빈 객체르 가리키게 됨

생성자 호출은 return을 사용하지 않는다
생성자 함수는 객체를 초기화 하고 암시적으로 해당 객체를 반환한다
새 객체가 생성자 호출 표현식의 값이 된다

만약 명시적으로 return을 사용하여 어떤 객체를 반환한다면
반환된 객체가 생성자 호출 표현식의 값이 된다

반환 값이 없거나 기본 자료형을 반환한다면, 해당 반환 값은 무시되고 새로 생성된 객체가 호출 표현식의 값으로 사용된다

profile
떠돌이 생활을 하는. 실업자는 아니지만, 부랑 생활을 하는

0개의 댓글