ECMAScript

ECMAScript

ECMAScript 2015는 무엇인가?

• ECMA International의 ECMA-262에 근거한 표준 스크립트 언어
• ECMA Script 2015 혹은 ES6 라고 불린다.
• 최초 ECMA Script는 브라우저 언어인 Javascript와 Jscript간 차이를 줄이기 위한 공통 스펙 제안으로 출발

ECMAScript 2015 에서Lexical Scope(Block Level Scope) 로 변경됨

Lexical Scope(Block Level Scope)?

• 함수 내부블록 내부 와 를 사용하여 지정
• Hosting( 호이스팅 이 더 이상 발생하지 않는다
• 변수 let 와 상수 const 로 구분해 지원한다(var보다 let과 const가 더 많이 쓰인다.)
  • 보통 객체를 개발할 때는 상수를 사용

let(변수)

function 
getValue (condition)
if ( condition ) {
let value = "blue";
// Some code..
return value;
}
else {
// value
는 여기에 존재하지 않는다
return null;
}
// value
는 여기에 존재하지 않는다
}
원래 js면 valu값이 존재하지만 ecma는 자바와 같이 범위제한({})이 있다.

const(상수)

• 기존 Javascript 에서 지원되지 않던 상수를 const 키워드로 지원함
• 초기화되지 않으면 Error 를 발생시킴

// 유효한 상수
const
maxItemsmaxItems= 30;
// 문법에러문법에러: 초기화 되지 않음
const
namename;
console.log
log(maxItemsmaxItems);
console.log
log(namename);

• let 과 같은 Block Level Scope 를 가진다

const(상수)로 객체 선언하기

//Const 에 객체 리터럴 할당
const
person = {
name : "
Seo Tae Ji"
};
//객체의 값 변경은 가능하다.
person.name
= " And
//const 에 새로운 객체를 재할당 하려할 경우 에러 발생
person = {
name : " And Boys"
};

const 는 바인딩 초기화 할당 을 변경하도록 막는 것
->바인딩 된 값의 변경을 막지 않는다

<script type="text/javascript">
  --------------------------------------------------------------------------------------------- 변수
        //ECMAScript에서는 동일한 이름의 변수를 재정의 할 수 있다.
        let numberOne = 10
        let numberOne = 10
        console.log(numberOne)

 // Lexical Scope에서는 {}범위의 변수를 가진다.(Block Level)
        let numberOne=10
        if(numberOne == 10){
            let numberOne = 20
            console.log(numberOne)
          //{}범위안에 정의되어서 20이 먼저나옴
        }
        console.log(numberOne)
// 결과 20 10
------------------------------------------------------------------------------------------상수
//상수도 재정의 불가능
const maxItems = 30
        console.log(maxItems)
        maxItems = 20
        console.log(maxItems)
//const 상수로 배열, 객체리터럴 같은 값을 할당하고 관리한다.
        const ages=[10,20,30,40]
        console.log(ages)
        ages.push(50)
        console.log(ages)

        //메모리주소가 변경되는 재할당은 할 수 없다.
  ages=[30,40,50,60]

  const person={
            name:"Seo Tai Ji"
        }
        console.log(person)

        person.name +="And Boys"
        //메모리 주소가 변경되는 재할당은 할 수 없다.
        // person ={name:"HOT"}

-------------------------------------------------------------------------------------1~100까지 반복하는법
    const functionArray2 = []
    for(let i=0; i<100; i++){
        functionArray2.push(function(){
            console.log(i)
        })
    }
    for(let k=0; k<functionArray2.length; k++){
        functionArray2[k]()
    }
------------------------------------------------------------------------------------------문자열


      
    </script>

템플릿 리터럴 사용

템플릿 리터럴은 간단하게 문자열을 만들어 낼 수 있다

const year = 2018;
const month = 1;
const date = 16;
//오늘은 2018 년 1 월 16 일 입니다
let message = `오늘은 ${year}년 ${month} 월 ${date}일 입니다`;
console.log(message);

• 템플릿 리터럴은 백틱 을 사용해 표현한다
• 백틱내에 변수를 조합하기 위해서 변수명 을 사용한다

함수

• ECMAScript 의 가장 중요한 객체 중 하나
• 함수를 파라미터로 혹은 객체로 저장하며 다양하게 활용할 수 있음

⭐함수펼침 연산자⭐

    <script type="text/javascript">
        function hello(message="아무것도 전달되지 않았습니다."){
            // if(message==undefined){
                // 번거롭다
            // }
            console.log(message)
        }
        hello()
        hello(undefined)
        hello("안녕?")
        hello("안녕하세요?")
    </script>

Fat Arrow Function(화살표 함수)

 // window.onload=function(){
        //     const button = document.querySelector("button")
        //     button.addEventListener("click", function(event){
        //         console.log(event)
        //         alert("클릭 했습니다!")
        //     })
        // }
        window.onload=()=>{ //화살표함수
            console.log(this)
            const button = document.querySelector("button")
            button.addEventListener("click", (event)=>{
                console.log(this)
                console.log(event)
                alert("클릭 했습니다!")
            })
        }

확장된 객체

      //기존의 객체 리터럴
        var person={
            name: name,
            age : age,
            hello:function(){
                console.log(person.name)
                console.log(person.age)
            }
        }
        console.log(person.name)
        console.log(person.age)
        person.hello()
        

        //ECMA의 확장된 객체
        const person2={
            name,age,
            hello(){
                console.log(name,age)
            }
        }
        console.log(person2)
        console.log(person2.name)
        console.log(person2.age)
        person2.hello()

⭐⭐구조분해⭐⭐

• 객체 리터럴이나 배열을 해체해 최소단위의 변수로 저장하는 방법
• 기존에 객체리터럴이나 배열에서 데이터를 가져오는 방법

<script type="text/javascript">
        const person ={
            name:"gwangwon",
            age:39,
            address:"korea"
        }
        let {name, age, address} = person
        console.log(person)

function hello({name, type, rtn="반환없음"}){
            console.log(name)
            console.log(type)
            console.log(rtn)
        }
        hello({
            name:"hello",
            type:"function",
            rtn:"숫자를 반환"
        })
    </script>

배열의 구조분해

<script type="text/javascript">
        const colors =["#F00","#F0F0","#00F"]
        //기존의 객체 인덱스 참조 방법.
        let red=colors[0]
        let blue=colors[1]
        let green=colors[2]

        //배열의 구조분해
        //     0     1     2
        let [ red2,blue2,green2 ] = colors
        console.log(red2,blue2,green2)
        
    </script>

배열의 복사

//배열의 복사

        const scores=[1,2,3,4]
        //메모리 주소를 할당하게 되는 꼴
        //const scoresCopy=scores
        
        //배열 복사는 이렇게 해야힌디!
		const [...scoresCopy] =scores
        
        scoresCopy.push(10)

        console.log(scores)
        console.log(scoresCopy)
scoresCopy에 10을 넣었는데 scores에도 10이 들어가는 문제점이 생긴다