Top

01. 변수 : 데이터 저장

자바스크립트에서 변수란 값을 저장하기 위해 확보한 메모리 공간 자체 또는 메모리 공간을 식별하기 위한 식별자입니다.

let x = 100;
y = 200;
z = "javascript";

alert(x);            //알람이 뜨면서 결과값나옴
alert(y);
alert(z);

console.log(x);     //홈페이지 f12 콘솔에 결과값나온다.
console.log(y);
console.log(z);
결과보기
100
200
javascript
100
200
javascript

02. 상수 : 데이터 불러오기

상수란 한 번 선언되어 초기화되면 다시 선언되거나 할당될 수 없는 변수를 의미합니다.

const x = 100,
        y = 200,
        z = "javascript";
    
document.write(x);
document.write(y);
document.write(z);
결과보기
100
200
javascript

03. 배열 : 데이터 불러오기

배열은 연관된 데이터를 모아서 관리하기 위해서 사용되는 데이터 타입입니다. 변수가 하나의 데이터를 저장하기 위한 것이라면 배열은 여러 개의 데이터를 저장하기 위한 것이라고 할 수 있습니다.

const arr = [100, 500, {a:1000, b:2000}, ["배열","변수"]];

document.write(arr[2].b);  // 중괄호는 객체라서 "."으로 들어간다. 답 2000
document.write(arr[3][0]);  //답 배열
document.write(arr[3]);  //답 배열,변수 둘다 나오게한다.
결과보기
2000
배열
배열,변수

04. 배열 : 데이터 불러오기 : 2차 배열

2차원 배열이란 배열의 요소로 1차원 배열을 가지는 배열입니다.

const arr = [100, 200, ["javascript", "jquery"]];

document.write(arr[0]);
document.write(arr[1]);
document.write(arr[2][0]); //배열 세번째의 첫번째
document.write(arr[2][1]); //배열 세번째의 두번째
결과보기
100
200
javascript
jquery

05. 배열 : 데이터 불러오기 : 갯수 구하기

length 속성은 배열의 길이를 반환합니다. 반환값은 부호 없는 32비트 정수형이며, 배열의 최대 인덱스보다 항상 큽니다.

const arr = [100, 200, "javascript"];

document.write(arr.length) //length는 속성이라 () 필요X 갯수 = 3
결과보기
3

06. 배열 : 데이터 불러오기 : for()문

for문의 구조는 for(초기값, 조건식, 증감식) 으로 되어있습니다.

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]);

for(i = 0; i < arr.length ; i++) {     //for(초기값, 조건식, 증감식)
    document.write(arr[i]);
}
결과보기
100
200
300
400
500
100
200
300
400
500

07. 배열 : 데이터 불러오기 : forEach()

forEach반복문은 배열의 요소들을 반복하여 작업을 수행할 수 있습니다.callback 함수를 등록할 수 있고, 배열의 각 요소들이 반복될 때 이 callback 함수가 호출됩니다. callback 함수에서 배열 요소의 인덱스와 값에 접근할 수 있습니다.

const num = [100, 200, 300, 400, 500];

num.forEach(function(el){       //여기서 function은 callback함수이다
    document.write(el);
});

num.forEach(function(element, index, array){
    document.write(element);
    document.write(index);
    document.write(array);
});
결과보기
100
200
300
400
500
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

for of 반복문은 ES6에 추가된 새로운 컬렉션 전용 반복 구문입니다. for of 구문을 사용하기 위해선 컬렉션 객체가 [Symbol.iterator] 속성을 가지고 있어야만 합니다

const arr = [100, 200, 300, 400, 500];

for( let i of arr){         //있는 개수많큼 다 뽑아낸다.
    document.write(i);
}
결과보기
100
200
300
400
500

09. 배열 : 데이터 불러오기 : for in

for in 반복문은 객체의 속성들을 반복하여 작업을 수행할 수 있습니다.

const arr = [100, 200, 300, 400, 500];

for( let i in arr){         
    //document.write(i);      // index값이 나온다.
    document.write(arr[i]);
}
결과보기
100
200
300
400
500

