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차 배열
배열안에 저장된 데이터를 arr를 사용해 불러오는 방법입니다.
{
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( )문
대입은 초기값, 조건식, 실행문, 증감식 순으로 하면 편합니다.
{
const arr = [100, 200, 300, 400, 500, 600 ,700, 800, 900];
//console.log(arr[0], arr[1], arr[2], arr[3], arr[4], arr[5], arr[6], arr[7], arr[8]);
//console.log(arr[0]);
//console.log(arr[1]);
//console.log(arr[2]);
//console.log(arr[3]);
//console.log(arr[4]);
//console.log(arr[5]);
//console.log(arr[6]);
//console.log(arr[7]);
//console.log(arr[8]);
//하나씩 불러올수있지만, 데이터가 많아지면 힘들다.
//for()문 공식을 사용해 많은 값을 한번에 구할 수 있다.
//for(초기값; 조건식; 증감식) {
// //실행문
//}
for(let i=0; i<9; i++){
console.log(arr[i]);
}
}
결과 확인하기
100
200
300
400
500
600
700
800
900
200
300
400
500
600
700
800
900
07. 배열 : 데이터 불러오기 : 중첩 for()문
여러개의 배열된 데이터를 for문을 이용해 불러오는 방법입니다.
for문안에 새로운 for문이 들어가 있는 것입니다.
{
for( let i=1; i<=10; i++ ) { //let 생략 가능은 하지만 되도록 써줌
console.log("i : " + i); //문자열과 변수를 결합
for( let j=1; j<=10; j++ ){
console.log("j : " + j);
}
}
}
결과 확인하기
i:1 ~ i;10
j;1 ~ j;10
j;1 ~ j;10
08. 배열 데이터 불러오기 : forEach()
forEach문을 사용해 함수로 불러오는 방법입니다.화살표 함수로 괄호와 중괄호를 생략할수있습니다.
요소값, 인덱스값, 배열을 불러올수있습니다.
{
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>");
//for문을 사용해 불러오기
for(let i=0; i<num.length; i++){
document.write(num[i],"<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>");
});
}
결과 확인하기
100
200
300
400
500
100
0
100,200,300,400,500
200
1
100,200,300,400,500
~
500
4
100,200,300,400,500
200
300
400
500
100
0
100,200,300,400,500
200
1
100,200,300,400,500
~
500
4
100,200,300,400,500
09. 배열 : 데이터 불러오기 : for of
for of 문을 사용해 for문보다 간결하게 작성할 수 있습니다.
{
const arr = [100, 200, 300, 400, 500];
for(let i of arr){
ocument.write(i); //for 문을 편하게 불러오기 위한 방법
}
}
결과 확인하기
100200300400500
10. 배열 : 데이터 불러오기 : for in
for in 문을 사용해 객체의 자릿수값을 불러오는 방법입니다. arr[i]를 사용해 배열값을 불러올수도 있습니다.
{
const arr = [100, 200, 300, 400, 500];
for(let i in arr){
document.write(i); //01234 객체를 불러오는 (자릿수값)
// document.write(arr[i]); //배열을 불러오고 싶으면 arr[i]로 불러오기
}
}
결과 확인하기
100200300400500
11. 배열 : 데이터 불러오기 : map()
배열에 있는 데이터를 다시 배열안에 넣어주는 방법입니다.
{
const num = [100, 200, 300, 400, 500];
num.forEach(function(el , i, a){
// document.write(el, "<br>");
console.log(el)
console.log(i)
console.log(a) //데이터값만
});
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
~
500
4
100,200,300,400,500
0
100,200,300,400,500
200
1
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, "<br>"); //배열
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. 배열 : 데이터 불러오기 : 배열 구조분해할당
배열 구조분해 할당은(Arrat destructuring(파괴)assignment )배열의 요소를 개별 변수에 할당하는 방법 중 하나입니다.
이를 통해 배열의 각 요소를 개별 변수로 분리하여 사용할 수 있습니다.
{
let a, b, c; //변수선언만
[a,b,c] = [100,200,"javascript"]; //구조를 분해해서 작업한 방법
console.log(a);
console.log(b);
console.log(c);
}
결과 확인하기
100
200
javascript
200
javascript
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));
console.log(Object.values(obj));
console.log(Object.entries(obj));
}
결과 확인하기
['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); //a b c
console.log(obj[key]); //100 200 javacript
}
}
결과 확인하기
a
100
b
200
c
javascript
100
b
200
c
javascript
18. 객체 : 데이터 불러오기 : map()
배열의 모든 요소에 대해 주어진 함수를 호출하여 새로운 배열을 만드는 javascript 배열 메서드이다.
{
const obj = [
{a: 100, b:300, c:"javascript"}
]
obj.map((el) => { //map은 배열에서 쓰는 방법이여서 배열안에 객체로 넣어줘야 값이 나옴
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")); //true
console.log(obj.hasOwnProperty("b")); //true
console.log(obj.hasOwnProperty("c")); //true
console.log(obj.hasOwnProperty("d")); //false
console.log("a" in obj); //줄여서 간단하게 표현할 수 있음 for in문은 아님
console.log("b" in obj);
console.log("c" in obj);
}
결과 확인하기
true
true
true
false
true
true
true
true
true
false
true
true
true
20. 객체 : 데이터 불러오기 : 객체 펼침연산자
javascript에서 사용되는 연산자 중 하나이다. '...'으로 표시.
객체 리터럴 내에서 사용하거나 함수 호출에서 인수로 사용 가능
{
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 = {
a: "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
javacript
react
/
javacript
200
undefined
react
200
javacript
react
/
javacript
200
undefined
react
21. 객체 : 데이터 불러오기 : 객체 구조분해할당
javascript에서 사용되는 문법 중 하나이다.
객체의 속성을 변수에 할당할 수 있다. 이를 통해 객체에서 필요한 속성만 추출하여 사용할 수 있다.
{
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
javacript
/
100
200
javacript
200
javacript
/
100
200
javacript