Javascript 2

함축적인 자바스크립트

• 현재는 함축적인 문법을 많이 쓴다.
• 간결하고 직관적

 

1) 화살표 함수

• function을 대신해 화살표로 선언

[기존 방식]

let a = function() {
  console.log("function");
}
a();

[최신 방식]

let a = () => {              // function() 을 () =>  로 대체
  console.log("arrow function");
}
a();.

 

2) 비구조 할당

• 딕셔너리 키와 값을 할당 과정을 거치지 않고 빠르게 꺼냄

//객체 
let blog = {
	owner : "noah",
	url : "noahlogs.tistory.com",
	getPost() { 
		console.log("ES6 문법 정리"); 
	}
};

//기존 할당 방식
let owner = blog.owner
let getPost = blog.getPost()


//비구조 할당 방식
let { owner, getPost } = blog;       


//함수에서 비구조 할당 방식으로 전달된 딕셔너리 값 꺼내기
let blogFunction = ({owner,url,getPost}) => {
	console.log(owner)
	console.log(url)
	console.log(getPost())
}

blogFunction(blog)

 

3) 리터럴

• 백틱( `)을 이용해 문자열을 + 기호 럾이 간단히 처리

const id = "myId" ;

//기존방식
const url = `http://noahlog.tistory.com/login/ + id ; 

//백틱(`)
const url = `http://noahlog.tistory.com/login/${id}` ;

const message = "줄바꿈을 하려면 \n 이 기호를 써야 했죠!"

const message = ` 줄바꿈도 마음대로
사용이 가능합니다. `

 

4) 객체 리터럴

• 딕셔너리를 짧게

[기존 방식]

var name = "스파르타";
var job = "developer";

var user = {
  name: name,
  job: job
}

console.log(user);
//{name: "스파르타", job: "developer"}


[최신 방식]

var name = "스파르타";
var job = "developer";

var user = {
  name,
  job
}

console.log(user);
//{name: "스파르타", job: "developer"}

 

5) map

• 반복문의 또 다른 방식
• for는 리스트의 길이 값을 알아야 했으나 map은 길이 값을 몰라도 되며, 리스트 안에서 몇 번째에 있는 값인지 순서를 알려준다.

//기존방식
let numbers = [1,2,3,4,5,6,7];
for(let i=0; i<numbers.length; i++){
	console.log(numbers[i]);
}

//map
let numbers = [1,2,3,4,5,6,7];

numbers.map((value,i) => { 
	console.log(value,i) 
})

//1 0
//2 1
//3 2
//4 3
//5 4
//6 5
//7 6