추가 - JeongWu/fe-javascript GitHub Wiki

  • null 값 조건
(!a&&typeof a==="object");
  • undefined "값이 없는" "선언되지 않는"
  • 임의로 지정한 변수 에러 안나려면
if(DEBUG){}//에러
if(typeof DEBUG !== "undefined"){}

var atob//호이스팅 (전역 변수사용 할 때)-> window 객체 
if(typeof atob !== "undefined"){}
  • 문자배열-> 문자열:join
  • 배열의 사본 : slice()
  • 암시적 형변환
var a=42;
var b=a+"", //암시적 강제변환: 문자열이 우선순위가 더 높다
var c= String(a); //명시적

a.toString과 차이점: toString을 쓰면서 암시적으로 String 래퍼로 박싱한 후 메서드 호출됨!(암시적임)

  • == === 차이점: ==는 강제변환 허용 /비허용
  • 비교 할 때
if(a==true) //X
if(!!a) //o
  • null undefined if(a==null) //null과 undefined 모두 동일한 값으로 취급
  • 연산자 우선순위 && > || > ?:
  • {} 블록, 객체 리터럴, 해레 할당...
  • LHS RHS LHS: 변수에 값을 대입
    • RHS: 변수의 값을 얻어오는 것 -> 참조 대상을 찾지 못하면 ReferenceError 발생
  • 함수 표현식 즉시 호출(IIFE)
var a=2;
(function foo(){
var a=3;
console.log(a); //3
})();
console.log(a); //2
  • let : 호이스팅 X, const-> 고정
  • join() 메서드는 배열의 모든 요소를 연결해 하나의 문자열
  • slice() 메서드는 어떤 배열의 begin부터 end까지에 대한 얕은 복사본을 새로운 배열 객체로 반환 -> slice(2)이면 앞에 2개 자름
  • arguments는 함수에 들어온 인자를 배열형식으로 반환하는 유사 배열 -> 배열 메소드 사용 불가하기 때문에 call, apply로 조작
  • call, apply의 첫번쨰 인자는 this
  • call
function update(birthYear, occupation){
        this.birthYear = birthYear;
        this.occupation = occupation;
    };

    update.call(bruce, 1949, 'singer'); // bruce 변경
    /*
        bruce는 이제
        {
            name : 'Bruce',
            birthYear : 1949,
            occupation : 'singer'
        }
        로 변경됨
     */

    update.call(madeline, 1942, 'actress'); // madeline 변경
    /*
        madeline은 이제
        {
            name : 'Madeline',
            birthYear : 1942,
            occupation : 'actress'
        }
        로 변경됨
     */
  • apply
update.apply(bruce, [1955, 'actor']);
    /*
        bruce는 이제
        {
            name : 'Bruce',
            birthYear : 1955,
            occupation : 'actor'
        }
        로 변경됨
     */

    update.apply(madeline, [1918, 'writer']);
    /*
        madeline은 이제
        {
            name : 'Madeline',
            birthYear : 1918,
            occupation : 'writer'
        }
        로 변경됨
     */

: apply는 배열 요소를 함수 매개변수로 사용해야 할 때 유용 ex) Math.min과 Math.max

const arr = [2,3,-5,15,7];

    Math.min.apply(null, arr); // -5 //this와 관계 없이 동작하기 때문에 null넘겨줌
    Math.max.apply(null, arr); // 15
  • bind: bind를 사용하면 함수의 this값을 영구히 바꿀 수 있다. bind에 매개변수를 넘기면 항상 그 매개변수를 받으면서 호출되는 새 함수를 만드는 효과
  • call, apply는 그냥 함수가 실행되도록 "도와"주는 것. bind는 "새로운 함수를 "만들어"쥼.
const updateBruce1949 = update.bind(bruce, 1949); updateBruce1949("singer, songwriter");
    /*
     bruce 는 이제 {
         name: "Bruce",
         birthYear: 1949,
         occupation: "singer, songwriter"
     }
    */
//bruce가 태어난 해를 항상 1949로 고정하지만, 직업은 자유롭게 바꿀 수 있는 업데이트 함수
  • call은 함수를 빌려오거나 프로퍼티를 가져 올 수 있다
    • Array.prototype.slice.calll/apply (obj/arguments)
    • 일반 리터럴 객체/arguments에는 배열 메서드가 없다. 없는 것을 호출 할 수는 없다.
    • Array.prototype을 호출(call)하면 Array Object에 접근할 수 있다. 이를 통해 배열 메서드를 사용 할수 있음
  • callback 함수
