I. 들어가며
1)
바벨이 지원하는게 es6까지인데, 나머지는 바벨이 알아서 해주기 때문에 우리가 바벨에 있는거만 배우면 돼!
II. JS6
1. 기본 복습
(1) 화살표 함수
1) arrow function
let f1 = function(){
console.log("test");
}
let f2 = () =>{
console.log("test");
}위 아래는 결과만 같지, 실제로는 다른 것이야!
어떻게 다를까? 자세히 seTimeout()을 이용해서 알아보자!
2) arrow function with Class
this.x = 30;
setTimeout(()=>{
console.log(this.x);
},3000);
setTimeout(function(){
console.log(this.x);
}, 3000);
//=====================
class Test{
constructor(){
this.x=10;
setTimeout(()=>{
console.log(this.x);
}, 3000);
setTimeout(function(){
console.log(this.x);
}, 3000);
}
}
new Test(); // new하면 생성자가 호출이 됨
위 두개는 this가 둘다 window인 경우라서 결과가 동일해
--
아래 두개는 class 로 만든 것에 결과는 달라 this 가 달라진거야
lamda나, arrow 같은 경우는 자기만의 this가 없어
그 외는 인스턴스로 호출되는경우 this가 있어, 그런데 없는 애들은 outter의 this를 써!
자기만의 지역을 가지지않고, outter를 하고싶으면 arrow나 lamda를 쓰면 돼!
3) strict mode => 내가 선언하지 않으면 쓸수 없음 , this 붙이더라도 이건 window에 들어가는것임
"use strict";
x = 20;
this.x = 30;
setTimeout(()=>{
console.log(this.x);
},3000);
setTimeout(function(){
console.log(this.x);
}, 3000);
class Test{
constructor(){
this.x=10;
setTimeout(()=>{
console.log(this.x);
}, 3000);
setTimeout(function(){
console.log(this.x);
}, 3000);
}
}
new Test(); // new하면 생성자가 호출이 됨
strict mode에서 var, let 으로 선언하지않고 x 를 쓴 경우에 이렇게 정의조차 되지 않았다고 한다.
4) argument
setTimeout(()=>{
console.log(arguments.length);
console.log(this.x);
},3000);js는 매개변수를 가지지않아, 설령 지정했어도, 이건 argument에 대해서 별칭을 지정해주는것에 불과해
정리하면 일반 함수는 this 가지고, argument는 collection으로 값을 받아,
그런데 arrow는 argument가 아니라 매개변수로 받아!
그래서 다음과 같이 settimeout의 화살표 함수는 다음과 같이 오류가 발생해(정의되지않았다고)
어떤경우에 화살표함수를 사용해야할까?
(2) 클래스 그리고 렉시컬(동적scope)
1) class 만들기
//class 자체가 strict 모드
class Exam{
constructor(kor=100, eng=100, math=100){
this.kor = kor;
this.eng = eng;
this.math =math;
// this.total;
// this.avg;
}
total(){
let total = this.kor + this.eng + this.math;
return total;
}
avg(){
let avg = this.total() / 3;
return avg;
}
}
new Exam();
new Exam.extends;우선 class 자체가 strict mode이다
국영수 및 total,avg를 만들어보자
2) class 상속
그리고, exam()에다가 extends를 해보자!
class NewExam extends Exam{
constructor(com=0){
this.com = com;
}
}
let exam = new NewExam();
다음과같은 오류가 발생해 : 부모를 호츨하지않아서 그래!
class NewExam extends Exam{
constructor(kor=0,eng=0,math=0,com=0){
super(kor,eng,math);
this.com = com;
}
}
let exam = new NewExam();super() 를 한다. 이렇게 하면 괜찮아져!
3) total 오버라이딩
let exam = new NewExam(100,100,100,100);
console.log(exam.total());이렇게 해도 출력은 400이 아니라 300이 나와 우리는 total에 대해서 override가 필요해!
total 을 재정의 해야해!
class NewExam extends Exam{
constructor(kor=0,eng=0,math=0,com=0){
super(kor,eng,math);
this.com = com;
}
total(){
return super.total() + this.com;
}
}
let exam = new NewExam(100,100,100,100);
console.log(exam.total());super.total() 하고나서 추가로 해
total에서 이렇게 가능해!
4) 은닉화
#을 써서
은닉화 해보자
//class 자체가 strict 모드
class Exam{
#kor;
#eng;
#math;
constructor(kor=100, eng=100, math=100){
this.#kor = kor;
this.#eng = eng;
this.#math =math;
// this.total;
// this.avg;
}
total(){
let total = this.#kor + this.#eng + this.#math;
return total;
}
avg(){
let avg = this.total() / 3;
return avg;
}
}class NewExam extends Exam{
#com;
constructor(kor=0,eng=0,math=0,com=0){
super(kor,eng,math);
this.com = com;
}
total(){
return super.total() + this.com;
}
#test(){
console.log("hehehe");
}
}
let exam = new NewExam(100,100,100,100);
console.log(exam.total());
exam.#test();
#test()는 get,set이 없어서 접근을 할 수없다.
5)
//class 자체가 strict 모드
class Exam{
#kor;
#eng;
#math;
constructor(kor=100, eng=100, math=100){
this.#kor = kor;
this.#eng = eng;
this.#math =math;
// this.total;
// this.avg;
}
set kor(kor){
this.#kor = kor;
}
get kor(){
return this.#kor;
}
total(){
let total = this.#kor + this.#eng + this.#math;
return total;
}
avg(){
let avg = this.total() / 3;
return avg;
}
}console.log(exam.kor);
exam.kor = 50;
console.log(exam.kor);
결국 다음과 같이 100을 50으로 set 도 되고, 콘솔에다가 get 으로 출력도 가능하다
이렇게 하면 JS로 캡슐화하는 법은 터득한것이다!
(3) 객체사용
1) 객체에서 변수와, 함수정의 차이점 + 속성변수 설정관련
[prototype] 대괄호가 사용되면 변수도 올 수도 있고, 연산자도 올 수있어
한편...
// enhaced Object Literals
let kor = 3;
let eng = 4;
let math = 5;
let obj = {
kor : kor,
eng : eng,
math : math,
total:function(){
return this.kor + this.eng + this.math;
}
}; //normal object
//enhance!!
//1. 변수를 이용해 속성을 정의할 경우
// 변수명과 키가 같은이름일 경우에는 키를별도로 설정할 필요가없다.
//2. 함수를 정의할때
let enhObj = {
kor,
eng,
math,
total(){
return this.kor + this.eng + this.math;
}
}1. 변수를 이용해 속성을 정의할 경우: 변수명과 키가 같은이름일 경우에는 키를별도로 설정할 필요가없다.
2. 함수를 정의할 때 : :function 키워드 사용할 필요가없다
let colname = "okay" //속성에 변수설정
let enhObj = {
kor,
eng,
math,
total(){
return this.kor + this.eng + this.math;
},
"to-string" :function(){
console.log("hello");
},
[colname] : function(){ //속성에 변수설정
console.log("올라라");
}
}
enhObj.okay();3. 속성으로 변수가 올 수있다. ??? 이 기능이 향상
(4) 템플리 스트링(문자열)
1)
MVC 구현 때문에 만들어진거야
// template String
{
let kor = 30;
let eng = 40;
let msg = `\\ <sapn>yay~ </sapn> \\`;
let template= `kor:${kor}, eng:${eng}, msg:${msg}`;
console.log(template);
}
(5)디폴트, 레스트,스프레드
1)
default 는 앞서 보았던 기본값 설정방법이다.
함수정의 시 rest 는 매개변수이름앞에 점 세개를 붙이는 방법이다.
(의미 : rest parameter - 나머지 매개변수)
2)
// spread Operator
{
function print(x,y,z){
console.log(`x:${x},y:${y},z:${z}`);
}
let ar = [2,3,5];
print(...ar);
}rest 와 반대인데
spread는 함수 정의가 아니라 호출할 때! 하나씩 뿌려주는거야
디스크럭쳐링 처럼 왼쪽에서 받는 느낌이야
즉 spread 를 안쓰면 x값 하나에 x 배열값이 다 가는건데,
spread 를 쓰면 x,y,z값 매개변수 모두에 배열값이 대입이 되는거야
(5) 컬렉션
1) for-of 와 set 컬렉션
for-of 는 컬렉션과 관련된 것이다 컬렉션에 대해서 알아보자
set 에다가 값을 넣어줄 때 6번 반복해서 넣어준다. 즉 6번 반복인데 중복되면 5개로 끝이나는 것
2)
{
// let lotto = [2,4,6,29,];
let lotto = new Set();
for(let i = 0 ; i < 6 ; i ++)
lotto.add(Math.floor(Math.random() * 45 + 1));
console.log(lotto);
// lotto.get //get 이 없다.
//종류가 3가지나 있어
console.log(lotto.entries().next());
console.log(lotto.values().next());
console.log(lotto.keys().next());
}*45 를 해서 45까지만 나오게 해준다. 그리고 + 1 을해준다
이경우 올림은 ceil, 내림은 floor, 반올림은 round를 해준다.
26번줄 : 우선 key와 값이 같은 set이기 때문에
27번줄 : value, key 상관없이 출력은 같아
28번줄 : entires()는 key,value가 둘다 배열로 나오는거야
next() 이터레이터 관련된거야!
III. 이터레이터
1. 컬렉션과 제네릭
(1) 들어가며
1)
- 쿼리로 정렬 집계등을 하는건데, DB 에서 또 하는건 뭔가 잘못되고 이상한거야
(2) 컬렉션
|
유일한 컬렉션 :array
일반적인 언어에서 지원하는 컬렉션 : set, array, map
set 계열 : key, value가 같다 -> 값의 중복을 허용하지않는다.
(중복제거용 - 로또만들기 담고나서 6개만 확인하면 가능)
List 계열 : Array는 값의 삽입위치가 키가 된다. index기반의 컬렉션
Map계열 : 키를 따로 설정할 수 있다.
값에 키를 설정하기 위한 컬렉션으로 임시 객체를 대신해서 사용한다.
컬렉션이 가져야 할 기능 -> 값들을 열거할 수 있느냐
|
1)
컬렉션은 언어를 떠나서 data를 다룰 수 있는 중요한 녀석이야! 자바의 자랑은 컬렉션이 포함되어있다는 거였어
컬렉션은 인덱스를 신경쓰지 안을 수 있었어! 알아서 넣고, 알아서 공간을 늘릴 수 있었어
그냥 data 넣어줘 하면 끝이야!
컬렉션은 굳이 말하면 가변길이 데이터 배열이야!
(2) 정수형 컬렉션 구하기
integer 형으로 컬렉션을 구할 수있어 하지만, 매번 자료형을 결정해서 하는것은 번거로워
(3) Object 형식
1) Object 필요성
int 는 int만인데 그 외 다양한 데이터를 컬렉션(list)하려면 문제가 있어
그래서 자바는 태어날 때 부터 컬렉션 가졌는데, 이 컬렉션은 Object형이야!
왜냐? 어떤것이든 object 면 못담을게 없기때문이야
모든 것을 받기위한 것으로 무엇이냐! object이다!
2) 오토박싱
list[4] 는 참조가 안되는데,이런경우는 Boxing을 해주면 돼!
과거에는 직접 boxing을 해줬어야해 수작업으로 이루어 졌어! (jdk 1.x 까지)
2.x 부터 오토박싱이 되었어
이제 어떤 데이터이던 object에 못담는게 없다!
어떠한 값도 object로 받을 수있어
이제 data를 오브젝트형식으로 컬렉션을 만들거야!
(4) 범용 컬렉션의 필요성
1) 제네릭의 필요성
특화된 자료형만으로 하면 자료형 갯수만큼 따로 만들어주어야해!
따로하자니 반복되고, 오브젝트로하자니 모든데이터 담아버리고 이후 형변환하고 어떡하냐?
그래서 나온게 제네릭이야!
오브젝트로 다 담아버리는걸 해결하는건데, 오브젝트형으로 꺼내지기 때문에 형변환해서 사용해야하는거야!
우리는 이것을 다른방법 즉 제네릭을 사용해!
2) 제네릭의 탄생
자료형을 규명하지않는 수준까지 미리 만들어놓기!!
미리만들어놓은 코드이지만, 완성해야 할! 코드야
몇가지만 완성하면 되는거야 (미완성상태) -> 런타임(or 컴파일러)가 완성해주는거야!
자바는 컴파일러가 반드시 필요한게 아닌데,실행되는 시점이 되었을 때 런타임환경이 만들어주는거야!
2. JAVA 실습
(1) hashSet 과 제네릭
1) 제네릭 정의
사용할 수 있는 형태를 정해주면 알아서 되는거야!
<Integer>로 정의해주면 set.add() 할때 필요한 자료형은 Integer를 요구해
2) 이터레이터 사용
import java.util.HashSet;
import java.util.Set;
public class App {
public static void main(String[] args) throws Exception {
Set<Integer> set = new HashSet<>();
set.add(3);
set.add(34);
set.add(35);
set.add(36);
set.add(37);
System.out.println(set.iterator().next());
System.out.println(set.iterator().next());
System.out.println(set.iterator().next());
System.out.println(set.iterator().next());
System.out.println(set.iterator().next());
System.out.println(set.size());
}
}
이렇게 하면 set 이 다나와! 그런데 34만 나와
(2) 이터레이터 문제제기
열거라는것은 다음 값 내놔 하나로 다음 값 내놓는거야
다 통용될 수있는 단일화되는 열거방식이야!
그런데 컬렉션이 왜 직접 next()가 아니라 iterator()를 통해서 가능한지 생각해보아야해
iterator 가 무엇이고 왜 필요한지 생각해보아야해
(3) 열거서비스 이터레이터
1) 이터레이터의 필요성
index 굳이 알필요없이 next()로 다음버전 다음버전하는거야
그런데 문제가 다음값 가지기위한 인덱스를 가지고 있을텐데 이게 문제야
왜? 저게 쓰레드에서 동작을 한다면... (단일이 아니라 멀티쓰레드에서 동작시 열거서비스 문제가 됨)
어떤문제가 문제될까?
3개값 add하고 2개가 각각 다른 스레드에서 된다고 가정하자
두개가 쓰레드가 하나의 자원을 공유할 때 문제가 발생해
이러면 얘가 읽을 때 검사한것은 첫번째 값인데, 파란색이 다해버려서... 주황색은 그 다음 다음값이 와버려...
다음값 그냥 내놔라는 단일스레드에서는 문제가 안되는데, 다중은 문제가 돼
인덱스를 스레드가 공유하면 안되게 해!
공유하면 서로 이빨 빠지니까 "스레드 마다 인덱스를 개별화" 하는거야!
2) 이터레이터 사용
인덱스는 각자 가져가라고 해서 증가시키게 하는거야
인덱스는 개별화 되어서 스레드가 여러개라도 안전해! 대신 컬렉션은 공유하는거야!
이터레이터 달라하고 나서 next()를 호출하는거야
public class App {
public static void main(String[] args) throws Exception {
Set<Integer> set = new HashSet<>();
set.add(3);
set.add(34);
set.add(35);
set.add(36);
set.add(37);
Iterator<Integer> it = set.iterator();
while(it.hasNext()){
System.out.println(it.next());
}
System.out.println();
System.out.println(set.size());
System.out.println();
//그런데 반복이 번거로워 그래서 나온게 foreach 야
for(Integer n : set)
System.out.println(n);
}
}iterator로 반복을 할 수 있어
이경우 hasNext()로 반복이 되지만 번거로워! 그래서 나온게 for-each 문이야!
2. JS 실습
(1) set
1) next() 사용하기
let lotto = new Set();
for(let i = 0 ; i < 6 ; i ++)
lotto.add(Math.floor(Math.random() * 45 + 1));
console.log(lotto);
let it = lotto.values();
console.log(it.next());
console.log(it.next());
반복문을 아직 사용하지 않았다. 반복문을 쓰려면 어떡해야할까?
while(!(result = it.next()).done){
}done 은 마지막값인지 나타내는거야 이거는 번거로워
2) for-of 사용 : java와 JS 차이
그래서 이터레이너 전용으로 for-of 를 쓰는거야 (자바에서는 자동으로 해주는 것과달리)
자바와 개념은 비슷한데 사용방법에 조금 차이가 있는거야
//js
for(let n of it)
console.log(n);//java
for(Integer n : set)
System.out.println(n);3) 이터레이터 사용 예 2: entries() 사용한 경우
let kvit= lotto.entries();
for(let [k,v] of kvit)
console.log(`key:${k}, values:${v}`);
뽀개기 방식으로 가능해!!
let ar = [3,5,6,78,2,4,5];
let kvit= ar.entries();
for(let [k,v] of kvit)
console.log(`key:${k}, values:${v}`);
let ar = [3,5,6,78,2,4,5];
let kvit= ar.entries();
for(let entry of kvit)
console.log(`key:${entry[0]}, values:${entry[1]}`);뽀개기를 하지않으면 직접 log에다가 배열인덱스를 넣어서 써야해
3. js에서 컬렉션 사용
(1) map 컬렉션
1) map 사용 과 entries() / for-of
{
let map = new Map();
map.set("id", 1);
map.set("title", "hello");
map.set("writerId", "newlec");
let kvit = map.entries();
for(let [k,v] of kvit){
console.log(`key:${k}, value:${v}`);
}
}
2) for-each
ES5 까지는 이렇게 썻어
map.forEach((v,k,m)=>{
console.log(`key:${k}, value:${v}, cols:${m}`);
})
(2) 자바와의 비교
1) 이터레이터 사용
for(Integer n : set)
System.out.println(n);
System.out.println("-----");
set.forEach((v)->{
System.out.println(v);
});
람다식을 활용해서 가능해! 람다식 이용하기전에는 consumer를 직접해야했어!
consumer interface를 구현한 class야!
set.forEach(new Consumer<T>() {
public void accerpt(Integer value){
System.out.println(value);
}
});interface를 구현한다
즉 익명클래스에다가 객체를 넣어주는 방식인데, 이제 누구나 할 수있는 함수형태로 위의 foreach()처럼 가능해!
(3) JS에서 interface와 symbol
1) js에서 구현
자바에서는 interface가 있었어 무언가 약속 된거하려면 interface로 이용해서 interface를 구현한것으로 쓰려고헀던거야
구조가 같다고 해서 걔를 생각해서 쓰는건 아니야
let exam = {
kor:10,
eng:20,
math :30,
values(){
return{
next(){
return{
done : false,
value : this.kor
}
}
}
}
};
for(let n of exam)
console.log(n); //이터러블 하지않음 exam은...
객체를 for-of로 쓸 수있을까? 하지만 쓸수 없다.
2) symbol의 대두
이런경우 symbol을 이용하면 돼
// ----symbol------
{
function iterator(){
console.log("아히유~~");
}
// function iterator(){
// return [2,3,4];
// }
function print(it){
for(let n of it)
console.log(n);
}
print(iterator());
}
이터러블 하지않아
이름은 같은데, 내가 원하는 행위를 하지않는 녀석이 있어 이런경우 심볼을 써
아래쪽 print() function을 호출 이렇게 돼
특정이름에 대해서 쓸 수있게 해주는게 iterator야!!
3)
심볼이란 다시 뽑을 수 없는 식별자를 해주는것! 약속된 이름을 만드는 것을 의미함
객체에서 이름충돌이 없는 유일한 프로퍼티를 만들기 위함이다.
// ----symbol------
{
//심볼은 다시 뽑을수 없는 식별자를 해주는거야!
//약속된 이름을 만드는 녀석이야!
let s = Symbol();
let exam ={
kor:10,
e : 20,
m : 30,
[s](){
return this.kor + this.e;
}
};
let aa ={
a :10,
b : 20,
total(){
console.log("속앗음");
}
}
console.log(exam[s]());symbol로 만들어낸것은 절대로 중복이 될 수없어
함수로 약속된 것을 만들어낸 것이기 때문에 enhanced에서 왜 key 에 변수가 막 들어올 수있었던 것은 symbol을 위해서 였어
이 심볼을 interface 역할을 하는거야
4)
제너레이터와 이터레이터는 내일 하자!
1. 보충
(1)
2. 회고
1)
자바스크립트를 전반적으로 과거에 공부 했던것을 보고나서, 수업을 들으니 흐름을 타기가 좋았다!
내일도 수업전에 최소한 1~3강정도 보고 시작을하자
https://smartstore.naver.com/hsplan/products/4911877127?
445*90*15
'배움 __IL > TIL 1기' 카테고리의 다른 글
| TIL : 94번째- 230420 [4-3-목] (0) | 2023.04.20 |
|---|---|
| TIL : 93번째- 230419 [4-3-수] (4) | 2023.04.19 |
| TIL : 91번째- 230417 [4-3-월] (0) | 2023.04.17 |
| TIL : 88번째- 230411 [4-2-화] (0) | 2023.04.11 |
| TIL : 87번째- 230410 [4-2-월] (0) | 2023.04.10 |