2023.02.08 JavaScript

JavaScript

4. const 키워드

방향 코드 생성 방향을 위한 값을 숫자로 정의하기.
동서남북 1234로 지정하고 var walkTo = 4;
방향을 기호화한 것임.
그런데 한달 두달 후에 고치려고 하는데 이 4가 어느방향인지 까먹음.
숫자라는 것을 기호화 햇을 때 문자가 되는 것임. 이숫자를 더 잘표현하기 위해 변수로 했다.
var N = 1;이런식으로 그런데 이 값이 다른걸로 대치 될수 있으니 문제가 발생할 수 있다.
java에서의 final같은것음
const N = 1; 하면 값을 바꿀수 없가하는 const이다.

const print = function(){} 함수이름이 바뀌면 문제가 발생하니 함수를 const로 선언하면 바뀔일이 없다.

var add = function(){} 햇엇는데 다른 누군가가 add = 3;하면 함수가 없어져버림
const를 하면 선언이 안된다. 다름사람이 내것을 바꾸는 것을 막을 수 잇다.

5. Template String

지금까지 문자열을 담을때 let template = ""에 담앗다.
``는 어금보 내려쓰기하든 공백을 하든 상관이없다.
기존의 문자열도 꽃아넣는것도 쉽다.
문자열안에 변수를 꽃고싶다면 `${title}` 하면된다.

let template = " <section> \
            <h1></h1> \
            <p></p> \
            </section> \
            ";

html을 동적으로 넣기위해 과거에는 내려쓰기를 포함하려면 공백도 없애고 \을 사용해야햇엇다.

let title  = "ES6";
    let content = "새로운 문자열"
    let template = `<section>
        <h1>${title}</h1>
        <p>${content}</p>
    </section>
    `;       

console.log(template);
다중라인도 쉽게 표현하고 중간에 변수명도 쉽게 넣을수 있게 되었다.
만약 이스케이프 문자도 포함해서 그냥 출력하고싶다.?
String.raw(`\n\n\n`)

6. 향상된 JSON 객체 표현식 #1

객체를 생성할때 다음과 같이 햇엇다.
let kor = 30; let eng = 40; let math = 50;
var exam = {kor:kor, eng:eng, math:math}
만약 변수로 객체를 만들때 변수이름과 컬럼을 같게 하는 경우가 많다.
이런것을 var exam = {kor, eng, math}로 만들수 있게 되었다. 변수나열만해도 알아서 속성이 따라간다.

어떤 개체를 만드느 함수가 잇을때

function createExam(kor, eng, math){
    return{kor,eng,math}
}
var exam = createExam(10,20,30);

하기만해도 각각 매핑되서 객체를 만들기 쉬워졋다.

객체를 생성할때 function이라는 키워드를 제거해도
return{kor:kor, eng:eng, totla:function(){}} -> return{kor,eng,total(){}}만 해도되게 되었다.

let kor = 30; 
let eng = 40; 
let math = 50;

let exam = {kor, eng, math, total(){return 10;}};

console.log(exam.kor);
console.log(exam.total());

json으로 객체를 표현할때 키와 값으로 햇어야햇는데 값만 나열해도 되게 되엇다.

7. 향상된 JSON 객체 표현식 #2 : 변수형 속성

json에서 키값으로 -가 사용되어야하면 ""로 묶어젔다.
이런 String을 let 변수에 담아서 속성으로 사용한다면? 오류가 발생한다.
let style= {
"backgroud-color":"red"
};
->
let cssAttr = "backgroud-color"
-?
let style= {
cssAttr:"red"
};
->오류 그런데 이게 가능해짐
let style= {
[cssAttr]:"red"
};
[]안에 변수를 담으면 변수의 키값으로 담을 수 있게 되었다. 심지어는 연산자도 가능하다.
이게 필요할까? 다음에 배울 symbol을 통해 사용되는 것 같다.자주 사용은 안하고 필요하면 쓰고 남용은 하지말자.

let attr = "kor";
let exam = {
    [attr]:10
};

console.log(exam.kor); // 10

이걸 억지로 쓰는건 무리가 있다. 필요할때 사용해봐라

8. Object Destructuring #1

객체 뽀개기??
구조적인 데이터를 사용할때 데이터를 그룹화해서 사용하는 경우가 있다.

function printExam(exam){
    let total = exam.kor + exam.eng + exam.math;
    console.log(`kor:${exam.kor}, eng:${exam.eng}, math:${exam.math});
    console.log(${total})
}

    function printExam(exam){
    let kor = exam.kor;
    let eng = exam.eng;
    let math =  exam.math;
    let total = kor + eng +m ath;
    console.log(`kor:${kor}, eng:${eng}, math:${math});
    console.log(${total})
}

