하면서 헷갈렸던부분 다시 정리 ::배열, 생성자, 프로토타입, 화살표함수, this

🐢나도다만들고싶다·2020년 11월 27일

자바스크립트

📛 new Array( ) vs [ ]

new Array( ) : new 연산자를 이용한 Array 객체 생성
[ ] : 배열 리터럴을 이용하여 선언

💡 생성자 new Array( ) 대신 [ ]을 사용하는 것이 좋다.

인자를 1개 Number만 전달하는 경우
new Array는 배열의 크기로 인식하기 때문에 하나의 숫자만 넣은 배열을 만들 수 없음
[ ]의 실행 속도가 더 빠름 && 더 직관적, 일관적임

주의사항!!
초기화할 때 마지막 요소의 끝에 ,를 넣지않도록 유의

reference

https://withhsunny.tistory.com/71
https://zerodice0.tistory.com/202

📛 constructor ?? prototype ????

생성자(constructor) 함수는 객체를 생성하는 함수.

대문자로 시작.
new 연산자로 호출
this는 자기 자신을 가리키기 때문에 인수로 받아온 값을 this.name= 인수; 로 활용하고,
new를 통해 객체를 생성할 때 저장된 값을 새 객체에 적용하여 사용

prototype 객체는 생성자 함수에 정의한 모든 객체가 공유할 원형 객체 == 즉, 원래의 모습 !!

같은 생성자로부터 만들어진 객체들은 모두 이 원형 객체를 공유함🌟
target.prototype.name= 인수 로 사용

💡 contructor(this.sayHello)보다 prototype(Person.prototype.sayHello)으로 넣는게 더 효율적

프로토타입은 모든 객체가 공유하고 있어 한 번만 만들어짐.
그러나 this에 넣은 것은 객체 하나를 만들 때마다 메소드도 매번 만들어지기때문에 불필요한 메모리 낭비 발생..
메소드 뿐만 아니라 속성까지 다 prototype에 넣도록 하쟈 ㄱㄱ

reference

https://www.zerocho.com/category/JavaScript/post/573c2acf91575c17008ad2fc

📛 ( ) => { }

화살표 함수는
함수를 선언하기 위해 사용하는 function 키워드의 축약형.

파라미터를 1개만 받는 경우 괄호 생략가능
const print = text => {
console.log(text);
}
간단한 표현식은 return 생략가능
const sum = (a, b) => (a + b)
화살표함수는 this를 바인딩 하지 않아도 제대로 가리킴

reference

https://hudi.kr/es6-문법으로-다시-시작하는-자바스크립트/

📛 this가 가리키는 것🤔

this는 함수 실행 문맥 (Context) 에 따라 달라짐

function Foo() {

  /* 케이스1 */
  this.func1 = function() {
    console.log(this); // this === Foo
    
    var func2 = function() {
      console.log(this); // this === Window (global)
    }
    func2();
  }
  
  /* 케이스2 */
  this.func3 = function() {
    console.log(this); // this === Foo
    var that = this; // that === Foo
    
    var func4 = function() {
      console.log(that); // that === Foo
    }
    func4();
  }
  
  /* 케이스3 */
  this.func5 = function() {
    console.log(this); // this === Foo
  
    var func6 = () => {
      console.log(this); // this === Foo
    }
    func6();
}

var foo = new Foo();
foo.func1();
foo.func3();
foo.func5();

케이스1.
func1은 메소드 실행 문맥이라 this는 Foo로 받지만,
func2는 함수 실행 문맥이라 this는 window객체(전역객체)로 할당

케이스2.
that 이라는 변수를 선언하고, 새로운 this 가 바인딩 되기전 this 를 할당시킴.
그럼 메소드 실행 단계의 this의 값 Foo를 변수that이 가지게 됨

케이스3.
화살표함수는 새로운 this를 바인딩 하지 않아도 올바르게 작동하는 것을 이용.
화살표함수의 this는 동일한 객체를 가리킨다