React에 필요한 Javascript
변수와 상수
1. 변수와 상수
- 변수는 변할 수 있는 값을 의미한다.
- var 와 let이 있다.
- 상수는 변할 수 없는 값을 의미한다.
- const가 있다.
2. var와 let,const의 차이점
- var (함수레벨 스코프)
- 함수 레벨 스코프기 때문에 함수 내에서 모두 사용이 가능하다.
- 재선언, 재할당이 가능하다.
- 선언 전에 사용이 가능하다. (호이스팅, 실행 컨텍스트 때문)
- let 과 const (블록레벨 스코프)
- 둘 다 재선언 불가.(but let은 재할당은 가능하다.)
- 선언 전에 사용이 불가능 하다.(실행 컨텍스 때문.)
- 호이스팅은 된다.
* 호이스팅과 실행 컨텍스트
- 호이스팅 : 자바스크립트를 읽어올때, 당시 선언을 맨위로 끌어온다.
- 실행 컨텍스트 : 자바스크립트 파일을 실행 전 쭉 읽어와서 실행 코드에 제공할 정보들을 모아 놓은 객체.
3. 변수와 실행 컨텍스트 _ 선언전에 사용이 가능한 이유
1. var의 실행 컨텍스트
- 변수의 선언과 초기화 과정을 한번에 한다. 따라서 초기화를 거치며 메모리를 비워 변수의 메모리를 생성시켜놓기 때문에 선언 전에 사용이 가능하다.
2. let과 const의 실행 컨텍스트
- 변수의 선언 다음 , 해당 변수가 나올때 까지 문서를 쭉읽다가 해당 변수가 나와야 초기화하며 변수의 메모리를 생성시킨다.
따라서 선언 전에 메모리에 저장소가 없기때문에 선언전에 사용이 불가능하다.
하지만 세 변수와 상수 모두 호이스팅의 과정을 거친다.
자료형
- 자료형에는 원시형 자료형과 객체형 자료형이 있다.
1. 원시형 자료형
- 원시형 자료형에는 한가지 타입의 데이터를 담을 수 있다.
- 숫자형(Number) : 숫자를 저장한다.
- BigInput : 아주 큰 숫자를 저장한다.
- 문자형(String) : 문자열을 저장한다.
- 독립 자료형
- Undefiined : 값이 할당되지 않았다.
- Null : 값이 존재하지 않는다.
- 심볼형(Symbol) : 고유식별자를 만들때 사용한다.
- 논리형(Boolean_true,false) : 참거짓 논리 판단 할 때 사용
2. 객체 자료형
- 객체형 자료형에는 여러가지 타입의 데이터를 담을 수 있다.
- 객체형 자료형의 특징
- 여러가지 타입의 데이터를 담을 수 있다.
- key와 value값으로 이루어져 있다.
- {key : value}
- key는 문자형만 사용 가능. / value는 모든 자료형 사용 가능.
- 객체 생성 방법
- 생성자(new)로 만들기 : let a = new Object();
- 리터럴(데이터 값 바로 넣는 것)로 만들기 : let a = {};
- 어떤 KEY에 대응 하는 value 끌어오기
- 배열은 해당위치 찝어서 가져오면 된다.
- 객체 선언변수.해당key
- 선언변수[해당key]
ex ) let a = {name : "정혜원"}
---->
a.name = "정혜원"
a[name] = "정혜원"
- 객체 안의 원소를 바꾸는 방법
- 바꿀 부분 끌어와서 재할당 하면 된다.
(const로 객체 선언 했으면?!)
const가 선언될때 객체에대한 참조 형식으로 선언된다.
따라서 참조 선언은 바꿀 수 없지만 저장된 객체는 다른 메모리에 저장 되어있기때문에 바꿀 수 있다.
함수
1. 호출이 가능한 어떤동작을 할 수 있는 객체
- 함수의 특징
- 자바스크립트에서 함수는 특별한 값 취급을 한다.
(특별한 값 : 동작이 가능한 객체 취급)
- 함수 만들기
- 함수 선언식 _독립된 구문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);
Author And Source
이 문제에 관하여(React에 필요한 Javascript), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@jaake97/React에-필요한-Javascript
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
- var 와 let이 있다.
- const가 있다.
- var (함수레벨 스코프)
- 함수 레벨 스코프기 때문에 함수 내에서 모두 사용이 가능하다.
- 재선언, 재할당이 가능하다.
- 선언 전에 사용이 가능하다. (호이스팅, 실행 컨텍스트 때문)
- let 과 const (블록레벨 스코프)
- 둘 다 재선언 불가.(but let은 재할당은 가능하다.)
- 선언 전에 사용이 불가능 하다.(실행 컨텍스 때문.)
- 호이스팅은 된다.
1. var의 실행 컨텍스트
- 변수의 선언과 초기화 과정을 한번에 한다. 따라서 초기화를 거치며 메모리를 비워 변수의 메모리를 생성시켜놓기 때문에 선언 전에 사용이 가능하다.
2. let과 const의 실행 컨텍스트
- 변수의 선언 다음 , 해당 변수가 나올때 까지 문서를 쭉읽다가 해당 변수가 나와야 초기화하며 변수의 메모리를 생성시킨다.
따라서 선언 전에 메모리에 저장소가 없기때문에 선언전에 사용이 불가능하다.
하지만 세 변수와 상수 모두 호이스팅의 과정을 거친다.
- 자료형에는 원시형 자료형과 객체형 자료형이 있다.
1. 원시형 자료형
- 원시형 자료형에는 한가지 타입의 데이터를 담을 수 있다.
- 숫자형(Number) : 숫자를 저장한다.
- BigInput : 아주 큰 숫자를 저장한다.
- 문자형(String) : 문자열을 저장한다.
- 독립 자료형
- Undefiined : 값이 할당되지 않았다.
- Null : 값이 존재하지 않는다.
- 심볼형(Symbol) : 고유식별자를 만들때 사용한다.
- 논리형(Boolean_true,false) : 참거짓 논리 판단 할 때 사용
2. 객체 자료형
- 객체형 자료형에는 여러가지 타입의 데이터를 담을 수 있다.
- 객체형 자료형의 특징
- 여러가지 타입의 데이터를 담을 수 있다.
- key와 value값으로 이루어져 있다.
- {key : value}
- key는 문자형만 사용 가능. / value는 모든 자료형 사용 가능.
- 객체 생성 방법
- 생성자(new)로 만들기 : let a = new Object();
- 리터럴(데이터 값 바로 넣는 것)로 만들기 : let a = {};
- 어떤 KEY에 대응 하는 value 끌어오기
- 배열은 해당위치 찝어서 가져오면 된다.
- 객체 선언변수.해당key
- 선언변수[해당key]
ex )let a = {name : "정혜원"} ----> a.name = "정혜원" a[name] = "정혜원"
- 객체 안의 원소를 바꾸는 방법
- 바꿀 부분 끌어와서 재할당 하면 된다.
(const로 객체 선언 했으면?!)
const가 선언될때 객체에대한 참조 형식으로 선언된다.
따라서 참조 선언은 바꿀 수 없지만 저장된 객체는 다른 메모리에 저장 되어있기때문에 바꿀 수 있다.
함수
1. 호출이 가능한 어떤동작을 할 수 있는 객체
- 함수의 특징
- 자바스크립트에서 함수는 특별한 값 취급을 한다.
(특별한 값 : 동작이 가능한 객체 취급)
- 함수 만들기
- 함수 선언식 _독립된 구문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);
Author And Source
이 문제에 관하여(React에 필요한 Javascript), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@jaake97/React에-필요한-Javascript
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
- 함수의 특징
- 자바스크립트에서 함수는 특별한 값 취급을 한다.
(특별한 값 : 동작이 가능한 객체 취급) - 함수 만들기
- 함수 선언식 _독립된 구문function func1 () { ... } // 선언과 동시에 메모리가 초기화되며, 함수 메모리에 박힌다 //따라서 선언전에 사용이 가능하다.(변수 실행 컨텍스트 참고)
- 함수 표현식 _리터럴
<1> let func2 = function(){ ... } <2> let func2 = () => { .. } // 파일을 쭉 읽다가 해당함수를 만나야지만 메모리가 초기화되며 함수가 박히기 때문에 선언전에 사용이 불가능 하다
- 생성자 이용_new
let func3 = new function(" ... ") //해당 함수는 함수의 태생환경 문제와 변수의 스코프 문제로 사용하지 않는 것이 좋다.
- 함수안의 함수
- 외부에 같은 변수명의 변수가 존재하더라도 내부변수의 사용 순위가 더 높다.
따라서 내부 함수에서 변수를 호출하면, 내부 함수안의 선언 변수가 출력된다.
- 외부에 같은 변수명의 변수가 존재하더라도 내부변수의 사용 순위가 더 높다.
- 자바스크립트에서 함수는 특별한 값 취급을 한다.
(인수를 쉽게 매개변수라 생각할 예정)
onst playWithCat = (cat, action) => { action(cat); } const useBall = (cat) => { alert(cat+"과 공으로 놀아줍니다."); } //playWithCat 함수에 넘겨주는 useBall 함수가 콜백 함수입니다! playWithCat("perl", useBall);
Author And Source
이 문제에 관하여(React에 필요한 Javascript), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jaake97/React에-필요한-Javascript저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)