요번 주차는 개인 공부를 진행하면서 개인 프로젝트를 하는 주차이다.
javascript 기초, 심화 문법에 대해 공부하였다.
절차지향이란? 코드 맨윗줄부터 순서대로 코드를 실행
객체지향이란? 코드를 그룹으로 묶어서 처리한다.
동적 타이핑? :
string a = “abc”;
var a = “abc”; < 변수의 타입을 결정하지 않음. (run time에 결정되는 것이 동적 타이핑이다.)
2015년도에 대규모 문법적 향상이 있었다.
이전에는 var만 사용했다
let 변수, const 상수
변수와 상수의 차이점 : 한번 할당한 값을 바꿀 수 있는가?
화살표 함수
const add = () =>{
//코드들
}
condition ? true인 경우 : false인 경우;
구조를 찢어버려서 할당하는 것
배열이나 객체의 속성을 하나하나 떼어내서 그 값을 변수에 담는것.
let [val1, val2] = [1, "new"]
이렇게 되면 val1에는 숫자 1이 val2에는 “new”가 들어간다.
let arr = ["val1","val2","val3"];
let [a,b,c] = arr;
이럴 경우엔 각 arr 순서대로 a,b,c에 들어간다.
만약 변수의 값이 요소보다 더 많이 있다면? undefined로 읽힌다.
let {nickname, old} ={
name: 'nana',
age: 13
}
이 경우에는 nickname이 name을 old가 age의 값을 가지게 된다.
let user = {
name: 'haha',
age: 14
}
let { name, age, birth='today'} = user;
이렇게 초기 값을 정해줄 수 있다. (undefined일 경우에만 초기값이 들어가고 원래 값이 있다면 그 값으로 출력된다.)
const name = 'haha';
const age = '35';
const obj = {
name,
age
}
이 경우에 obj는 배열로 보이지만 key 와 value의 name이 같다면 value 값을 생략해도 값이 들어간다.
정말 많이 사용하는 ES6구문이다.
let arr = [1,2,3,4,5];
console.log(arr); //출력결과: [1,2,3,4,5]
console.log(...arr); //출력결과: 1, 2, 3, 4, 5
let user = {
name : 'nam',
age : 30
};
let user2 = { ...user };
console.log(user2); //출력결과: { name: 'nana', age: 30 }
function example (a, b, c, ...args){
console.log(a,b,c); //1,2,3
console.log(args); //[4,5,6,7,8,9]
}
example(1,2,3,4,5,6,7,8,9);
위와 같은 코드일 때, args를 전개 구문으로 해두지 않으면 나머지 내용을 놓치게 된다. 저렇게 args로 묶어주면 매개 변수값을 몇 개를 받아도 넣을 수 있다.
console.log(`hello my name is ${name}.`};
이렇게 ${}를 이용해서 백틱안에 넣으면 변수값을 바로 넣을 수 있다.
템플릿 리터럴은 멀티 라인을 지원한다.
console.log(`Hi!
my name is haha`};
이렇게 쓰면 그대로 나타난다.
JS에선 함수를 일급객체(First-Class Object)라고 한다.
따라서 함수를 객체처럼 다룰 수 있다.
const addNum = function(){
//코드들
}
이렇게 선언하면 addNum을 계속 불러서 사용할 수 있다.
function callFun(func){
func();
}
매개변수로 함수를 받을 수 있다.
callFunc(()=>{
//코드
}
이러한 것은 함수가 일급 개게라서
function createAdder(num) {
return function (x) {
return x + num;
};
}
const addFive = createAdder(5); // createAdder(5) == return x + 5
console.log(addFive(10)); //출력결과: 15
결국 return 을 함수로 할 수 있다.
const person = {
name : 'irine',
age : 30,
isMarried : false,
sayHello: () => {
console.log(`Hello My Name is ${this.name}`;
}
}
function으로 객체 안에 넣었을 때, this는 person을 가르키지만,
화살표 함수로 this를 가르키면 undefined가 나온다.
const myArr = [
function (a, b) {
return a + b;
},
function (a, b) {
return a - b;
},
}
console.log(myArr[0](1, 3)); //출력결과 : 4
console.log(myArr[1](10, 7)); //출력결과 : 3
function multiplyBy(num) {
return function (x) {
return x * num;
};
}
function add (x, y) {
return x + y;
}
const multiplyByTwo = multiplyBy(2); //return x * 2
const multiplyByThree = multiplyBy(3); //return x * 3
console.log(multiplyByTwo(10)); // 20
console.log(multiplyByThree(10)); //30
const result = add(multiplyByTwo(5), multiplyByThree(10));
console.log(result); //40
이렇게 함수를 반환하는 식으로 코드를 작성하면 코드가 간결해져서 유지 보수도 쉬워지고 복잡한 기능도 구현할 수 있다.
map, set은 최근에 등장한 자료구조이다.
: 기존의 배열과 객체보다 데이터의 구성, 검색, 사용을 효율적으로 처리
const myMap = new Map();
myMap.set('key', 'value'); //key에 value값 저장
myMap.get('key'); //key에 해당하는 값 불러오기, 없으면 undefined
myMap.has('key'); //key가 존재하면 true or false
myMap.delete('key'); //key에 해당하는 값 삭제
myMap.clear(); //맵 안에 있는 모든 요소를 제거
myMap.size; //요소의 개수를 반
set과 get은 세트처럼 묶여있다.
맵은 iterator(반복자)를 가지고 있기 때문에 for ~ of를 쓸 수 있다.
method:
const myMap = new Map();
myMap.set("one", 1);
myMap.set("two", 2);
myMap.set("three", 3);
console.log(myMap.keys()); //[Map Iterator] { 'one', 'two', 'three' }
console.log(myMap.entries()); //[Map Entries] { [ 'one', 1 ], [ 'two', 2 ], [ 'three', 3 ] }
for (const key of myMap.keys()) {
console.log(key);
}
출력 결과 :
one
two
three
자료구조 중에 하나.
javaScript의 기본기를 다지는건 신나는 일같다. 명확하게 개념을 적립함으로 아리쏭하게 사용했던 것들을 내것으로 만들었다.
노션에 메모한 것을 급하게 크롭해 온거지만, vsCode에서도 코드로 정리하면서 공부한 것들이 있는데, 정리해두면 좋을 것 같아서 내일 국취제 가야해서 자소서 쓰는 건만 해결되면 string이나 array, object 메소드들을 정리해서 올려야겠다. 두고두고 봐야 안까먹을 것 같다.