• 자바스크립트 엔진의 구현 알고리즘을 설며하기 위한 의사 프로퍼티, 의사 메서드

• 형태

  • [[~~]] 감싼 이름들이 내부 슬롯과 내부 메서드

• 자바스크립트 엔진 내부 로직이기 때문에 직접적인 접근과 호출 방법은 제공 하지않고 간접적인 접근만을 허용한다

프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체

프로퍼티 어트리뷰트

• 프로퍼티를 생성할 때 프로퍼티 상태를 나타냄

• 프로퍼티 상태: 값:[[value]], 값의갱신여부:[[writable]], 열거가능여부:[[enumerable]], 재정의 가능 여부:[[configurable]]

  간접적인 참조

• Object.getOwnPropertyDescripter(객체의참조, 프로퍼티키) 메서드

• 프로퍼티 디스크립터 객체 반환: 프로퍼티 어트리뷰트 정보 제공, 정의되지 않았다면 undefined 반환

• Object.getOwnPropertyDescripters 메서드는 모든 프로퍼티의 프로퍼티 어트리뷰트 정보를 제공

데이터 프로퍼티와 접근자 프로퍼티

• 데이터 프로퍼티: 키와 값으로 구성된 일반적인 프로퍼티
• 접근자 프로퍼티: 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 호출

  데이터 프로퍼티

