앱개발 강의 1주차 Note - (4) 앱개발에 자주 쓰이는 함축적인 JS 문법
앱개발에 자주쓰이는 함축적인 자바스크립트 문법 배우기
앱개발에 쓰이는 리액트 네이티브는 최신버전의 자바스크립트 문법을 사용한다. (ES6)
공식문서를 볼 때 당황하지 않기 위해..! 함축적이고 간결한 문법을 배워보자.
1. 화살표 함수
함수 선언을 fuction을 썼는데, 화살표 함수로 쓸 수 있다.
let a function(){
console.log("함수")
}
let a = () => {
}
fuction 키워드 자체를 뺴고, 대신에 얘가 함수다라는걸 알려줄 필요가 있다.
그래서 화살표 기호를 썼다.
2.딕셔너리 키와 값을 빠르게 꺼내기
객체에는 함수도 넣을 수 있다. 리스트, 딕셔너리 등에 뭐든 다 넣을 수 있다.
let blog = {
owner : "noah",
url : "noahlogs.tistory.com",
getPost() {
console.log("ES6 문법 정리");
}
};
큰따옴표가 없나? 사실 없어도 상관 없었다.
안붙여도 키와 밸류 형태를 컴퓨터는 인지한다.
let owner = blog.owner
let owner = blog["owner"] //이렇게 키값을 꺼낼 수도 있지.
let getPost = blog.getPost()
그런데 딕셔너리에 변수가 100개 넘게 있다고 생각해보라.
손으로 다 써서 넣을것인가?...아니다.
//비구조 할당 방식
let { owner, getPost } = blog;
중괄호 쓰고 안에 변수를 넣어주면 된다.
키값이랑 값이 이름이 독같아야한다.
함수에서 비구조 할당 방식으로 전달된 딕셔너리 값을 꺼낼 수 있다.
let blogFunction = ({owner,url,getPost}) => {
console.log(owner)
console.log(url)
console.log(getPost())
}
아래보다는, 위 방식이 더 짧고 간단하다.
let blogFunction = (blogDic) => {
let owner = blogDic.owner
}
blogFunction(blog)
---
앱개발 자바스크립트 2
1. 자바스크립트 안에서 줄바꿈을 자유롭게 - 리터럴
//백틱 키(`)
유용한점? 줄바꿈이 자유롭다.
중간에 엔터 쳐도 줄바꿈 가능한것
`나는
줄바꿈 입니다.
같은 줄이지요
`
워드에서 글 쓰듯이 된다.
원래라면 \n을 쓰는데, 가독성도 떨어지고 불편.
중간에 문자열을 가독성 해치지 않게 쓸 수도 있다.
let name = "영상"
let str = "제 이름은 " + name
console.log(str)
이걸 쉽게 할 수 있다.
let str2 = `제 이름은 ${name}`;
즉, 중간에 변수를 넣을 수 있다. 백틱을 쓰면됨.
2. 딕셔너리를 짧게 만들기 - 객체 리터럴
var name = "스파르타"
var job = "developer";
var user = {
name: name,
job: job}
//변수와 키가 이름이 똑같다. 그러면, 하나만 써도 된다.
var name2 = "스파르타"
var job2 = "developer";
var user = {
name2,
job2}
console.log(user);
코드 줄을 줄인게 왜 좋은가?
길면 퍼포먼스가 떨어지고 가독성이 떨어진다.
축약하면 간결, 효율적으로 코드를 짤 수 있다.
---
앱개발 자바스크립트 3
1. 반복문의 또다른 방식, map
기존 for문은 이렇게 썼다.
let numbers = [1,2,3,4,5,6,7];
for(let i=0; i<numbers.length; i++){
console.log(array[i]);
}
// 길이값을 모르면 어떡하지..? map은 리스트 길이 몰라도 된다.
let num_list = [1,2,3,4,5,6,7]
num_list.map(()=>{})
num_list.map(function(value,i){
console.log(value,i)
})
맵 함수 안에 함수가 들어가있고 실행된다.
value(값)과, i(인덱스. 순서)를 넘겨준다.
함수에 map이 값을 던져주는데, 리스트에 담긴 값 하나하나를 넘기고 순서도 넘ㄱ준다.
2. 자바스크립트 파일을 모듈화 - module system
자바스크립트 파일을 불러와서 쓸 수도 있다.
export는 밖에서 쓸수 있다는 것
import는 그런 파일을 불러오는 키워드.
util.js 라는 파일이 있다고 가정. (거기에 함수가 있다)
외부에서 쓸 수 있는 함수를 내보낸다.
export function times(x) {
return x * x;
index.js 파일에서, 불러온다.
외부에서 쓰게끔 만든 파일을 불러온다.
import{time, plusTwo} from './util.js';
console.log(times(2));
console.log(plusTwo(3));
export default 키워드는 파일 자체를 변수로 명명해서 쓸 수 있다.
<진행했던 숙제>
1.배열에서 특정원수 갯수 구하기. map 함수 쓰기.
딸기는 몇개일까?
2. 이메일 판별하기.
함수 안 로직을 채우자.
indexOf를 검색하고 활용해서 써봐라.
자바스크립트 이메일 정규표현식을 검색해서 써보자.