JavaScript에서 데이터를 불러오는 방법은 여러 가지가 있습니다. 여기에는 일반적으로 사용되는 몇 가지 방법을 설명하겠습니다.
01. 변수 : 데이터 불러오기
변수안에 저장된 데이터를 불러오는 방법입니다.
let x =100, y = 200, z = "javascript";
console.log(x, y, z);
// 결과 : 100 200 javascript02. 상수 : 데이터 불러오기
상수안에 저장된 데이터를 불러오는 방법입니다. 상수 const로 지정한 변수안에 저장된 데이터를 console log 안에 차례로 넣어 값을 냅니다.
const x = 100, y = 200, z ="javascript";
console.log(x, y, z);
// 결과 : 100 200 javascript03 . 배열 : 데이터 불러오기
배열으로 저장된 데이터를 불러오는 방법입니다.
배열[0]은 저장된 데이터중 첫번째 배열[1]은 저장된 데이터중 두번째 배열[2]는 저장된 데이터중 세번째를 의미합니다.
const arr = [100, 200, "javascript"];
console.log(arr[0], arr[1], arr[2]);
// 결과 : 100 200 javascript04. 배열 : 데이터 불러오기 : 2차 배열
배열으로 저장된 데이터를 불러오는 방법입니다.
배열[2]에 속하는 값이 2개가 있을 경우 [2][0]을 사용하여 배열[2]의 첫번째값 [2][1]을 사용하여 배열[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]);
// 결과 : 100 200 javascript react05. 배열 : 데이터 불러오기 : 갯수 구하기
배열으로 저장된 데이터의 갯수를 구하는 방법입니다.
legth를 이용하여 []안에 몇개가 있는지 갯수를 구합니다. const는 상수를 의미하고 배열 안의 숫자인 100,200 문자인 javascript의 갯수를 샐 수 있습니다.
const arr = [100, 200, "javascript"];
console.log(arr.length)
// 결과 : 306. 배열 : 데이터 불러오기 : for()문
for()문을 이용하여 값을 구합니다.
for(초기값; 조건식; 증감식){실행문}
i가 0이면 9보다 작으므로 arr[0]이 됩니다. 값은 100이고 증감식에 의해 i에 +1이 됩니다.
i가 1이 되고 9보다 작으니 arr[1]이 되고, 값은 200입니다. 다시 증감식에 의해 i에 +1이 되고
i가 8까지 순차적으로 변하고 9부터는 false값이 됩니다. 따라서 console.arr[8] 값인 900 까지만 계산이 됩니다.
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
for(let i=0; i<9; i++){
console.log(arr[i]);
}
// 결과 : 100 200 300 400 500 600 700 800 90007. 배열 : 데이터 불러오기 : 중첩 for()문
중첩으로 for문을 사용하는 방법입니다. 구구단에서 많이 쓰이는 형태 입니다.
첫번째 for문이 실행된 후 두번째 for문의 조건식을 만족하는 결과를 모두 출력한 후 다시 첫번째 for문으로 돌아갑니다.
i가 1이 출력되면 j는 10까지 출력되고 다시 i가 2로 되고 j는 10까지 출력 계속해서 반복되고
i가 10이 되면 j도 10까지 출력되고 반복문이 끝이 납니다.
for( let i=1; i<=10; i++ ){
console.log("i : " + i);
for( let j=1; j<=10; j++ ){
console.log("j : " + j);
}
}
// 결과 : i:1 j:1 j:2 j:3 j:4 j:5 ... j:10
// 결과 : i:2 j:1 j:2 j:3 ... j:10
// 결과 : ...
// 결과 : i:10 j:1 j:2 j:3 ... j:1008. 배열 : 데이터 불러오기 : forEach()
for문의 조건을 생략하고 forEach문으로 사용가능합니다.
forEach문의 기본식은 배열의 변수 이름.forEach(function(){});입니다.
forEach문도 화살표 함수를 사용할 수 있습니다. 순서는 function생략 다음 소괄호 생략 중괄호 생략 순으로 생략가능합니다.
const num = [100, 200, 300, 400, 500];
//for문
for(let i=0; i<num.length; i++){
document.write(num[i]);
}
//forEach
num.forEach(function(el){ //배열안에 데이터가 있는 경우
document.write(el);
});
//forEach : 화살표 함수
num.forEach((el) => {
document.write(el);
});
//forEach : 화살표 함수 : 괄호 생략
num.forEach(el => {
document.write(el);
});
//forEach : 화살표 함수 : 중괄호 생략
num.forEach(el => document.write(el));
//forEach (값, 인덱스, 배열) //forEach문을 사용하여 요소값, 인덱스, 배열을 가져올 수 있습니다.
num.forEach(function(element, index, array){
document.write(element, "");
document.write(index, "");
document.write(array, "");
});
// 결과 : 100 200 300 400 500
// 결과 : 100 200 300 400 500
// 결과 : 100 200 300 400 500
// 결과 : 100 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
for...of문은 for...in문과 비슷하지만,객체의 속성 값(value)을 순회하는데 사용되며, 상속받은 값들은 제외됩니다.
for(let i=0; i<arr.length; i++)대신 for(let i of arr)로 작성해서 배열안의 요소들을 출력할 수 있습니다.
const arr = [100, 200, 300, 400, 500];
for(let i of arr){ //view나 react에서 많이 사용
document.write(i);
}
// 결과 : 100 200 300 400 50010. 배열 : 데이터 불러오기 : for in
for in을 사용하여 배열안의 인덱스 값을 출력 할 수 있습니다.
for...in 루프는 객체의 모든 열거 가능한 프로퍼티에 대해 반복합니다.
const arr = [100, 200, 300, 400, 500];
for(let i in arr){ //in은 인덱스값이 나옴(객체값을 구하기 위해서)
document.write(i);
}
// 결과 : 0 1 2 3 411. 배열 : 데이터 불러오기 : map()
map을 이용하여 배열에서 불러온 값을 배열에 저장할 수 있습니다.
Map은 forEach() 메서드를 통해 각 항목을 반복할 수 있습니다.
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)
});
// 결과 : 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]12. 배열 : 데이터 불러오기 : 배열 펼침연산자
배열 펼침 연산자는 세 개의 점(...)으로 구성되어 있으며, 배열 요소를 펼쳐서 인수 목록으로 만듭니다.
배열 펼침 연산자를 사용하면 배열을 다른 배열에 복사하거나 함수의 인수로 배열을 전달할 때 유용합니다.
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
// 결과 : 100 200 300 400 500 600 70013. 배열 : 데이터 불러오기 : 배열구조분해할당
배열 구조 분해 할당은 배열의 각 요소를 변수에 할당하는 기능입니다. 배열 구조 분해 할당을 사용하면 배열의 요소를 간단하게 추출하여
변수에 할당할 수 있으며, 이를 통해 코드를 더욱 간결하고 가독성 있게 작성할 수 있습니다.
let a, b, c;
[a, b, c] = [100, 200, "javascript"];
console.log(a)
console.log(b)
console.log(c)
// 결과 : 100 200 javascript14. 객체 : 데이터 불러오기 : 기본
객체 안의 값 a,b,c의 데이터를 불러오는 방법입니다.
const obj = {
a: 100,
b: 200,
c: "javascript"
}
console.log(obj.a);
console.log(obj.b);
console.log(obj.c);
// 결과 : 100 200 javascript15. 객체 : 데이터 불러오기 : Object
Object.keys(), Object.values(), Object.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,30016. 객체 : 데이터 불러오기 : 변수
객체 안의 값 a,b,c의 데이터를 불러오는 방법입니다.
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)
// 결과 : 100 200 javascript17. 객체 : 데이터 불러오기 : for in
for...in 루프는 객체의 속성을 반복적으로 처리할 때 사용하는 반복문입니다. 이 반복문은 객체의 모든 속성에 대해 반복하며, 속성 이름을 가져와 해당 속성의 값을 사용하여 작업을 수행할 수 있습니다.
const obj = {
a: 100,
b: 200,
c: "javascript"
}
for(let key in obj){
console.log(key);
console.log(obj[key]);
}
// 결과 : a100 b200 cjavascript18. 객체 : 데이터 불러오기 : map()
map() 메서드는 배열의 모든 요소에 대해 주어진 함수를 호출하여 그 결과를 새로운 배열로 반환합니다.
map() 메서드는 원본 배열을 변경하지 않습니다.
const obj = [ //배열안에 객체가 있어야 map을 사용가능
{a: 100, b:200, c: "javascript"}
]
obj.map((el) => { //el=obj
console.log(el.a)
console.log(el.b)
console.log(el.c)
});
// 결과 : 100 200 javascript19. 객체 : 데이터 불러오기 : 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); //for in문과 비슷하게 보임
console.log("b" in obj);
console.log("c" in obj);
console.log("d" in obj);
// 결과 : true true true false true true true false20. 객체 : 데이터 불러오기 : 객체 펼침연산자
객체 펼침 연산자(spread operator)는 객체를 복사하거나, 두 개 이상의 객체를 하나로 병합하는 데 사용됩니다.
{
const obj = {
a: 100,
b: 200,
c: "javascript"
}
const spread = {...obj}
console.log(spread.a);
console.log(spread.b);
console.log(spread.c);
}
{
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
// javascript
// 100
// 200
// javascript
// react
// 100
// 200
// javascript
// react21. 객체 : 데이터 불러오기 : 객체구조분해할당
객체 구조 분해 할당(destructuring assignment)은 객체의 속성을 개별적인 변수로 분해하여 할당하는 것입니다.
객체 구조 분해 할당은 변수 선언과 함께 사용되며, 객체에서 필요한 값만 추출하여 변수로 할당할 수 있습니다.
{
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 javascript
// 결과 : 100 200 javascript