스파르타 앱개발종합반 1주차-2

앱개발에 자주 쓰이는 JavaScript

• 함축적인 문법 사용
• ES6 문법(ECMAScript(=ES)의 6번째 개정판 문서에 있는 표준 스펙)
• 참고) ES6 이후 변경점

---

화살표 함수

• function 대신 화살표(=>)로 함수 선언

[기존 방식]

let a = function() {   // function a() { ~~ } 와 같음
  console.log("function");
}
a();


[최신 방식]

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

---

딕셔너리 비구조 할당

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

//객체 
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 = "myId" ;
const url = `http://noahlog.tistory.com/login/${id}` // 문자열에 변수 넣기
// 기존 방식 : const url = 'http://noahlog.tistory.com/login/' + id

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

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

---

객체 리터럴

• 딕셔너리를 짧게 만들 수 있다

[기존 방식]

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"}

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

---

map 함수

• 반복문의 또 다른 형식
• 리스트의 길이값은 필요하지 않음
• for와는 반대로 리스트안에서 몇 번째에 있는 값인지 순서를 알려줌

arr.map(callbackFunction(element, index, array), thisArg)

• index, array, thisArg 생략 가능

[for문]

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) 
})

// 아래와 같다는 점! 눈치 채셨나요?

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

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

• for문은 정해진 반복 횟수 안에서 인덱스를 사용해 리스트 요소를 수동으로 뽑아가며 순환함
• map은 자동으로 리스트 요소 꺼내가며 순환. 각 배열 요소에 대해 콜백함수 호출됨

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

let num_list = numbers.map((value) => { 
	return value 
})
console.log(num_list) // [1,2,3,4,5,6,7]

• map 콜백함수에서 return값은 리스트로 저장됨

---

filter 함수

• 기존 배열에서 특정 조건을 만족하는 요소만 걸러내 새 배열을 생성
• map과 마찬가지로 주어진 배열 자동 순회

const newArray = arr.filter( callbackFunction( element, index, array ), thisArg );

• index, array, thisArg 생략 가능

let fruit_list = ['사과','감','감','배','포도','포도','딸기',
'포도','감','수박','딸기']

let grape_list = fruit_list.filter((fruit) => {
    return fruit == '포도'
})

console.log(grape_list) // ['포도', '포도', '포도']