[ES6] 문법 익히기

• Template Literal

일반적으로 string 자료형을 조합할 때 + 연산자를 사용한다.

그러나 문자열을 더하는 과정이 많아지면 + 연산자가 많아지고 띄어쓰기 같은 작업을 하기가 번거롭다.

이때 Template Literal을 사용하면 더 쉽게 만들 수 있고 가독성이 높아진다.

 

<기존>

const hello = "안녕";
const introduct = "나는 톰이야."
const age = 5;

//기존 방식
const text = hello + "! " + introduce + " 그리고 " + age + "살이야."

 

<Template Literal 방식>

const newText = `${hello}! ${introduce} 그리고 ${age}살이야`

 

• Desturcturing(구조 분해 할당)

객체와 배열에 들어있는 값을 가져올 때 Desturcturing기능을 사용하면 손쉽게 값을 뽑아낼 수 있다.

 

<기존>

const tom = {
	name : 'Tom',
    age : 28
};
const people = ['민수', '철수']

var name = tom.name
var age = tom.age
var minsoo = people[0];
var chulsoo = people[1];

 

<Destructuring 방식>

var {name, age} = tom;
console.log(name); //tom이 출력된다.

const [minsoo, chulsoo] = people;

 

• map, forEach

map, forEach는 배열에서 기본으로 제공해주는 메소드로 배열을 가공할 때 많이 사용된다.

 

<기존>

var products = [{
	name : '농구공',
    price : 50000
},{
	name : '축구공',
    price : 50000
}]

for(var i=0; i < products.length; i++){
	var name = products[i].name;
    console.log('제품 이름 : ' + name);
}

 

<Array Method 방식>

이들의 콜백 함수에는 첫 번째 인자에서는 배열에서 조회하는 값, 두 번째 인자에는 순서(index)가 들어간다.

map, forEach 메소드는 모두 배열을 조회한다는 기능은 동일하다.

다만 forEach는 별다른 return이 없는 반면 map은 새로운 배열을 반환(return)한다.

 

//첫번째 파라미터에는 값, 두번째 파라미터에는 순서(index)가 들어간다.
products.forEach(function (product, index) { 
         console.log((index + 1) + '번째 호출');
         console.log(product);
})

//동일하게 조회
products.map(function(product, index){ 
         console.log((index + 1) + '번째 호출');
         console.log(product);
});

//productNames는 각 product의 name이 들어간 배열이다
var productNames = products.map((product, index) => { 
     return product.name;
});

//React에서는 다음과 같은 방식으로 데이터가 담긴 배열을 화면에 표시합니다.
var productElements = products.map((product,index) =>{ 
	return (
		<div>
			<span>{product.name}</span>
			...
		</div>
	)
})

 

• Lambda Function(람다 함수)

function을 표현하는 새로운 방식인 Lambda식은 () -> {} 형식을 사용한다.

arrow function이라고도 많이 부른다.

 

<기존>

function getName(name){
	return `${name} 입니다`
}

const getName = function(){

}

 

<람다 함수 방식>

const getName = () -> {

}

const getName = (name) -> `${name}입니다`

 

• conditional ternary operator(3항 연산자)

3항 연산자는 if 조건문을 단축 형태로 사용할 수 있다.

 

<기본>

const language = 'javascript';

if(language === 'javascript'){
	console.log('재밌다')
}else{
	console.log('재미없다')
}

 

<3항 연산자 방식>

condition ? exprIfTrue : exprIfFalse 구문으로

condition이 true라면 exprIfTrue가 실행되고 아니라면 exprIfFalse가 실행된다.

language === 'javascript' ? console.log('재밌다') : console.log('재미없다')

const isJavascript = language === 'javascript'? true : false //result에 true가 들어온다.