앱개발에 자주 쓰이는 JS

es6

화살표 함수

const a = () => {console.log("화살표 함수")}

a()	// "화살표 함수"

비구조 할당 (key-value 빠르게 꺼내기)

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

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

//비구조 할당 방식
let { owner, getPost } = blog;       
//각각 blog 객체의 owner , getPost() 의 데이터가 할당
//blog의 키 값과 이름이 같아야 해요!
//(예 - owner가 아니라 owner2를 넣어보세요! 아무것도 안 들어온답니다.)

** 앞으로 리액트 네이티브 앱을 만들며 가장 많이 사용할 방식**

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

blogFunction(blog)

---

---

리터럴

const id = "idid"
const url = `http:www.lalala/${id}`; // http:www.lalala/idid

객체 리터럴

key:value 형태에서 단순히 변수명만 작성해주면 변수명과 동일한 필드가 생성되며 그 변수 값이 대입된다.

const name = "jung"
const job = "student"

const user = {
	name,
  	job
}

console.log(user)
//{name:"jung", job:"student"}

map - 다른 방식의 반복문

map(prop1,prop2) : prop1 > value, prop2 > 순서

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

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

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

---

---

module system

export는 자바스크립트의 값, 함수, 딕셔너리(객체) 또는 자바스크립트 파일 자체를 외부로 내보내는 키워드

import는 반대로 자바스크립트 파일 안으로 가져오는 키워드

export, import

util.js

export  times = (x) => {
  return x * x;
}
export plusTwo = (number) => {
  return number + 2;
}


main.js

import {times, plusTwo} from "./util.js";
console.log(times(2));	// 4
console.log(plusTwo(3)); // 5

default export

util.js

export default times = (x) => {
  return x * x;
}

main.js

import k from "./util.js";
console.log(k(2));	// 4