• 프로퍼티 어트리뷰트

  [[value]] value: 프로퍼티 키를 통해 값에 접근하면 반환되는
                 변경하면 [[value]] 재할당
                 없으면 동적 생성하고 [[value]]에 값 저장
  [[writable]] writable: 값의 변경 가능 여부(불리언값), false일 경우 읽기전용 프로퍼티
  [[enumerable]] enumerable: 열거 가능 여부(불리언값), false 열거 불가능
  [[configurable]] configurable: 재정의 가능 여부(불리언값), false 삭제, 프로퍼티 어트리뷰트 값 변경 불가 
                        [[writable]]이 true이면 [[value]]의 변경과 [[writable]]을 false로 변경 허용

  접근자 프로퍼티

  [[get]], get: 값을 읽을 때 호출되는 접근자 함수 
              getter함수 호출 -> 프로퍼티 값 반환
  [[set]], set: 값의 저장 호출 접근자 함수
              setter함수 호출 -> 프로퍼티 값 저장
  [[enumerable]] enumerable
  [[configurable]] configurable  동일

  const person = {
  firstName: 'Ungmo',
  lastName: 'lee',
  

// get동작 // 프로퍼티 키의 유효성 체크 // 프로토타입 테입에서 프로퍼티 검색 // 데이터, 접근자 프로퍼티인지 확인 // getter 함수를 호출하고 그 값 반환 get fullName(){ return `${this.firstName} ${this.lastName}'; }, set fullName(){ [this.firstName, this.lastName] = name.split(' '); } };

## 프로퍼티 정의
- 새로운 프로퍼티를 추가 하면서 프로퍼티 어트리뷰트를 명시적 정의, 기존 프로퍼티 어트리뷰트 재정의 

Object.defineProperty(객체의 참조, 프로퍼티키, 디스크립터 객체(프로퍼티 어트리뷰트 값)) Object.defineProperties: 여러 개 정의

//프로퍼티 디스크립터 객채의 기본 값 undefined(value, get, set) false(writable, enumerable, configurable)

## 객체 변경 방지
- 확장금지
  - 프로퍼티 추가 금지
  - Object.preventExtensions 메서드 
  - Object.isExtensible 메서드로 확인
- 객체밀봉
  - 프로퍼티 추가 및 삭제와 재정의 금지, 읽기 쓰기만 가능
  - Object.seal 메서드
  - Object.isSealed 메서드로 확인
- 객체동결
  - 추가및 삭제와 재정의 금지, 읽기만 가능
  - Object.freeze 메서드
  - Object.isFrozen 메서드로 확인
- 불변객체
  - 위의 것들은 얕은 변경방지로 중첩 객체에 영향을 주지 않는다
  - 재귀적으로 해야 전체적으로 가능하다 

변수중복선언 허용

• 중복이 가능

    var a= 50;
    var b =3;
    var b; // 초기화가 없으면 무시 됨 
    var a =100;
    console.log(a,b);//100, 3

  함수 레벨 스코프

• 함수 코드 블록만 지역 변수로 인정

  for(var a =0; a<n; a++){} // a는 전역변수

  변수 호이스팅

• var 키워드는 undefined로 초기화 된 상태에서 호이스팅이 가능하다
• 가독성이 떨어지며 쓸데없다

let 키워드

변수중복선언 금지

• 문법 에러

  블록 레벨 스코프

• 모든 코드 블록을 지역 스코프로 인정

  변수 호이스팅

• var는 선언과 초기화가 한번에 발생
• let은 선언, 초기화 분리 진행
  • 런타임 이전에 선언되지만 초기화는 선언문에 도달했을 때 실행(일시적 사각지대)
  • 선언문 이전 참조시 에러 발생

    console.log(a); //undefined 
    var a = 20;
    

console.log(a); //error let a = 30;

```

전역객체와 let

• var -> 전역객체 window의 프로퍼티
• let -> 전역객체의 프로퍼티가 아님 -> 보이지 않는 개념적인 블록 내에 존재

const 키워드

• 상수의 선언

  선언과 초기화

• 선언과 동시에 초기화 해야한다
• 블록 레벨 스코프, let과 같이 변수 호이스팅이 발생하지 않는 것처럼 동작

  재할당 금지

• 상수이기 때문에

  상수

• 상태 유지와 가독성, 유지보수의 편의를 위해 적극적으로 활용
• 잘 변하지 않으며 그 값이 의미하는 바를 시사할 수 있다
• 대문자로 이름 설정, 단어가 많으면 _ 사용

  const 키워드와 객체

• 참조 값은 변경되지 않지만 재할당 없이 값을 변경할 수 있기 때문에 값은 변경이 가능하다

var vs let vs const

• let -> 재할당
• const -> 고정

지역변수의 생명주기

• 함수 생명 주기
  • 생명주기: 참조하고 있는지 아닌지의 여부에 따라 결정된다
• 필요성
  • 생명주기가 없다면 한번 선언된 변수는 종료 이전까지 영원히 메모리 공간을 점유

    전역변수의 생명주기

• 전역객체의 생명주기와 같다
  • 전역객체: 코드 실행 전에 자바스크립트 엔진에 의해 가장 먼저 생성되는 객체(window)

    전역변수의 문제점

    암묵적 결합

  • 모든 코드가 전역변수를 참조하고 변경 허용
  • 가독성이 나빠짐
  • 의도치 않게 상태 변경

    긴 생명주기

• 메모리 리소스 오래 소비

  스코프체인 상에서 종점에 존재

• 검색 속도가 가장 느리다

  네임 스페이스 오염

• 파일이 분리되어 있다 해도 하나의 전역 스코프를 공유
• 이름이 같아 예상치 못 한 결과를 초래한다

  전역 변수의 사용을 억제하는 방법

  즉시 실행 함수

• 함수 정의와 동시에 호출되며 단 한번만 호출
• 모든 코드를 즉시 실행 함수로 감싸면 모든 변수는 실행 함수의 지역변수

  (function(){
   let a=3;
  }());

  네임 스페이스 객체

• 전역변수처럼 사용하고 싶은 변수를 프로퍼티로 추가
• 객체를 프로퍼티로 추가해서 계층적으로 구성할 수 있다
• 네임 스페이스 객체 자체가 전역변수에 할당되므로 유용하지 않다

  let name ={};
  name.person ={name:'lee'};

  모듈패턴

• 클래스를 모방해서 관련있는 변수와 함수를 모아 즉시 실행 함수로 감싸 하나의 모듈형성

• 스코프 = 식별자 유효범위

  • 모든 식별자는 자신이 선언된 위치에 따라 유효 범위가 결정된다
  • 폴더와 같은 역할을 수행(위치가 서로 다르기 때문에 같은 이름이여도 상관이 없다)

    스코프의 종류

    전역과 전역스코프

• 어디서든지 참조 가능

• 전역: 전역스코프 형성

• 전역변수: 전역스코프의 변수

  지역과 지역스코프

• var 태그 함수 몸체 내부(함수레벨스코프)

• let, const 태그 블록 단위(블록레벨스코프)

  • var는 함수 내부를 제외하면 모든 변수가 전역변수

  • let, const 모든 블록 단위안의 변수는 지역변수

    //var
    function a(){
        var b=0; // 지역변수
    }
    for(var a=0; ;) // a 전역변수
    
    //let const
    function b(){
        let c=0; //지역변수
    }
    for(let b=0; ;)// 지역변수

• 지역: 지역스코프 형성

• 지역변수: 지역스코프의 변수

• 지역변수는 자신의 지역스코프와 하위 지역스코프에서 유효

스코프체인

• 스코프가 함수의 중첩에 의해 계층적구조를 갖는 것

• 스코프의 계층: 스코프체인

• 계층

  • inner 지역스코프 -> outer 지역스코프 -> 전역스코프

  • 모든 지역 스코프의 최상위는 전역스코프이다

    // inner 지역스코프에서 변수 x를 찾음 없다면
    // 상위스코프로 이동하며 찾는다 
    // 전역변수로 구현이 되있다면 그만큼이 시간이 소비된다
    
    //전역
    let x =3;
    //outer 지역스코프
    function a(){
    //inner 지역스코프
     function b(){
       console.log(x); 
     }
    }

    렉시컬 스코프

• 동적스코프

  • 함수를 어디서 호출했는지에 따라 상위 스코프가 결정

• 렉시컬스코프(정적스코프)

  • 함수 정의가 평가되는 시점에 상위 스코프를 결정

• 일련의 과정을 하나의 실행 단위로 정의

    function add(x,y){
         return x+y; 
    } // 코드블록이기 때문에 ;생략 

  함수 리터럴

• 객체타입의 값이기 때문에 가능

  • 객체타입의 값(?)
    • 원시타입과 달리 식별자가 함수 객체의 주소 값을 참조하기 때문에

      //add 이름-> 식별자, 몸체 내에서만 사용 가능 
      // 이름이 있다 -> 기명함수
      // 없다 -> 익명함수
      var a = function add(x,y){
      return x+y;
      };  // 값이므로 ;을 붙임

• 일반객체와 다른점

  • 객체는 호출이 안되지만 함수는 호출 가능

    함수의 정의

  • 함수 선언문이 평가될 때 함수 이름과 동일한 식별자가 암묵적으로 생성되고 함수 객체 할당

    // 1. 함수 평가: 함수와 동일한 이름의 식별자 생성
    // 2. 함수 객체 할당: 함수 객체가 들어있는 메모리의 주소를 동일한 이름의 식별자가 참조한다
    function a(){
    ~~~~~~
    }

    함수 선언문

• 함수리터럴과 형태가 동일

    //선언문
    function a(){
        ~~
    }
  
    //리터럴 표현식 
    //()그룹연산자에 의해 피연사자 되어 값으로써 사용이 된다
   (function a(){});

  함수 표현식

• 리터럴로 생성한 함수를 변수에 저장한 형태

• 함수는 일급객체이다

  • 값으로써 사용이 가능한 객체

• 함수리터럴은 이름을 생략하는 익명함수 형태가 일반적이다

  • 변수에 할당되는 값이므로 식별자가 임으로 생성되지않는다
    • 즉, 함수 내부에서만 사용이 가능한 식별자를 쓸 필요가 없다

      var a = function(){};

• 차이점

  • 선언문: 표현식이 아닌 문
  • 표현식: 표현식인 문

    정리

    함수리터럴: 값으로써의 함수 선언문: 기명함수, 값이 아닌 문 표현식: 함수리터럴을 변수에 저장해서 사용, 값인 문

함수생성 시점과 함수 호이스팅

• 선언문

  • 런타임 이전에 생성

    • 함수 객체 생성, 식별자 암묵적으로 생성, 함수 객체 주소 값 할당

  • 호이스팅

    • 호출이 어디서든 가능하다
    • 런타임 이전에 이미 함수 객체가 생성되었기 때문에 가능하다

  • 변수 호이스팅과의 차이점

    • 변수: undefined로 초기화만 이루어짐
    • 함수: 함수 객체의 주소가 할당된 상태

      console.log(a()); // 1
      console.log(b); // undefined
      

    // 런타임 이전에 생성및 할당이 이루어짐 function a(){

    return 1;

    } // 런타임 이전에 생성되고 undefined로 초기화된 상태 let b = 3; ```

• 표현식

  • 변수 호이스팅이 발생
  • 변수에 할당되는 형태이기 때문에

    // 변수 a 생성
     // undefined로 초기화
    console.log(a()) // undefined 
    var a  = function(){~~~~};

• 생성자함수

  • 객체를 생성하는 함수
  • 함수 생산으로는 일반적으로 사용하지않음

    var a = new function(~~~);

• 화살표 함수

  • function 키워드 대신 => 사용하여 간략적
  • 항상 익명함수
  • 내부 동작도 간략
    • 생성자 함수로 사용할 수 없음
    • this 바인딩 방식이 다름
    • prototype, arguments가 없음

      const a = (x,y) =>x+y;
      console.log(a(2,5))  // 7

      함수호출

      매개변수와 인수

  • 함수를 실행하기 위해 필요한 값을 함수 외부에서 내부로 전달
  • 함수호출 -> 매개변수생성(undefined초기화) -> 인수할당
  • 인수 개수를 체크하지않음
    • 부족하면 undefined의 값으로 사용
    • 많으면 argument객체의 프로퍼티로 보관

      function a (매개변수){}
      a(인수);

      인수확인

• 문제점

  • 타입이 정적으로 정의되지 않음
  • 개수를 확인하지 않는다

• 해결

  • 매개변수 기본값 설정
    • undefined로 사용되지 않게 하려고
  • 타입스크립트와 같은 정적 타입 사용

    매개변수 최대개수

• 문제점

  • 많을수록 이해하기 복잡
  • 함수는 한가지의 일을 수행
  • 3개를 권장 넘을경우 객체에 담아 전달

    반환문

• return키워드 + 표현식(반환값)

• 값 생략(undefined 반환)

• 역할

  • 결과를 함수 외부에 반환
  • 함수의 실행 종료

    참조에 의한 전달과 외부 상태의 변경

• 매개변수 인수의 타입에 따라 방식이 달라짐

  • 원시값: 값의 복사

    • 변경 불가능한 값 -> 재할당을 통해 할당

  • 객체: 주소값의 전달

    • 참조하여 변경이 가능
    • 상태의 추적이 어려움
    • 순수함수를 사용
      • 외부상태를 변경하지 않고 외부상태에 영향을 받지않는 함수

    let a = 1; const b ={

    c=2

    }; // 원시타입 = 1이 다른 메모리에 재할당 된 후 변수에 할당 // 객체 = 참조값인 주소 값을 전달하기 때문에 값에 직접적인 접근이 가능 // 객체는 불변성의 특성을 갖지 않는다 function c(a,b){

    a=3;
      b.c =4;

    } c(a,b); console.log(a,b.c); //1, 4 ```

    다양한 함수의 형태

    즉시 실행 함수

  • 정의와 동시에 호출

  • 단 한 번만 호출

  • 익명 함수

    (function(~~~){}());

