React에 필요한 Javascript

변수와 상수

1. 변수와 상수

  • 변수는 변할 수 있는 값을 의미한다.
    • var let이 있다.
  • 상수는 변할 수 없는 값을 의미한다.
    • const가 있다.

2. var와 let,const의 차이점

  1. var (함수레벨 스코프)
    • 함수 레벨 스코프기 때문에 함수 내에서 모두 사용이 가능하다.
    • 재선언, 재할당이 가능하다.
    • 선언 전에 사용이 가능하다. (호이스팅, 실행 컨텍스트 때문)
  2. let 과 const (블록레벨 스코프)
    • 둘 다 재선언 불가.(but let은 재할당은 가능하다.)
    • 선언 전에 사용이 불가능 하다.(실행 컨텍스 때문.)
    • 호이스팅은 된다.

* 호이스팅과 실행 컨텍스트

  • 호이스팅 : 자바스크립트를 읽어올때, 당시 선언을 맨위로 끌어온다.
  • 실행 컨텍스트 : 자바스크립트 파일을 실행 전 쭉 읽어와서 실행 코드에 제공할 정보들을 모아 놓은 객체.

3. 변수와 실행 컨텍스트 _ 선언전에 사용이 가능한 이유

1. var의 실행 컨텍스트
- 변수의 선언과 초기화 과정을 한번에 한다. 따라서 초기화를 거치며 메모리를 비워 변수의 메모리를 생성시켜놓기 때문에 선언 전에 사용이 가능하다.
2. let과 const의 실행 컨텍스트
- 변수의 선언 다음 , 해당 변수가 나올때 까지 문서를 쭉읽다가 해당 변수가 나와야 초기화하며 변수의 메모리를 생성시킨다.
따라서 선언 전에 메모리에 저장소가 없기때문에 선언전에 사용이 불가능하다.
하지만 세 변수와 상수 모두 호이스팅의 과정을 거친다.

자료형

  • 자료형에는 원시형 자료형객체형 자료형이 있다.

1. 원시형 자료형

  • 원시형 자료형에는 한가지 타입의 데이터를 담을 수 있다.
  1. 숫자형(Number) : 숫자를 저장한다.
    • BigInput : 아주 큰 숫자를 저장한다.
  2. 문자형(String) : 문자열을 저장한다.
  3. 독립 자료형
    • Undefiined : 값이 할당되지 않았다.
    • Null : 값이 존재하지 않는다.
  4. 심볼형(Symbol) : 고유식별자를 만들때 사용한다.
  5. 논리형(Boolean_true,false) : 참거짓 논리 판단 할 때 사용

2. 객체 자료형

  • 객체형 자료형에는 여러가지 타입의 데이터를 담을 수 있다.
  • 객체형 자료형의 특징
  1. 여러가지 타입의 데이터를 담을 수 있다.
  2. key와 value값으로 이루어져 있다.
    • {key : value}
    • key는 문자형만 사용 가능. / value는 모든 자료형 사용 가능.
  3. 객체 생성 방법
    • 생성자(new)로 만들기 : let a = new Object();
    • 리터럴(데이터 값 바로 넣는 것)로 만들기 : let a = {};
  4. 어떤 KEY에 대응 하는 value 끌어오기
    - 배열은 해당위치 찝어서 가져오면 된다.
    - 객체 선언변수.해당key
    - 선언변수[해당key]
    ex )
    let a = {name : "정혜원"}
    ---->
    a.name = "정혜원"
    a[name] = "정혜원"
  5. 객체 안의 원소를 바꾸는 방법
    • 바꿀 부분 끌어와서 재할당 하면 된다.
      (const로 객체 선언 했으면?!)
      const가 선언될때 객체에대한 참조 형식으로 선언된다.
      따라서 참조 선언은 바꿀 수 없지만 저장된 객체는 다른 메모리에 저장 되어있기때문에 바꿀 수 있다.

함수

1. 호출이 가능한 어떤동작을 할 수 있는 객체

  • 함수의 특징
    1. 자바스크립트에서 함수는 특별한 값 취급을 한다.
      (특별한 값 : 동작이 가능한 객체 취급)
    2. 함수 만들기
      - 함수 선언식 _독립된 구문
      function func1 () { ... }
      // 선언과 동시에 메모리가 초기화되며, 함수 메모리에 박힌다
      //따라서 선언전에 사용이 가능하다.(변수 실행 컨텍스트 참고)
    • 함수 표현식 _리터럴
      <1> let func2 = function(){ ... }
      <2> let func2 = () => { .. }
      // 파일을 쭉 읽다가 해당함수를 만나야지만 메모리가 초기화되며 함수가 박히기 때문에 선언전에 사용이 불가능 하다 
    • 생성자 이용_new
      let func3 = new function(" ... ")
      //해당 함수는 함수의 태생환경 문제와 변수의 스코프 문제로 사용하지 않는 것이 좋다.
    • 함수안의 함수
      • 외부에 같은 변수명의 변수가 존재하더라도 내부변수의 사용 순위가 더 높다.
        따라서 내부 함수에서 변수를 호출하면, 내부 함수안의 선언 변수가 출력된다.

2. 콜백 함수

  • 함수를 값처럼 전달할 때, 인수로 넘겨주는 함수
    (인수를 쉽게 매개변수라 생각할 예정)
    onst playWithCat = (cat, action) => {
    	action(cat);
    }
    const useBall = (cat) => {
    	alert(cat+"과 공으로 놀아줍니다.");
    }
    //playWithCat 함수에 넘겨주는 useBall 함수가 콜백 함수입니다!
    playWithCat("perl", useBall);
   
     
    
     

좋은 웹페이지 즐겨찾기