01. 변수 : 데이터 불러오기
변수에 데이터를 불러 올 수 있습니다.
{
let x = 100, y = 200, z = "javascript";
console.log(x ,y ,z);
}
결과 확인하기
100 200 "javascript"
02. 상수 : 데이터 불러오기
상수안에 저장된 데이터를 불러오는 방법입니다.
{
const x = 100, y = 200, z = "javascript";
console.log(x, y, z);
}
결과확인하기
100 200 "javascript
03. 배열 : 데이터 불러오기
배열 안에 저장된 데이터를 불러 오는 방법입니다.
{
const arr = [100, 200, "javascript"];
console.log(arr[0], arr[1], arr[2]);
}
결과확인하기
100, 200, "javascript"
04. 배열 : 데이터 불러오기 : 2차 배열
배열안에 배열을 넣어 저장한 데이터를 불러올수 있습니다.
{
const arr = [100, 200, ["javascript","react"]];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2][0]); //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) //length 갯수구할때 쓴다.
}
결과확인하기
[100,200,"javascript"]
06. 배열 : 데이터 불러오기 : for()문
조건이 성립 될때 까지 불러옵니다
{
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
for(let i = 0; i<9; i++){ //i는0부터시작하며 i<9 조건이 맞으면 출력 후 i를 하나를 더하고 다시계산한다
console.log(arr[i]);
}
// i=0; 0<9; console.log(arr[0]); i++ //100
// i=1; 1<9; console.log(arr[1]); i++ //200
// i=2; 2<9; console.log(arr[2]); i++ //300
// i=3; 3<9; console.log(arr[3]); i++ //400
// i=4; 4<9; console.log(arr[4]); i++ //500
// i=5; 5<9; console.log(arr[5]); i++ //600
// i=6; 6<9; console.log(arr[6]); i++ //700
// i=7; 7<9; console.log(arr[7]); i++ //800
// i=8; 8<9; console.log(arr[8]); i++ //900
// i=9; 9<9;"공식이성립안된다" END
}
결과확인하기
100
200
300
400
500
600
700
800
900
200
300
400
500
600
700
800
900
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:2 j:3 j:4 ... j:10 i:2 j:1 j:2 j:3...j:10...i:10 j:1 j:2...j:10
08. 배열 : 데이터 불러오기 : forEach()
배열에 있는 데이터를 반복 시킬때 사용하는 함수 입니다.
{
const num = [100, 200, 300, 400, 500];
//forEach
num.forEach(function(el){ //배열에 있는 데이터를 반복 시킬때 사용
document.write(el);
});
//forEach :화살표 함수
num.forEach((el)=>{
document.write(el);
});
//forEach :화살표 함수 : 괄호 생략
num.forEach(el=>{
document.write(el);
});
//forEach :화살표 함수 : 괄호 생략 : 중괄호 생략
num.forEach(el=> document.write(el));
// forEach(값, 인덱스, 배열)
num.forEach(function(element, index, array){
document.write(element,"<br>");
document.write(index,"<br>");
document.write(array,"<br>");
});
}
결과 확인하기
forEach ~ 화살표 함수
100200300400500,
forEach(값, 인덱스, 배열)
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
100200300400500,
forEach(값, 인덱스, 배열)
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
09. 배열 : 데이터 불러오기 : for of
반복 가능한 객체를 순회할 수 있습니다.
{
const arr = [100, 200, 300, 400, 500];
for(let i of arr){ //배열에서 사용해야합니다.
document.write(i);
}
}
결과 확인하기
100200300400500
10. 배열 : 데이터 불러오기 : for in
객체의 속성을 순회 합니다. 객체의 모든 열거 가능한 속성에 대해 반복합니다.
{
const arr = [100, 200, 300, 400, 500];
for(let i in arr){ //객체에서 사용해야합니다 하지만 배열도 객체이므로 사용은 가능합다.
document.write(arr[i]);
}
}
결과 확인하기
100200300400500
11. 배열 : 데이터 불러오기 : map()
배열의 모든요소에 대해서 주어진 함수를 호출하여, 각 요소를 함수의 반환값으로 대체한 새로운 배열을 생성합니다. 이때, 원본 배열은 변경되지 않습니다.
{
const num = [100, 200, 300, 400, 500];
num.map(function(el, i, a){
console.log(el);
console.log(i);
console.log(a);
});
}
결과 확인하기
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
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
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 600 700
100 200 300 400 500
100 200 300 400 500 600 700
13. 배열 : 데이터 불러오기 : 배열 구조분해 할당
배열의 요소를 개별 변수에 할당하는 방법중 하나입니다.이를 통해 배열 각요소를 개별 변수로 분리하여 사용할 수 있습니다.
{
let a,b,c;
[a, b, c] = [100, 200, "javascript"];
console.log(a);
console.log(b);
console.log(c);
}
결과 확인하기
100
200
jvaascript
200
jvaascript
14.객체 : 데이터 불러오기 : 기본
기본적인 객체 불러오기 입니다.
{
const obj = {
a: 100,
b: 200,
c: "javascript"
}
console.log(obj.a);
console.log(obj.b);
console.log(obj.c);
}
결과 확인하기
100
200
javascript
200
javascript
15.객체 : 데이터 불러오기 : Object
Object를 통해 키나 값을 불러옵니다.
{
const obj = {
a: 100,
b: 200,
c: "javascript"
}
console.log(Object.keys(obj)); //abc를불러올때 key
console.log(Object.values(obj)); //값
console.log(Object.entries(obj)); //항목 [Array(2), Array(2), Array(2)], 'a',100,'b',200,'c',javascript
}
결과 확인하기
['a','b','c']
[100, 200, 'javascript']
['a', 100]['b', 200]['c', 'javascript']
[100, 200, 'javascript']
['a', 100]['b', 200]['c', 'javascript']
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
200
javascript
17. 객체 : 데이터 불러오기 for in
객체의 속성을 순회 합니다. 객체의 모든 열거 가능한 속성에 대해 반복합니다.
{
const obj = {
a: 100,
b: 200,
c: "javascript",
}
for(let key in obj){
console.log(key); //키 abc를 불러온다
console.log(obj[key]); // 값을 불러온다
}
}
결과 확인하기
a
100
b
200
c
jvaascript
100
b
200
c
jvaascript
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
300
javascript
300
javascript
19. 객체 : 데이터 불러오기 : hasOwnProperty
객체가 특정 속성을 직접 소유하고 있는지를 나타내는 메서드입니다. 이 메서드는 객체 자체에 정의된 속성만을 검사하며, 상속된 속성은 검사하지 않습니다.
{
const obj = {
a: 100,
b: 200,
c: "javascript",
}
// console.log(obj.hasOwnProperty("a"));// ture
// console.log(obj.hasOwnProperty("b"));// ture
// console.log(obj.hasOwnProperty("c"));// ture
// 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);
}
결과 확인하기
ture
ture
ture
false
ture
ture
false
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: "jvaascript",
d: "react"
}
const spread = {...obj1, ...obj2}
console.log(spread.a);
console.log(spread.b);
console.log(spread.c);
console.log(spread.d);
}
결과 확인하기
100
200
javascript
100
200
javascript
react
100
200
javascript
react
200
javascript
100
200
javascript
react
100
200
javascript
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
200
javascript
100
200
javascript