재귀함수

• 자기자신을 호출하는 것

  중첩함수(내부함수)

• 함수내부에서 정의

• 헬퍼함수: 외부함수를 돕는 역할

• 외부함수: 중첩 함수를 포함

    function outer(){
      function inner(){
      }
     inner();      
    }
    outer();

  콜백함수

• 인수로 함수가 전달된 것

• 교차함수: 함수의 외부에서 콜백함수를 전달받은 함수

• 공통 로직을 정의 경우에 따라 변화는 로직은 함수 외부에서 함수 내부로 전달

  • 반복적으로 사용되는 부분은 따로 정의하고 수행에 따라 값이 달라지는 함수들은 밖에서 정의한다

    function repeat(n,f){
        for(let i =0; i<n; i++){
            f(i);
        }
    }
    var logAll = function(i){
        console.log(i);
    };
    
    repeat(5,logAll);

• 고차함수 내부에만 호출된다면 익명 함수 리터럴로 정의

• 고차함수 호출 때마다 생성

    repeat(5, function(i){
           if(i%2) console.log(i);
    });

• 다른 곳에서도 사용이 된다면 외부에 정의

• 생성은 한번 -> 고차함수가 호출 될 때마다 콜백 함수 생성

순수함수 비순수함수

• 순수함수
  • 부수 효과 없는 함수: 외부 상태에 의존하거나 변경 하지 않음
