React : JavaScript Let, Const, Arrow function

1. React를 사용할 때 기본적으로 알아야 할 요소들이 있는데, let, const, arrow function은 필수적이다.

 

2. const, let은 es6에서 적용된 선언타입으로 사실 특별하게 바뀐 것이 없다.

  2-1 const, let으로 선언된 변수는 hoist가 되지 않는다.

  2-2 같은 레벨에서는 같은 이름의 변수를 중복으로 사용할 수 없다. var은 그 덮어 써지지만 let, const는 에러발생한다.

  2-3 블록 레벨이기 때문에 if, for 같은 블록 내에서 선언되는 경우는 외부에서 참조하지 못한다.

  2-4 아래와 같은 방식으로 변하지 않는 것은 const, 값이 변하는 것은 let을 사용하여 접근범위를 고려하여 선언한다.

    2-4-1 아래의 if 안에 존재하는 firstname 변수는 var, const, let를 사용하여 재지정이 가능하지만(블록이 다르다)

    2-4-2 var만 console.log를 실행시 오류가 발생하지 않고 나머지 2가지 경우는 오류가 발생한다.(접근 영역문제)

    2-4-3 두번째 줄 firstname 변수를 삭제하고 if 변수 내에서 var, const, let 지정하는 경우 var만 정상 동작한다.

 

const fullname = 'John Doe'
let firstname = ''

if (fullname) {
  firstname = fullname.split(' ')[0]
}

console.log('firstname', firstname);

 

3. arrow function의 경우는 object 생성, 클래스와 밀접한 관련이 있다.

  3-1 arrow function은 익명으로 정의되고 재사용을 위해서는 변수에 저장해야 한다.

  3-2 객체 안에서 메소드를 정의할 경우에 메소드 내에서 다양한 기능을 처리하기 위하여 사용된다.

  3-3 arrow function 없이 메소드 구현하기

    3-3-1 아래의 코드는 가장 일반적으로 구현한 객체의 메소드이다.

    3-3-2 forEach에 사용된 함수는 function 내부의 this와 바인드되기 때문에 this.name을 사용할 수 없다.

      3-3-2-1 이론적으로는 내부의 this와 바인드 되어야 하지만 실제는 global의 this와 바이딩된다. (언어설계오류)

    3-3-3 별도의 변수, 여기서는 that이라는 변수를 선언하여 this가 override되는 것을 피하는 방법으로 구현할 수 있다.

    3-3-4 arrow 함수의 this는 자신이 속하는 객체를 지정하므로 arrow함수를 사용할 경우 that을 사용하지 않아도 된다.

 

const user = {
  name: 'pilseong',
  visited: ['Seoul', 'SeongNam', 'Jeju'],
  
  printVisitedPlaces: function() {

    const that = this

    console.log(this.name)
    console.log(this.visited);

    this.visited.forEach(function(place) {
      console.log(that.name + ' has visited in ' + place)
    })
  }
}

user.printVisitedPlaces()

 

    3-3-5 결과 화면

 

 

  3-4 arrow함수를 사용한 경우

    3-4-1 arrow 함수의 내부는 자신이 속한 user객체를 참조하므로 name, visited를 this로 접근할 수 있다.

    3-4-2 결과는 위의 소스와 동일하다.

 

const user = {
  name: 'pilseong',
  visited: ['Seoul', 'SeongNam', 'Jeju'],
  
  printVisitedPlaces: function() {

    // const that = this

    console.log(this.name)
    console.log(this.visited);

    // this.visited.forEach(function(place) {
    //   console.log(that.name + ' has visited in ' + place)
    // })

    this.visited.forEach(place => console.log(this.name + ' has visited in ' + place ))
  }
}

user.printVisitedPlaces()

 

  3-5 객체 내에서 es6 메소드 정의 방법

    3-5-1 es6에서는 아래처럼 간단한 형식의 메소드 지정 방식을 허용하고 있다.

      3-5-1-1 특수한 메소드 정의이기 때문에 보이는 대로 생각하면 안된다. 함수인데 범위는 속성이라고 생각하면 된다.

    3-5-2 es6 방식의 메소드를 객체에서 정의할 때는 절대로 arrow 함수를 쓰면 안된다.

      3-5-2-1- arrow함수를 사용할 경우는 this는 user를 포함하는 global을 지정하게 된다.

 

const user = {
  name: 'pilseong',
  visited: ['Seoul', 'SeongNam', 'Jeju'],
  
  // printVisitedPlaces: function() {
  // printvisitedPlace = () => { --> 사용하면 안된다.
  printVisitedPlaces() {

    // const that = this

    console.log(this.name)
    console.log(this.visited);

    // this.visited.forEach(function(place) {
    //   console.log(that.name + ' has visited in ' + place)
    // })

    this.visited.forEach(place => console.log(this.name + ' has visited in ' + place ))
  }
}

user.printVisitedPlaces()

 

  3-6 상황에 따라 적절한 스코프를 참조할 수 있도록 작성하는 것이 중요하다.