위는 구조를 사용하는 연산자를 직접 사용하고 밑에는 지역변수화해서 사용한다.
밑에거 객체 속성들을 값을 옮겨담는거 Destructuring이라고 한다.
+만 연산이 아니라 exam.kor자체도 연산이다.연산수가 위에가 더 많아서 더 비효율적이게 된다.
javascript ES6에선 이것을 도와준다.
exam이 속성을 kor eng를 가지고 있다면 let {kor, eng} = exam; 하면 알아서 쪼개준다.

function exam(exam) {
    let {kor, eng} = exam;
    console.log(`kor:${kor}, eng:${eng}`);
}

function exam({kor, eng}) {

    console.log(`kor:${kor}, eng:${eng}`);
}

심지어 속성만사용한다면 매개변수에 직접 넣어도 객체 쪼개기를 사용할 수 있다.

9. Object Destructuring #2

속성확장과 기본값
Destructuring 후에 객체의 값을 다시 대입하려면?
let {kor, eng} = exam;
이객체와 지역변수는 사실남남이엇다.
exam.kor = 10;
exam.eng = 20;

let {kor, eng} = exam; 다시하려면 에러가 발생한다.

let exam = {
    kor: 10,
    eng: 30,
    math: 40
};

let { kor, eng, math } = exam;

console.log(`kor:${kor}, eng:${eng}, math:${math}`);

exam의 kor값과 math값이 바뀌엇을때 exam의 값이 바뀐것이지 지역변수 값이 바뀐게아니다.

exam.kor = 100;
exam.math = 90;

kor = exam.kor;
eng = exam.eng; 

이렇게 해줘야한다. 그런데 귀찮다.
({ kor, math } = exam);
앞뒤에 ()을 감싸면 된다.

console.log(`kor:${kor}, eng:${eng}, math:${math}`);

객체 없는 것을 넣을 수 있나? 된다.
객체 뽀개기를 이용해서 기본값을 넣는 것도 가능하다.
let { kor, eng, math, total=kor+eng+math} = exam;

10. Object Destructuring #3 중첩과 적응

객체의 속성과 다른 이름을 지정하려면 어떻게 해야할까?
let { kor, eng} = exam;
console.log(korean);
console.log(english);
let { kor:korean, eng:english} 이렇게 별칭을 달아주면 가능하다.
이제 값을 꺼내쓰려면 korean 과 english만 가능하다.

또한 객체안에 객체를 중첩할 수있다.
let {student:{names}} = exam;
console.log(name); exam에서 객체를 꺼내서 이것을 지역변수화 해서 사용할 수 있다.

let exam = {
    kor: 10,
    eng: 30,
    math: 40,
    student:{
        name:"newlec",
        phone:"010-2222-3333"
    }
};

let {kor, eng, student:{name}, student:{phone}} = exam;

console.log(kor); //10
console.log(eng);  //30
console.log(name); //newlec
console.log(phone); //010-2222-3333

지역변수화해서 출력할수있게 되엇다.

이런 객체뽀개기를 어디서 사용할 수 잇을까?
함수에 매개변수를 넣어서 바로 지역변수로 사용하면 편하게 사용할 수있다.

다양한 방식으로 함수를 선언할 수 있게 되어서 많이 써봐야 익숙해질 수 있다.

11. Array Destructuring #1

이번엔 배열을 뽀개보자.
let kors = [10,20,30];

let [kor1, kor2] = kors; //10 20
배열을 뽀개듯이 뽑을 수있다.
kor3만 뽑고싶다면 건너뛰고 뽑으면된다.
let [ , , kor3] = kors; //30

나중에 temp배열이 생겨서 값을 바꾸고 싶다.
let temp = [40,70,30];
[kor1, kor2, kor3] = temp;

객체는 ()에 담앗는데 선언문만 빠지고 그냥 넣으면된다.

Array Destructuring의 Assignment 기능을 이용해서 순서를 재배열 할 수 있다.
let x = 2;
let y = 3;
let z = 5;

[z, x , y] = [x, y, z]
원래는 temp변수를 만들고 t =x; x = y; y =t;를 햇엇는데 [x,y] = [y,x ] 만해주면된다.

12. Array Destructuring #2

let exam = [10,20,30];
존재하지 않는 값을 넣으면 넣어지나? 순차적으로 담기는데 추가는 가능한데 값이 들어가지 않는다.
let [kor, eng, math, com] = exam;
이것의 초기값이 무엇일까?
undefined지만 com = 40 으로 기본값을 넣을 수 있다.