• 비순수함수
  • 부수 효과가 있는 함수: 외부 상태 의존, 변경

let count =0;
 //순수함수
function increaseA(n){ return ++n;}
//비순수함수
function increaseB(){ return ++count;}

// 재할당 반환
count = increaseA(count);
// 변경
increaseB();

• 변경 불가능한 값
  • 한번 생성된 원시값은 읽기전용 값으로 변경이 불가능
  • 값 변경 방식
    • 불변성
      • 새로운 메모리에 값을 저장하고 이 주소값을 식별자에 할당

        // a -> undefined 주소값 할당 
        // a -> 30의 주소값 할당 
        // a -> 40의 주소값 할당 
        var a = 30;
        a= 40;

• 문자열과 불변성
  • 1개의 문자는 2바이트의 메모리 공간을 갖음
    • 문자의 갯수가 늘어날 수록 크기가 늘어남
  • 문자열 타입 -> 원시타입
  • 유사배열객체
    • 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있고 length 프로퍼티를 갖음
    • 하지만 문자열 타입은 원시타입이므로 값을 직접적으로 변경할 수 없다

      var s = "string";
      s = "Hello";
      console.log(s[0]); // H
      s[0] = 'a'; //  변경되지않음
      console.log(s) // Hello

• 값에 의한 전달

    // s는 값의 표현식으로 인식 0
    // 0은 새로운 메모리에 저장
    // 이를 a에 할당 
    var s = 0 ;
    var a = s ; 

  객체

