[개발일지] 개발에 자주 쓰이는 Javascript, ES6

개발자이긴 한데 기초가 늘 부족하다.

 

기초를 탄탄하게 쌓아두자.

 

과거에 머무르지 말자.

 

성장하고자 하지 않으면 이 바닥에서는 썩을물 된다...

 

 

 

 

일단 변수 타입 var를 안쓴다. let으로 쓰는게 맞다.

 

 

 

 

그리고 기본은 정확하게 인지하고 사용하자

 

1. 리스트를 배열(Array)이라고도 부릅니다

 

let a_list = []  // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능!

// 또는,

let b_list = [1,2,'hey',3] // 로 선언 가능

b_list[1] // 2 를 출력
b_list[2] // 'hey'를 출력

// 리스트에 요소 넣기
b_list.push('헤이')
b_list // [1, 2, "hey", 3, "헤이"] 를 출력

// 리스트의 길이 구하기
b_list.length // 5를 출력

 

 

2.  딕셔너리: 키(key)-밸류(value) 값의 묶음

 

let a_dict = {}  // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능!

// 또는,

let b_dict = {'name':'Bob','age':21} // 로 선언 가능
b_dict['name'] // 'Bob'을 출력
b_dict['age'] // 21을 출력

b_dict['height'] = 180 // 딕셔너리에 키:밸류 넣기
b_dict // {name: "Bob", age: 21, height: 180}을 출력

 

3. 리스트와 딕셔너리의 조합

 

names = [{'name':'bob','age':20},{'name':'carry','age':38}]

// names[0]['name']의 값은? 'bob'
// names[1]['name']의 값은? 'carry'

new_name = {'name':'john','age':7}
names.push(new_name)

// names의 값은? [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}]
// names[2]['name']의 값은? 'john'

 

4. 딕셔너리의 자주쓰는 또 다른 표현

 

let b_dict = {'name':'Bob','age':21}

//bob 이름을 꺼낼땐 두 가지 방식으로 깞을 꺼낼 수 있습니다.
b_dict['name']
b_dict.name

둘다 똑같이 딕셔너리의 키값에 접근하여 값을 꺼내옵니다.

 

 

 

 

ES6 문법에 익숙해 지자.

 

함수를 더 짧게! - 화살표 함수

 

[기존 방식]

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 문법 정리"); 
	}
};

//기존 할당 방식
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 message = "줄바꿈을 하려면 \n 이 기호를 써야 했죠!"

const message = ` 줄바꿈도 마음대로
사용이 가능합니다. `

 

딕셔너리를 짧게 만들어보기! - 객체 리터럴

 

[기존 방식]

var name = "스파르타";
var 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"}

 

map -반복문의 또 다른 방식

 

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