[한입 리액트] js의 기본

React 소개

html

css

js

js가 실행되는곳(자바스크립트의 실행환경)

• 웹 브라우저에 포함된 '자바스크립트 엔진'이 없으면 우리는 자바스크립트를 실행할 수 없다
  -> 자바스크립트 엔진 내장한 웹 브라우저 : 자바스크립트의 실행환경(Runtime)

변수와 상수

변수

• 변수 : 이름 붙은 저장소

상수

• 상수 : 바꿀수 없는 저장소

자료형과 형 변환

• 원시타입자료형
  1) Number, String, Boolean, Undefined, Null

템플릿 리터럴과 숫자형 자료형

parseInt

-> 의도적형변환의 예시

연산자

• 대입 연산자(=)
  ex. let a =1;
• 산술 연산자(- * + / %)
• 연결 연산자(+)
  -> 두개 이상의 값을 연결하는 연산자
• 복합 연산자(+=, -+, *=..)
  ex. let a = 1;
  a+=1;
• 증감 연산자(++, --)
  -> 순서 생각해야함!(후위연산(값 저장 후, 연산), 전위연산(바로 적용))
• 논리 연산자(!, $$, ||, )
  -> && - 둘다 t여야 t
  || - 하나만 t여도 t
• 비교 연산자(==, ===, !=, !==, >, <, >=, <=)
• typeof
  
• null병합연산자(null이나 undefined가 아닌 값 골라줌)
  

조건문

• if / else if / else
• switch
  

함수

-> 매개변수를 호출하면서 전달할 값을 받아주자~
① 함수안에서 console로 출력하거나
② return해준값을 변수에 담아서 console로 출력할 수 있다!

함수 표현식 & 화살표 함수

함수 표현식

-> 함수 이름이 없게 만들어서, 변수에 담아서 사용하는것

함수 선언식과 표현식

• 함수 선언식: 자바스크립트 특징인 '호이스팅'이 일어남(순서에 상관없이 밑에 있어도 호출가능)
• 함수 표현식: 호이스팅 적용안됨

화살표함수

-> 무명함수를 좀 더 쓰기 편하게 바꿔준것(이 또한, 호이스팅의 대상이 아니므로 순서 잘 지켜서 써야함)

콜백함수

• 콜백함수 : 함수에 파라미터로 함수를 넘기는것!

객체

• 프로퍼티 : 키 : value로 이뤄져있음
• key는 문자열로만 작성해야하며 ""안에 넣을 수 없다.
• key 중복가능하지만, 뒤에있는애가 읽힘

표기법

-> 객체프로퍼티에 접근하는 법

• 점 표기법 : person2.key2
  
• 괄호 표기법 : (""기억하기!, 아니면 변수로 인식함)
  

프로퍼티 추가하기, 수정하기

-> 수정도 같은 방식으로 하면됨

ex. 프로퍼티

💥 let을 const로 바꿔도 프로퍼티 추가, 수정 가능(상수 자체를 수정하는게 아니기 때문에!)

프로퍼티의 삭제

• delete(but 메모리 문제)
• null사용하기!(추천!)
  

객체의 프로퍼티인 함수

-> 메서드라고 불린다!

• this의 사용! 기억하자!

객체 안에 특정 프로퍼티 있는지 확인

배열

🗣️ 배열도 객체다~

배열 만들기

-> 여러 자료형을 담을 수 있다!

반복문

배열 내장함수

• forEach, map, includes, indexOf, findIndex
  
• find, filter, slice
  
• concat
  
• sort
  
• join