weekly develop diary
-
-
자바스크립트에 대하여
👉 보통 **자바스크립트**는 웹 사이트(웹 문서)에 움직이는 그림을 그릴 때 쓰이는 작고 가벼운 언어입니다.
-
-
-
자바스크립트로 어떤 것들을 할 수 있을까?
👉 이제는 자바스크립트로 앱도 만들 수 있습니다. (우리가 배울 리액트 네이티브가 자바스크립트를 기반으로 하기 때문이죠!!)따라서 자바스크립트를 배워 놓으면 웹도 만들고 앱도 만들 수 있습니다.
-
-
-
리스트(배열) & 딕셔너리(객체)
💡 리스트를 배열(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를 출력- 딕셔너리: 키(key)-밸류(value) 값의 묶음 👉 딕셔너리는 객체로도 불립니다
let a_dict = {} // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능!
// 또는,
let b_dict = {'name':'Bob','age':21} // 로 선언 가능
b_dict['name'] // 'Bob'을 출력
b_dict['age'] // 21을 출력
b_dict['height'] = 180 // 딕셔너리에 키:밸류 넣기
- 리스트와 딕셔너리의 조합
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'- 13) 함수를 더 짧게! - 화살표 함수 👉 기존에는 함수를 선언하기 위해서 `function` 키워드를 사용했습니다. 이를 **화살표 함수 (Arrow Function)** 문법으로도 선언이 가능합니다.
[기존 방식]
let a = function() {
console.log("function");
}
a();
[최신 방식]
let a = () => {
console.log("arrow function");
}
a();.- 14) 딕셔너리 키와 값을 빠르게 꺼내기! - 비구조 할당 👉 딕셔너리에 있는 값을 꺼내 변수에 담을 때, 할당 과정을 거치기 않으면서 딕셔너리의 키 값 그대로 변수사용이 가능합니다.
//객체
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)- 16) 딕셔너리를 짧게 만들어보기! - 객체 리터럴
- 기존에는 객체(딕셔너리)를 생성할 때, 필드명과 대입할 변수명이 같은 상황에서 다음과 같이 코드를 작성하였습니다.
[기존 방식]
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"}-
key: value 형태에서 단순히 변수명만 작성해주면 변수명과 동일한 필드가 생성되며, 그 변수값이 대입됩니다.
-
17) map -반복문의 또 다른 방식
👉 리스트(배열)를 순회하여 값을 꺼내 확인할 땐 다음과 같이 for 반복문을 사용했습니다.
let numbers = [1,2,3,4,5,6,7];
for(let i=0; i<numbers.length; i++){
console.log(numbers[i]);
}map 함수의 경우 쓸 수 있는 여러가지 방식이 있다.
1. Array.map(callback) : 새로운 배열 리턴
const arr1 = [1, 4, 9, 16];
const arr2 = arr1.map(function(x) {
console.log("Doubling for " + x);
return x * 2;
});
console.log(arr2);
1.2 Arrow function으로 구현
const arr1 = [1, 4, 9, 16];
const arr2 = arr1.map(x => x * 2);
console.log(arr2);
2. Array.map(function(value, index)) : Index 인자로 받기
const arr1 = [1, 4, 9, 16];
const arr2 = arr1.map(function(x, index) {
console.log("Doubling for arr1[" + index + "] = " + x);
return x * 2;
});
console.log(arr2);
3. Array.map(function(value, index, array)) : Index, Array 인자로 받기
const arr1 = [1, 4, 9, 16];
const arr2 = arr1.map(function(x, index, array) {
console.log("Doubling for arr1[" + index + "] = "
+ x + ", " + array[index]);
return x * 2;
});
console.log(arr2);
출처 : https://codechacha.com/ko/javascript-array-map/- 숙제 : filter 함수로 '포도'만 들어 있는 podo_list 리스트 구현해보기
filter 함수가 무엇인지 먼저 알아야겠다.
filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]따라서
let fruit_list = ['사과','감','감','배','포도','포도','딸기',
'포도','감','수박','딸기']
let podo_list = fruit_list.filter(podo => podo == '포도'
console.log(podo_list)하면 podo_list에는 ['포도', '포도', '포도'] 가 할당된다.
한 주간 Javascript의 기초에 대해서 배우면서 어려운 내용은 아니지만 실제로 코드를 구현함에 있어서 처음보는 방식도 많았고 오랜만에 보는 메서드도 있었다. 지금의 내용은 시작에 불과하지만 시간이 지나고 앱을 만들고 마켓에 등록하여 유지 보수를 할 수 있는 그 날까지 끊임없이 키보드를 다닥 다닥 두드릴 것이다.
SuccessiveP