• 변경 가능한 값
  • 참조 타입의 값
  • 식별자는 참조값을 값으로 갖는다 이를 참조하여 값에 직접적으로 접근할 수 있다
    • 참조값: 생성된 객체가 저장된 메모리 공간의 주소
    • 이를 변수가 객체를 참조하고 있다 말한다

      var a = {
        age:30    
      };
      a -> {age:30}의 주소값을 갖음 

• 참조에의한 전달
  • 여러개의 식별자가 하나의 객체를 공유
  • 참조하고 있는 주소값을

    var a = {....};
    var b = a;
    // 이때 서로 다른 메모리에 따로 주소값을 갖기 때문에 값에 의한 전달과 같다 
    a-> {...}의 주소값
    b-> {...}의 주소값
    
    

```

• 프로퍼티의 집합

  • 키 : 값

• 함수프로퍼티 = 메서드

    var person = {
      last: 20,
      plus(){
          this.last = this.last+1;
      }
    };

  객체 생성

• new 생성자 함수

  • 인스턴스 생성 방식

    • 인스턴스: 객체가 메모리에 저장되어 실제로 존재되어 지는 상태

      function Person() ={
        a:1
      }
      

    var personOne = new Person();

- 객체 리터럴
  - 리터럴: 약속된 기호를 사용하여 값을 생성하는 표기법 
  ```javascript
    // 블록이 아닌 평가식이기 때문에 ; 사용
    var name = {};

객체 접근

• 대괄호

  • 유효한 이름이 아닐 때 사용, 키의 이름이 숫자 일 경우 ''없이 사용가능

• 마침표 표기법

  • 일반적으로 사용

    var person = {
       a:3,
        1:1,
        //자바스크립트에서 사용할 수 있는 표현식이 아닐경우 ''필요 
    // pre-number는 pre, number 식별자의 -연산으로 인식
        'pre-number':23
    }
    console.log(name['pre-number']); // 23
    console.log(name[1]);    // 1 
    console.log(name.a);   // 1 

    프로퍼티 값 편집

  • 값 갱신

    person.a = 4;
    console.log(person.a); //4

  • 동적생성

    person.b = 3;
    console.log(person.b); //3

  • 삭제

    delete person.b;
    console.log(person); //{a:'4',~~~}

    프로퍼티 축약

    var a=1,b=2;
    

  var c ={ // a:a, b:b 키와 값으로 사용되는 변수의 이름이 같을 경우 생략가능
  a,b }

템플릿 리터럴

• 백틱을 사용하여 표현
• 런타임에 일반 문자열로 변환
• 이스케이프 시퀀스를 사용하여 줄바꿈을 수행 → 템플릿 리터럴은 이스케이프 시퀀스를 사용하지 않고도 적용이 가능하다

// 일반
var template = '<ul>\n\t<li>
<a href ="#">Home</a></li>\n<ul>';

