01 변수 : 데이터 불러오기
{
let x = 100, y = 200, z = "javscript";
document.write(x); //100
document.write(y); //200
document.write(z); //javscript
}
02 상수 : 데이터 불러오기
{
const x = 100, y = 200, z = "javascript";
document.write(x);
document.write(y);
document.write(z);
}
03 배열 : 데이터 불러오기
{
const arr = [100, 200, "javascript"];
document.write(arr[0]); //100
document.write(arr[1]); //200
document.write(arr[2]); //javascript
}
04 배열 : 데이터 불러오기
{
const arr =[100, 200, ["javascript", "jquery"]];
document.write(arr[0]);//100
document.write(arr[1]);//200
document.write(arr[2]);//javascript, jquery
document.write(arr[2][0]);//javascript
document.write(arr[2][1]);//jquery
}
05 배열 : 데이터 불러오기 : 갯수 구하기 -> length
{
const arr = [100, 200, "javascript"];
document.write(arr.length); //3
}
06 배열 : 데이터 불러오기 : for문
{
const arr = [100, 200, "javascript"];
for( let i = 0; i < arr.length; i ++){
document.write(arr[i]); //100, 200, javascript
}
}
for 문
var, let 차이
07 배열 : 데이터 불러오기 : forEach()
{
const num = [100, 200, 300, 400, 500];
document.write(num[0]); //100
document.write(num[1]); //200
document.write(num[2]); //300
document.write(num[3]); //400
document.write(num[4]); //500
//for 문
for(let i=0; i<num.length; i++){
document.write(num[i]); //100200300400500
}
//forEach()
num.forEach(function(el){
document.write(el); //
});
//forEach(element, index.array)
num.forEach((element, index, array) => {
document.write(element);
document.write(index);
document.write(array);
});
}
100
0
100,200,300,400,500
200
1
100,200,300,400,500
300
2
100,200,300,400,500
400
3
100,200,300,400,500
500
4
100,200,300,400,500
08 배열 : 데이터 불러오기 : for of
{
const num = [100, 200, 300, 400, 500];
for ( let i of num ){
document.write(i); //100200300400500
}
}
for of
09 배열 : 데이터 불러오기 : for in
{
const num = [100, 200, 300, 400, 500];
for(let i in num){
document.write(i); //01234
}
//배열의 순서가 숫자로 나온다.
for(let i in num){
document.write(num[i]); //100200300400500
}
}
10 배열 : 데이터 불러오기 : map()
{
const num = [100, 200, 300, 400, 500];
num.map((el) => {
document.write(el); //100200300400500
})
num.map((element, index, array) => {
document.write(element);
document.write(index);
document.write(array);
});
//100 0 100200300400500
//200 1 100200300400500
//300 2 100200300400500
//400 2 100200300400500
//500 2 100200300400500
}
11 배열 : 데이터 불러오기 : 펼침 연산자
{
const arr = [100, 200, "javascript"];
document.write(arr); //100200javascript
document.write(arr[0], arr[1], arr[2]); //100200javascript
document.write(..arr); //100200javascript
}
12 배열 : 데이터 불러오기 :배열 구조 분해 할당
{
let a, b, c;
[a, b, c] = [100, 200, "javascript"];
document.write(a); //100
document.write(b); //200
document.write(c); //javascript
}
13 객체 : 데이터 불러오기 : 기본
{
const obj = {
a : 100,
b : 200,
c : "javascript"
}
document.write(obj.a); //100
document.write(obj.b); //200
document.write(obj.c); //javascript
document.write(obj['a']); //100
document.write(obj['b']); //200
document.write(obj['c']); //javascript
}
14 객체 : 데이터 불러오기 : Object
{
const obj = {
a : 100,
b : 200,
c : "javascript"
}
document.write(Object.keys(obj)); //a, b, c
document.write(Object.values(obj)); //100, 200, javascript
document.write(Object.entries(obj));//a,100,b,200,c,javascript
}
15 객체 : 데이터 불러오기 : 변수
{
const obj = {
a : 100,
b : 200,
c : "javascript"
}
const name1 = obj.a;
const name2 = obj.b;
const name3 = obj.c;
document.write(name1); //100
document.write(name2); //200
document.write(name3); //javascript
}
16 객체 : 데이터 불러오기 : for in문
{
const obj = {
a : 100,
b : 200,
c : "javascript"
}
for(let key in obj){
document.write(obj[key]);//100, 200 ,javascript
}
}
17 객체 : 데이터 불러오기 : 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); //100
document.write(obj[0].b); //200
document.write(obj[0].c); //javascript1
document.write(obj[1].a); //300
document.write(obj[1].b); //400
document.write(obj[1].c); //javascript2
document.write(obj[2].a); //500
document.write(obj[2].b); //600
document.write(obj[2].c); //javascript3
obj.map(el => {
document.write(el.a);
document.write(el.b);
document.write(el.c);
});
//100
//200
//javascript1
//300
//400
//javascript2
//500
//600
//javascript3
}
18 객체 : 데이터 불러오기 : jasOwnProperty()
{
const obj = {
a : 100,
b : 200,
c : "javascript"
}
document.write(obj.hasOwnProperty('a')); //true
document.write(obj.hasOwnProperty('b')); //true
document.write(obj.hasOwnProperty('c')); //true
document.write(obj.hasOwnProperty('100')); //false
document.write('a' in obj);//true
document.write('b' in obj);//true
document.write('c' in obj);//true
document.write('100' in obj);//false
}
19 객체 : 데이터 불러오기 : 펼침 연산자 - 복사
{
const obj = {
a : 100,
b : 200,
c : "javscript"
}
const spread = {...obj}
document.write(spread.a);//100
document.write(spread.b);//200
document.write(spread.c);//javscript
}
20객체 : 데이터 불러오기 : 펼침 연산자 - 데이터 추가하기
{
const obj = {
a : 100,
b : 200,
c : "javscript"
}
const spread = {...obj, d : "jquery"}
document.write(spread.a); //100
document.write(spread.b); //200
document.write(spread.c); //javscript
document.write(spread.d); //jquery
}
21 객체 : 데이터 불러오기 : 펼침 연사자 - 데이터 결합시키기
{
const objA = {
a : 100,
b : 200
}
const objB = {
c : "javascript",
d : "jquery"
}
const spread = {...objA, ...objB}
document.write(spread.a); //100
document.write(spread.b); //200
document.write(spread.c); //javascript
document.write(spread.d); //jquery
}
22 객체 : 데이터 불러오기 : 비구조화 할당
{
const obj = {
a : 100,
b : 200,
c : "javascript"
}
const{a, b, c} = obj;
document.write(a); //100
document.write(b); //200
document.write(c); //javascript
}
23 객체 : 데이터 불러오기 : 비구조화 할당 : 별도 이름 저장
{
const obj = {
a : 100,
b : 200,
c : "javscript"
}
const {a:name1, b:name2, c:name3} = obj;
document.write(name1); //100
document.write(name2); //200
document.write(name3); //javscript
}
반응형
'Frontend > JavaScript' 카테고리의 다른 글
[javascript] 문법 정리 - 데이터 제어하기 (0) | 2021.08.12 |
---|---|
[javascript] 문법 - 데이터 실행하기 (0) | 2021.08.12 |
[JAVASCRIPT] 문법 정리 - 데이터 저장하기 (0) | 2021.08.11 |
[JAVASCRIPT] clientX, offsetX, pageX, screenX (0) | 2021.08.11 |
[Javascript] 탭 메뉴, 메뉴 하이라이트 구현하기 (0) | 2021.07.29 |