01. 변수 : 데이터 불러오기
변수를 불러오는 방법
{
let x = 100, y = 200, z = "javascript";
console.log(x, y, z);
}
결과 확인하기
변수 불러오기
변수 x, y, z에 값을 저장하고 console.log로 불러올 수 있다.
02. 상수 : 데이터 불러오기
상수를 불러오는 방법
{
const x = 100, y = 200, z = "javascript";
console.log(x, y, z);
}
결과 확인하기
상수 불러오기
상수도 변수와 마찬가지로 출력 가능하다.
03. 배열 : 데이터 불러오기
배열을 불러오는 방법
{
const arr = [100, 200, "javascript"];
console.log(arr[0], arr[1], arr[2]);
}
결과 확인하기
배열 불러오기
배열은 console.log(배열이름[순서]); 로 출력 가능하다.
04. 배열 : 데이터 불러오기 : 2차 배열
배열 안의 배열을 불러오는 방법
{
const arr = [100, 200, ["javascript","react"]]
console.log(arr[0], arr[1], arr[2][0], arr[2][1]);
}
결과 확인하기
2차배열 불러오기
배열 안의 배열은
console.log(배열이름[순서][배열 안 배열의 순서]로 출력 가능하다.
05. 배열 : 데이터 불러오기 : 갯수 구하는 방법
for문을 이용해서 1부터 100까지 출력하는 방법입니다.
{
const arr = [100, 200, "javascript"]
console.log(arr.length);
}
결과 확인하기
배열의 갯수 구하기
배열의 갯수는 console.log(배열이름.length)로 출력 가능하다.
06. 배열 : 데이터 불러오기 : for()문
for문을 이용해서 1부터 9까지 불러오는 방법
{ const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
for(let i=0; i<9; i++){
console.log(arr[i]);
}
}
결과 확인하기
변수 불러오기
for() 반복문을 이용해 배열을 모두 출력할 수 있다.
초기값(i=0); 조건식(i<9); 증감식(i++) ->i++ 는 i가 1씩 증가
i = 0, true, clg 실행 -> i 1증가 ====> i<9가 false가 될 때까지 반복
i<9 가 false가 되는 부분은 i = 8 이므로 arr[8]까지만 작업
i=0; 0<9; console.log(arr[0]); i++
i=1; 1<9; console.log(arr[1]); i++
i=2; 2<9; console.log(arr[2]); i++ 계속 반복 (조건이 맞는 값까지)
i=9; 9<9; 조건에 맞지 않으므로 end;
07. 배열 : 데이터 불러오기 : 중첩for()문
for문 안에 다시 for문을 넣어줄 수 있다.
{
for(let i=1; i<=10; i++){
console.log("i : " + i);
for(let j=1; j<=10; j++){
console.log("j = " + j);
}
}
}
결과 확인하기
i : 2 에 j : 1~10
i : 10까지 반복
for 중첩문 사용하기
for문 안에 for문을 중첩하여 결과값을 출력한다
첫 번째 for문 실행 후, 두 번째 for문이 조건식을 만족하는 결과를 모두 출력하고
다시 첫 번째 for문으로 돌아간다.
08. 배열 : 데이터 불러오기 : forEach()문
for문의 조건을 생략하고 forEach문으로 사용 가능하다.
const num = [100, 200, 300, 400, 500];
for(let i=0; i<num.length; i++){
document.write(num[i]);
}
num.forEach(function(el){
document.write(el);
});
num.forEach((el) => {
document.write(el)
})
num.forEach(el => {
document.write(el)
});
num.forEach(el => document.write(el));
결과 확인하기
forEach문
배열이름.forEach(function(){});가 기본적인 한 문장이다.
2번 라인의 for문과 같은 의미로 사용되고 안에 함수를 넣어 사용한다.
5번 라인의 forEach문은 최종적으로 마지막 한줄로 생략하여 사용할 수 있다.
순서 > 화살표함수function생략, 변수하나()생략, 중괄호생략.
forEach를 사용하여 가져올 수 있는 값은 요소값, 인덱스, 배열 세가지이다.
09. 배열 : 데이터 불러오기 : for of
for of로 배열의 요소들을 출력 가능하다.
const arr = [100, 200, 300, 400, 500];
for(let i of arr){
document.write(i);
}
결과 확인하기
for of
for(let 변수 of 배열이름){
document.write(변수);
}의 형식으로 배열안의 요소들을 출력할 수 있다.
10. 배열 : 데이터 불러오기 : for in
for in으로 배열의 인덱스값을 출력 가능하다.
const arr = [100, 200, 300, 400, 500];
for(let i in arr){
document.write(i);
}
결과 확인하기
for in
for of와 같은 형식으로 쓰지만 인덱스값이 출력된다.
키와 값이 각각 저장되어있는 객체에서 사용한다.
11. 배열 : 데이터 불러오기 : map()문
map을 사용해 배열에서 불러온 값을 배열에 저장할 수 있다.
const num = [100, 200, 300, 400, 500];
num.forEach(function(el, i, a){
console.log(el)
console.log(i)
console.log(a)
});
num.map(function(el, i, a){
console.log(el)
console.log(i)
console.log(a)
});
결과 확인하기
0
100200300400500
200
1
100200300400500
300
2
100200300400500
400
3
100200300400500
500
4
100200300400500
map
forEach문과 같은 값이 나오지만 map은 배열에 저장된다는 것이 다르다.
12. 배열 : 데이터 불러오기 : 배열 펼침연산자
배열, 객체, 문자열 등의 요소를 펼쳐서 개별 요소로 분리하는 연산자.
let arr1 = [100, 200, 300, 400, 500];
console.log(arr1);
console.log(...arr1);
결과 확인하기
100 200 300 400 500
배열 펼침연산자
arr1을 그대로 출력하면 배열이 통째로 출력되지만,
펼침연산자를 사용해 출력하면 배열의 요소들만 출력이 가능하다.
13. 배열 : 데이터 불러오기 : 배열구조분해할당
배열의 요소를 개별 변수에 할당하는 방법 중 하나
let a, b, c;
[a, b, c] = [100, 200, "javascript"];
console.log(a);
console.log(b);
console.log(c);
결과 확인하기
배열구조분해할당
새로운 문법으로 많이 사용되는 방법.
배열의 각 요소를 개별 변수로 분리하여 사용할 수 있다.
14. 객체 : 데이터 불러오기 : 기본
객체의 데이터를 불러오는 가장 기본적인 방법
const obj ={
a : 100,
b : 200,
c : "javascipt"
}
console.log(obj.a);
console.log(obj.b);
console.log(obj.c);
결과 확인하기
객체 불러오기
객체를 저장하고 저장된 객체를 불러오는 가장 기본적인 방법이다.
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));
결과 확인하기
[100 200 javascipt]
[["a", 100] ["b", 200] ["c", javascript]]
Object
지금은 잘 사용하지 않는 키, 값을 따로 출력할 수 있는 원초적인 방법.
각각의 값이 배열로 출력된다.
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);
결과 확인하기
변수에 객체 저장하기
필요한 정보만 변수에 저장하여 사용할 수 있다.
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]);
}
결과 확인하기
for in
for(let key in 배열이름)의 형식으로 키와 값을 따로 출력할 수 있다.
18. 객체 : 데이터 불러오기 : map()
배열 안의 객체를 map()을 사용해 출력하는 방법
const obj = [{
a : 100,
b : 200,
c : "javascript"
}];
obj.map((el) => {
console.log(el.a);
console.log(el.b);
console.log(el.c);
});
결과 확인하기
map()
map은 배열에서 쓰이는 method기 때문에 객체가 배열 안에 있을 때 사용 가능하다.
19. 객체 : 데이터 불러오기 : hasOwnProperty()
객체안의 데이터를 확인하는 방법
const obj = {
a : 100,
b : 200,
c : "javascript"
}
console.log(obj.hasOwnProperty("a"));
console.log(obj.hasOwnProperty("b"));
console.log(obj.hasOwnProperty("c"));
console.log(obj.hasOwnProperty("d"));
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
hasOwnProperty
obj.hasOwnproperty("키")의 형식으로 해당 키 값에 저장된 데이터가 있는지 확인 가능하다.
해당 키에 대한 데이터가 있다면 true, 없다면 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);
}
{
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);
}
결과 확인하기
100 200 javascipt react
객체 펼침연산자
객체에서도 펼침연산자를 사용할 수 있는데, 위와 같은 형식으로 출력 가능하다.
출력 외에도 새로운 데이터를 추가할 수도 있다.
객체에서도 개별요소로 사용할 수 있게 만들어준다.
서로 다른 객체에서 한번에 사용 가능하다.
21. 객체 : 데이터 불러오기 : 객체 구조분해할당
객체의 요소를 개별 변수에 할당하는 방법 중 하나
{
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 javascipt
객체 구조분해할당
각각의 요소를 개별 변수에 할당하는 것이 가능하지만, 같은 키를 입력해주어야 저장이 가능하다.
키를 변수에 넣을 수도 값을 변수에 넣을 수도 있다.