var o = {
    data : 'dummy',
    time : function(){
            window.setTimeout(function(){ //window. 생략 가능
              console.log('this -->', this); // window 객체
              console.log(this.data);}, 1000) // undefined
              // callback 함수 setTimeout() 안에서의 this는 window 객체를 카르킨다.
     }
}

o.time(); // window 객체, undefined
  • callback 함수 내의 this가 window 객체를 가르키는 문제 해결방법 1)
var o = {
    data : 'dummy',
    time : function(){
      var that = this;
      window.setTimeout(function(){
      	console.log(that.data);}, 1000)
        // scope로 인하여 that은 외부 변수 that을 가져온다.
    }
}

o.time(); // 'dummy'
  • callback 함수 내의 this가 window 객체를 가르키는 문제 해결방법 2)
    bind 함수
var o = {
    data : 'dummy',
    time : function(){
      window.setTimeout(function(){
      console.log(this.data);
      }.bind(this), 1000)}
    // 니가 실행될 때, 니가 가르킬 this는 인자를 가르키도록 실행 해! (저장)
    // bind()는 apply(), call()과는 다르게 바로 실행되지 않는다.
}

o.time(); // 'dummy'
  • setTimeout()
    • setTimeout(0)이라고 해서 즉시 실행되지 않음. 읽힌 후 다음 프레임에 실행됨
    • setTimeout이 var i의 scope를 가져감 i를 바인딩하는 것이 아닌 var i를 참조
    • let i로 하면 블록 안에서 바인딩이 됨.
for(var i=1;i<=5;i++){
    setTimeout(function timer(){
     console.log(i);
        },i*1000);

}
  • concat() 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환
  • literal: 코드상에서 데이터를 표현하는 방식 객체 리터럴:{} (new Object 사용하지 않고 정의) 배열 리터럴:[] (new Array 사용하지 않고 정의)
  • this Java에서의 this는 인스턴스 자신(self)을 가리키는 참조변수 자바스크립트의 경우 함수 호출 방식에 의해 this에 바인딩할 어떤 객체가 동적으로 결정

함수 호출 방식

  • 함수 호출
    : 일반 함수, 메소드, 콜백함수 어디에서 선언되었든 관게없이 this는 전역객체를 바인딩
  • 메소드 호출
    : 해당 메소드를 소유한 객체, 즉 해당 메소드를 호출한 객체에 바인딩
  • 생성자 함수 호출
    : new 연산자를 붙여서 호출하면 해당 함수는 생성자 함수로 동작
  • {} 객체 리터럴 방식과 생성자 함수 차이
  • 객체 리터럴 방식의 경우, 생성된 객체의 프로토타입 객체는 Object.prototype이다.
  • 생성자 함수 방식의 경우, 생성된 객체의 프로토타입 객체는 Person.prototype이다
  • apply/call/bind 호출 (명시적으로 바인딩) 내부함수는 일반 함수, 메소드, 콜백함수 어디에서 선언되었든 관게없이 this는 전역객체를 바인딩
  • call, apply, bind
    • apply() 메소드는 this를 특정 객체에 바인딩할 뿐 본질적인 기능은 함수 호출 callback.call(this);
    • bind()는 함수를 실행하지 않기 때문에 명시적으로 함수를 호출할 필요 callback.bind(this)();
  • React
const AOrDib=true?'a':'div'
export default ()=> <AOrDiv>안녕</AOrDiv>
  • component가 render되는 때
    • mount
    • props/state 변경
    • context 변경
  • components
    • $r 현재 접근
    • $0 루트 접근(정보 받아올 수 있음)
  • profiler 성능 추적
  • react: virtual dom 기반
    외부 library-> dom virtual dom은 변경인지하지 못함 -> ref 사용
  • 내부적-> context API 사용
    중앙에서 데이터 관리 useContext를 통해 피요한 부분 끌어다가 사용 . 그걸 사용하기 편하게 Redux, Mobx
⚠️ **GitHub.com Fallback** ⚠️