TOP

01. 변수 : 데이터 불러오기

변수에 데이터를 저장 했으면 불러와야 합니다.

// let x = 100;
// let y = 200;
// let z = 'javascript';

let x = 100, y = 200, z = 'javascript'; // 변수 3개를 한줄에 선언 가능

document.write(x);
document.write(y);
document.write(z);
결과보기
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, 200, 'javascript'];

document.write(arr[0]);
document.write(arr[1]);
document.write(arr[2]);
결과보기
100
200
javascript

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

배열안에 원소로 배열이 들어오는데, 그것을 2차원 배열이라고 합니다.

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 속성을 통하여 간단히 구할 수 있습니다.

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

document.write(arr.length);
결과보기
3

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

배열의 원소를 하나씩 불러올 수 있는 방법은 for()문을 사용하면 됩니다.

const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];

// document.write(...arr);
// document.write(arr[0]); // 코드 수가 너무 길어진다.
// document.write(arr[1]);
// document.write(arr[2]);
// document.write(arr[3]);
// document.write(arr[4]);
// document.write(arr[5]);
// document.write(arr[6]);
// document.write(arr[7]);
// document.write(arr[8]);

// for문 => for(초기값, 조건식, 증감식)
for(let i = 0; i < arr.length; i++) document.write(arr[i]);
결과보기
100
200
300
400
500
600
700
800
900

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

배열에서 쓸 수 있는 메서드 forEach()는 폭넓은 매개변수를 제공하여 배열의 접근성을 높여줍니다.

// forEach()
const num = [100, 200, 300, 400, 500];

// for문을 이용해서 출력 ...
for(let i = 0; i < num.length; i++){
document.write(num[i]);
}

// forEach()를 이용해서 출력 ...
num.forEach(function(element){
document.write(element);
});

// forEach()의 여러 매개변수 사용
num.forEach(function(element, index, arr){
document.write(element);
document.write(index);
document.write(arr);
})
결과보기
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

01. 변수 : 데이터 불러오기

콘솔과 알림창으로 데이터 찍어보기

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

// alert(x); // 경고창 출력
// alert(y);
// alert(z);

// console.log(x); // 콘솔에 출력
// console.log(y);
// console.log(z);
결과보기

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

배열안의 배열 또는 객체를 원소로 하는 배열 출력하기

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

// document.write(arr[0]);
// document.write(arr[1]);
// document.write(arr[2]);
// document.write(arr[3]);

// document.write(arr.length);

// for(let i = 0; i < arr.length; i++){
//     document.write(arr[i]);
// }

// document.write(arr[2]["b"]);
// document.write(arr[3][1]);
// document.write(arr[3]);
결과보기

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

for()문을 사용하여 배열을 조건에 따라 순회하면서 접근합니다.

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

// document.write(...arr);
// document.write(arr[0]); // 코드 수가 너무 길어진다.
// document.write(arr[1]);
// document.write(arr[2]);
// document.write(arr[3]);
// document.write(arr[4]);

// for문 => for(초기값, 조건식, 증감식)
for (let i = 0; i < arr.length; i++) {
// document.write(arr[i]);
console.log(arr[i]);
}
결과보기

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

배열에서 쓸 수 있는 메서드 forEach()는 폭넓은 매개변수를 제공하여 배열의 접근성을 높여줍니다.

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

num.forEach(function (el) {
document.write(el);
})

num.forEach(function (element, index, array) {
document.write(element);
document.write(index);
document.write(array);
})
결과보기

08. 배열 : 데이터 불러오기 : for of

for of는 배열의 요소 값들을 뽑아낼 때 사용합니다.

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

for (let i of arr) {
document.write(i);
}
결과보기

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

for in 방법은 배열의 인덱스를 뽑아내서 순회할 수 있는 방법입니다.

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

for (let i in arr) {
document.write(arr[i]);
}
결과보기

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

map()메서드는 forEach와 같은 기능을 제공합니다.

const arr = [100, 200, 300, 400, 500];
// map()
arr.map(function (el) {
// document.write(el);
});

arr.map(function (el, index, array) {
// document.write(el);
// document.write(index);
// document.write(array);
});
결과보기

11. 배열 : 데이터 불러오기 : 펼침연산자

펼침 연산자 (Spread OPerator)는 말 그대로 배열의 원소들을 촥 펼치는 역할입니다. ...array(obj) 방법으로 사용하며, 배열 concat, push, slice를 간편하게 할 수 있습니다. 물론 객체도 펼칠 수 있습니다. 

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); // , 포함안됨
결과보기
100, 200, 300, 400, 500
100200300400500
100200300400500

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

배열 구조 분해 할당은 배열의 속성을 해체하여 그 값을 각각의 개별 변수에 담을 수 있습니다. 배열의 값을 바꿀 때 별도의 temp변수 없이도 간단하게 값변경이 가능합니다.

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

Object의 키 값과 밸류 값을 확인하는 메서드를 소개하겠습니다. obj.entries로 키 값 쌍을 확인할 수 있습니다.

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

document.write(Object.keys(obj)); // 키 값출력
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

for in 메서드는 obj의 키값을 순회합니다.

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

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

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

배열안에 객체가 있을 경우 map 메소드를 사용해서 객체 값을 불러올 수 있습니다.

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

obj.map((el) => { // el은 객체가 나오므로 객체.키값으로 출력한다.
    document.write(el.a);
    document.write(el.b);
    document.write(el.c);
})
결과보기
100
200
javascript

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

객체.hasOwnProperty(키값) 메서드는 객체에 인자로 들어온 키값이 존재하는지에 따라 true, false를 반환합니다.

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

document.write(obj.hasOwnProperty("a"));
document.write("a" in obj);
결과보기
true
true

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 {key1, key2 ...} = 객체 방법으로 변수를 할당할 수 있습니다.

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