// 템플릿 리터럴
var template= `<ul>
   <li><a href="#">home</a></li>
</ul>`;

템플릿 리터럴 표현식 삽입

• 결과가 문자열이 아니여도 강제로 변환

  console.log(`1+2 = ${1+2}`) // 1+2 = ${1+2}
  // '1+2 = ${1+2}' 

  7장

  비교 연산자

• 동등비교

  • ==
  • 데이터 타입을 강제로 형 변환하여 똑같은 상태에서 값을 비교

    var a = 3;
    var b = '3';
    

  console.log(a==b); //true // b-> int -> 3 ```

• 일치비교

  • ===
  • 데이터 타입을 그대로 두고 비쇼

    console.log(a==b); //false

• Obejct.is

  • NaN이나 -0, +0에 대한 정확한 비교를 위해 사용

    Object.is(a,b); 

    지수 연산자

• 5 ** 3

  • 밑 = 5
  • 지수 = 3

• (-4) ** 3

  • 음수를 밑으로 사용할떄

• Math.pow()

  • 여러번 사용할 때 가독성을 높일 때 이용

8장

레이블 문

• 블록문에 식별자를 붙인 형태
• 흐름을 제어할 때 사용
  • 흐름을 방해할 수 있기 때문에 잘 사용하지 않는다

    //보통 
    a{
    ~~~~~~
    break a;
    }

    9장

    옵셔널 체이닝 연산자

  • ?.
• 좌항 피연사자의 값이 null undefined일 경우 undefined반환 아닐경우 우항 프로퍼티 반환
• 객체를 가리키기를 기대하는 변수가 null인지 undefined인지 확익할 때 유용
• 논리 연사자를 사용할 경우 false를 대체할 수 있는 표현식일 경우 null undefined가 아님에도 프로퍼티를 참조할 수 없다

  // 옵셔널 체이닝 연산자
  let a = null;
  let b = a?.b; // undefined
  

let c = ''; let d = c?.length; // 0

//논리 연산 let e = c && c.length; // '' // 단축평가로 c=''할당된다

### null 병합 연산자
- ??
  - 좌항의 피연사자가 null undefined 일 경우 우항 피연사자를 반환 
