[APP-3] JavaScript - 앱 개발시 자주 쓰이는 java script

1. 함수를 짧게 - 기존 function을 Arrow Function(화살표 함수) 로 선언

// 기존방식
let a = function() {
  console.log("function");
}
a();


// 최근 화살표방식
let a = () => {
  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;       
//각각 blog 객체의 owner , getPost() 의 데이터가 할당
//blog의 키 값과 이름이 같아야 해요!
//(예 - owner가 아니라 owner2를 넣어보세요! 아무것도 안 들어온답니다.)

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

//함수에서 비구조 할당 방식으로 전달된 딕셔너리 값 꺼내기
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 message = "줄바꿈을 하려면 \n 이 기호를 써야 했죠!"

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

4. 딕셔너리를 짧게 만들어보기! - 객체 리터럴

/*
[기존 방식]
기존에는 객체(딕셔너리)를 생성할 때, 필드명과 대입할 변수명이 같은 상황에서 
다음과 같이 코드를 작성하였습니다.
*/
var name = "스파르타";
var job = "developer";

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

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


/**
[최신 방식]
최신 방식으로는 다음과 같이 간결하게 작성.
key:value 형태에서 단순히 변수명만 작성해주면 변수명과 동일한 필드가 생성되며, 그 변수값이 대입됨.
**/
var name = "스파르타";
var job = "developer";

var user = {
  name,
  job
}

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

5. 반복문의 또 다른 방식 map.

/**
리스트(배열)를 순회하여 값을 꺼내 확인할 땐 다음과 같이 for 반복문을 사용
이를 위해 리스트의 길이 값을 알아야 함.
**/
let numbers = [1,2,3,4,5,6,7];
for(let i=0; i<numbers.length; i++){
	console.log(numbers[i]);
}


/**
map은 리스트의 길이값을 몰라도 되며, 
for와는 반대로 리스트안에서 몇 번째에 있는 값인지 순서를 알려줌.
**/
let numbers = [1,2,3,4,5,6,7];

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

// 아래와 같다는 점! 눈치 채셨나요?
numbers.map(function(value,i) {
    console.log(value,i)
})