[1028 javascript]

 

전체적인 설명 출처 : velog.io/@bathingape/JavaScript-var-let-const-%EC%B0%A8%EC%9D%B4%EC%A0%90

 

1. var, let, const  그리고 hoisting

호이스팅(Hoisting): var 선언문이나 function 선언문 해당 스코프의 선두로 옮긴 것처럼 동작하는특성

             자바스크립트는 모든 선언(var let const function function* class)를 호이스팅한다. 

             * 익명함수는 호출 불가 해서 호이스팅 불가. 

변수 : 선언단계  > 초기화 단계 > 할당단계

 

	var	let(ES6)	const(ES6)
설명	상수인지 변수인지 구분불가	변수 재선언 재할당가능	변수 재선언,재할당 불가능(상수 constants)
호이스팅	선언단계, 초기화단계 한번에 호출후 선언을 나중에해도 에러발생안됨.	TDZ(Temporal Dead Zone, 일시적 사각지대) 초기화되지 않은 변수가 있는 곳.  let, const 는 TDZ제약을 받음. 선언 나중에 하면 참조에러발생

TDZ설명 : blog.naver.com/sun_zero2/222036831303

 

 

2. Scope vs Closure

	Scope	Closure
내용	유효범위	함수 선언된환경 (렉시컬)스코프 기억하여 함수 스코프 밖에서 실행될때 이 스코프 접근
이해	-전역스코프: 스크립트 전체 참조 -지역스코프:정의된함수내 참조	const counter = function(){     let count = 0;     function changeCount(number){         count += number;     }     return{       increase: function(){         changeCount(1);      }     } } counst counterClosure = counter(); counterClousure.increase();
특징	함수단위  변수명 중복허용 암묵적선언(implied globals) 펑션안에 var없음 Lexical Scoping(Static scoping)-값변경가능.
그외	스코프 체인 : 자신이 속한 스코프에서 찾고 그소코프에 식별자 없으면 상위 스코프에서 다시 찾음.

3. assign 매서드 / Object.assign()

Object.assign() : 열거할수 있는 하나 이상의 출처 객체로부터 대상객체로 속성을 복사할때 사용. 

Object.assign(target, ...sources)

 

var obj1 = {a:1};
var obj2 = {b:2};
var obj3 = {c:3};
var newObj = Object.assign({},obj1,obj2,obj3);
// 출력 : {a: 1, b: 2, c: 3}

4. instantiation Patterns : 상속패턴

1. Functional           : 함수를 변수에 할당 거기에서 호출사용
2. Functional-shared : 함수 내부에서 함수 호출해서 사용. 
3. Prototypal           : var instance = Object.create(선언함수호출)// 특정객체를 프로토 타입으로 생성
4. Pseudoclassical(고전적인)    : 

var a = function(num){
    this.num = num
};
a.prototype.move = function(){
	this.num +=1;
}

var b = new a(5);
console.log(b.num);//5
b.move();
console.log(b.num);//6

5. ES6

*** 브라우져 지원은 확인해보고 사용할것. (안될경우 bable 로 사용가능 )

 

ECMA  자바스크립트 표준. 

- 새로 추가된 기능

Default Parameters	let abc = function(a=false, b=0, c=null){  ....  }
Template Literals	백틱 ` 사용(ESC아래키) 1. const num = "number"; console.log(`num is ${num}`); 2. console.log(`<ul>`)   //특수문자 백슬러시 미사용.
Multi-line Strings	백틱 ` 사용(ESC아래키) 줄바꿈상태도 사용가능.
Destructuring Assignment 비구조 할당.	let abc = {a:1, b:2, c:3}; let {a,b}=abc;   console.log(a);  //1 let abc = [1,2,3]; let [a,b,c]=abc; console.log(a);
spread Operator	function sum(x,y,z){return x+y+z;} const num=[1,2,4]; console.log(sum(...num));  console.log(sum.apply(null,num));
RestParameter	let multiplybyNum = function(x, ...num) {     num.forEach(function(n) { console.log(x * n) }); }; multiplybyNum(5,sum.apply(null,num)); //35
Arrow Functions	const squares = [1, 2, 3].map(x => x * x); console.log(squares); // 1, 4, 9
Class	class a{~~~}   or   let class = class{~~~}; class Cat {     constructor(name) { this.name = name; }     speak() {         console.log(this.name + ' makes a noise.');      } } class Lion extends Cat {     speak() {         super.speak();         console.log(this.name + ' roars.');     } }

템플릿리터럴 : poiemaweb.com/es6-template-literals 참조. 

스프레드 오퍼레이터 : developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

 

6. Promise

비동기시 사용되는 객체 , 주로 서버에서 받아온 데이터를 화면에 표시할때 사용. 

 

상태 : Pending(대기, 비동기처리로직 미완료) -> Fulfilled(이행, 비동기로직 완료 프로미스 결과값 반환)

                                                          -> Rejected(실패, 비동기 처리 실패, 오류 발생)

 

ie지원이 안된다 참고 : developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

(2021/05/06 확인)

function promise_function(){
    return new Promise(function(resolve, reject){
      $.ajax({
        url: '/sm/util/ajaxTest',
        data: 'num=10',
        type: 'post',
        dataType: 'json',
        success : function(result){
                var num = result.num;
                resolve(num);
              }
      }); 
    });
  }
    
function firstAjax(num){
    return new Promise(function(resolve, reject){
      alert('첫번째 실행');
      $.ajax({
        url: '/sm/util/ajaxTest',
        data: 'num=20',
        type: 'post',
        dataType: 'json',
        success : function(result){
                var num = result.num;
                resolve(num);
                 
              }
      });
    });
 
  }
 
function secondAjax(num){
    return new Promise(function(resolve, reject){
      alert('두번째 실행');
      $.ajax({
        url: '/sm/util/ajaxTest',
        data: 'num=20',
        type: 'post',
        dataType: 'json',
        success : function(result){
                var num = result.num;
                resolve();
                 
              }
      });
    });
 
  }
 
   
function successFunction(){
  alert('성공');
  return false;
}
function errorFunction(){
    alert('에러');
    throw new Error('에러 발생!!');
  }
   
promise_function()
.then(firstAjax)
.then(secondAjax)
.then(successFunction)
.catch(errorFunction);


출처: https://lee-mandu.tistory.com/437?category=633569 [개발/일상_Mr.lee]