```javascript
    var foo = null ?? 'dede';
    // dede

하나의 컴포넌트에 선언되어 있는 변수, 객체 등의 값들을 다른 컴포넌트에게 전달할 수 있게 해준다

  import React, {useState} from 'react';

  function App(){

    let title = '이번달';
    //destructuring ['1월','2월','3월'],setState(?); 
    let [day, setDay] = useState(['1월', '2월', '3월']);

    return(
           // props로 전달할 값 설정
         <Prc title={title} day ={day} color='red' />   
      );
  }

// 객체의 프로퍼티처럼 사용
 function Prc(props){
      <div>
     <h1 style ={[color='red']}>props.title</h1>
     <span>props.day[0]</span>
    </div>
 }

값을 직접적으로 접근할 수 없는 것

• 원시타입에 값을 할당하는 방식으로 말할 수 있다
  • 원시타입이란
    • 기본적으로 제공되는 Boolean, String, Number, Null, undefined, Symbol와 같은 타입을 말한다

예시)

var x;
x= 3;

1. var x = undefined
2. x = 3;

• 런타임 이전에 var x가 등록이 되고 값은 undefined로 초기화 된다

  • 렉시컬 환경의 환경 스코프에 등록이 되며 이러한 과정을 평가 과정이라 한다

• 평가가 끝나고 코드가 실행되면 x에 3이 할당된다

  • 이때 undefined가 존재하는 메모리에 직접적으로 접근하는 것이 아니라 새로운 메모리 공간에 3을 저장하고 x에 할당한다

• 이에 반하여 자바스크립트 참조타입은 불변성을 제공하지 않는다

예시)자바스크립트

  var array = [1,2,3];
  var abc = array;
  abc[0]= abc[0]+1;
  console.log(array,abc) // [2,2,3], [2,2,3]

• 자바스크립트는 위와 같이 두 배열이 하나의 메모리 주소를 참조하고 있기 때문에 abc의 값을 바꾸면 array의 값도 변경되어 출력된다

for 대신 사용가능한 반복문

• 기본 형태

  배열.map(function(배열데이터,인덱스 번호){})
  

//인덱스 개수만큼 반복 // 3번 반복 { [a,b,c].map(function(d,n){ console.log(d) // a,b,c console.log(n) //0,1,2

  return "def" //배열 값을 변경 
              //[def,def,def]
              //태그 값을 넣으면 태그값이 출력

}) }

html ui를 하나의 function 처럼 만들어서 저장하는 형태

• 기본적으로 있는 App도 component 문법으로 만들어졌다
• 만드는법
  • 아래와 같이 function 식별자 이름의 첫 글자라를 대문자로 하며 위치는 다른 함수 밖에 위치한다
  • return으로 작성할 html문을 감싼다
  • 여러 개의 section을 만들지 않고 하나의 공간만을 구현
• 사용 경우
  • 반복적으로 사용할 경우
  • 큰 페이지들을 담을 경우
  • 자주 변경되는 ui들을 담는다
• 단점
  • 함수로 구분되어 있기 때문에 각 스코프에 위치해 있는 변수들을 같이 사용할 수 없다

//사용법
    <Abc></Abc>
    <Abc/>

   function Abc(){

    return (<div>
       abc
    </div>)
   }

//단점
    function App(){
      let a =4;
        return(~~~~)
    }

    function Bpp(){
        return(
          <div>{a}</div> // error
        )
    }

• 기능은 변수와 같다

  import React, {useState} from 'react';
  // 내장 함수를 사용하겠다 선언 
  // useState() = state를 하나 만들어주는 함수 
  //배열이나 객체도 저장이 가능하다 = ([]) ({})
  // 인덱스 번호로 사용이 가능하다 useState[0]
  useState('저장할 데이터'); 
  // [a,b] 자료 => a=저장할 데이터, b= 변경 데이터
  //변수 지정
  // destructuring 문법
  // var [a,b] = ['a','b']; => a=a b=b
  // b= a변경 함수
  let [a,b] = useState(0);
  b(a+1); // a = 1 

• 사용 이유와 목적

  • 웹 앱처럼 사용하기 위해
    • 그냥 변수는 새로고침을 해주어야 렌더링이 되지만 state는 변경시 자동으로 렌더링된다
  • 변경이 많은 데이터나 중요한 데이터를 설정할 때 사용

    State array/object 값 변경

• 변경 조건

  • 똑같은 주소를 반인딩하면 변하지 않는다

  • 즉 아래와 같은 경우로 변경을 시도하면 똑같은 값으로 보고 변경을 수행하지 않는다

    //a,b,c는 메로리의 특정한 공간에 할당
    //a는 식별자로 a,b,c가 저장되어 있는
    // 메모리의 주소를 참조한다
    // 즉 메모리의 이름
    let a = ['a','b','c'];
    let b = a;
    console.log(a==b); // true 
    

- 해결 법 
  - 전개구문
    - 새로운 공간에 값을 복사하여 할당하는 방식
```jsx
    b = [...a];
    console.log(a==b) //false

1. HTML 대신 사용

• class 대신 className으로 작성한다

  <div className='abc'><div>

2. 데이터 바인딩 쉽게 가능하다

   • 원래 데이터 바인딩을 하는 경우

     //html파일
     <div class='abc'></div>
     //js파일
     let abc =document.queryselector('.abc');
     let n = 3;
     abc.innerText = n;

• jsx로 데이터 바인딩
  • {}에 변수명, 함수명, 이미지 import 등 대부분 집어넣어 데이터 바인딩이 가능하다

    // 바로 바인딩이 가능 
    import img from './img.svg';
    let n =3;
    

function example(){ console.log('h'); } // 기존 src ='./img.svg';