배열의 중첩
let exam = [10,20,30, [40, 50]];
let [kor, eng, math, [com, history]] = exam;
이렇게 뽑아내면 쉽게뽑아낼 수있다.
let notice = {
title:"공지사항",
files:["img1.png", "img2.png"]
}
객체안에 배열이 중첩되엇을때 각각뽑아내보자.
let {files:[first]} = notice; 해서 뽑아써야한다. file1개를 first라는 이름으로뽑아낸거

let notices = {
    title:"공지사항",
    list:[
        {title:"aa", content:"dd"},
        {title:"bb", content:"cc"},
    ]
}

객체안에 배열이있고 그 배열안에 객체가 잇을경우
let {list:[notice]} = notices; 리스트에서 첫번째 항목을 뽑아낸다.
두번째거는 let {list:[, notice2]} = notices;
console.log(notice2.title);하면 2번째의 title을뽑아낼수도 있다.

배열이 객체를 가지고 객체가 배열을 가지는 뇌절을 잘 꺼내야한다.

13. Set 콜렉션

배열안에 객체를 담고 객체안에 배열을 담는등으로 collection을 만들었다.
실제적인 collection이 나왓다 그걸 알아보자.

다른객체는 내장으로 set list map등이 다 있다.
자바스크립트는 list와 비슷한 배열을 가지고 있엇다. 가변길이의 데이터 공간.
얘들의 차이는 값을 식별하는 값이 다르다.
list 는 idnex로 map은 키값으로 달라고 햇엇다.

Set은 데이터가 곧 식별자이다. 그래서 같은 값을 넣을 수가 없다. 중복된 값을 허용하지 않는다.
Set은 특정한값을 달라고 할 수 없다. 5가 담겨잇니? 3이담겨잇니?정도로 만 물어볼 수있다.
얘는 값을 나열할 수 있는 것이 잇고 이게 iteraotor이다.

let set = new Set();
set.add(5);
set.add("2");

이런식으로 담을 수 있다. 그런데 add라는 함수가 set을 반환한다.

set
 .add(5)
 .add("5")

그래서 이런식으로 꼬리물기로 담을 수 있게 되었다.

또 Set을 만들때는 배열로 만들수 잇다. 배열에 중복된 값이 있다면?
let set = new Set([2,4,3,5,6,4,3]);
해주면 중복된 값을 제거해준다.

let ar = [2,4,3,5,6,4,3]
let set = new Set(ar);
console.log(set.size); // 5
실제로 실습하면 이렇게 된다.

값을 하려면 먼저 forEach문이다. forEach문은 담겨진 function을 실행한다.

set.forEach(function(value, key, ownerSet) {
    console.log(key+":"+value);
})

밸류, 키, ownerSet(사용하고 있는 set)
for-of를 이용한 값 나열

for (let v of set)
    console.log(v);

for in은 키값을 얻어주는 거엿다면 for of는 값을 얻어주는 것이다.

for (let [key, value] of set.entries()){
    console.log(`${key}:${value}`);
}

for of문도 키와 값을 배열로 얻어올 수 있다.

set은 순회하는 것이외에 하나씩뽑아올 순없다.
set.has(5)이런식으로 하면 값을 가지고 있는지 true false값을뽑을 수는 있다.
set.delete(5); 하면 5가잇니?하고 삭제할 수 있다
set.clear(); 하면 set을 다없앨 수잇다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Set
set의 기능을 알아볼 수 있다.

14. Map 콜렉션

map은 값과 키값이 한번에 저장된다.
map.set("id",1);
키만뽑거나 값만뽑거나 등등 이 다 있다.

let exam = new Map();
exam.set("kor", 10);
exam.set("eng", 10);
exam.set("math", 10);

for (let [k, v]of exam)
    console.log(`${k}, ${v}`);

set 뽑아내듯이 뽑아내면된다.
let exam = new Map([[1,"hello"],[2,"hi"],[3, "oky"]]);
배열안에 배열을 넣는 방식으로 쉽게 값을 넣을수도 잇다.

15. Rest Parameters

함수
함수의 매개변수로 지정되지 않은 값들
function print(x,y)가잇을때
print(1,2,3,4,5,6) 이런식으로 넣어도 오류가 없엇다.
여기서 사용되지 않는 나머지 argument 3,4,5,6 이런애들이 Rest이다.

argument[2]로 해서 뽑앗엇는데 앞에 몇개가 있는지 모르겟고 구분하기 귀찮으니 별칭으로 가져오고 싶다.
여기서 지원되는게 Rest Parameters이다.
function print(x,y, ...values)
values[0] 나머지것들로부터 index가 시작되서 이런식으로 뽑을 수 있게 된다.

16. Spread Operator

function print(nums){
    console.log(nums[0]);
    console.log(nums[1]);
    console.log(nums[2]);
}

