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);
}
결과 확인하기
arr.length
arr.length는 자바스크립트 배열(Array) 객체의 속성 중 하나로, 해당 배열의 길이(크기)를 나타내는 속성입니다.
06. 배열 : 데이터 불러오기 : for()문
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]);
// for(초기값; 조건식; 증감식){
// //실행문
// }
for ( let 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
}
결과 확인하기
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);
}
}
}
결과 확인하기
j : 1
j : 2
j : 3
...
j : 8
j : 9
j : 10
중첩문의 순서
중첩for문은 첫번째 조건문에서 하나의 값을 출력하면 두번째 출력문에서 모든 값을 출력한 후에야 다시 첫번째 조건문의 다음 값을 출력합니다.
08. 배열 : 데이터 불러오기 : forEach()문
{
let num = [100,200,300,400,500];
// forEach
num.forEach(function(el){ //element 약어
document.write(el,"<br>");
});
document.write("<br><br>");
// forEach : 화살표
num.forEach((el) => {
document.write(el,"<br>");
});
document.write("<br><br>");
// forEach : 화살표 : 괄호 생략
num.forEach(el => {
document.write(el,"<br>");
});
document.write("<br><br>");
// forEach : 화살표 : 괄호 생략
num.forEach(el => document.write(el,"<br>"));
document.write("<br><br>");
// forEach(값, 인덱스, 배열)
num.forEach(function(element, index, array){
document.write(element,"<br>");
document.write(index,"<br>");
document.write(array,"<br>");
});
}
결과 확인하기
~
500
100
~
500
100
~
500
100
~
500
100
0
100,200,300,400,500
~
500
4
100,200,300,400,500
콜백함수?(내용 추가 필요)
forEach는 메서드(방법,함수) forEach이 조건문을 대채할 수 있다
09. 배열 : 데이터 불러오기 : for of
forEach보다 짧고 쉽게 출력합니다.
{
const arr = [100,200,300,400,500];
for(let i of arr){
document.write(i);
};
}
결과 확인하기
간단하게 사용
arr의 배열의 값을 출력 할때 출력문과 긴 조건식을 필요하지 않으면서 사용할 수 있습니다. 조건식에 증감식이나 조건식없이 arr이라는 배열 안에서 변수 i를 출력한다는 간단한 의미로 바뀌게 됩니다.
10. 배열 : 데이터 불러오기 : for in
{
const arr = [100,200,300,400,500];
for(let i in arr){
document.write(i); // 인덱스 값 출력
};
document.write("<br>");
for(let i in arr){
document.write(arr[i]); // 값 출력
};
}
결과 확인하기
100200300400500
for in문이 만들어진이유
객체를 위해 만들어졌다(키값 출력)(배열에 사용되는 이유는 객체가 배열의 파생이라서)
11. 배열 : 데이터 불러오기 : map()
{
const num = [100,200,300,400,500];
num.map(function(el, i, a){
console.log(el)
console.log(i)
console.log(a)
});
}
결과 확인하기
0 // 인덱스
(5) [100, 200, 300, 400, 500] // 배열
200
1
(5) [100, 200, 300, 400, 500]
300
2
(5) [100, 200, 300, 400, 500]
400
3
(5) [100, 200, 300, 400, 500]
500
4
(5) [100, 200, 300, 400, 500]
원하는 값
map()은 원하는 값을 모두 출력하는 메소드입니다. el, i, a을 매개변수로 el는 요소를, i는 인덱스를, a는 배열 자체를 출력하는 메소드입니다.
12. 배열 : 데이터 불러오기 : 배열 펼침연산자(spread operator)
자바스크립트에서 배열, 객체, 문자열등의 요소를 펼쳐서 개별 요소로 분리하는 연산자입니다.
{
let arr1 = [100,200,3000,400,500];
let arr2 = [600,700]
// 펼춤연산자 기본형
console.log(arr1);
console.log(...arr1);
// for문이나 foreach문 같은 반복문이나 함수를 사용하지 않아도 요소룰 출력할 수있습니다.
console.log(...arr1, ...arr2)
// 별다른 것 없이 배열 두개를 합치는 것으로 코드가 더 간략해 집니다.
}
결과 확인하기
100,200,3000,400,500
100,200,3000,400,500,600,700
펼침연산자 기본형
펼침연산자를 사용하면 for문이나 foreach문 같은 반복문이나 함수를 사용하지 않아도 요소룰 출력할 수있습니다.
또한 별다른 것이 필요없이 배열 두개를 합치는 것으로 코드가 더 간략해 집니다.
13. 배열 : 데이터 불러오기 : 배열 구조분해할당(destructuring assignmet)
배열의 요소를 개별 변수에 할당하는 방법중 하나입니다.
{
let a,b,c;
[a,b,c] = [100,200,"javascript"];
console.log(a);
console.log(b);
console.log(c);
}
결과 확인하기
200
javascript
선언된 변수를 인뎃스처럼 사용
위의 구문에서는 []안에 추출하고자 하는 배열의 요소를 값으로 작성하고 배열은 할당하고자 하는 변수의 이름과 나란히 =(등호) 오른쪽에 작성하였습니다. 이때 배열의 요소([100, 200, "javascript"])들이 각각 변수([a,b,c])에 할당되고있습니다. 고로 console.log(a);는 100을 console.log(b);는 200을 console.log(c);는 javascript를 출력합니다. 이 문법은 요즘 가장 많이 사용하며 객체에 많이 사용됩니다.
14. 객체 : 데이터 불러오기 : 기본
{
const obj = {
a: 100,
b: 200,
c: "javascript"
}
console.log(obj.a);
console.log(obj.b);
console.log(obj.c);
}
결과 확인하기
200
javascript
객체의 데이터 불러오기의 기본
객체 obj에서 키와 값을 할당하고 console.log(obj.a)로 출력합니다. 이때 obj.a는 객체 obj의 a라는 키라는 뜻으로 이렇게 키을 출력문 안에 넣어 값을 출력 합니다.
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)); // 객체의 키와 값을 배열로 인식하고 배열로 출력합니다.
}
결과 확인하기
100,200,javascript
a,100,b,200,c,javascript
obj....이라는 메소드
메소드란 객체에 속한 함수를 의미합니다. 메소드는 객체가 할 수 있는 동작을 정의합니다.
위의 예제는 3가지의 메소드를 사용합니다.
Object.keys(), Object.values(), Object.entries() 이렇게 3가지 메소드를 사용하는데 각각 의미가 다릅니다.
Object.keys(obj) : 키을 불러오는 방법입니다.
Object.values(obj) : 값을 불러오는 방법입니다.
Object.entries(obj) : 객체의 키와 값을 하나로 인식하고 짝끼리 출력합니다.
이렇게 출력문에 메소드를 이용해서 배열로 출력할 수있습니다.
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]);
}
}
결과 확인하기
200
javascript
for in문을 객체 출력에 활용
for in문으로 키와 값을 불러오는 방법으로 key를 선언하여 obj안의 키와 값을 넣습니다. 그래서 key를 출력하게되면 키값이 나오지만 값을 불러올때 obj라는 배열에서 키값을 인덱스처럼 사용하여 불러 올수 있습니다. 하지만 fon in문이기때문에 안에 있는 출력문을 하나 출력하고 다음을 출력하는 방식으로 출력됩니다.
18. 객체 : 데이터 불러오기 : map()
객체 자체는 사용 불가 배열 안에 넣어 사용가능합니다.
{
const obj = [
{a: 100, b: 300, c: "javascript"}
]
obj.map(function(el){
console.log(el);
console.log(el.a);
console.log(el.b);
console.log(el.c);
});
// 화살표 함수
obj.map((el) => {
console.log(el);
console.log(el.a);
console.log(el.b);
console.log(el.c);
});
}
결과 확인하기
a: 100, b: 300, c: "javascript"
100
300
javascript
// 화살표형으로
a: 100, b: 300, c: "javascript"
100
300
javascript
객체명을 매개변수로 대체
map문에 매개변수 el을 사용한 함수를 선언하고 출력을 obj를 사용하지 않고 매개변수인 el을 가지고 출력합니다. 이때 obj.a가 아닌 el.a를 사용합니다.
19. 객체 : 데이터 불러오기 : hasOwnProperty()
데이터가 있는지 없는지 알려줍니다.그래서 true, false로 결과가 나옵니다.
{
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); // true
console.log("b" in obj); // true
console.log("c" in obj); // true
console.log("d" in obj); // false
}
결과 확인하기
true
true
false
true
true
true
false
객체 값의 존재 여부
hasOwnProperty() 메소드를 사용하여 a부터 d까지의 속성이 직접 객체에 속한 속성인지를 확인할 수 있습니다.
그러므로 d는 속한 값이 없으니 false가 나옵니다.
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
저장과 추가를 동시에
객체에서도 펼침 연산자가 사용되며 새로운 상수에 저장가능하며 저장과 동시에 추가가 가능합니다. obj에 저장된 값을 새로운 상수인 spread에 저장하는데 저장과 동시에 추가가 가능하며 새롭게 선언된 상수를 통해 출력까지 가능합니다.
20-1. 객체 : 데이터 불러오기 : 객체 펼침연산자02
펼침 연산자를 활용하여 배열을 합체할 수 있습니다.
{
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);
}
결과 확인하기
200
javascript
react
객체 합체
객체 두개를 새로운 객체로 합체하여 저장하게되면 새로운 객체로 값을 불러 올 수 있습니다.
21. 객체 : 데이터 불러오기 : 객체 구조분해할당
obj에 저장된 객체에서 상수(변수)로 다시 할당하는 방식입니다.
{
const obj = {
a: 100,
b: 200,
c: "javascript"
}
const {a, b, c} = obj;
console.log(a);
console.log(b);
console.log(c);
}
결과 확인하기
200
javascript
객체에서도 구조분해할당을
객체 obj를 정의 하고, 구조분해할당을 상요하여 객체 내부의 a,b,c라는 속성에 각각 변수 a,b,c를 할당하여 출력문에 변수를 사용하여 값을 불러옵니다.