[Javascript] 자주 사용하는 ES6 문법

안녕하세요! 건브로입니다.

오늘은 자주 사용하는 ES6 문법에 대해서 정리하려고 해요.

ES6 문법은 가장 보편 하게 쓰이고 있는 자바스크립트 표준 문법입니다.

ES6중에서 자주 사용하는 문법을 소개하겠습니다.

---

제가 정리하는 순서는  화살표 함수(arrow function), Class, let과 const 키워드 그리고 scope , Spread 연산자, Template String입니다.

 

1. 화살표 함수

//일반 함수
function have(name, object){
	return name+"이(가)"+object+"를(을)가지고 있다";
}
let info = have("건브로", "컴퓨터");
console.log(info);
//결과
//"건브로이(가)컴퓨터를(을)가지고 있다"

//화살표 함수
var have = (name, object) =>{
	return name+"이(가)"+object+"를(을)가지고 있다";
}
let info = have("건브로", "컴퓨터");
console.log(info);
//결과
//"건브로이(가)컴퓨터를(을)가지고 있다"

 

이렇게 일반 함수를 화살표 함수로 바꿀 수 있습니다.

처음에는 굳이 바꿀 필요가 있나 느끼겠지만, 아래의 코드를 보면 

"쓸만하네?"라고 느낄 수 있어요.

 

2. Class

class Car {
	//생성자 함수
	constructor(name, car_name){
    	this.name = name;
    	this.car_name = car_name;
    }
    //함수
    race(){
    	console.log(this.name+'이(가)'+this.car_name+"타고 간다.");
    }
}
var user_car = new Car("건브로", "부카티 베이론");
user_car.race();

//결과
//건브로이(가)부카티 베이론타고 간다.

 

이렇게 자바의 클래스처럼 객체지향 프로그래밍이 가능해집니다.

클래스로 만들어서 프로그래밍하면 좋은 점은 바로 코드 재사용이 가능해진다는 점이에요.

근데 이 클래스를 수정하고 싶을 때가 있을 거예요.

 

class Car {
	
    constructor(name, car_name){
        this.name = name;
        this.car_name = car_name;
    }
    //함수
    race(){
    	console.log(this.name+'이(가)'+this.car_name+"타고 간다.");
    }
    count(){
    	return "1대의 ";
    }
}


class carWithDestination extends Car {
	constructor(name, car_name, location){
    	//super(인수)는 부모 클래스의 생성자의 내용을 가져오는 함수
        //아래의 코드와 super(인수)는 같다.
        //this.name = name;
        //this.car_name;
        
        super(name, car_name);
        this.location = location;
    }
    //overriding: 부모의 함수 이름과 같은 함수를 재정의한다.
    //super는 부모 클래스의 함수를 사용할 수 있게 한다.
    race(){
    	console.log(this.name+'이(가) '+this.location+"로 "+super.count() +this.car_name+"타고 간다.");
    }
}

var user_car = new carWithDestination("건브로", "부카티 베이론", "서울");
user_car.race();
//결과
//건브로이(가) 서울로 1대의 부카티 베이론타고 간다.

 

이번엔 Car 클래스를 상속해서 carWithDestination이라는 클래스를 만들었어요.

말 그대로 목적지가 있는 자동차 클래스를 만들었죠.

 

'extends'라는 코드는 현재 클래스가 상위 클래스를 상속할 수 있게 하는 코드입니다.

super에는 두 가지 종류가 있는데 함수로 쓰는 경우와 참조할 때 쓰는 경우가 있어요.

 

- 함수로 쓰는 경우: 생성자로써 사용할 때 => super(인수)

- 참조할 때 쓰는 경우: 상위 클래스의 함수를 참조하여 사용할 때 => super.함수명()

 

3. let과 const 키워드 그리고 scope

function scope(){
	const a = 0;
	let b = 0;
	var c = 0;
	
	if(a === 0){
		const a = 1;
		let b = 1;
		var c = 1;
		console.log(a, b, c);
	}
	console.log(a, b, c);
}

scope();
//결과
//1, 1, 1
//0, 0, 1

 

let과 const는 자바스크립트를 좀 더 엄격하게 변수를 선언할 수 있게 도와주는 키워드예요.

 

	var	let	const
특징	선언된 값을 바꿀수 있음	선언된 값을 바꿀수 있음	선언된 값을 바꿀수 없음
범위(scope)	함수	블록	블록

※블록: {} 안의 내용

 

let과 const는 블록 범위로 하기 때문에 위의 코드에서 if문 안의 변수와 밖의 변수 서로 영향을 주지 않아요.

대신 var는 함수 범위이기 때문에 서로 영향을 주죠.

 

4. Spread 연산자

const foods = ["치킨", "피자", "햄버거", "갈비", "삼겹살"];
const new_foods = [...foods];

console.log(foods);
console.log(new_foods);

//결과
//["치킨", "피자", "햄버거", "갈비", "삼겹살"]
//["치킨", "피자", "햄버거", "갈비", "삼겹살"]

 

Spread 연산자는 새로운 배열에 기존의 배열을 넣을 때 좋은 문법이에요.

Spread 문법 없이 그냥 for문과 push함수를 쓰면 코드가 길어지기 때문이죠.

이 문법은 객체에도 적용됩니다.

 

const obj = {
    name:"gunbro",
    age:"24",
    gender:"male"
};
const new_obj = {...obj};
console.log(new_obj);

//결과
//{name: "gunbro", age: "24", gender: "male"}

 

5. Template String

아래의 코드를 적용하기 전에 about:blank라고 주소창에 입력해주세요!

about:blank

 

이렇게 들어가셨으면, F12 눌러서 개발자 도구를 켜줍시다.

개발자 도구 - 콘솔창

이렇게 개발자 도구에서 console을 눌러서 아래의 코드를 입력하면 됩니다.

 

실행 결과

 

복붙해서 사용해보시면 about:blank 페이지가 변합니다.

 

const name = "gunbro"
const temp_html = `
	<h1>안녕하세요. ${name}입니다!!<h1>
`;
document.querySelector("body").innerHTML = temp_html;

 

옛날 코드를 사용했다면 "<h1>안녕하세요."+ name +"입니다!!</h1>"방식을 사용했어야 합니다.

 

이렇게 사용하니 눈으로 보기 편하지 않으신가요?

ES6문법은 이 내용 말고도 더 있지만, 빈번하게 사용하는 코드들만 살펴봤어요.

만약, 자주 사용하는 ES6 문법이 있다면 댓글 남겨주세요!