let nums = [2,4,6];
print(nums); 

배열을 이런식으로 뽑울 수잇다.
그런데 함수가 가변적인 매개변수를 받는다면?

function print(x, y, z){
    console.log(x);
    console.log(y);
    console.log(z);
}
print(nums[0], nums[1], nums[3]);

이런식으로 담아줘야한다.
-> print(...nums); 하면 nums가 가진 값들을 흩으려뜨리고 넣어준다.
Rest argument와 비슷한 느낌인데 매개변수에 넣는게 아니라 전달하는 데에 넣는 것임.

이것은 배열에서만 가능한게 아니라 컬렉션에서도 사용할 수 있다.
let set = new Set([2,4,6]);
let nums = [...set];
단순히 매게변수에 넣는게 아니라 값을 나열하고 싶다면 다 된다.

너무다 다양하게 중첩이 되는게 문제이다.
맵의 키값을 가져올 수도 있다.
[...map][0][0] 이런식으로 중첩하는게 문제이다.

17. Default Value의 이전방식과 현재방식

함수의 기본값이 추가가 되었다.
function add(x, y){
return x + y;
}
add(2,3)이렇게 매개변수를 전달하는데 넘칠때는 문제가 없지만
add(1) 이런식으로 모자랄때는 undefined가 되엇다. 그래서 결과가 NaN이 됫다.

과거에는 x = x || 0; y = y || 0; ||이 논리값이 아니면 앞에게 0이나 null undefined가 아니면 앞에 값을 출력해줫다.
만약 앞내용이 그런류라면 뒤문자를 출력해줫다.
파이프연산처럼 실제 존재하는 값을 찾을대까지 넘어가서 출력햇엇다.
이걸 꼼수로 사용햇엇다.

function print(x, y){
    x = x || 0;
    y = y || 0;
    return x + y;
}

->

function print(x=0, y=0){
    return x + y;
}

이제 그냥 기본값을 넣을 수 있게 되엇다. 기본값이 마음에 들면 그냥 기본값을 의도적으로 사용할 수 있게 되엇다.
function print(x(필수), y=10, z(필수)){
return x + y + z;
}
만약 x와 z만 필수이고 기본값을 중간에 넣어서 기본값을 그냥 쓰고싶다면?
add(10, null or undefined , 20)이런식으로 넣으면 기본값을 그대로 출력할 수 있다.

그런데 궁금한점 값을 하나만 넣을 수잇는데 argument는 기본값도 값으로 가지나?
-> 기본값은 argument가 아니기때문에 argument에 포함되지 않는다.

18. Arrow Functions와 그 특징

함수를 작성할때 function 으로 만들엇다.
함수안에 함수를 만들대 window.addEventListener("load", function() {}); 햇엇다.
표기법이 이런식으로 변햇다.
window.addEventListener("load", () => {});
단순히 표기법이 다른게아니라 no this, no argument, no super, no new.target
function은 본디 객체를 만드는 생성자 역할, 함수 역할을 햇엇다. 그런데 이 =>사용하면 객체를 만드는게 아니라 함수 역할만하게된다.

function Exam() {
    this.kor = 0;
    this.eng = 0;
    this.math = 0;
}

let exam = new Exam();

console.log(exam.kor);

객체를 초기화하면 new로 호출햇어야햇다.

function print() {
    this.kor = 10;
    console.log("print");
}  

print();

그런데 이런식으로 그냥 함수를 호출하면 kor이라는 변수가 window.kor 전역변수로 들어가게 되는 것이엇다.
알고쓰면 괜찮은데 그냥사용하면 문제가 된다.
Arrow Functions을 사용하면 객체 지향을 넘어서 그냥 함수의 역할만을 하게 된다.
그런데 이걸 어디에 사용하냐? 로직을 다른곳에 편리하게 넘길때 사용한다.
또 함수가 가진게 오로지 return밖에 없다.
var fun1 = (x,y) => x+y;
중괄호를 빼고 그냥 이렇게 넣을 수 있다. 매개변수가 하나라면 x=>x;
-> 자바의 람다식과 비슷한 내용이다!! 나중에 자바에서 람다식 공부할때 다시보면될듯하다.

2023.02.08 후기

뒤의 내용 class등이 잇는데 javascript의 변경점과 동시에 자바스크립트의 구체적인 내용으로 들어가게 되서 내가 필요한 내용이 아니어서 일단은 넘기기로 햇다.
내일부터는 근본으로 돌아가서 java기본부터 다시 살펴보고자 한다. 람다식 제네릭 등을 잊게 된 것 같다. 자주 사용하지 않은 부분들을 다시 봄으로써 공부가 될 것이다.