```

객체의 동작을 나타내는 메서드는 자신이 속한 객체의 프로퍼티를 참조하고 변경할 수 있어야 한다

• 위와 같은 특성을 해결하기 위해 제공되는 자기 참조 변수
  • 자기 참조 변수 = 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 변수

함수 호출 방식과 this 바인딩

this 바인딩은 함수가 어떻게 호출되었는지에 따라 동적으로 결정된다

일반 함수 호출

• this = window(전역 객체가 바인딩)
• 일반 함수로 호출될 시 모든 this는 전역 객체가 바인딩된다

  function foo(){
  console.log("foo's this: ", this); // window
  function bar(){
     console.log("bar's this: ", this); //window
  }
  bar();
  }
  foo();

  • 문제점
  • 메서드 내에서 정의한 중첩 함수 또는 메서드에게 전달한 콜백 함수가 일반 함수로 호출될 때 this가 전역 객체를 바인딩되는 문제가 있다
    • 이런 문제는 헬퍼 함수로써의 역할을 수행하지 못하게 된다

      //해결책
      // this를 다른 변수에 할당하여 사용
      // 다른 방법으로는 Function.prototype 메서드인 apply, call, bind를 이용하여 간접적으로 this의 바인딩을 설정하는 방법이 있다 이는 뒤에서 설명
      var value = 1;
      

const obj ={ value: 100, foo() { const that = this;

  setTimeout(function(){
    console.log(that.value); //100
  },100);
}

} }; obj.foo();

### 메서드 호출
- 메서드 내부의 this는 메서드를 소유한 객체가 아닌 메서드를 호출한 객체에 바인딩된다
  - 이러한 특징을 보이는 이유는 객체에 정의된 메서드 프로퍼티는 사실 프로퍼티가 함수 객체를 가리키고 있을 뿐이기 때문이다
  - 프로토타입 메서드도 똑같이 바인딩된다 
```javascript
//이유 예제
const person ={
     name: 'lee';
  // getname 프로퍼티 -> return this.name 역할을 하는 함수 객체를 가리키고 있다(바인딩)
      getNmae() {
        return this.name;
    }

};
console.log(person.getName()); //lee

//작동 에제
const anotherPerson ={
  name:'Kim';
};

anotherPerson.getName = person.getName;
//메서드를 호출하는 객체 = anotherPerson
console.log(anotherPerson.getName()); //Kim

const getName = person.getName;
//일반 함수로 호출  = window 전역 객체
console.log(getName()); //''

생성자 함수 호출

• 생성자 함수가 생성할 인스턴스가 바인딩된다

  function Circle(radius){
    this.radius = radius;
      this.getDiameter = function (){
      return 2 * this.radius;
    };
  }
  

const circle1 = new Circle(5); const circle2 = new Circle(10);

console.log(circle1.getDiameter()); //10 console.log(circle2.getDiameter()); //20

### Function.prototype. apply/call/bind 메서드에 의한 간접 호출
> Function.prototype의 메서드이기 때문에 모든 함수가 상속받아 사용할 수 있다 

### apply, call 메서드
- 첫 번째 인수로 전달한 특정 객체를 호출한 함수의 this에 바인딩 하다
- 둘의 차이점은 두 번째 인수로 전달하는 인수들을 나열하는 방식에 있다
```javascript
function getThisBinding(){
    console.log(arguments);
    return this;
}

const thisArg = {a:1};
// 두 번째 인수 전달 방식이 다르다
console.log(getThisBinding.apply(thisArg, [1,2,3]));
// Arguments(3) [1,2,3]
// {a:1}
console.log(getThisBinding.call(thisArg, 1,2,3))
//Arguments(3) [1,2,3]
//{a:1}

• 대표적인 용도(배열에서 다시 볼 예정이다)

  • Arguments 객체를 배열로 변환하여 사용할 경우

    function convertArgsToArray(){
    console.log(arguments);
    // call == apply
    // Array.prototype.slice를 인수 없이 호출하면 배열의 복사본을 생성
    const arr = Array.prototype.slice.call(arguments);
    

  console.log(arr);

  return arr;

} convertArgsToArray(1,2,3); // [1,2,3]

### bind
- apply,call 메서드와 달리 함수를 호출하지 않고 this로 사용할 객체만 전달

```javascript
function getThisBinding(){
     return this; 
}

const thisArg = {a:1};

console.log(getThisBinding.bind(thisArg)); //getThisBinding
console.log(getThisBinding.bind(thisArg)()); // {a:1} 명시적 호출

• 용도
  • 위에서 이야기 했던 일반 함수의 호출의 문제점을 해결하는데 사용된다
    • 중첩 함수와 콜백 함수가 일반 함수로써 호출이 되면 this가 전역 객체에 바인딩되는 문제

      const person={
      name: 'Lee',
      foo(callback){
      setTimeout(callback.bind(this), 100); 
      }
      };
      

person.foo(function(){ console.log(Hi! my name is ${this.name}.); // Hi! my name is Lee. });