Overview

ECMAScript

Javascript와 같은 스크립트 언어의 표준

Javascript 특징

1. 느슨한 타입 언어 -> 동적 타입 검사

• runtime시에 자료형이 결정
• 암시적 형변환
  ex) 1 + "2" // "12"

2. 객체 기반의 언어

• 프로토타입 기반 프로그래밍
• es6 부터 class로 구현 가능

3. 일급 함수 지원

• 변수, 데이터 구조안에 담을 수 있음

var two=function(){
  return 2;
}

• 파라미터로 전달 가능

var caller= function(f){
  return f();
}
caller(two);

• 반환값으로 사용 가능
  var f= function(){ return two; }

4. 고차함수 가능

함수를 인자로 받거나 반환함으로써 작동하는 함수

const arr1=[1,2,3];
const arr2=[];
for(let i=0;i<arr1.length;i++){
    arr2.push(arr[i]*2);
}
console.log(arr2);
const arr1=[1,2,3];
const arr2=arr.map(function(item){
  return item*2;
});
console.log(arr2);

Default parameter, Rest parameter, Spread Operator

1. Default Parameter(기본 매개변수)

: 함수 호출 시 함수의 매개변수 값이 없거나 undefined가 전달 될 경우 매개변수를 기본값으로 초기화

function multiply(a,b){
    var b=typeof b!=='undefined' ? b:1;
    return a*b;
}
function multiply(a,b=1){   //es6
    return a*b;
}

multiply(5);

2. Rest parameter(나머지 매개변수)

: 정해지지 않은 인자들을 배열로 나타냄

function f(x,y) { 
  var a=Array.prototype.slice.call(arguments,2) 

  return (x+y) * a.length;
}
f(1,2,"hello",true,7); // 9

• ES6

ES6
function f(x,y,...a) {

  return (x+y) * a.length;
}
f(1,2,"hello",true,7); // 9

차이점

• arguments: 함수에 전달되는 모든 인자 포함
  실제 배열이 아닌 객체이기 때문에 배열 메소드 사용 불가
• 나머지 매개변수: 개별 이름이 주어지지 않은 인자 포함
  배열이기 때문에 배열 메소드 적용 가능

3. Spread Operator (전개 연산자)

반복 가능한 문자를 여러개의 인자, 요소로 확장시킬 수 있음

• 함수 호출용

function sum(x,y,z){
  return x+y+z;
}
var numbers=[1,2,3];

sum.apply(null,numbers); //ES5

sum(...numbers);  //ES6

• 배열 literal용 (push, slice, concat X)

var parts=['shoulders','knees'];
var lyrics=['head',...parts,'and','toes'];
lyrics; //['head','shoulders','knees','and','toes']

• 비구조화 할당용
  [a,b,...iterableObj]=[1,2,3,4,5];

Template Literals

literal: 코드 상에서 데이터를 표현하는 방식

template literals

• backtick(`) 사용
• $와 {}를 이용하여 표현식 넣을 수 있음

var a=5;
var b=10;
"Fifteen is "+(a+b)+" and\nnot "+(2*a+b)+"."; //ES5

`Fifteen is ${a+b} and
not ${2 * a + b}.`    //ES6

let const

let

• 선언과 동시에 임의의 값으로 초기화 가능 but 재선언은 불가

let a=1;
a=2; //재할당은 가능
let a=4;//불가

• 블록 유효 범위를 갖는 지역 변수

if(true){
  var a=10;
} 
a;  //10

if(true){
  let a=10;
} 
a;  //ReferenceError undefined

console.log(b); //undefined이지만 error 발생 x
var b='test';
console.log(c);//undefined error발생
let c='test';

var b;
console.log(b); //undefined
b='test';
console.log(c);
let c='test'; //undefined error발생

const

재할당 재선언 불가-> 선언과 동시에 값 할당해줘야함.

const arr=[];
arr.push(4);
arr=arr.concat([5,6]);//재할당이됨 오류

Destructuring assignment

구조 분해 할당

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 표현식

• 배열 구조 분해 할당

var foo=["one","two","three"];
var[a,b,c]=foo;
console.log(a);  //"one"
console.log(b);  //"two"
console.log(c);  //"three"

var a,b,rest;
[a,b]=[10,20];
console.log(a,b);  //10 20

[a,b,...rest]=[10,20,30,40,50];
console.log(a,b); //10,20
console.log(rest); //[30,40,50]

• 객체 구조 분해 할당

var o={p:42, q:true};
var {p,q}=o;
console.log(p,q) //42, true

let {a,b,...rest}={a:10,b:20,c:30,d:40};
console.log(a,b);  //10, 20
console.log(rest);  //{c:30, d:40}