ES5를 넘어서.html
ES5의 시대는 저물어 가고 있다.
ES6 이상에서 추가 된것
let, const, template String, Arrow function, spread operator, destructuring, promise, async, await...
let 과 var 비교
(function f_ck(){
for(var i=0; i<10; i++){
}
alert(i);
})();i 의 조건을 만족하지 못하기 때문에 출력 하면
10이 나온다
여기서 var를 let로 바꾸면
출력이 되지 않는다
let은 Block scope라고 부르며
var는 function scope라고 부른다.
다른언어(c, java, c++등)들에서 사용하는 let와 같다
근래 들어서 javascript에서도 let을 사용하기를 권장한다.
const vCon="메롱";
vCon="안메롱";
console.log(vCon)이렇게 선언하면
와 같이 assignment 가 출력된다.
const vCon={name:"은비"};
vCon.name="안은비"; // OK?
console.log(vCon)와 같이 출력하게 된다면
정상적으로 출력 되는것을 확인 할 수 있다.
const vCon={name:"은비"};
vCon.name="안은비"; // OK?
console.log(vCon);
vCon = {"aaa":"fbi"}; // OK?이런식으로 출력해보면
출력이 되지 않는다.
const 는 원시타입이 출력되지 않는다.
다만 const의 객체(object)일때 객체를 모두 교체하는것은 안되지만 객체내부의 속성이나 메소드를 교체하는 것은 가능하다.
const에 대한 오해
객체인경우 객체 자체는 못바꾸지만
내용(속성, 메소드)은 바꿀 수 있음
잘 사용 하는 사람은 const와 var를 섞어서 사용하기도 한다.
template string(백틱 ` )
var aaa = "메롱";
var bbb = `안녕 ${aaa}군`;
alert(bbb);
문자열을 더할 때 ' + ' 기호를 사용하지 않는다.
js파일이 아닌 jsp에서 사용할때에는
var aaa = "메롱";
var bbb = `안녕 \${aaa}군`;
alert(bbb);js파일이 아닌 jsp안에서 사용 할 때는 스프링EL과 구분하기 위해
$ 앞에 \를 붙여 줘야함
$ 앞에 ' \ ' 붙여서 el 이 아닌 문자열이라고 인식 시켜야 한다.
최종코드
<!DOCTYPE html> <meta charset="UTF-8"> <script> //ES5의 시대는 저물어 가고 있음! //ES6 이상에서 추가된 것 //let,const, template string, arrow function, spread operator //destructuring, promise, async, await.... //template string(백틱 `) var aaa = "메롱"; //js파일 말고 jsp 안에서 사용할 때는 스프링EL과 구분하기 위해 $앞에 \를 붙여 줘야함 var bbb = `안녕 ${aaa}군`; alert(bbb); //let(block scope) vs var(function scope) //다른 언어(c,java,c++등)과 같은 개념은 let //const에 대해 오해가 있는데, 객체인 경우, 객체자체는 못 바꾸지만 //내용(속성,메소드)은 바꿀 수 있음! const vCon={name:"은비"}; vCon.name="안은비"; // OK? console.log(vCon); vCon = {"aaa":"fbi"}; // OK? /* (function f_ck(){ for(let i=0; i<10; i++){ } alert(i);//? })(); */ </script>
ES5를 넘어서2.html
Arrow function(화살표 함수)
함수가 워낙 많이 사용되다 보니, 간략한 표현 필요해짐
var merong = (param1)=>{
alert("메롱"+param1);
}
merong("유화");매개변수가 1개가 있을 때에는 param1을 ( ) 괄호 없이 사용 할 수 있다.
외쿡 엉아들은 아래와 같이
var merong = param1 =>{
return "메롱" + param1;
}
alert(merong("유화"));return 문이 1개가 있을 경우에
위와 같은 코드를
var merong = param1 => "메롱" + param1;
alert(merong("유화"));와 같이 ( ) 괄호가 사라지고 { } 대괄호가 사라진 가독성이 떨어지는 문법을 자주 사용하고 좋아라 한다.
억지로 만든 코드
function f_test(parg){
return function(parg){
return function(parg){
return "흥치뿡";
}
}
}위와 같이 억지로 만든 코드를 화살표 코드로 변경하면
var f_test = parg => parg => parg => "흥치뿡";이와 같은 코드로 변형 시킬 수 있다.
잘난체 하는 사람들이 즐겨 사용한다.
화살표함수에는 this에 대한 제약사항이 있음(parent scope)
제약사항이 마음에 걸릴 때(call, apply)에는 그냥 function 키워드를 사용하는게 정신건강에 좋다.
제약사항이 이해 된다면 그때가서 사용해도 된다.
spread operator ...
var aaa = [1,2,3];
var bbb = [9,8,7];
var ccc = [...a,...b];
console.log(ccc);새로운 배열이 생성이 된다.
이는 배열을 쉽게 합칠 수 있게 되는 것이다.
매개변수를 5개 생성하지 않고 스플릿으로 선언 할 수 있다.
function f_many(...args){
for(let i=0; i<args.length; i++){
console.log(args[i]);
}
}
f_many("1","2","3","4","5");
출력이 되는것을 확인 할 수 있다.
function f_many(...args,p_leng){
for(let i=0; i<args.length; i++){
console.log(args[i]);
}
}
f_many("1","2","3","4","5");과 같이 ...args 뒤에 다른 변수가 들어오는 것은 사용할 수 없고
function f_many(first,...args){
for(let i=0; i<args.length; i++){
console.log(args[i]);
}
}
f_many("1","2","3","4","5");...args 앞에 first를 붙인것처엄 위와 같은 표현에는 사용이 가능하다.
이렇게 사용할 때는 rest 연산이라고 부른다.
사용하다보면 제법 편한 상황이 많이 발생된다.
상당히 유행하고 있다.
var aaa = [1,2,3];
var fff = aaa; // 참조(call by copy, call by reference)
fff[1]="지훈 초완전실망";
alert(aaa[1]);//?2일 경우에는 alert로 "지훈 초 완전실망"이 출력
이는 fff는 aaa를 참조하기 때문이다.
var aaa = [1,2,3];
var fff = aaa[1];
fff="지훈 초완전실망";
alert(aaa[1]);//?2일 경우에는 alert로
가 출력 된다.
이는 fff가 aaa[1]을 복사했기 때문이다.
aaa 배열 안에 있는 1번째를 alert(aaa[1]) 로 복사해왔기 때문이다.
여기서 꼭 확인해야 하는것은
참조로 불러오는 것인지 복사로 불러 오는것인지를 확인하고 사용해야 할 필요가 있다.
var aaa = [1,2,3];
var bbb = [9,8,7];
var ccc = [...aaa,...bbb];
console.log(ccc);ccc가 참조방식으로 동작하는지, 복사(새로운 배열이 리턴)되었는지 확인할 필요가 있음
var aaa = [1,2,3];
var bbb = [9,8,7];
var ccc = [...aaa,...bbb];
console.log(ccc);
ccc[0] = "흥";
ccc[4] = "치";
alert(aaa);
alert(bbb);ccc를 고쳤는데 aaa 또는 bbb가 고쳐지는지 확인을 하고 넘어가야 할 필요가 있다.
참조로 되어 있다면 aaa와 bbb는 그대로 일 것이고
복사로 되어 있다면 aaa와 bbb는 값을 불러와서 새로운 배열로 생성된다는 것을 짐작 할 수 있지만 확인을 꼭 해야 한다.
destructuring(구조분해)
var ingan = {
name:"쩡꼉환"
age:100,
alias:"안경",
hosil:403
}위와 같은 데이터가 있을 경우
name과 age가 필요 할 때
var vname = ingan.name;
var vage = ingan.age;형식으로 추출 할 수 있다.
이는 일반적인 방법으로 사용 하는 것이고
var {age, name} = ingan;이렇게 추출 할 수도 있는데
이를 구조 분해라고 지칭 한다.
위와 같이 출력한 내용을 alert로 출력해보면
var {age, name} = ingan;
alert(age);
alert(name);
위와 같이 각각 추출 해서 출력 할 수 있다.
이를 별칭으로도 지정할 수 있는데
var {age:vAge,name:vName} = ingan;
alert(vAge);
alert(vName);와 같이 별칭으로 지정하여 출력하여도 결과는 같다.
(ps.같은 결과 이기에 스샷은 첨부 하지 않을 것이고,)
호불호가 나뉘는데, Vue, React, Angular등의 프론트 프레임워크에서 많이 사용되다 보니, 어쩔수 없이 따라서 사용할 수 밖에 없다.
최종코드
<!DOCTYPE html> <meta charset="UTF-8"> <script> //destructuring (구조 분해) var ingan = { name:"쩡꼉환", age:100, alias:"안경", hosil:403 } /* 일반적 방법 var vname = ingan.name; var vage = ingan.age; */ //호불호가 나뉘는데, Vue, React, Angular등의 프론트 프레임워크에서 //많이 사용되다 보니, 어떨 수 없음, 따라가는 수밖에... var {age:vAge,name:vName} = ingan; alert(vAge); alert(vName); //spread operator ... //var aaa = [1,2,3]; //var fff = aaa; // 참조(왜? 배열은 객체니깡) //var fff = aaa[1]; // 복사(왜? 2는 숫자 원시타입이니깡) //fff="지훈 초완전실망"; //alert(aaa[1]);//?2 var aaa = [1,2,3]; var bbb = [9,8,7]; var ccc = [...aaa,...bbb]; // 요건 새로운 배열이 생성되어 리턴됨을 확인 // ccc가 참조방식으로 동작하는지, 복사(새로운 배열이 리턴)되었는지 확인할 필요가 있음 console.log(ccc); ccc[0] = "흥"; ccc[4] = "치"; //alert(aaa); //alert(bbb); /* 쓰다 보면 꽤나 편한 상황이 많이 발생! function f_many(first,...args){ // 요렇게 쓸 땐 rest 연산이라 부름(미친!~~) for(let i=0; i<args.length; i++){ console.log(args[i]); } } f_many("1","2","3","4","5"); */ //Arrow function(화살표 함수) //함수가 워낙 많이 사용되다 보니, 간략한 표현 필요 //화살표함수에는 this에 대한 제약사항이 있음(parent scope라 함) //제약사항이 맘에 걸릴 때는 그냥 function 키워드 사용하는게 정신건강에 좋음 //제약사항이 잘 이해되면 그때 사용해도 됨! /* var merong = function(){ alert("메롱"); } */ var merong = param1 => "메롱" + param1; //alert("메롱"+param1); //alert(merong("유화")); /* function f_test(parg){ return function(parg){ return function(parg){ return "흥치뿡"; } } } var f_test = parg => parg => parg => "흥치뿡"; */ </script>
ES5를 넘어서3.html
Promise(약속) -> 약속은 미래에 그 결과를 알 수 있음(성공, 실패)
자바스크립트에서 보통 비동기 실행함수가 끝났을 때
콜백함수를 사용하는데
콜백함수안에 콜배감수.... 식으로 콜백함수가 너무 많이 사용됨(Hell Of Callback)
var f_check = function(){
return new Promise()
}형식으로 생성되는데
return에 있는 Promise() 안에 추가된다.
res, rej 또는 resolve, reject 함수를 입력하는 것이 관례이다.
resolve를 사용할 때에는 "성공",
reject를 사용할 때에는 "실패"
var f_check = function(){
return new Promise((resolve,reject)=>{
resolve("썽꽁꽁꽁");
});
}
f_check().then((param)=>{
}).catch(()=>{
}).finally(()=>{
});
실제로 내가 저런 형식의 라이브러리를 만들일은 거의 없을 것이다.
라이브러리 제작 회사에서 제작하여 배포 할 것이기 때문에
이를 사용해 보자
var f_check = function(){
return new Promise((resolve,reject)=>{
resolve("썽꽁꽁꽁");
});
}
f_check().then((param)=>{
console.log("화긴:",param);
}).catch(()=>{
}).finally(()=>{
console.log("난 무조건이얌, 잘 안쓰여 ㅠㅠ");
});
resolve 함수가 성공 했다는 것을 알 수 있고 이것이 finally로 넘어간것을 확인 할 수 있다.
마치 try catch문과 비슷하다
중간에 비어 있는 캐치문에 내용 추가 해 보자면
var f_check = function(){
return new Promise((resolve,reject)=>{
reject("헉실패얌 정식이 안 웃김ㅠㅠ");
});
}
f_check().then((param)=>{
console.log("화긴:",param);
}).catch((param)=>{
console.log("화긴2:",param);
}).finally(()=>{
console.log("난 무조건이얌, 잘 안쓰여 ㅠㅠ");
});reject를 사용하면
catch 문으로 넘어가게 되므로
이렇게 출력 되는 것을 확인 할 수 있다.
try catch를 사용을 할 수 밖에 없지만 중요한 것은
에러가 나지 않는 코드를 짜는것이 중요하다.
강제로 error 상황을 만들어 보자
var f_check = function(){
return new Promise((resolve,reject)=>{
var error = new Error("이거슨 에롱");
reject(error);
});
}
f_check().then((param)=>{
console.log("화긴:",param);
}).catch((param)=>{
console.log("화긴2:",param);
}).finally(()=>{
console.log("난 무조건이얌, 잘 안쓰여 ㅠㅠ");
});
이렇게 사용하는 것은 console창에 error 메시지를 확인 하기 위함이지
이에 의미가 있는것이 아니다.
잘 기억해야 하는 것은
f_check().then((param)=>{
console.log("화긴:",param);
}).catch((param)=>{
console.log("화긴2:",param);
}).finally(()=>{
console.log("난 무조건이얌, 잘 안쓰여 ㅠㅠ");
});try catch finally 를 잘 기억 해야 한다.
이해를 위해 비동기 적인 부분은 제외 했지만
이를 학습하기 위해 새 파일을 만들어서 보겠다.
최종코드
<!DOCTYPE html> <meta charset="UTF-8"> <script> //피해 갈 수 없는 Promise(약속) -> 약속은 미래에 그 결과를 알 수 있음(성공,실패) //자바스크립트에서 보통 비동기 실행함수가 끝났을 때 콜백함수를 사용하는데 //콜백함수안에 콜백함수.... 식으로 콜백함수가 너무 많이 사용됨(Hell Of Callback) //개발자가 Promise를 만들 일은 거의 없고 사용만 잘하면 됨! //처음엔 아주 낯설음.. 괜찮음 차차 익숙해 짐 var f_check = function(){ return new Promise((resolve,reject)=>{ //resolve("썽꽁꽁꽁"); var error = new Error("이거슨 에롱"); reject(error); }); } f_check().then((param)=>{ console.log("화긴:",param); }).catch((param)=>{ console.log("화긴2:",param); }).finally(()=>{ console.log("난 무조건이얌, 잘 안쓰여 ㅠㅠ"); }); </script>
Promise2.html
Promise.html 파일을 나는 안만들었다
Promise 파일명은 ES5를 넘어서3.html인데
이번에 진행하는 파일병은 Promise2로 생성하셨으므로..
Promise2.html 파일을 생성해서 정리하고자 한다.
function get(pURL){
return new Promise((res,rej)=>{
let xhr = new XMLHttpRequest();
xhr.open("get",pURL,true);
xhr.onreadystatechange = ()=>{
if(xhr.readyState == 4 && xhr.status == 200){
res(xhr.responseText);
}
}
xhr.send();
});
}
'get'의 리턴을 './아작스/data.json' 로 주고
get("./아작스/data.json").then(()=>{
})와 같이 작성해서
.catch(()=>{})
.finally(()=>{});트라이 캐치문을 작성하여 내용을 불러와서 사용 할 수 있도록 꾸며준다
get("./아작스/data.json").then((yuhwa)=>{
alert(yuhwa);
}).catch(()=>{})
.finally(()=>{});아래와 같이 꾸미고
function get(pURL){
return new Promise((res,rej)=>{
let xhr = new XMLHttpRequest();
xhr.open("get",pURL,true);
xhr.onreadystatechange = ()=>{
if(xhr.readyState == 4 && xhr.status == 200){
res(xhr.responseText);
}
}
xhr.send();
});
}
get("./아작스/data.json").then((yuhwa)=>{
alert(yuhwa);
}).catch(()=>{})
.finally(()=>{});실행해 보면
아주 잘 넘어오는 것을 확인 할 수 있다.
네임스페이스(axios)를 주고 똑같이 진행해보면
var axios = {}; // 네임스페이스 빈객체
axios.get=(pURL)=>{
return new Promise((res,rej)=>{
let xhr = new XMLHttpRequest();
xhr.open("get",pURL,true);
xhr.onreadystatechange = ()=>{
if(xhr.readyState == 4 && xhr.status == 200){
res(xhr.responseText);
}
}
xhr.send();
});
}
// 일반적인 Promise 사용법( 꼬옥 알아 두삼, 일단 머리엥)
axios.get("./아작스/data.json").then((yuhwa)=>{
alert(yuhwa);
console.log(JSON.parse(yuhwa));
}).catch(()=>{})
.finally(()=>{});
출력이 잘 된다.
중간중간 에러반환 및 기타 등등 자잘한것이 빠져 있지만
이 코드는 칭찬이 자자한 axios 라이브러리의 핵심이다.
처음에는 칭찬이 많았지만
Promise안에 Promise의 반복이 다시 발생이 되면서
불만이 재기되기 시작하였다.
이를 해결하기 위해서 나온것이
async, await이다.
매우 칭찬 받고 있다.
async, await
Promise가 나와서 칭찬을 받긴 했지만,결국 표현만 조금 있어 보이고
결국 근본적인 아픔은 똑같다는 반발에 , async, await 키워드가 나옴
function f_test(){
await axios.get("./아작스/data.json");
}
에러가 발생되는데
내용을 보면
이라고 확인 할 수 있다.
이는 현재 개발 진행중인데
이 빨간줄을 없애기 위해서
function 앞에 async를 붙여준다.
async function f_test(){
let result = await axios.get("./아작스/data.json");
}
빨간줄이 없어진것을 확인 할 수 있다.
원래 비동기는
console.log("chk1:",result);동시 출력이 안되는데
await axios.get("./아작스/data.json");가 붙게 되면서
비동기 출력이 끝날때까지 페이지를 대기 시키다가 나머지를 불러오기 때문에
async function f_test(){
let result = await axios.get("./아작스/data.json");
console.log("chk1:",result);
}
f_test(); // 콜!
출력이 된다.
내용을 잘 보면 비동이인지 아닌지 확인 하기 어려운데
async function f_test(){
let result = await axios.get("./아작스/data.json");
console.log("chk1:",result);
alert("흥");
}
f_test(); // 콜!
alert("누가 누가 빠르겡?");alert를 추가시켜 보면 확인이 가능하다.
누가 먼저 실행 될까
가 가장 먼저 출력되고 확인을 누르면
요 내용이 출력됨가 동시에
요 화면이 출력 된다.
한 화면 안에서 비동기로 여러개가 작동 되는 것을 확인 할 수 있다.
async, await는 잘 만들었다(아이디어 굳!)는 칭찬이 자자해서
다른 언어들에서도 벤치마킹하려 하고 있음
개발자는 함수안에서 synchronouse(동기식)으로 프로그램하지만
실질적으로 함수는 비동기로 실행되어서, 2마리 토끼 모두 잡았다는 칭찬일색!서울쪽은 이미 사용하고 있지만 대전쪽은 아직 미적용 중이다.
서울에 비해서 2~3년 정도 늦다
최종코드
<!DOCTYPE html> <meta charset="UTF-8"> <script> var axios = {}; // 네임스페이스 빈객체 axios.get=(pURL)=>{ return new Promise((res,rej)=>{ let xhr = new XMLHttpRequest(); xhr.open("get",pURL,true); xhr.onreadystatechange = ()=>{ if(xhr.readyState == 4 && xhr.status == 200){ res(xhr.responseText); } } xhr.send(); }); } //Promise가 나와서 칭찬을 받긴 했지만,결국 표현만 조금 있어 보이고 //결국 근본적인 아픔은 똑같다는 반발에 , async, await 키워드가 나옴 // async, await는 잘 만들었다(아이디어 굳!)는 칭찬이 자자해서 다른 언어들에서도 // 벤치마킹해 갈려고 하고 있음 // 개발자는 함수안에서 synchronouse(동기식)으로 프로그램하지만 // 실질적으로 함수는 비동기로 실행되어서, 2마리 토끼 모두 잡았다는 칭찬일색! async function f_test(){ let result = await axios.get("./아작스/data.json"); console.log("chk1:",result); alert("흥"); } async function f_test1(){ let result = await axios.get("./아작스/data.html"); console.log("chk2:",result); alert("치"); } f_test(); // 콜! f_test1(); alert("누가 누가 빠르겡?"); /* 일반적인 Promise 사용법( 꼬옥 알아 두삼, 일단 머리엥) axios.get("./아작스/data.json").then((yuhwa)=>{ alert(yuhwa); console.log(JSON.parse(yuhwa)); }).catch(()=>{}) .finally(()=>{}); */ </script>
배열에 추가된 메소드.html
배열에 메소드가 조금 추가되었음
set과 Map(큰필요없음,json이면 충분)도 추가되었다
var yuhwa = [1,2,1,3,4,7,3,2];
var mySet = new Set(yuhwa);
console.log(mySet);var yuhwa에 중복값이 들어가 있는데
이 중복값을 제거하기 위해서
var mySet에
new Set(yuhwa)을 작성해 준다.
Set() = 중복제거
for(let merong of yuhwa){ /
console.log("흥:" + merong);
}
for(let aaa of mySet){
console.log(aaa);
}iterable에는 for of를 사용 할 수 있다.
var vObj = {
attr1:"속성1",
attr2:"속성2",
attr3:"속성3",
attr4:"속성4",
["0"]:"배열식접근법"
}
for(let yuhwa in vObj){
console.log(yuhwa);
}JSON 객체의 속성 값을 뽑아 올 때 'for in' 문을 사용한다.
객체 안에 속성값들을 하나씩 불러 올 수 있다.
이 속성에 값을 출력하고자 할 때 는
console.log(yuhwa,vObj[yuhwa]);vObj[yuhwa]
배열식 접근법을 사용하면 된다.
인터넷이 안되는 환경에서 개발 할 때
구글링을 하지 못할 때
어떤 객체의 속성인지 기억이 안날때는
document를 찍어서 확인해 보면 된다.
for(let forget in document){
console.log(forget, "->",document[forget]);
}이때는 document 안에 있는 모든 속성을 출력하여 준다.
뭐가 엄청 많이 나온다.
저렇게 출력된 사항중에 골라서 사용하면 된다.
javascript를 구글링 할때에는
익숙하지 않으니까 w3school을 자주 사용하도록 하자.
이전에는 사용되지 않던것들이지만 세월에 흐름에 따라 사용하게 된 경우들
.find는 item에 들어 있는 값을 찾아서 새로운 배열을 검색 후 생성
기존에 있는 배열을 건들지 않고 새로운 배열을 출력해 준다.
만약 item > 5 로 한다면 5보다 작은 item을 정의하여 1개만 출력해 준다.
const testArr = [1,5,7,9,3,2];
let merong=testArr.find(item=>{ // 첫번째 찾은거
console.log(item);
return item > 5;
});[스샷 못찍]
let merong2 = testArr.filter((item,index)=>{
console.log(item,":",index);
return item > 3;
});
alert(merong2);
.find와 .filter는 true, false를 반환해 줘야 한다.
let merong3 = testArr.some((item,index)=>{
return item > 8;
});
alert(merong3);.some 은 조건에 해당하는 값이 있는지 없는지를 확인 할때 사용한다.
8보다 큰 값이 있는지 없는지를 확인해서 true, false를 반환
let merong4 = testArr.every((item,index)=>{
return item > 0;
})
alert(merong4);.every 배열에 가진 모든 값이 특정 조건에 만족하는지를 확인해 준다.
let merong5 = testArr.map((item,index)=>{
return `<h1>${item}---- ${index}</h1>`;
})
alert(merong5);배열요소 각각에 특별한 처리를 한 새로운 배열을 리턴
엄칭 많이 쓰임
나중에 include, reduce도 찾아볼것!
map과 reduce는 세트로 불린다. (외쿡엉아들은 맵리듀스 또는 맵리 라고 부름)
성능에 영향을 상당히 미침
최종코드
<!DOCTYPE html> <meta charset="UTF-8"> <script> //배열에 메소드가 쪼메 추가되었어용. Set과 Map(큰필요없음,json이면 충분)도 추가되었디용 const testArr = [1,5,7,9,3,2]; // map과 reduce는 세트(맵리)로 불림 //나중에 include, reduce 도 찾아 볼 것! let merong=testArr.find(item=>{ // 첫번째 찾은거 console.log(item); return item > 5; }); let merong2 = testArr.filter((item,index)=>{ console.log(item,":",index); return item > 3; }); //단순히 어떤 조건에 해당하는 값이 있는가 없는가? let merong3 = testArr.some((item,index)=>{ return item > 8; }); //배열에 가진 모든 값이 특정 조건에 만족하는지? let merong4 = testArr.every((item,index)=>{ return item > 0; }) // 배열요서 각각에 특별한 처리를 한 새로운 배열을 리턴 // 엄칭 많이 쓰임 let merong5 = testArr.map((item,index)=>{ return `<h1>${item}---- ${index}</h1>`; }) alert(merong5); /* var vObj = { attr1:"속성1", attr2:"속성2", attr3:"속성3", attr4:"속성4", \ ["0"]:"배열식접근법" //벨로그에서 이부분이 js로 포함이 안되가지구.. 마지 못해 '\' 붙임 } //for of는 버리더라도 for in은 꼬옥 알아둡시당 for(let forget in document){ console.log(forget, "->",document[forget]); } */ /* for(let yuhwa in vObj){ // JSON객체의 속성값을 뽑아올 때 for in console.log(yuhwa,vObj[yuhwa]); } */ /* var yuhwa = [1,2,1,3,4,7,3,2]; var mySet = new Set(yuhwa); // 중복제거 할 때 짱 편함 console.log(mySet); for(let merong of yuhwa){ // iterable에는 for of 사용 가능! console.log("흥:" + merong); } for(let aaa of mySet){ console.log(aaa); } */ </script>
내일은 AG Grid를 할것임
엑셀처럼 표로 보여주던 시대는 끝났다.
