스파르타 앱개발 종합반_1주차(앱개발용 문법)

앱개발에 쓰이는 자바스크립트

 

기본문법을 배웠다면.

이제 앱 개발을 위해 더 간략히 쓰이는 문법들

앱 개발에 주로 쓰이는 문법들

 

몇가지를 정리해본다

 

1. 화살표 함수 (Arrow Function)

 

기존 함수를 선언할 때 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. 자유로운 줄바꿈

 

키보드에서 느낌표 옆에 있는 키인 백틱 ( ` ) 을 이용하여

문자열을 + 기호 없이 간단히 처리할 수 있다.

백틱 ( ` ) 안에서는 여러 줄의 줄바꿈도 자유롭게 사용 가능하다고 한다.

 

앞으로 써볼일만 남았군.

 

 

4. 딕셔너리 간결화_객체 리터럴

 

[기존 방식]

let name = "스파르타";
let job = "developer";

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

console.log(user);

 

//{name: "스파르타", job: "developer"}

 

중복해서 써야할 부분을 간단하게 입력하여도 같은 값이 출력된다.

 

[최신 방식]

let name = "스파르타";
let job = "developer";

let user = {
  name,
  job
}

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

 

5. 반복문 간결화

 

let numbers = [1,2,3,4,5,6,7];
for(let i=0; i<numbers.length; i++){
   console.log(numbers[i]);
}

 

기존 for을 사용한 반복문 사용에서

중간 복잡한 식 대신 '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

형식으로 반복문이 출력된다.

 

 

간단한 앱개발 문법을 배우고나니

 

숙제가 주어진다.

총 2개!

 

자바를 처음 접해본 나로썬 모르는것이 당연하니 

최선을 다해서 구글링하여 답을 찾아내보자!

 

1. map함수를 사용하여 배열에서 특정 원소 개수 구하기

 

 - 다음에서 '딸기'는 몇 개일가?

 

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

let count = 0;
for (let i = 0; i < fruit_list.length; i++) {
   let fruit = fruit_list[i];
   if (fruit == '딸기') {
     count += 1;
   }
}
console.log(count);

 

for 형식을 map을 활용한 문법으로 바꿔서 개수 구하기 문제!!

 

<정답>

let fruit_list = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기']
let count = 0;
fruit_list.map((f)=>{
    if(f == "딸기") count += 1
})

console.log(count)

 

 

 

 

 

 

 

2. filter 함수로 '포도'만 들어 있는 podo_list 구현하기

 

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

 

 

filter 와 podo_list를 사용하여 관련 값이 나오도록 구조를 짜보자!

<정답>

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

let podo_list = fruit_list.filter((f)=>{
   return f == '포도'
})

console.log(podo_list)

 

 

 

이번 숙제 열심히 해결하고

2주차부턴 더 어려워질 문법에 적응하도록

 

강의를 몇번이고 반복해서 봐야할 것 같단 생각이 든다..