5/23 메모
TIL 작성항목
1. 메모
2. 문제 시도 해결 안것
3. 오늘 할 일 체크 + 내일 할 일
4. 기록
WIL 작성항목
1. 알게된점 총정리
2. 목표정리
5/24 일기
TIL은 자산! 작성항목대로 작성하자
5/24 기록
JavaScript 문법종합반 2주차
01_ES6기본
// ECMAScript6(ES6) 는 javascript 버전 중 하나로 2015년에 발표
// 1. let(변수), const(상수)
// 이전에는 var,
// let 은 재할당 가능 재정의 불가능
// 2. 화살표함수
// 3. 삼항연산자
// conditon ? true : false
console.log(1 === 1 ? 'true' : 'false');02_구조분배할당
// 구조분배할당 : 'destructuring' = 구조를 쪼갠다
// 배열이나 객체의 속성
// 1. 배열
// let [value1,value2] = [1,'aws'];
// console.log(value1, value2)
let arr = ['value1', 'value2', 'value3']
let [a, b, c, d] = arr;
// 이때 d 는 undefined 고 d=4 초기값을 설정해 주면 4로 표신된다.
// 또 새로운 value가 들어오면 배열의 데이터로 표시된다
console.log(a)
console.log(b)
console.log(c)
console.log(d)
// 2. 객체
let user = {
name: 'abc',
age: 30
};
let { name, age } = {
name: 'abd',
age: 30,
};
console.log(name) // 구조를 분해하여 string 구조
console.log(age)
// 2-1 새로운 이름으로 생성
let user = {
name: 'abc',
age: 30
};
let { name: newName, age: newAge } = user;
//console.log(name) // 오류 뜸
console.log(newName)
// 2-2 받을 항목이 더 많을 때 undefined (= 배열)
let user = {
name: 'abc',
age: 30
};
let { name, age, birthday } = user; // birthday='05-30' 으로 초기값 설정 가능
//단 user에 birthday 항목이 있을 땐 항목으로 재할당
console.log(name)
console.log(age)
console.log(birthday)03_단축속성명
// 1. 단축속성명 : property shorthand
const name = 'abc'
const age = 30
const obj = {
name: name,
age: age,
}; // 기본 구조
const obj2 = { name, age }; // 생략 가능하다. (key - value가 똑같을 경우)
//즉 배열 같지만 객체
// 2. 전개 구문 = spread operator
// destructuring 과 함께 es6 중에서 가장 많이 쓰이는 문법 중 하나
// 2-1 배열
let arr = [1, 2, 3];
console.log(arr);
console.log(...arr); // 배열 해체 후 속성만 나열
let newArr = [...arr, 4]
console.log(newArr); // 이런식으로 새로운 배열 생성 가능
// 2-2 객체
let user = {
name: 'aaa',
age: 34,
}
let user2 = { ...user }
console.log(user)
console.log(user2)
// 3. 나머지 매개변수 (rest parameter)
function example(a, b, c, ...args) { // ...args 는 매개변수의 개수를 모를 때
console.log(a, b, c)
console.log(...args) // args 만 적었을 시 배열 형태로 출력
};
example(1,2,3,4,5);
// 4. 탬플릿 리터럴(Template Literal)
console.log(`hello world ${3+3}`); // 백틱 속에 문자열
let text = "안녕하세요!";
console.log(`hello world ${text}`);
console.log(`
Hello
almost notepad
good backtik
`);// 백틱을 통해 멀티라인04_일급 객체로서의 함수
// 일급 객체로서의 함수
// 1. 특징
// 1-1 변수에 함수를 할당할 수 있다
// 함수가 마치 값으로 취급한다
// 함수가 나중에 사용될 수 있도록 조치가 되었다
const sayhello = function () {
console.log("안녕하세요");
} // 질문 : 매개변수가 있도록 함수를 만들면 다른 수식이 있으려나
// 1-2 함수를 인자로 다른 함수에 전달할 수가 있다.
// 콜백함수 : 매개변수로써 쓰이는 함수
// 고차함수 : 함수를 인자로 받거나 return하는 함수
function callFunction(func) {
//매개변수로 받은 func가 사실 함수다
func()
};
const sayhello = function () {
console.log("안녕하세요");
}
callFunction(sayhello);
// 1-3 함수를 반환할 수 있다
function createAdder(num) {
return function (x) {
return num + x;
};
}
const addFive = createAdder(5);
console.log(addFive(10));05_일급객체로서의함수
// 일급객체로서의함수(2)
const person = {
name: 'john',
age: 30,
isMarried: true,
sayHello: () => {
console.log(`hello my name is ${this.name} `)
} // 화살표 함수를 사용시 this 를 바인딩하지 않는다. undefined
sayHello: function () {
// console.log(`hello my name is ` + this.name)
console.log(`hello my name is ${this.name} `)
},
};
person.sayHello();
console.log(person)
// 배열의 요소로 함수를 할당
const myArr = [
function (a, b) {
return a + b;
},
function (a, b) {
return a - b;
},
]
console.log(myArr[1](6,1));
// 리팩토링 예제
function multiplyBy(num){
return function(x){
return x * num;
};
};
function add(x, y){
return x + y;
};
const multiplyBy2 = multiplyBy(2)
const multiplyBy3 = multiplyBy(3)
console.log(multiplyBy2(10));
console.log(multiplyBy3(10));
const addfinal = add(multiplyBy2(20),multiplyBy3(10));
console.log(addfinal);06_map
// Map
// JS -> 객체, 배열로 다양하고 복잡한 프로그램 제작
// 그럼에도, 반영하기엔 부족
// Map, Set 추가적인 자료구조 등장
// 목적 : 데이터의 구성, 검색, 사용을 효율적으로 처리 > 기존의 객체 또는 배열보다
// 1. Map
// - Key / Value
// Key에도 어떤 유형의 데이터도 들어올 수 있다.
// Key가 정렬된 순서로 저장되기 때문이다.
// 1-1 기능
// > 검색, 삭제, 제거, 여부확인
// const myMap = new Map();
// myMap.set('key', 'value');
// myMap.get('key');
// 반복 > keys(), values(), entries() 메소드를 이용해 반복
const myMap = new Map();
myMap.set("one", 1)
myMap.set("two", 2)
myMap.set("three", 3)
console.log(myMap.keys()) // key 나열
for (const key of myMap.keys()){
console.log(key);
};
console.log(myMap.values()) // value 나열
for (const value of myMap.values()){
console.log(value);
};
console.log(myMap.entries()) // entry 나열
for (const entry of myMap.entries()){
console.log(entry);
};
console.log(myMap.size); // 사이즈
console.log(myMap.has('two'));07_set
// Set
// - 고유한 값을 저장하는 자료구조이다.
// - 값만 저장한다
// - 키를 저장하지 않음
// - 값이 중복되지 않는 유일한 요소로만 구성된다
// 값 추가, 검색, 값 삭제, 모든 값 제거, 존재 여부 확인
const mySet = new Set();
mySet.add('value1');
mySet.add('value2');
mySet.add('value3');
mySet.add('value4');
mySet.add('value5');
mySet.add('value6');
// Iterator
for (const ee of mySet.values()) {
console.log(ee)
}