앱개발에 자주 쓰이는 Javascript -1

앱개발 종합반 1주차

08. 앱개발에 자주 쓰이는 Javascript -1

[ 함축적인 자바스크립트 ]

리액트에서 많이 사용되는 자바스크립트 소개

• 화살표 함수
• 비구조 할당
• 리터럴
• 객체 리터럴
• map
• module system

1) 화살표 함수 - 함수를 더 짧게!

#기존

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

#화살표 함수(arrow function)
: function을 쓰지 않고 화살표로 표현 가능함

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

2) 비구조 할당 - 딕셔너리 키와 값을 빠르게 꺼내기

: 딕셔너리에 있는 값을 꺼내 변수에 담을 때, 할당 과정을 거치기 않으면서 딕셔너리의 키 값 그대로 변수사용이 가능

#예시

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

함수에서 비구조 할당 방식으로 전달된 딕셔너리 값 꺼내기
(아래와 같이 중괄호만 써서 간단하게 할당 가능)

let blogFunction = ({owner,url,getPost}) => {
	console.log(owner)
	console.log(url)
	console.log(getPost())
}

blogFunction(blog)

cf) 비구조 할당으로 하면 중괄호로 변수 선언이 끝나는데
원래대로 하려면 아래와 같이 안에서 변수를 선언하고 값을 할당해야함

let blogFunction = (blogDic) => {

    let owner = blogDic.owner
    let url = blogDic.url
    let getPost = blogDic.getPost

	(여기에 또 위에처럼 console.log 쭉 써야 했겠지)
       
}

blog 자료에서 owner 데이터값을 가져오라고 할 때
아래 두 가지 방법으로 쓸 수 있음

let owner = blog["owner"]
=
let owner = blog.owner 같은 의미임

비구조 할당방식으로 변수를 만드려면 중괄호에 변수를 쓰면됨
(이 때 자료에 있는 키 값과 동일하게 변수 이름을 지정해야함)

let owner = blog.owner
let getPost = blog.getPost()
=
let { owner, getPost } = blog; 같은 의미임