10. 배열 : 데이터 불러오기 : map()

map은 forEach와 마찬가지로 Array의 각 요소를 순회하며 callback 함수를 실행합니다. 다만, callback에서 return 되는 값을 배열로 만들어냅니다.

const arr = [100, 200, 300, 400, 500];

arr.map(function(el){       //map을 쓰거나 forEach를쓰거나 같은값이나온다
    document.write(el);
});
결과보기
100
200
300
400
500

11. 펼침연산자(Spread Operator)

배열에 포함된 항목을 목록으로 바꿔주는 연산자이다.

const num = [100, 200, 300, 400, 500];

document.write(num, "
");
document.write(num[0],num[1],num[2],num[3],num[4], "
");
document.write(...num);          /*...num 은 num안에 모든 요소를 가져온다. 쉼표안가져온다.*/
결과보기
100,200,300,400,500
100200300400500
100200300400500

12. 배열 : 데이터 불러오기 : 배열구조분해할당

구조를 깬뒤에 다시 재배당 해주는것 입니다.

let a, b, c;
[a,b,c] = [100, 200, "javascript"];

document.write(a);
document.write(b);
document.write(c);
결과보기
100
200
javascript

13. 객체 : 데이터 불러오기 : 기본

객체의 기본 형태입니다.

const obj = {
    a : 100,
    b : 200,
    c : "javascript"
}

document.write(obj.a);
document.write(obj.b);
document.write(obj.c);
결과보기
100
200
javascript

14. 객체 : 데이터 불러오기 : Object

앞의 key값을 불러올때 사용합니다. 죽은문법입니다.

const obj = {
    a : 100,
    b : 200,
    c : "javascript"
}

document.write(Object.keys(obj));          /*key값 불러오기*/
document.write(Object.values(obj));        /*value값 불러오기*/
document.write(Object.entries(obj));       /*모든 값 불러오기*/
결과보기
a,b,c
100,200,javascript
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);
document.write(name2);
document.write(name3);
결과보기
100
200
javascript

16. 객체 : 데이터 불러오기 : for in

객체값을 변수에 저장해 불러옵니다.

const obj = {
    a : 100,
    b : 200,
    c : "javascript"
}

for(let a in obj ){
    document.write(obj[a]);
}
결과보기
100
200
javascript

17. 객체 : 데이터 불러오기 : map()

객체 안에 배열로 감싸여있으면 map을 자주 사용한다.

const obj = [
    {a: 100, b: 200, c: "javascript"}
];

obj.map((el) => {
    document.write(el.a);
    document.write(el.b);
    document.write(el.c);
});
결과보기
100
200
javascript

18. 객체 : 데이터 불러오기 : hasOwnProperty()

객체 안에 데이터가 있는지 없는지 확인후 true, false로 출력합니다.

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("d"));

// document.write("a" in obj);     //약식입니다
// document.write("b" in obj);     //약식입니다
// document.write("c" in obj);     //약식입니다
// document.write("d" in obj);     //약식입니다
결과보기
true
true
true
false

19. 객체 : 데이터 불러오기 : 펼침연산자 - 복사

const obj = {
    a: 100,
    b: 200,
    c: "javascript"
}

const spread = { ...obj };
document.write(spread.a);
document.write(spread.b);
document.write(spread.c);
결과보기
100
200
javascript

20. 객체 : 데이터 불러오기 : 펼침연산자 - 추가

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);
결과보기
100
200
javascript
jquery

21. 객체 : 데이터 불러오기 : 펼침연산자 - 결합

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);
결과보기
100
200
javascript
jquery

22. 객체 : 데이터 불러오기 : 비구조화 할당

const obj = {
    a: 100,
    b: 200,
    c: "javascript"
}
const { a, b, c } = obj;

document.write(a);
document.write(b);
document.write(c);
결과보기
100
200
javascript

23. 객체 : 데이터 불러오기 : 객체구조분해할당

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);
결과보기
100
200
javascript