함축적인 자바스크립트
기존에는 함수를 선언하기 위해서 function 키워드를 사용.
이를 화살표 함수 (Arrow Function) 문법으로도 선언이 가능합니다.
[기존 방식]과 function a(){ 는 같음.
}
let a = function() {
console.log("function");
}
a();
[최신 방식]
let a = () => {
console.log("arrow function");
}
a();
딕셔너리 키와 값을 빠르게 꺼내기! - 비구조 할당
딕셔너리에 있는 값을 꺼내 변수에 담을 때,
할당 과정을 거치기 않으면서 딕셔너리의 키 값 그대로 변수사용이 가능
//객체
let blog = {
owner : "noah",
url : "noahlogs.tistory.com",
getPost() {
console.log("ES6 문법 정리");
}
};
기존에는 blog.owner 또는 blog['owner'] 라고 처서 값을 꺼내야 했음
딕셔너리에도 함수를 가져올 수 있음 (getPost)
//기존 할당 방식
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 id2 = "myId" ;
const url2 =
"http://noahlog.tistory.com/login/" + id2;
const message = "줄바꿈을 하려면 \n 이 기호를 써야 했죠!"
const message = ` 줄바꿈도 마음대로
사용이 가능합니다. `
'(백틱)은 엔터를 치면 되며, 백틱 사이에는 하나의 문자열로 인식을 해서
모두 다 문자열이라고 치고 마음대로 띄거나 줄바꿈을 하거나 인식됨.
딕셔너리를 짧게 만들어보기! - 객체 리터럴
[기존 방식]
let name = "스파르타";
let 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 형태에서 단순히 변수명만 작성해주면 변수명과 동일한 필드가 생성되며, 그 변수값이 대입됩니다.
리스트(배열)를 순회하여 값을 꺼내 확인할 땐 다음과 같이 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)
})
//1 0
//2 1
//3 2
//4 3
//5 4
//6 5
//7 6
'개발일지' 카테고리의 다른 글
(나의개발일지) 2-1주차 (0) | 2023.03.05 |
---|---|
(나의개발자일지) 1-6주차(숙제) (0) | 2023.03.05 |
(나의개발자일지) 1-4주차 (0) | 2023.03.01 |
(나의개발자일지) 1-3주차 (0) | 2023.03.01 |
(나의개발자일지) 1-2주차 (0) | 2023.02.28 |