(나의개발자일지) 1-5주차

함축적인 자바스크립트

 

기존에는 함수를 선언하기 위해서 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