[Javascript] ECMAScript 6 (ES6)

ES6 정의

ES6(ECMAScript 6)는 ECMAScript 표준의 가장 최신 버전
현대적인 코드를 사용하면, 코드가 간결해지고 생산성이 향상 ↑

 

 

1. 변수 선언 방식(var/ let/const)

• var : 재정의와 재선언 모두 가능
• let :  가변변수로 재정의가 가능하지만 재선언은 불가능
• const :  불변변수로 재선언과 재정의 모두 불가능

* 재선언 : 동일 변수명을 다시 선언하는 것
* 재정의 : 값이 지정된 변수에 값을 변경하는 것
* 스코프(scope) : 식별자(ex. 변수명, 함수명, 클래스명 등)의 유효범위

//변수 선언
var x = 0;

// 재정의
x = 2;

// 재선언
var x = 2;

• var의 문제점
  ① 변수 선언이 유연하기 때문에 예기치 못한 값을 반환할 수 있다.
  ② 코드가 길어진다면 어디에서 어떻게 사용 될지 파악하기 힘들다.
  ③ 함수 레벨 스코프로 인해 함수 외부에서 선언한 변수는 모두 전역 변수로 된다.
  ④ 변수 선언문 이전에 변수를 참조하면 언제나 undefined를 반환한다. (호이스팅 발생)
  ➡️ 따라서, var은 잘 사용하지 않으며, let과 const 키워드를 사용하는 것을 권장한다.

 <h2>var vs. let</h2>
    <script>
    	// a라는 변수명을 선언, 0을 할당
        var a = 0;   
        if(true){
            var a =2;
            console.log(a);
        }
        console.log(a);
        // 출력 -> 2,2

        let b = 0;   // b라는 변수명을 초기화, 0을 할당
        if(true){
            let b =2;
            console.log(b);
        }
        console.log(b);
        // 출력 -> 2,2
    </script>
       
    <h2>const</h2>
        <script>
            let c = 100;
            c = 200;
            console.log(c);

            const d = 100;    // const(상시) 변할수 없음.
            // d = 200;    // 에러 발생, const는 값을 다시 지정 불가 
        </script>

const로 객체의 변수 재할당 시, property 값 추가/변경 가능

변수 배열 형식도 값 추가 가능

재선언은 불가

<h2>const 변수 재할당</h2>
    <p>객체내 변수의 값을 재할당</p>
    <script>
        const student = {
            eng:99,
            kor:100
        }
        student.math = '200';   //property 추가 가능
        console.log(student);
        student.eng = 100;      //property 값 변경 가능
        console.log(student);  

        const langs = ['html', 'css','javascript'];
        langs.push('react');      // 변수 배열 형식도 값 추가 가능 
        console.log(langs);
        // langs = ['html', 'css','javascript','react'];    // 불가
    </script>

 

 

2. 템플릿 리터럴 (Template Literal)

Template Literal은 ES6부터 새로 도입된 문자열 표기법으로,

문자열 생성시 따옴표 대신, 백틱(`)을 사용하고, 문자열 사이에 변수 입력는 ${변수명} 형식으로 입력

따옴표와 달리 백틱 안에서는 줄바꿈이 반영 가능

<h2>Template Literal</h2>
    <script>
        var str1 = 'javascript';
        var str2 = '기초';
        var str3 = str1 + str2;
        
        // 기존 코드 방식 
        var msg = '여러분은 지금 ' + str1 + str2 +'를 학습하고 있습니다'
        console.log(msg);
        
        // 템플릿 리터럴 방식
        var msg2 = `여러분은 지금 ${str1} ${str2}를 학습하고 있습니다`
        console.log(msg2);
        
        // 출력 -> 여러분은 지금 javascript 기초를 학습하고 있습니다
    </script>

 

 

3. 화살표 함수 (Arrow function)

화살표 함수는 함수 표현식을 생략, 간소화하여 간결하게 작성하는 문법

function 대신 화살표(=>)를 사용하여 함수를 선언할 수 있음

(하지만 모든 경우에 화살표 함수를 사용할 수 있는 것은 x)

• 인수가 하나밖에 없을 시, 인수를 감싸는 괄호를 생략 가능하다.
• 인수가 하나도 없을 시, 괄호는 비워둘 수 있지만, 이 때 괄호는 생략할 수 없다.
• 본문이 한 줄이라면 중괄호를 생략할 수 있다.

<script>
    //1 기존 문법
    // 이름이 있는 함수 -> 화살표 함수로 변경 불가
    function add(x,y){
        return x+y;
    }  

    let add1 = function(x,y){
        return x+y;
    }

    let add2 = (x,y)=>{
        return x+y;
    }  
    

    //2 매개변수가 하나일 때는 괄호 생략 가능
    let add3 = function(name){
        alert(`${name}님 반갑습니다!`);
    }

    let add4 = name =>{
        alert(`${name}님 반갑습니다!`);
    }


    //3 함수내에서 바로 리턴만 있을 때 중괄호 생략 가능
    let multiply = (x) =>{
        return x*2
    }
    let multiply2 = x => x*2
</script>