{
let x = 100, y = 200, z = "javascript";
document.write("*** 01. 변수 : 데이터 불러오기 ***");
document.write(x);
document.write(y);
document.write(z);
}
{
const x = 100, y = 200, z = "javascript";
document.write("*** 02. 상수 : 데이터 불러오기 ***");
document.write(x);
document.write(y);
document.write(z);
}
{
const arr = [100, 200, "javascript"];
document.write("*** 02. 배열 : 데이터 불러오기 ***");
document.write(arr[0]);
document.write(arr[1]);
document.write(arr[2]);
}
{
const arr = [100, 200, ["javascript", "jquery"]];
document.write("*** 03. 배열 : 데이터 불러오기 : 2차 배열 ***");
document.write(arr[0]);
document.write(arr[1]);
document.write(arr[2][0]);
document.write(arr[2][1]);
document.write(arr[2]);
}
{
const arr = [100, 200, "javascript"];
document.write("*** 04. 배열 : 데이터 불러오기 : 갯수 구하기 ***");
document.write(arr.length);
}
{
const arr = [100, 200, 300, 400, 500];
document.write("*** 05. 배열 : 데이터 불러오기 : for문 ***");
for(let i=0; i<arr.length; i++){
document.write(i);
}
}
{
document.write("*** 07. 배열 : 데이터 불러오기 : forEach() ***");
const num = [100, 200, 300, 400, 500];
//가장 기본적인 방법
document.write(num[0]);
document.write(num[1]);
document.write(num[2]);
document.write(num[3]);
document.write(num[4]);
//for문을 이용한 방법
for(let i=0; i<num.length; i++){
document.write(num[i]);
}
//함수안에 함수가 있는 형태 --> 콜백함수라고 함(중요/함수의 핵심)
num.forEach(function(el){
document.write(el);
});
//forEach(element, index, array)
// num.forEach(function(){}); //es5
// num.forEach(()=>{}); //es6
num.forEach((element, index, array)=>{
document.write(element);
document.write(index);
document.write(array);
});
}
{
document.write("*** 08. 배열 : 데이터 불러오기 : for of문 ***");
const num = [100, 200, 300, 400, 500];
for ( let i of num ){
document.write(i);
};
}
{
document.write("*** 09. 배열 : 데이터 불러오기 : for in문 ***");
const num = [100, 200, 300, 400, 500];
for( let i in num ){
document.write(i); //index가 불러와짐
}
for( let i in num ){
document.write(num[i]);
}
}
{
document.write("*** 10. 배열 : 데이터 불러오기 : map() ***");
const num = [100, 200, 300, 400, 500];
num.map( (el) => {
document.write(el);
} );
num.map( (element, index, array) => {
document.write(element);
document.write(index);
document.write(array);
// console.log(el);
document.write();
} );
}
{
document.write("*** 11. 배열 : 데이터 불러오기 : 펼침 연산자 ***");
const arr = [100, 200, 300, 400, 500];
document.write(arr[0]);
document.write(arr[1]);
document.write(arr[2]);
document.write(arr[3]);
document.write(arr[4]);
document.write(arr);
document.write(arr[0], arr[1], arr[2], arr[3], arr[4]);
document.write(...arr);
}
{
document.write("*** 12. 객체 : 데이터 불러오기 : 기본 ***");
const obj = {
a: 100,
b: 200,
c: "javascript",
};
document.write(obj.a);
document.write(obj.b);
document.write(obj.c);
document.write(obj['a']);
document.write(obj['b']);
document.write(obj['c']);
}
{
document.write("*** 13. 객체 : 데이터 불러오기 : Object ***");
const obj = {
a: 100,
b: 200,
c: "javascript",
};
document.write(Object.keys(obj));
document.write(Object.values(obj));
document.write(Object.entries(obj));
}
{
document.write("*** 14. 객체 : 데이터 불러오기 : 변수 ***");
const obj = {
a: 100,
b: 200,
c: "javascript",
};
const name1 = obj.a;
const name2 = obj.b;
const name3 = obj.c;
document.write(name1);
document.write(name2);
document.write(name3);
}
{
document.write("*** 15. 객체 : 데이터 불러오기 : for in문 ***");
const obj = {
a: 100,
b: 200,
c: "javascript",
};
for(let key in obj){
document.write(obj[key]);
}
}
{
document.write("*** 16. 객체 : 데이터 불러오기 : map() ***");
const obj = [
{a: 100, b: 200, c: "javascript1"},
{a: 300, b: 400, c: "javascript2"},
{a: 500, b: 600, c: "javascript3"},
];
document.write(obj[0].a);
document.write(obj[0].b);
document.write(obj[0].c);
document.write(obj[1].a);
document.write(obj[1].b);
document.write(obj[1].c);
document.write(obj[2].a);
document.write(obj[2].b);
document.write(obj[2].c);
// obj.map(function(){};);
// obj.map((el) => {});
// obj.map(el => {});
obj.map( el => {
document.write(el.a);
document.write(el.b);
document.write(el.c);
});
}
{
document.write("*** 17. 객체 : 데이터 불러오기 : hasOwnProperty ***");
const obj = {
a: 100,
b: 200,
c: "javascript",
};
document.write(obj.hasOwnProperty('a'));
document.write(obj.hasOwnProperty('b'));
document.write(obj.hasOwnProperty('c'));
document.write(obj.hasOwnProperty('100'));
document.write('a' in obj);
document.write('b' in obj);
document.write('c' in obj);
document.write('100' in obj);
}
{
document.write("*** 18. 객체 : 데이터 불러오기 : 펼침 연산자 - 복사 ***");
const obj = {
a: 100,
b: 200,
c: "javascript",
};
const spread = {...obj};
document.write(spread.a);
document.write(spread.b);
document.write(spread.c);
}
{
document.write("*** 19. 객체 : 데이터 불러오기 : 펼침 연산자 - 추가 ***
");
const obj = {
a: 100,
b: 200,
c: "javascript",
};
const spread = {...obj, d: "jquery"};
document.write(spread.a);
document.write(spread.b);
document.write(spread.c);
document.write(spread.d);
}
{
document.write("*** 20. 객체 : 데이터 불러오기 : 펼침 연산자 - 결합 ***");
const objA = {
a: 100,
b: 200,
};
const objB = {
c: "javascript",
d: "jquery",
};
const spread = {...objA, ...objB};
document.write(spread.a);
document.write(spread.b);
document.write(spread.c);
document.write(spread.d);
}
{
document.write("*** 21. 객체 : 데이터 불러오기 : 비구조화 할당 ***");
const obj = {
a: 100,
b: 200,
c: "javascript",
}
const { a, b, c } = obj;
document.write(a);
document.write(b);
document.write(c);
}
{
document.write("*** 22. 객체 : 데이터 불러오기 : 비구조화 할당 : 별도 이름 저장 ***");
const obj = {
a: 100,
b: 200,
c: "javascript",
}
const { a:name1, b:name2, c:name3 } = obj;
document.write(name1);
document.write(name2);
document.write(name3);
}