[JS]JavaScript 정리_2

 

 

this 접근 유형

call - 첫 번째 오는 변수를 thisfh 지정할 수 있음

apply - 배열로 데이터를 받음

 

Hoisting(호이스팅)

함수, 변수명을 제일 먼저 읽어 드리는 것

var, let, const 모두 호이스팅 됨

즉, 코드가 실행되기 전에 처리되고 해당 스코프가 상단으로 올라간다.

 

var 정의되기 전에 접근 가능, undefined 값을 가지게 된다.

let 변수가 선언될 때까지 일시적으로 TDZ(비활성 구역)에 있게 된다.

    선언되기 전에 사용 시 error 발생

 

 

TDZ(Temporal Dead Zone)

비활성 구역

let, const => 에러 방지

 

 

화살표 함수(=>)

ES6에서 나온 함수

 

화살표 함수_매개변수

0개 빈 괄호 반드시 표기해야 함. // () => {}

1개 () 생략 가능 // add => {}

2개 이상 ()로 파라미터를 감싸서 표기 //add(a, b) => {}

 

화살표 함수_return

블록({})으로 코드를 감싼 경우 반환할 값이 있으면 반드시 return 됨

블록으로 감싼 코드에 return문이 없을 경우, undefined가 반환됨

블록을 생략한 경우 return 생략 가능

 

 

배열 복사

...args

 

 

보관법(`${}`)

ES6 개념

변수 값 출력 시 보간법 사용

 

const person2 = {
    age:10,
    grow() {
        console.log(`${this.age}`);
    }
};
person2.grow(); //10 출력

 

map()

배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환

리액트에서 데이터 수정시 자주 사용함!

 

Array.prototype.map() - JavaScript | MDN

 

 

 

삼항 연산자(조건문)

실무에서 많이 사용됨

(조건 ? true : false)

 

 

 

문자열 메서드

 

. indexof() - 인덱스 값 출력

.slice(첫, 끝) - 인덱스 번호(3)부터 매개변수로 받은 글자가 일치하는지 true

.startsWith("", 숫자) - 갯

.endsWith("", 숫자) - 개수의 문자까지 확인 후 문자열이랑 같으면 true

.includes(매개변수) - 매개변수 값이 문자열에 포함되어 있는지! true

.repeat(반복 횟수) - 횟수만큼 반복해라

ex)

 

 

 

 

디스트럭처링(Destructuring)

배열 값 또는 객체의 속성을 풀어서 별개의 변수로 쓸 수 있게 해주는 강력한 기능

JSON 데이터, 중첩 객체, 배열 등을 손쉽게 접근할 수 있도록 해준다.

 

 

변수명을 변경할 수 있다!

const {youtube:yt} = social.links.social;
console.log(yt);

 

 

 

for문 = 조건 반복문

- 기본형

for(let 개별 요소 변수명 of 객체명) {

        //반복 실행문

}

 

- 축약형1

for of(let 개별 요소 변수명 of 객체명)

 

- 축약형2

for(let 속성 (in or of) 객체) {

     //속성 처리 구문

}

 

 

in - 인덱스 번호

of - 키 값

 

 

 

forEach문 = 조건 반복문 

object.forEach(function(var) {

   ...

});

 

 

Q. for문과 forEach문 차이점

 

- for문은 동기(sync) 방식이기 때문에 for문 내에 오류 발생 시 에러 위치 이후의 이벤트는 동작하지 않고 멈춘다.

- forEach문은 비동기(async) 방식이기 때문에 내부에 오류가 발생에도 이벤트 동작이 멈추지 않고 동작한다.

  for문보다 실행 속도가 빠르지만 반복문 내에 배열, 리스트 값을 변경하거나 추가할 수 없다. (읽기 전용)

 

 

객체 값 가져오기

Object - 객체의 최상위 값

 

Object.keys() : 객체의 모든 key

object.entries() : 객체의 모든 key, value  

 

 

 

배열(Array)

Array.form()

배열이 아닌 객체를 받아 실제 배열로 반환해서 반환한다.

 

Array.Some()

조건에 일치하는 값이 하나라도 있으면 true

 

Array.evey()

조건에 모두 일치해야 true

 

 

 

프로미스 객체(Promise Object)

비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타낸다.

 

대기중(Pending) : 프로미스 객체의 기본 상태, 비동기 처리 결과가 아직 나오지 않은 상태

이행완료(Fullfilled) : 비동기 처리가 완료되어 결과를 얻은 상태 - resolve() 함수 호출 함. (성공)

거부됨(Rejected) : 비동기 처리는 완료되었지만, 실패한 상태 - reject() 함수 호출 함. (실패)

 

프로미스가 성공할때의 값을 얻는데는 .then()

실패시, 오류를 처리할때는 .catch()

 

 

 

- 기본 형식

const myPromise = new Promise((resolve, reject)=>{
	// 여기에 코드를 작성
 //resolve : 기능을 정상적으로 수행해서 데이터를 전달하는 콜백함수
//reject : 기능을 수행하다가 문제가 생기면 호출하게 될 함수
});

const myPromise = new Promise((resolve, reject)=>{
	resolve('the value we get from the promise');
});

myPromise.then( //성공시
    data =>{
  console.log(data);
    });

 

 

 

 

async awit 

프로미스를 조금 더 간편한 api를 제공함.

es8(es2019)에서 새롭게 소개된 비동기 처리 문법

 

async 키워드를 사용하면 저절로 promise 객체 생성됨