01. 변수 : 데이터 불러오기
변수안에 저장된 데이터를 불러오는 방법입니다.
{
let x = 100, y=200, z="javascript";
console.log(x, y, z);
}
결과 확인하기
100
200
javascript
200
javascript
02. 상수 : 데이터 불러오기
상수안에 저장된 데이터를 불러오는 방법입니다.
{
const x = 100, y = 200, z = "javascript";
console.log(x, y, z);
}
결과 확인하기
100
200
javascript
200
javascript
03. 배열 : 데이터 불러오기
배열안에 저장된 데이터를 불러오는 방법입니다.
{
const arr = [100, 200, "javascript"];
console.log(arr[0], arr[1], arr[2]);
}
결과 확인하기
100
200
javascript
200
javascript
04. 배열 : 데이터 불러오기 : 2차 배열
배열안에 배열이 있는 데이터를 불러오는 방법입니다.
{
const arr = [100, 200, ["javascript", "react"]];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2][0]);
console.log(arr[2][1]);
}
결과 확인하기
100
200
javascript
react
200
javascript
react
05. 배열 : 데이터 불러오기 : 갯수 구하기
'length'는 갯수를 구하는 태그입니다.
{
const arr = [100, 200, "javascript"];
console.log(arr.length);
}
결과 확인하기
3
06. 배열 : 데이터 불러오기 : for()문
for문의 기본형식은 'for(초기값; 조건식; 증감식)'입니다.
{
for(let i = 0; i < 9; i++){
console.log(arr[i]);
}
for(let i = 0; i < 9; i++){
console.log(arr[i]);
}
}
결과 확인하기
123456789
07. 배열 : 데이터 불러오기 : 중첩 for()문
배열안에 저장된 데이터를 불러오는 방법입니다.
{
for(let i=1; i<=10; i++) {
console.log("i : " + i);
for(let j=1; j<=10; j++) {
console.log("j : " + j);
}
}
}
결과 확인하기
i:1에 j: 1~10
i:2에 j: 1~10
i : 10까지 반복
i:2에 j: 1~10
i : 10까지 반복
08. 배열 : 데이터 불러오기 : for Each()
{
const num = [100, 200, 300, 400, 500];
document.write(num[0],"<br>");
document.write(num[1],"<br>");
document.write(num[2],"<br>");
document.write(num[3],"<br>");
document.write(num[4],"<br>");
document.write("<br><br>");
//for문
for(let i=0; i<num.length; i++){
document.write(num[1],"<br>");
}
//forEach
num.forEach(function(el){
document.write(el, "<br>"); //배열안에 데이터가 있고 반복 시킬때
});
//forEach : 화살표 함수
num.forEach((el)=>{
document.write(el, "<br>");
});
//forEach : 화살표 함수 : 괄호 생략
num.forEach(el => {
document.write(el, "<br>");
});
//forEach : 화살표 함수 : 중괄호 생략
num.forEach(el => document.write(el, "<br>"));
//forEach (값, 인덱스, 배열)
num.forEach(function(element, index, array){
document.write(element, "<br>");
document.write(index, "<br>");
document.write(array, "<br>");
})
}
결과 확인하기
09. 배열 : 데이터 불러오기 : for of
{
const arr = [100, 200, 300, 400, 500];
for(let i of arr){
document.write(i);
}
}
결과 확인하기
100 200 300 400 500
10. 배열 : 데이터 불러오기 : for in
{
const arr = [100, 200, 300, 400, 500];
for(let i in arr){
document.write(arr[i]);
}
}
결과 확인하기
100 200 300 400 500
11. 배열 : 데이터 불러오기 : map()
{
const num = [100, 200, 300, 400, 500];
num.forEach(function(el, i, a){
console.log(el);
console.log(i);
console.log(a);
});
num.map(function(el, i, a){
console.log(el);
console.log(i);
console.log(a);
});
}
결과 확인하기
12. 배열 : 데이터 불러오기 :배열 펼침 연산자(Spread Operator)
자바스크립트에서 배열, 객체, 문자열 등의 요소를 펼쳐서 개별 요소로 분리하는 연산자입니다.
{
let arr1 = [100, 200, 300, 400, 500];
let arr2 = [600, 700,];
console.log(arr1, "
");
console.log(...arr1);
console.log(...arr1, ...arr2);
}
결과 확인하기
[100,200,300,400,500]
100 200 300 400 500
100 200 300 400 500
13. 배열 : 데이터 불러오기 : 배열구조분해할당
배열구조분해할당은 배열의 요소를 개별 변수에 할당하는 방법 중 하나 입니다 이를통한 배열의 각 요소를 개별 변수로 분리하여 사용할 수 있습니다.
{
let a, b, c;
[a, b, c] = [100, 200, "javascript"];
console.log(a);
console.log(b);
console.log(c);
}
결과 확인하기
100 200 jabascript
14. 객체 : 데이터 불러오기 : 기본
{
const obj = {
a: 100,
b: 200,
c: "javascript"
}
console.log(Obect.keys(obj));
console.log(Obect.keys(obj));
console.log(Obect.keys(obj));
}
결과 확인하기
100 200 jabascript
15. 객체 : 데이터 불러오기 : Object
{
const obj = {
a: 100,
b: 200,
c: "javascript"
}
console.log(Obect.keys(obj));
console.log(Obect.values(obj));
console.log(Obect.entries(obj));
}
결과 확인하기
[a b c]
[100 200 javascript]
[["a",100]["b",200]["c",jabascript]]
[100 200 javascript]
[["a",100]["b",200]["c",jabascript]]
16. 객체 : 데이터 불러오기 : 변수
{
const obj = {
a: 100,
b: 200,
c: "javascript"
}
const name1 = obj.a;
const name2 = obj.b;
const name3 = obj.c;
console.log(name1);
console.log(name2);
console.log(name3);
}
결과 확인하기
100 200 javascript
17. 객체 : 데이터 불러오기 : for in
배열구조분해할당은 배열의 요소를 개별 변수에 할당하는 방법 중 하나 입니다 이를통한 배열의 각 요소를 개별 변수로 분리하여 사용할 수 있습니다.
{
const obj = {
a: 100,
b: 200,
c: "javascript"
}
for(let ke in obj){
console.log(key);
console.log(obj[key]);
}
}
결과 확인하기
a 100 b 200 c jabascript
18. 객체 : 데이터 불러오기 : map()
{
const obj = [
{a:100, b:300, c:"javascript"}
]
obj.map(function(el){
console.log(el.a)
console.log(el.b)
console.log(el.c)
});
}
결과 확인하기
100 200 jabascript
19. 객체 : 데이터 불러오기 : hasOwnproperty()
{
const obj = {
a: 100,
b: 200,
c: "javascript"
}
console.log(obj.hasOwnproperty("a")); //true
console.log(obj.hasOwnproperty("b")); //true
console.log(obj.hasOwnproperty("c")); //true
console.log(obj.hasOwnproperty("d")); //false
//약식
console.log("a" in obj);
console.log("b" in obj);
console.log("c" in obj);
console.log("d" in obj);
}
결과 확인하기
hasOwnproperty
20. 객체 : 데이터 불러오기 : 펼침연산자
{
const obj = {
a: 100,
b: 200,
c: "javascript"
}
const spread = {...obj}
console.log(spread.a);
console.log(spread.b);
console.log(spread.c);
}
//추가도 가능
{
const obj = {
a: 100,
b: 200,
c: "javascript"
}
const spread = {...obj, d: "react"}
console.log(spread.a);
console.log(spread.b);
console.log(spread.c);
console.log(spread.d);
}
//결합
{
const obj1 = {
a: 100,
b: 200
}
const obj2 = {
c: "javascript",
d: "react"
}
const spread = {...obj1, ...obj2}
console.log(spread.a);
console.log(spread.b);
console.log(spread.c);
console.log(spread.d);
}
결과 확인하기
100 200 jabascript react
100 200 jabascript react
100 200 jabascript react
21. 객체 : 데이터 불러오기 : 비구조화 할당(객체구조분해 할당)
{
const obj = {
a: 100,
b: 200,
c: "javascript"
}
const {a,b,c} = obj;
console.log(a);
console.log(b);
console.log(c);
}
{
const obj = {
a: 100,
b: 200,
c: "javascript"
}
const {a:name1, b:name2, c:name3} = obj;
console.log(name1);
console.log(name2);
console.log(name3);
}
결과 확인하기
100 200 javascript
100 200 javascript
100 200 javascript