01. 변수 : 데이터 불러오기
변수 안에 저장된 데이터를 불러오는 방법
{
let x = 100, y = 200, z = "javascript";
console.log(x, y, z);
}
결과 확인하기
100
200
javascript
200
javascript
02. 상수 : 데이터 불러오기
변수 안에 저장된 데이터를 불러오는 방법
{
const x = 100, y = 200, z = "javascript";
console.log(x, y, z);
}
결과 확인하기
100
200
javascript
200
javascript
03. 배열 : 데이터 불러오기
각배열을 호출하여 배열안의 데이터를 불러오기
{
const arr = [100, 200, "javascript"];
console.log(arr[0], arr[1], arr[2]);
}
결과 확인하기
100
200
javascript
200
javascript
04. 배열 : 데이터 불러오기 : 2차 배열
각배열을 호출하여 배열안 배열의 데이터까지 불러오기
{
const arr = [100, 200, ["javascript", "react"]];
console.log(arr[0], arr[1], arr[2][0], arr[2][1]);
}
결과 확인하기
100
200
javascript
react
200
javascript
react
05. 배열 : 데이터 불러오기 : 갯수 구하는 방법
length()함수를 이용하여 길이 출력
{
const arr = [100, 200, "javascript"];
console.log(arr.length);
}
결과 확인하기
3
arr 배열의 길이는 3임 !
arr 배열의 길이는 3임 !
06. 배열 : 데이터 불러오기 : for()
for문에서 length()함수를 이용하여 길이를 구해 배열 데이터 출력
{
const arr = [100, 200, 300, 400 , 500 , 600 , 700, 800 , 900] ;
for (let i = 0; i < arr.length; i++ ) {
console.log(arr[i]);
}
}
결과 확인하기
100
200
300
400
500
600
700
800
900
200
300
400
500
600
700
800
900
07. 배열 : 데이터 불러오기 : 중첩 for()문
length()함수를 이용하여 길이 출력
{
const arr = [0,1,[4,5,6],2,[8,9,10],3]
// 2차원 배열 생성
for (let i = 0; i < arr.length; i++) {
(arr[i].length >0 && arr[i].length != undefined )? console.log(`2차배열 arr[${i}][...]`) : console.log(`1차배열 arr[${i}]`)
//1차 배열의 길이가 undefined거나 length가 0보다 클경우엔 2차 배열이 있따 !
for(let j = 0 ; j <=arr[i].length ; j++ ){
if( arr[i][j] != undefined )console.log(arr[i][j]);
//해당값이 undefined가 아닐때 출력
}
}
}
결과 확인하기
1차배열 arr[0]1차배열 arr[1]
2차배열 arr[2][...]
a
b
c
1차배열 arr[3]
2차배열 arr[4][...]
d
e
f
1차배열 arr[5]
08. 배열 : 데이터 불러오기 : forEach()
for문과 같은용도이나 쓰임세는 다른
{
let arr8 = [11, 22, 33, 44];
arr8.forEach(function(element) {
document.write(element);
});
arr8.forEach(el=> document.write(el))
}
결과 확인하기
11
22
33
44
22
33
44
09. 배열 : 데이터 불러오기 : for of
length()함수를 이용하여 길이 출력
{
const arr09 = [100,200,300,400,500];
for (let i of arr09) {
document.write(i);
}
}
결과 확인하기
100
200
300
400
500
200
300
400
500
10. 배열 : 데이터 불러오기 : for in
length()함수를 이용하여 길이 출력
{
const arr10 = [100,200,300,400,500];
for (let i in arr10) {
document.write(i);
}
}
결과 확인하기
11. 배열 : 데이터 불러오기 : map()
length()함수를 이용하여 길이 출력
{
const num11 =[100,200,300,400,500];
num11.map(function(el, i ){
console.log(el);
console.log(i);
}
}
결과 확인하기
100 , 0
200 , 1
300 , 2
400 , 3
500 , 4
200 , 1
300 , 2
400 , 3
500 , 4
12. 배열 : 데이터 불러오기 : 배열 펼침연산자
자바스크립트에서 배열 객체 문자열등 펼쳐서 개발 요소로 분리하는 연산자
{
let arr12_0 = [100,200,300,400,500];
let arr12_1 = [600,700];
console.log(arr12_0);
let arr12_2 = [...arr12_0, ...arr12_1];
//두 배열 합치기
console.log(...arr12_2);
}
결과 확인하기
100
200
300
400
500
100
200
300
400
500
600
700
200
300
400
500
100
200
300
400
500
600
700
13. 배열 : 데이터 불러오기 : 배열 구조분해할당
배열의 요소를 개별변수에 할당하는 방법중 하나 이를통해 배열의 요소를 개별 변수로 분리하여사용할수 있습니다.
{
let a , b , c ;
[a, b, c]=[100,200,"javascript"];
//let 선언한 변수에 각각의 변수값을 집어넣어줌
console.log(`${a}, ${b}, ${c}`);
}
결과 확인하기
100, 200, javascript
14. 객체 : 데이터 불러오기 : 기본
obj선언한 객체의 값을 각각 가져온당
{
const obj = {
a:100,
b:200,
c:"javascript"
}
console.log(`${obj.a}, ${obj.b}, ${obj.c}`);
}
결과 확인하기
100, 200, javascript
15. 객체 : 데이터 불러오기 : Object
Object내장함수를 이용해서 key , values, entries를 불러옴 !
{
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라는 키를 가진 값을 부여한다
{
const obj = {
a:100,
b:200,
c:"javascript"
}
const name1 = obj.a;
const name2 = obj.b;
const name3 = obj.c;
console.log(`${name1}, ${name2}, ${name3}`);
}
결과 확인하기
100, 200, javascript
17. 객체 : 데이터 불러오기 : for in
for in 을 이용해서 key에 obj값을 반환한다
{
const obj = {
a:100,
b:200,
c:"javascript"
}
for(let key in obj){
console.log(`obj[key] : ${obj[key]} , key : ${key}`);
}
//for in 은 키값을 가져온다
}
결과 확인하기
obj[key] : 100 , key : a
obj[key] : 200 , key : b
obj[key] : javascript , key : c
obj[key] : 200 , key : b
obj[key] : javascript , key : c
18. 객체 : 데이터 불러오기 : map()
배열안의 obj객체를 생성하여 map()타입으로 변환하여 배열안의 객체의 값을 가져온다
{
const obj = [
{a:100, b:200, c:"javascript"}
]
//[ ]으로 묶지않았을경우 아래와 같은 에러가 발생 !
//Uncaught TypeError: obj.map is not a function
//객체타입은 map을 못쓰기에 배열안에 객체가 있을때 map()사용 가능
obj.map(function(el1 ){
console.log(`${el1.a}`);
})
obj.map(el1 =>console.log(`${el1.b}`));
}
결과 확인하기
100
200
200
19. 객체 : 데이터 불러오기 : hasOwnProperty()
객체안의 key값을 찾아서 true/false 반환
{
const obj = {
a:100,
b:200,
c:"javascript"
}
console.log(obj.hasOwnProperty("a"));
//console.log("a" in obj); 위와 아래가 같다
console.log(obj.hasOwnProperty("b"));
console.log(obj.hasOwnProperty("c"));
console.log(obj.hasOwnProperty("d"));
}
결과 확인하기
true
true
true
false
true
true
false
20. 객체 : 데이터 불러오기 : 객체 펼침연산자
...펼침연산자를 이용해서 값을출력 & 저장할수있따
{
const obj1 = {
a:100,
b:200,
c:"javascript"
}
const obj2 = {
e:300,
f:400,
g:"react"
}
const spread = {...obj, ...obj2};
//spread에 obj1과 obj2를 집어넣어준다 concat과 같은함수
console.log(spread.a, spread.g);
}
결과 확인하기
100
react
react
21. 객체 : 데이터 불러오기 : 객체구조 분해 할당
객체의 키값에 부여된 값을 오브젝트형 변수에 할당한다
{
const obj = {
a:100,
b:200,
c:"javascript",
d:"react"
}
const {a:name1, b:name2, c:name3, e:name4} = obj;
console.log(name1);
console.log(name2);
console.log(name3);
console.log(a);
//obj.a로 출력해야 맞다
}
결과 확인하기
100
200
javascript
Uncaught ReferenceError: a is not defined at javascript02.html:654:25
//obj.a로 출력해야 맞다
200
javascript
Uncaught ReferenceError: a is not defined at javascript02.html:654:25
//obj.a로 출력해야 맞다