- 01. 변수 : 데이터 불러오기
- 02. 상수 : 데이터 불러오기
- 03. 배열 : 데이터 불러오기
- 04. 배열 : 데이터 불러오기 : 2차 배열
- 05. 배열 : 데이터 불러오기 : 갯수 구하기
- 06. 배열 : 데이터 불러오기 : for()문
- 07. 배열 : 데이터 불러오기 : 중첩 or()문
- 08. 배열 : 데이터 불러오기 : forEach()
- 09. 배열 : 데이터 불러오기 : for of : 가장 많이 사용
- 10. 배열 : 데이터 불러오기 : for in
- 11. 배열 : 데이터 불러오기 : map()
- 12. 배열 : 데이터 불러오기 : 배열 펼침연산자
- 13. 배열 : 데이터 불러오기 : 배열 구조분해할당
- 14. 객체 : 데이터 불러오기 : 기본
- 15. 객체 : 데이터 불러오기 : Object
- 16. 객체 : 데이터 불러오기 : 변수를 통해 불러오기
- 17. 객체 : 데이터 불러오기 : for in
- 18. 객체 : 데이터 불러오기 : map()
- 19. 객체 : 데이터 불러오기 : hasOwnproperty()
- 20. 객체 : 데이터 불러오기 : 객체 펼침연산자
- 21. 객체 : 데이터 불러오기 : 객체구조분해할당
01. 변수 : 데이터 불러오기
변수 안에 저장된 데이터를 불러오는 방법.
{
let x = 100, y = 200, z = "javascript";
console.log(x, y, z);
}
결과 확인하기
200
"javascript"
변수 불러오기
console.log를 통해 선언한 변수를 불러옴.
변수는 () 소괄호를 사용하여 불러옴.
02. 상수 : 데이터 불러오기
상수 안에 저장된 데이터를 불러오는 방법.
{
let 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"
배열 불러오기
console.log에 arr[] 통해 선언한 상수를 불러옴.
배열이나 상수와 다르게 x, y, z 등의 문자를 사용하지 않고 숫자(0, 1, 2···)를 사용함.
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"
2차 배열 불러오기
javascript와 react는 [2]번 배열이며, console.log(arr[2])만 적을 경우에는, 내용이 아니라 배열 자체가 불러와지므로,
console.log(arr[2][0])처럼 한 번 더 [ ]를 넣어주어야 배열이 아닌 값을 불러올 수 있다.
05. 배열 : 데이터 불러오기 : 갯수 구하기
배열 안에 있는 값의 갯수를 구하는 방법.
{
const arr = [100, 200, "javascript"];
console.log(arr.length)
}
결과 확인하기
배열 안의 갯수 구하기
console.log 안에 (arr[ ]) 대신 (arr.length)를 넣어 배열 안에 저장 된 값의 갯수를 불러올 수 있다.
06. 배열 : 데이터 불러오기 : for문
for문을 사용하여 배열 안에 있는 여러 개의 데이터를 불러오는 방법.
1.
{
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]);
}
2.
{
for(let i = 0; i<9; i++) {
console.log(arr[i]);
}
}
결과 확인하기
여러 개의 console.log 없이 배열에 저장된 많은 데이터를 불러오기
원래 배열 안에 저장된 많은 데이터를 불러오려면 1번처럼 여러 개의 console.log();를 작성해야 하지만
2번 처럼
for(초기값 : 조건식 : 증감식){
실행문;
}
을 사용한다면 여러 개의 console.log();를 작성할 필요 없이 데이터를 불러올 수 있음.
i값이 true여야만 i값이 증가하며, 증가한 i값은 console.log()를 통해 출력된다.
이 식 같은 경우, 등호가 존재하지 않아 i값이 9가 되면 false가 되어 식이 종결된다.
07. 배열 : 데이터 불러오기 : 중첩 for문
for문 안에 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);
}
}
}
결과 확인하기
중첩 for문
for문을 중첩하여 사용하기 때문에 여러 개의 식을 반복할 수 있음
먼저 오는 for문이 큰 단락이 되며 두 번째로 오는 for문은 그 안의 내용이 된다.
이 식 같은 경우, i가 한 번 반복되는 동안, j는 열 번 반복된다.
for문의 변수는 서로 다른 것으로 선언해야 함. 그렇지 않으면 첫번째 값이 바뀌어버림
중첩 for문을 사용할 때 colsole.log( ) 안에 "변수 : " + 를 넣어주면 결과값 앞에 변수 이름이 출력됨
08. 배열 : 데이터 불러오기 : forEach()
forEach문은 콜백 함수이며, 배열에서만 사용할 수 있다.
{
const num = [100, 200, 300, 400, 500];
num.forEach(function(element, index, array) {
document.write(element,"<br>");
document.write(index,"<br>");
document.write(array,"<br>");
})
}
결과 확인하기
0 (index)
100,200,300,400,500 (array)
200(element)
1 (index)
100,200,300,400,500 (array)
300(element)
2 (index)
100,200,300,400,500 (array)
400(element)
3 (index)
100,200,300,400,500 (array)
500(element)
4 (index)
100,200,300,400,500 (array)
forEach
배열에서만 사용할 수 있다는 특징이 있음.
또한 값, 요소 값, 인덱스값, 배열을 불러올 수 있다는 특징이 있음.
forEach문은 화살표 함수로 간단하게 표현할 수도 있으며,
배열의 요소를 가져와서 함수를 실행해야 할 때, 배열 안에 저장된 데이터가 많을 때 등에 사용함.
forEach문 앞에 배열 이름을 작성하면 따로 for문을 작성할 필요 없이 배열 안의 데이터를 불러올 수 있음.
for문과 다르게 출력문에 배열 이름을 넣어주지 않고 element를 넣어줌.
element는 요소라는 뜻으로, 여기에서는 배열 안에 저장된 숫자들을 의미함.
forEach는 메서드(method)라고 해서 자주 사용하는 부분들을 자바스크립트가 만들어놓은 것으로 함수와 같은 개념으로 생각하면 쉬움.
09. 배열 : 데이터 불러오기 : for of : 가장 많이 사용
반복 가능 자료에서 사용하는 반복문으로 가장 많이 사용되는 반복문 중 하나이다.
{
const arr = [100, 200, 300, 400, 500];
for(let i of arr) { //타겟, 대상을 정해준 다음 그 값을 i라고 선언하는 것.
document.write(i,",");
}
}
결과 확인하기
for of
문자열이나 배열과 같은 반복 가능한 자료에서 사용하는 반복문임.
arr 안에 배열 값이 있는동안 계속 반복되는 반복문임.
(변수 of 배열 이름)의 형식임.
출력해야 할 타겟, 대상을 정하여 i라고 선언해주어야 하며 출력문에는 i를 넣어주어야 함.
10. 배열 : 데이터 불러오기 : for in
반복해서 객체의 값을 가져와서 처리할 수 있게 하는 반복문.
{
const arr = [100, 200, 300, 400, 500]
for (let i in arr) { //index, 즉 자리값이 출력됨.
document.write(i); or document.write(arr[i]);
}
} //객체 (키와 값)를 불러오기 위해 만든 것.
결과 확인하기
for in
객체의 키만 가져올 수 있으므로 해당 키의 값에 접근하려면 대괄호[ ]를 사용함.
출력문 안에 arr[i]를 넣으면 값이 출력되나, i만 작성 시 배열 안의 값이 출력되지 않고
index 값, 즉 자리값(키)만 출력됨.
객체의 키와 값을 불러오기 위해 만든 반복문임.
11. 배열 : 데이터 불러오기 : map()
배열 안의 데이터를 다시 배열로 만드는 method.
{
const num = [100, 200, 300, 400, 500]
num.map(function(el, i, a){
document.write(el,"<br>")
document.write(i,"<br>")
document.write(a,"<br>")
});
}
결과 확인하기
0(i)
100,200,300,400,500(a)
200(el)
1(i)
100,200,300,400,500(a)
300(el)
2(i)
100,200,300,400,500(a)
400(el)
3(i)
100,200,300,400,500(a)
500(el)
4(i)
100,200,300,400,500(a)
map()
배열의 각 요소를 순회하며 콜백 함수를 실행하고, 그 결과를 모아서 새로운 배열을 만드는 method이다.
기존 배열을 변경하지 않고 새로운 배열을 만들 수 있다.
배열 요소를 순회하며 어떤 계산을 수행하거나 요소를 다른 형태로 변환할 수 있다.
문자열의 배열에서 각 문자열의 길이를 구하거나, 객체·배열에서 특정 속성값을 추출하여 새로운 배열을 만들 때 주로 사용된다.
12. 배열 : 데이터 불러오기 : 배열 펼침연산자
배열에 포함된 항목을 목록으로 바꾸어 주는 연산자.
{
let arr1 = [100, 200, 300, 400, 500];
let arr2 = [600, 700, 800, 900];
console.log(arr1);
console.log(...arr1,);
console.log(...arr1, ...arr2);
}
결과 확인하기
100, 200, 300, 400, 500
100, 200, 300, 400, 500, 600, 700, 800, 900
배열 펼침 연산자
펼침연산자: spread operator
자바스크립트에서 배열 객체, 문자열 등의 요소를 펼쳐서 개별 요소로 분리하는 연산자.
대괄호 안에서 배열의 요소를 중괄호 안에서 객체의 속성을 문자열에서는 문자열을 개별 문자로 분리할 수 있다.
13. 배열 : 데이터 불러오기 : 배열 구조분해할당
배열을 비롯한 반복 가능한 자료, 객체의 요소를 분해하여 여러 변수에 할당할 수 있다.
{
let a, b, c;
[a, b, c] = [100, 200, "javascript"];
console.log(a)
console.log(b)
console.log(c)
}
결과 확인하기
200
javascrpt
배열 구조분해할당((Array) Destructuring assignment)
배열의 요소를 개별 변수에 할당하는 방법 중 하나.
이를 통해 배열의 각 요소를 개별 변수로 분리하여 사용할 수 있다.
배열 구조 분해 할당은 대괄호[ ]를 사용하여 구현한다.
변수의 선언과 할당을 동시에 처리할 수 있다.
배열 구조 분해 할당을 사용하여 변수를 처리할 수도 있다.
또한 기존에 존재하는 변수에도 값을 할당할 수 있다.
배열 구조분해할당을 사용하면 변수를 일일히 선언하거나 값을 할당하는 코드를 줄일 수 있다.
함수의 매개변수에서도 사용할 수 있으며, 배열이나 객체의 중첩된 값에도 적용할 수 있다.
14. 객체 : 데이터 불러오기 : 기본
객체 안에 있는 값을 .(온점)을 찍어 불러오는 방법.
{
const obj = {
a:100,
b:200,
c:"javascript"
}
console.log(obj.a);
console.log(obj.b);
console.log(obj.c);
}
결과 확인하기
200
javascrpt
객체 안에 있는 데이터 불러오기
객체의 속성 값에 직접 접근하는 방법 중 하나.
객체 이름 뒤에 .(온점)을 찍고 접근하고자 하는 속성의 이름을 작성한다.
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']
객체 : 데이터 불러오기 : Object
console.log(Object.keys(obj)); //객체의 키를 불러오는 문법
console.log(Object.values(obj)); //객체의 값을 불러오는 문법
console.log(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
변수를 통해 불러오기
객체의 속성 이름을 변수에 저장하여 해당 변수를 이용해 속성에 접근하여 값을 불러올 수 있다.
obj 객채에 접근하여 안에 있는 a, b, c 각 속성의 값을 각각 name1, name2, name3 변수에 할당하고
각 변수의 값을 출력하는 방식이다.
obj.a에서 obj는 객체를 의미하고 a는 속성값을 의미한다.
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
for in문을 사용하여 객체 안에 있는 값을 불러오기
for in문은 객체 obj의 속성 이름을 순회하면서 각 속성 이름을 변수 key에 할당한다.
그리고 obj[key]를 사용하여 key에 해당하는 속성 값을 출력한다.
따라서 console.log(key)는 각 속성의 이름(a, b, c)을 출력하고,
console.log(obj[key])는 각 속성의 값(100, 200, "javascript")을 출력하게 된다.
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)
});
}
결과 확인하기
200
javascript
map()을 사용하여 객체 안에 있는 값을 불러오기
obj 배열은 하나의 객체를 요소로 가지고 있으므로, map() 메소드는 해당 객체를 매개변수 el로 받아서 각 속성의 값을 출력한다.
따라서 console.log(el.a)는 객체의 a 속성 값(100)을 출력하고, console.log(el.b)는 b 속성 값(200)을 출력하고,
console.log(el.c)는 c 속성 값("javascript")을 출력한다.
배열 안에 객체가 있어야만 map()을 사용할 수 있다.
배열이 없이 객체만 있다면 "Uncaught TypeError: obj.map is not a function"obj.map()이 함수가 아니라는 경고창이 표시되기 때문에
객체가 배열 안에 있는지를 주의하여 확인해야 한다.
19. 객체 : 데이터 불러오기 : hasOwnproperty()
객체 안에 있는 값을 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);
console.log("b" in obj);
console.log("c" in obj);
console.log("d" in obj);
}
결과 확인하기
true
true
false
true
true
true
false
hasOwnproperty()
hasOwnProperty() 메소드(Method)는 객체가 특정 속성(데이터)의 유무를 검사하는 자바스크립트 내장 메소드이다.
해당 메소드는 객체에 직접 접근하여 사용할 수 있으며, 결과값은 true(일치하는 속성이 있을 시)나 false(일치하는 속성이 존재하지 않을 시)만을 반환한다.
hasOwnProperty()는 객체의 속성을 검사하지만, 다른 객체나 상속받은 속성은 검사하지 않는다.
객체의 속성을 정확하게 확인하는데 유용하다.
기본적으로는 console.log(obj.hasOwnProperty("검사할 속성의 이름"));의 형태를 가지지만,
console.log("검사할 속성의 이름" in obj);처럼 약식으로 표현할 수도 있다.
20. 객체 : 데이터 불러오기 : 객체 펼침연산자
객체 내의 속성들을 개별적인 값으로 분해하지 않고도 객체에 값을 추가하거나 덮어씌울 수 있다.
{
1.
const obj = {
a:100,
b:200,
c:"javascript"
}
const spread = {...obj}
console.log(spread.a);
console.log(spread.b);
console.log(spread.c);
2.
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);
3.
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);
}
결과 확인하기
2. 100, 200, javascript, react
3. 100, 200, javascript, react
객체 펼침 연산자
자바스크립트의 새로운 기능 중 하나로, ...로 표현된다.
객체 펼침 연산자를 사용하면 객체 내의 속성들을 개별적인 값으로 분해하지 않도고 객체를 간단히 복제하거나,
새로운 객체를 만들 때 속성을 추가하고 덮어쓸 수 있다.
1. 객체 펼침연산자를 사용하여 obj 객체를 복사한 수 spread 변수에 할당하는 코드이다.
spread 변수는 obj 객체와 동일한 속성(a, b, c)를 가지고 있다.
2. obj 객체를 복제하고 d라는 새로운 속성을 추가한 후, 변수에 할당한다.
따라서 처음에 선언된 객체에 존재하지 않았던 d의 값이 출력된다.
3. 객체 펼침 연산자를 사용하여 obj1 객체와 obj2 객체를 합친 뒤 변수에 할당한다.
spread 변수는 obj1, obj2 객체의 모든 속성을 가지고 있다.
따라서 obj1에 할당되지 않았던 c값과 d값이 추가되어 출력되며, obj2에 할당되지 않았던 a값과 b값이 추가되어 출력된다.
21. 객체 : 데이터 불러오기 : 객체구조분해할당
객체를 분해하여 개별적인 변수에 할당하는 것.
{
1.
const obj = {
a:100,
b:200,
c:"javascript"
}
const {a, b, c} = obj;
console.log(a);
console.log(b);
console.log(c);
console.log(x); //undefind (키값을 그대로 써주어야 함)
2.
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);
}
결과 확인하기
2. 100, 200, javascript
객체구조분해할당
자바스크립트의 새로운 기능 중 하나로, 객체를 분해하여 개별적인 변수에 할당하는 것이다.
객체구조분해할당은 객체에서 필요한 속성들만 추출하여 변수에 할당할 때 유용하며,
코드의 가독성과 유지보수성을 높여준다는 장점이 있다.
객체의 속성들이 많아지면 개별 변수에 할당하는 것이 코드를 간결하게 만들기 때문이다.
또한 객체구조분해할당은 기본값을 설정할 수도 있다.
1. 객체에서 a, b, 속성을 추출하여 각각 a, b, c 변수에 할당한다.
따라서 console.log(a)는 100을 출력하고, console.log(b)는 200을, console.log(c)는 javascript를 출력한다.
2. 객체에서 a, b, c, 속성의 값을 각각 name1, name2, name3 상수에 할당한 뒤, console.log를 사용하여 상수의 값으로 출력한다.