[TIL] 2020/08/15

yongkini ·2020년 8월 15일
0

Today I Learned

목록 보기
7/173
post-thumbnail

Today, I Learned

  • 함수 호이스팅(Hoisting) : 함수의 선언 방법에는 선언식 방법과 표현식 방법이 있는데, 이 때, 선언식으로 선언했을 때는 그 함수를 선언한 위치(코드상에서)보다 앞에서도, 즉, 모든 영역에서 그 함수를 호출해서 쓸 수 있음(표현식은 변수 선언 및 할당 코드 이후에 호출가능!)[**var로 선언한 변수는 예를 들어,
    name="yongki";
    var name;
    이런식으로 해도 에러가 나지 않음! 이 경우도 호이스팅의 결과임
    ps. 되도록이면 표현식으로 함수를 선언하기를 추천(유지, 보수시에 코드 찾기도 어렵고, 복잡해짐)
  • First-class Object(일급객체) = 함수의 특징 : value(값)으로 취급되는 특성을 지녔기에, 변수로 할당할 수 있고, 인자로 받을 수 있으며, 리턴값으로 해줄 수 도 있음! => 함수도 객체처럼 프로퍼티를 가질 수 있음!(+함수 변수도 모든 객체가 그러하듯이 변수에 참조값을 할당함)=>함수는 배열, 객체 등에 넣는 값과 같이 취급하기
  • [함수의 종류]
    • 콜백함수(call-back) : 함수의 인자로 호출하는 함수 혹은 이벤트 핸들러에 의해 호출되는 함수 등을 말함
    • 즉시 실행함수 : 라이브러리 등을 호출하고 쓸 때 쓰는 함수로 함수 내의 변수에는 var로 설정하는 경우 접근할 수 없다는 점을 이용해 한번 선언하고, 실행하고 다시는 호출 못하도록 할 때 씀. '(새로 생성할 함수)(매개변수)' 형태로 쓴다는 것 기억!
  • 스코프 개념 복습 : 나만의 이해법 : 스코프는 일종의 함수 개인주의이다. 함수를 한명의 사람이라고 생각해보면, 각각의 사람들에게는 내면의 것들이 있다. 이 때, 사람끼리는(함수끼리는) 서로를 호출하고 소통할 수 있지만, 그 사람의 내면까지는 직접적으로 접촉할 수 없다(변수도 일종의 사람이라고 생각! 외부에 있는 변수에는 접근 가능하므로).
  • 클로저 개념 복습 : 클로저는 리턴값으로 오는 함수임과 동시에 && 부모 함수 스코프에 있는 변수를 받아와서 쓰는 함수이다. 예를 들어,
    부모함수 let parent = parent();
    부모함수가 리턴하는 함수 let closure = parent();
    그리고 이 함수 안에는 부모 스코프 속의 변수를 참조함
    개인적인 생각으로 클로저의 활용법 : 부모 스코프 안에 고정값을 변수로 넣어놓고, 예를 들어, 이번 년도 재산세 세율 등을 넣어놓고, 그 부모 함수가 리턴하는 자식 함수에서 '그 누진세 변수 * 자식 함수에서 받은 인자(재산)'를 리턴하도록 하면, 고정된 누진세율은 건들 수 없고, 개인의 재산만 다르게 입력할 수 있는 일종의 함수(프로그램)을 만들 수 있지 않을까
  • 부모 스코프 안에 있는 함수에는 접근할 수 없지만, 부모를 통해서는 접근이 가능함! => 함수를 리턴하는 함수=고차함수 => 클로저가 되기도함
  • 함수 스코프 개념과 관련하여 나만의 철학적 표현 : 본질(내부, 스코프)은 껍데기(함수)를 통해서만 어깨너머로 볼 수 있을 뿐. 아무도 다른 사람, 다른 것(thing)의 본질을 직접적으로 접할 수 없다.
  • Arguments 객체 : 함수를 호출하고, 인자를 넣으면 arguments 객체가 자동으로 생성되며, 이 객체는 Array-like(유사배열 객체)이다. 따라서, 0,1,2,.. 순서대로 인자를 유사배열 형태로 '키: 값' 형태로 저장하고, 배열처럼 length(인자 개수) 속성을가지고, callee('함수명()') 속성을 가진다. 그래서 함수 스코프 내에서 이 arguments 객체를 자유롭게 쓸 수 있다.
  • 메서드 !== 함수 : 메서드는 객체의 프로퍼티가 함수일 때 그 함수를 메서드라고 한다(in Javascript).
  • window 객체(전역 객체)
  • bind와 this :
    • 먼저, bind를 나는 인터스텔라의 도킹과 같은 '연결'과 같은 의미로 생각할 것이다. 그럼 this는 ? this는 함수의 호출 방식에 따라 도킹하는(bind하는) 객체가 다르다. 먼저, 함수가 생성자 함수일 때, 그 스코프 안의 this는 생성자 함수가 만들어내는 빈 객체를 바인드한다(물론, 제대로 말해보면, 완전히 텅 빈 객체는 아니긴하다. Object.prototype의 속성을 상속받은 빈객체라고 해야겠다).
    • 일반 함수에서 this는 전역객체인 window객체를 가리킨다(바인드한다). 그래서 일반 함수에서 this를 쓰면, 예를 들어, this.value = 'window'; 하면 window객체의 value 프로퍼티가 생기게 된다.(**우리가 global scope에 만드는 모든 변수들은 사실 window객체의 프로퍼티가 된다)
    • 다음으로, 메서드로 불리는 함수에서 this를 쓰면, 그 메서드를 호출한 객체를 바인드한다.
  • 생성자 함수 vs 일반 함수 : 둘의 명확한 구분은 없다. 따라서, 개발자가 직접 앞글자를 대문자로(생성자 함수) 구분해주고, 호출시에 생성자 함수는 new 연산자로, 일반 함수와는 다르게 호출해줘야한다. 이 때, 생성자 함수는 앞서 말했듯이, 스코프의 로직을 실행하기 전에 빈 객체를 생성하며, 디폴트 리턴값으로 그 빈객체를 리턴한다(프로퍼티가 채워졌다면 채워진 채로). 이에 반해, 함수는 undefined를 디폴트로 리턴한다. 그래서, 둘을 헷갈리면 에러가 발 생할 수 있다. 생성자 함수를 일반 함수 호출하듯이 호출하면, 안의 this는 자연스럽게 window객체를 바인드하고, 그 역의 상황에서는 스코프 내에서 생성된 객체를 바인드하게 되므로!
  • 디버깅 관련 나만의 정보들 : 1) NaN이 나오면 undefined와 연관된 것이 아닐까 생각해보자 2)자바스크립트는 리턴값, 입력값이 없어도 자동으로 undefined를 채워넣는 습성(?)이 있다 => 예를 들어, 인자값에 따라 뭔가를 설정해줘야한다면? 오늘 배운 arguments.length를 통해서 컨트롤이 가능함!

Planning to Study

  • 자바스크립트 객체지향부분까지 복습
profile
완벽함 보다는 최선의 결과를 위해 끊임없이 노력하는 개발자

0개의 댓글