반응형
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)
})
728x90
반응형
'IT > App' 카테고리의 다른 글
최종 배포할 앱. (0) | 2023.01.16 |
---|---|
[APP-2] JavaScript 기초 (0) | 2023.01.10 |
[APP-1] 개발환경 준비하기 (0) | 2023.01.10 |
댓글0