01. 변수 : 데이터 불러오기
변수안에 저장된 데이터를 불러오는 방법입니다.
{
let x = 100, y = 200, z = "javascript";
console.log(x ,y, z);
}
결과 확인하기
200
javascript
02. 상수 : 데이터 불러오기
상수안에 저장된 데이터를 불러오는 방법입니다.
{
const x = 100, y = 200, z = "javascript"
console.log(x ,y, z);
}
결과 확인하기
200
javascript
03.배열 : 데이터 불러오기 : 기본
상수안에 저장된 데이터를 불러오는 방법입니다.
{
const arr =[100, 200, "javascript"];
console.log(arr[0], arr[1], arr[2]);
}
결과 확인하기
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]);
}
결과 확인하기
200
javascript
react
05.배열 : 데이터 불러오기 : 갯수 구하기
여러 개로 배열된 데이터를 불러오는 값의 갯수를 구하는 방법입니다.
{
const arr = [100, 200, "javascript"];
console.log(arr.length)
}
결과 확인하기
06. 배열 : 데이터 불러오기 : for( )문
형식 : for(초기값; 조건식; 증감식;){실행문}
조건식이 true가 나올 때 까지만 값이 나옵니다.
for (시작하는 값, i가 9보다 작을때까지 트루가 나와야 값이 나옴, ++는 i가 1씩증가)
{
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900]
for(let i=0; i<9; i++){
console.log(arr[i]);
}
}
결과 확인하기
200
300
400
500
600
700
800
900
for( )문 연산
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=8; 8<9; console.log(arr[9]) i++ //900
i=9; 9<9; END //9는 9보다 작지 않으므로 8까지 구해집니다.
07. 배열 : 데이터 불러오기 : 중첩 for()문
반복문 안에 반복문이 중첩 되어있는 형태입니다.
{
for(let i=1; i<=10; i++){
document.write(i,"<br>");
for(let j=1; j<=10; j++){
document.write(j);
}
}
}
결과 확인하기
1 2 3 4 5 6 7 8 9 10
2
1 2 3 4 5 6 7 8 9 10
3
1 2 3 4 5 6 7 8 9 10
4
1 2 3 4 5 6 7 8 9 10
5
1 2 3 4 5 6 7 8 9 10
6
1 2 3 4 5 6 7 8 9 10
7
1 2 3 4 5 6 7 8 9 10
8
1 2 3 4 5 6 7 8 9 10
9
1 2 3 4 5 6 7 8 9 10
10
1 2 3 4 5 6 7 8 9 10
08. 배열 : 데이터 불러오기 : forEach( )
배열에서 사용할 수 있는 자바스크립트 함수 중 하나로입니다.
배열의 각 요소에 대해 콜백 함수(함수 안에 불러오는 함수)를 실행합니다.
{
const num = [100,200,300,400,500];
document.write(num[0]);
document.write(num[1]);
document.write(num[2]);
document.write(num[3]);
document.write(num[4]);
//for
for(let i=0; i<num.length; i++){
document.write(num[i]);
}
//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);
document.write(index);
document.write(array);
})
}
결과 확인하기
200
300
400
500
100
200
300
400
500
100
200
300
400
500
100
200
300
400
500
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
09. 배열 : 데이터 불러오기 : for of
배열에서 쓰는 반복문 입니다.
{
const arr = [100, 200, 300, 400, 500];
for(let i of arr){
document.write(i);
}
}
결과 확인하기
200
300
400
500
10. 배열 : 데이터 불러오기 : for in
객체 때문에 만들어졌습니다.
객체는 배열의 성질이 있어서 for in문으로 배열도 불러올 수 있습니다.
{
const arr = [100, 200, 300, 400, 500];
for(let i in arr){
document.write(arr[i]);
}
}
결과 확인하기
200
300
400
500
배열 : 데이터 불러오기 : map()
배열의 각 요소에 대해 콜백 함수를 실행하고, 그 결과를 새로운 배열로 반환합니다.
원본 배열을 변경하지 않으며, 반환되는 새로운 배열의 길이는 원본 배열과 같습니다.
{
const num = [100, 200, 300, 400, 500];
num.forEach(function(el, i,a){
document.write(el);
document.write(i);
document.write(a);
});
num.map(function(el, i, a){
document.write(el);
document.write(i);
document.write(a);
});
}
결과 확인하기
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
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
12. 배열 : 데이터 불러오기 : 배열 펼침 연산자
배열, 객체, 문자열등의 요소를 펼처서 개별 요소로 분리하는 연산자입니다.
{
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,600,700
13. 배열 : 데이터 불러오기 : 배열구조분해할당
배열의 요소를 개별 변수에 할당하는 방법 중 하나입니다.
배열의 각 요소를 개별 변수에 분리하여 사용할 수 있습니다.
{
let a, b, c;
[a,b,c] = [100, 200, "javascript"];
console.log(a);
console.log(b);
console.log(c);
}
결과 확인하기
200
javascript
14. 객체 : 데이터 불러오기 : 기본
객체는 키(key)와값(value)을 저장할 수 있는 구조입니다.
{
const obj = {
a : 100,
b : 200,
c : "javascript",
}
console.log(obj.a);
console.log(obj.b);
console.log(obj.c);
}
결과 확인하기
200
javascript
15. 객체 : 데이터 불러오기 : Object
객체의 속성 키(key), 값(value), 키-값 쌍(entry)을 각각 배열로 변환합니다.
{
const obj = {
a : 100,
b : 200,
c : "javascript",
}
console.log(Object.keys(obj));
console.log(Object.values(obj));
console.log(Object.entries(obj));
}
결과 확인하기
100,200,javascript
a,100,b,200,c,300
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);
}
결과 확인하기
200
javascript
17. 객체 : 데이터 불러오기 : for in
for in문을 사용해서 객체의 모든 속성을 순회하면서 속성 이름과 값을 출력합니다.
{
const obj = {
a : 100,
b : 200,
c : "javascript",
}
for(let key in obj){
console.log(key);
console.log(obj[key]);//속성값 불러옴
}
}
결과 확인하기
100
b
200
c
javascript
18. 객체 : 데이터 불러오기 : map()
map() 메소드를 사용해서 배열의 요소를 순회하면서 각 요소의 이름과 값을 출력합니다.
{
const obj = [
{a: 100, b:300, c: "javascript"}
]
obj.map((el) =< {
console.log(el.a); //여기서 el은 obj를 뜻함
console.log(el.b);
console.log(el.c);
});
}
결과 확인하기
300
javascript
19. 객체 : 데이터 불러오기 : hasOwnProperty()
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);
}
결과 확인하기
true
true
false
true
true
true
false
20. 객체 : 데이터 불러오기 : 객체 펼침연산자
객체 펼침 연산자(spread operator)는 ... 기호를 사용하여 객체의 속성을 전개하는 연산자입니다.
이 연산자를 사용하면 객체의 속성을 새로운 객체에 복사하거나, 함수 호출에서 인수로 전달할 수 있습니다.
{
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 obj = {
a : 100,
b : 200,
}
const obj2 ={
c : "javascript",
d: "react"
}
const spread = {...obj, ...obj2}
console.log(spread.a);
console.log(spread.b);
console.log(spread.c);
console.log(spread.d);
}
결과 확인하기
200
javascript
react
100
200
javascript
react
21. 객체 : 데이터 불러오기 : 객체구조분해할당
객체의 속성을 변수에 할당하는 방법 중 하나입니다.
이 기능은 ES6부터 도입되었습니다.
객체 구조 분해 할당을 사용하면, 객체의 속성 값을 변수에 바로 할당할 수 있습니다.
{
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);
}
결과 확인하기
200
javascript
100
200
javascript