01. 변수 : 데이터 불러오기
변수안에 저장된 데이터를 불러오는 방법입니다.
{
let x = 100, y = 200, z = "javascript"; // 변수 한줄에 값을 한번에 지정
console.log(x, y, z);
}
결과 확인하기
변수 : 변수는 데이터를 저장하는 장소를 의미합니다.
변수는 var와 let이 있습니다.
02. 상수 : 데이터 불러오기
상수안에 저장된 데이터를 불러오는 방법입니다.
{
const x = 100, y = 200, z = "javascript";
console.log(x, y, z);
}
결과 확인하기
상수 : 상수는 데이터가 변경되지 않습니다.
var, let 은 값이 변경되지만 const는 값이 변경되지 않습니다.
03. 배열 : 데이터 불러오기
배열안에 저장된 데이터를 불러오는 방법입니다.
{
const arr = [100, 200, "javascript"]
console.log(arr[0], arr[1], arr[2]);
}
결과 확인하기
04. 배열 : 데이터 불러오기 : 2차 배열
배열안에 저장된 배열을 불러오는 방법입니다.
{
const arr = [100, 200, ["javascript", "react"]];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2][0]); //2차 배열
console.log(arr[2][1]);
}
결과 확인하기
200
javascript
react
05. 배열 : 데이터 불러오기 : 갯수 구하기
배열에 저장된 값의 갯수를 불러오는 방법입니다.
{
const arr = [100, 200, "javascript"];
console.log(arr.length);
}
결과 확인하기
06. 배열 : 데이터 불러오기 : for()문
배열에 저장된 값의 데이터를 불러오는 방법입니다.
for문을 사용해 값이 조건에 맞을때까지 계속 실행하는 방법입니다.
{
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
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(let i = 0; i<9; i++){ //for문을 사용해 반복되는 불필요한 코드를 줄일 수 있습니다.
console.log(arr[i]);
}
결과 확인하기
200
300
400
500
600
700
700
800
900
//1~13줄 코드와 15~17줄 코드의 값은 똑습니다.
반복문 : 변수를 이용해 반복적으로 값을 낼수있다.
for문에 사용되는 변수가 적은 것이 더 효율적이고 간단하므로 변수들의 관계를 잘 파악하여 불필요한 변수의 사용을 줄이는 것이 좋습니다.
07. 배열 : 데이터 불러오기 : 중첩 for()문
중첩for문을 for문안에 for문을 넣어 실행하는 방법입니다.
중첩 for문을 이용해 구구단을 만들었습니다.
{
for( let i=1; i<10; i++) {
console.log("i : " + i);
for ( let j=1; j&gl=9; j++){
console.log(i + " * " + j + " = "+ i * j);
}
}
}
결과 확인하기
1 * 2 = 2
~
9 * 8 = 72
9 * 9 = 81
08. 배열 : 데이터 불러오기 : forEach()
forEach() 메소드는 배열(Array)의 각 요소(element)마다 콜백 함수(callback function)을 실행합니다.
{
const num = [100, 200, 300, 400, 500];
num.forEach(function(el){
document.write(el,"<br>");
});
//forEach 화살표 : 중괄호 생략
num.forEach(el => document.write(el,"<br>"));
document.write("<br>");
//forEach (값, 인덱스, 배열)
num.forEach(function(Element,index, array){
document.write(Element,"<br>");
document.write(index,"<br>");
document.write(array,"<br>");
});
}
결과 확인하기
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);
}
}
결과 확인하기
10. 배열 : 데이터 불러오기 : for in
for in문은 자바스크립트의 반복문 중 하나로, 객체의 속성을 순회하는 데 사용됩니다.
{
const arr = [100, 200, 300, 400, 500];
for(let i in arr){
document.write(i);
}
}
결과 확인하기
11. 배열 : 데이터 불러오기 : map()
map()은 배열의 모든 요소에 대해 주어진 함수를 호출하여 새로운 배열을 만듭니다.
{
const num = [100, 200, 300, 400, 500];
num.map(function(el, i, a){ //element, index, array 의 줄인말
console.log(el);
console.log(i);
console.log(a);
const mapNum = el;
console.log(mapNum)
});
}
결과 확인하기
200 1 100,200,300,400,500 200
300 2 100,200,300,400,500 300
400 3 100,200,300,400,500 400
500 4 100,200,300,400,500 500
12. 배열 : 데이터 불러오기 : 배열 펼침연산자(Spread operator)
배열 펼침 연산자 (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, 600, 700
13. 배열 : 데이터 불러오기 : 배열구조분해할당(Array Destructuring Assignment)
배열 구조 분해 할당 (Array destructuring assignment)은 자바스크립트에서 배열을 분해하여 개별적인 변수로 할당하는 기능입니다.
이 기능은 배열의 각 요소를 분리하여 변수에 할당하는 방식으로 작동합니다.
{
let a, b, c;
[a, b, c] = [100, 200, "javascript"]; //배열을 분해하여 개별적인 변수로 할당하는 부분입니다.
console.log(a);
console.log(b);
console.log(c);
}
결과 확인하기
200
javascript
14. 객체 : 데이터 불러오기 : 기본
객체안에 저장된 데이터를 불러오는 방법입니다.
{
const obj = {
a:100,
b:200,
c:"javascript"
};
console.log(obj.a);
console.log(obj.b);
console.log(obj.c);
console.log(obj);
}
결과 확인하기
200
javascript
{a: 100, b: 200, c:'javascript'}
15. 객체 : 데이터 불러오기 : Object
객체안에 저장된 데이터를 불러오는 방법입니다.
{
const obj = {
a:100,
b:200,
c:"javascript"
};
console.log(Object.keys(obj)); //객체의 키값만 가져옵니다.
console.log(Object.values(obj)); //객체의 값만 가져옵니다.
console.log(Object.entries(obj)); //모든값을 가져옵니다.
}
결과 확인하기
(3) [100, 200, 'javascript']
(3) [Array(2), Array(2), Array(2)]
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()은 배열의 모든 요소에 대해 주어진 함수를 호출하여 새로운 배열을 만듭니다.
map()은 배열을 불러오는 문이라 객체를 배열안으로 넣어줘야 합니다.
{
const obj = [ //객체를 배열안으로 넣어줘야 합니다.
{a:100, b:200, c:"javascript"}
];
obj.map(function(element){
console.log(element.a);
console.log(element.b);
console.log(element.c);
});
//화살표함수
obj.map((element) => {
console.log(element.a);
console.log(element.b);
console.log(element.c);
});
}
결과 확인하기
200
javascript
19. 객체 : 데이터 불러오기 : hasOwnProperty()
hasOwnProperty()는 특정 객체가 특정 속성을 직접 포함하고 있는지 여부를 검사하는 데 사용됩니다.
{
const obj = {
a:100,
b:200,
c:"javascript"
};
console.log(obj.hasOwnProperty("a")); //값이 있으면 true
console.log(obj.hasOwnProperty("b"));
console.log(obj.hasOwnProperty("c"));
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);
}
결과 확인하기
200
javascript
undefined
100
200
javascript
undefined
20. 객체 : 데이터 불러오기 : 객체 펼침연산자
객체 펼침연산자는 객체를 펼쳐서 새로운 객체를 만드는 연산자입니다.
배열안에 키와 값을 추가 시킬 수 있습니다.
{
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);
}
결과 확인하기
200
javascript
react
20-2. 객체 : 데이터 불러오기 : 객체 펼침연산자
객체 펼침연산자는 객체를 펼쳐서 새로운 객체를 만드는 연산자입니다.
배열끼리 요소값을 합칠 수 있습니다.
{
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
21. 객체 : 데이터 불러오기 : 객체 구조분해할당
객체 펼침연산자는 객체의 속성을 추출하여 변수에 할당하는 방법입니다.
{
const obj = {
a: 100,
b: 200,
c: "javascript"
};
const {a:name1, b:name2, c:name3} = obj; //속성을 추출하여 변수에 할당하는 방법입니다.
console.log(name1);
console.log(obj.b);
console.log(obj.c);
}
결과 확인하기
200
javascript