IT/CS

[JavaScript] ES6 자바스크립트 특징

Terriermon 2021. 8. 20. 15:35

ECMAScript

자바스크립트 표준 명세인 ECMA-262, 자바스크립트의 핵심 문법 규정 ▶ ES6지원

 

특징

1. 변수 추가: var, let, const의 차이점

⚡ var

var x=1;
var y=1;

var x=2; //중복선언, x가 2로 변경됨
var y; //초기화되지 않으므로 선언 무시

//x=2, y=1의 값을 가짐

if(true){
	var x = 21; //함수가 아닌 곳에서 선언 시, 전역변수로 선언됨
}

//x=21의 값을 가짐

- 변수 중복 선언 허용

- 초기화문이 없는 변수 선언 무시

- 함수가 아닌 다른 곳에서 선언 시, 전역변수로 선언

🔴 동일한 변수를 중복선언하여 값이 변경 될 수 있음

 

⭐ let

let x=1;
//let x=2; //중복 선언 방지 -> 에러 발생

function fun(){
	let x=10;
    console.log(x); // 10 출력
}

fun();

console.log(x); // 1 출력

- 중복 선언 시, 에러 발생

- 함수에서 사용 시 함수 내부에서만 의미를 가짐

 

⭐ const

- 선언과 동시에 초기화 필요

- 재할당 금지(변경 불가, java의 final과 같음)

 

2. 화살표 함수 지원

function 대신 화살표(=>)를 사용하여 간략한 방법으로 함수를 선언하는 방법

종류

//매개변수 없음
() => {...}
x => {...} //매개변수 한 개
(x,y) => {...} //매개변수 여러개
x=>{return x*10} //바로 return
x => x*10 //중괄호를 생략, 바로 return
() => { return { x : 1 }; ) //매개변수X, 한 줄
() => {				// 여러줄
	const x= 1;
    return x*x;
}

 

🌈 이벤트 발생시, this가 이벤트를 가르키지 않음 ▶ event.currentTarget으로 객체 찾음

myButton.addEventListener("click", (event)=> {
	console.log(event.currentTarget.id); //이벤트가 일어난 객체를 찾음
}

 

3. 클래스 구문 도입 ▶ 객체, 상속

📢 자바스크립트의 구성 요소의 대부분은 객체

🔴 객체: 0개 이상의 프로퍼티로 구성

🌈 객체 생성 방법: {}를 사용하여 선언

var people = {
	name: 'hw';
    age: 25;
    getPeople(): function(){
    	return this.name + this.age;
    }
}

console.log(typeof people); //object
console.log(people); //위 객체의 정보 출력


// 생성자 함수
function Person(name, age){
	this.name = name;
    this.age = age;
    this.getName = function(){
    	return this.name + this.age;
    }
}

// 생성자로 생성
const people2 = new Person('kim' , 20);
const people3 = new Person('park', 15);

 

🔴 property(프로퍼티): 속성 접근자

  • 객체 내부의 속성, 키와 값으로 구성
  • 함수가 올 수 있음 ▶ 메서드

🌈 프로퍼티 사용 방법: . 또는 []

const person1 = {};
//[]를 이용해서 속성에 접근
person1['firstName'] = 'Mario';
person1['lastName'] = 'Rossi';

//.을 이용해서 속성에 접근
console.log(person1.firstName); //Mario출력

// 객체 선언
const person2 = {
	firstName: 'John',
	lastName: 'Doe'
};

//[]를 이용해서 속성에 접근
consoel.log(person2['lastName']); //Doe 출력

- []를 사용할 경우 key값에 변수 사용 가능

- 객체의 값을 동적으로 추가 가능

- 프로퍼티 키를 중복으로 선언할 경우, 먼저 선언한 프로퍼티를 덮어씀 (에러X)

- 삭제 시 delete 연산자 사용 ex) delete person1.fristName;

 

🔴 상속: 자바스크립트에서 프로토타입을 이용해 상속 사용(class도 가능)

프로토타입
- 객체의 내부 프로퍼티, 자신이 다른 객체의 원형이 되는 객체
- 프로토타입을 상속받은 하위 객체는 상위 객체의 프로퍼티를 자신의 프로퍼티처럼 사용 가능
- 모든 객체는 [[proto]] 접근자 프로퍼티를 통해 자신의 프로토타입에 간접적으로 접근 가능
function Person(n){
	this.eyes = 2;
    this.nose = 1;
    this.n = n;
}

// 공통적으로 가지는 속성에 대해 메모리가 중복적으로 할당
// 총 4개의 메모리 할당(kim=2, park=2)
var kim = new Person(2);
var park = new Person(1);


//----------------
//프로토타입

function Person(){}

Person.prototype.eyes = 2;
Person.prototype.nose = 1;
Person.prototype.getN = function(){
	return n * 10;
}

var kim = new Person();
var park = new Person();

console.log(kim.n == park.n); // 동일한 메모리를 사용하므로 true 리턴 (값은 각각 20, 10)

 

🟡 프로퍼티 확인

// 프로퍼티 존재 확인
const person = { name : 'kim' };

// 상속
console.log ('name' in person); //확인 대상 객체가 상속받는 모든 프로토타입의 프로퍼티 확인
// 자기자신만
console.log(person.hasOwnProperty('name'); //객체의 특정 프로퍼티가 존재하는지 확인, 상속X


// 프로퍼티 열거
// 상속
for (const key in person){
	console.log(key + ' ' + person[key]); // 대상 객체 + 상속받은 프로퍼티 열거
}
// 자기자신만
consoel.log(Object.keys(person));

 

🟡 접근자 프로퍼티: get/set

let person = {
	name: 'kim',
    age: 10,
    
    get getName(){
    	return `${this.name}`;
    },
    
    set setName(value){
    	this.name = name;
    }
}

console.log(person.getName); //get을 이용해서 이름 출력
person.setName='park'; //set을 이용해서 이름 변경

 

4. Symbol

5. 기본 매개변수

6. 템플릿 리터럴 & 멀티 라인 문자열

let todo = '공부하기';

console.log(`오늘 할 일은 ${todo} 입니다.`);
console.log('오늘 할 일은 ' + todo + ' 입니다.');

`(back-ticked)를 이용하여 문자열 내부에 변수 추가 가능 (* `과 '는 다름)

반응형