앱개발에 자주 쓰이는 함축적 자바스크립트

1. 함축적 함수넣는 방식 => 화살표

 

[기존 방식] (리터럴 방식)

let a = function() {             //변수 a에 function이라는 함수를 만들어 넣어라

        console.log("function");      

}

a();

 

[최신 방식]

let a = () => {     

        console.log("arrow function");

}

a();.

 

---> 해설)   변수 a에 똑같이 함수를 넣는건 마찬가지이고, function이라는 키워드가 없어지는 대신

오른쪽 화살표 =>를 둡니다. (축약형으로 만드는 방식)

앱개발에서 위의 화살표 함수를 가장많이 쓰이게 됨

 

2. 비구조 할당

비구조 할당은 딕셔너리 키와 값을 빠르게 꺼내기 위함

 

 

 

//객체

let blog = {

     owner : "noah",

     url : "noahlogs.tistory.com",

     getPost() {   //딕셔너리에는 함수도 가질 수 있음.

         console.log("ES6 문법 정리");

      }

};

 

//기존 할당 방식

let owner = blog.owner   //블로그에서 값을 꺼내려면 blog.owner라고 치던가 아니면 blog['owner']라고 쳐야했는데

let getPost = blog.getPost() 

// 기존에는 키와 벨류(값)이 연결된 구조로 딕셔너리를 우리가 운영했는데

난데 없이 함수가 들어가있는데 함수도 딕셔너리에 가질 수 있음

그냥 키값을 지칭해서 값을 꺼내듯이 함수를 똑같이 써서 값을 꺼내도 됨.

 

//비구조 할당 방식은(코드가 주는 방식)

let { owner, getPost } = blog;

//각각 blog 객체의 owner , getPost() 의 데이터가 할당(중복되는 것을 한번만 쓰고 할당했다 치는 방식)

//blog의 키 값과 이름이 같아야 해요!

//(예 - owner가 아니라 owner2를 넣어보세요! 아무것도 안 들어온답니다.)

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

 

 

//함수에서 비구조 할당 방식으로 전달된 딕셔너리 값 꺼내기

//blogfunction라는 함수에 blog라는 딕셔너리 객체를 넘긴다

// 중괄호에 키값(owner,url,gerPost)을  이름이 놓여있게됨.

그러면 우리는 넘긴 키값에 따른 이 값을 우리가 바로 사용할 수 있게됨.

 

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

     console.log(owner)

     console.log(url)

     console.log(getPost())

}

blogFunction(blog)

 

 

3. 자바스크립트 안에서 줄바꿈을 자유롭게 (백틱)

const id = "myId"; //문자열을 사용할때 const로 변수를 선언했는데 큰따옴표나 작은따옴표를 사용했다

const url = `http://noahlog.tistory.com/login/$(id)`;  //백틱이란 기호 사용할 수 있음(문자열을 사용하는 기호)

 

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

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

// 백틱을 사용하면 효율적임 (백틱은 바로 줄바꿈하려면 엔터를 치면된다.)

//  백틱이 끝날때까지 하나의 문자열로 인식을 해줌 띄워쓰기 까지

// 백틱을 사용하면 id를 문자열 안에 넣을 수 있음.

 

앱개발시 코드에 간결성이 중요~!!!

축약형 자바스크립트 검색할때는 "ES6"라고 검색하면 된다.

ES6 3,4,5 진화된 방식 최근에는 ES6, 7정도임

 

4. 반복문 (for)의 또 다른 방식 map함수 (앱개발에서 자주 쓰이지 않음)

let numbers = [1,2,3,4,5,6,7];   //numbets 변수에는 1~7 리스트의 값이 들어있다. 

numbers.map((value,i) => {     //numbers 변수에 map 함수를 끼워넣는다(나사와 볼트처럼)

console.log(value,i)   // 그럼 value에는 1이 들어가 있어서 마지막 요서(7)까지 map이 알아서 반복문을 돌려줌.

})