안녕하세요~ 오늘은 데이터 불러오는 방법에 대해 알아보겠습니다! 종류가 굉장히 많기 때문에
깔끔하고 보기좋게 정리해보겠습니다 !
데이터를 저장하는 방법을 알았으면, 불러오는 방법도 알아야겠죠?~~
데이터 불러오기
📣 변수 : 데이터 불러오기
변수 안에 저장된 데이터를 불러오는 방법으로, 괄호 안에 문자를 입력해 값을 불러옵니다.
{
let x = 100, y = 200, z = "javascript";
console.log(x, y, z);
}결과 - 100 200 javascript
📣 상수 : 데이터 불러오기
상수 안에 저장된 데이터를 불러오는 방법으로, 괄호 안에 문자를 입력해 값을 불러옵니다.
{
const x = 100, y = 200, z = "javascript";
console.log(x, y, z);
}결과 - 100 200 javascript
📣 배열 : 데이터 불러오기
배열 안에 저장된 데이터를 불러오는 방법입니다.
{
const arr = [100, 200, "javascript"];
console.log(arr[0])
console.log(arr[1])
console.log(arr[2])
}결과 - 100 200 javascript
📣 배열 : 데이터 불러오기_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 react
📣 배열 : 데이터 불러오기_갯수 구하기
length를 이용해 데이터의 갯수를 구하는 방법입니다.
{
const arr = [100, 200, "javascript"];
console.log(arr.length)
}결과 - 3
📣 배열 : 데이터 불러오기_for( )문
데이터를 불러오는 방법은 데이터의 종류와 형식에 따라 달라질 수 있지만, 일반적으로 파일에서 데이터를 불러오는 경우에는 for문을 사용하여 파일을 한 줄씩 읽어서 처리합니다. 기본적인 반복문 중 하나로 대입은 초기값, 실행문, 증감식 순으로 하면 이해하기 편합니다.
{
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]);
// for()문을 쓰면 번거로움 없이 값을 불러올 수 있습니다.
// for()문 공식 :for(초기값; 조건식; 증감식;){
//실행문
//}
for(let i=0; i<9; i++){
console.log(arr[i]);
}
}결과 - 100 200 300 400 500 600 700 800 900
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);
}
}
}결과 - i:1 ~ i:10 j:1 ~ j:10
📣 배열 : 데이터 불러오기_forEach( )
forEach문은 for문을 간결하게 사용할 수 있는 메소드입니다.
기존에 for()문에 있는 초깃값이나 조건식, 증감식 등등 생략하고 forEach()공식을 통해 데이터를 불러올 수 있습니다.
{
const num = [100, 200, 300, 400, 500];
document.write(num[0]);
document.write(num[1]);
document.write(num[2]);
document.write(num[3]);
document.write(num[4]);
//for문을 사용해서 출력
for(let i=0; i<num.length; i++){
document.write(num[i]);
}
//forEach문 사용해서 출력 (el은 element를 간결하게 적은 것이다.)
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 (값, 인덱스, 배열)
num.forEach(function(element, index, array){
document.write(element);
document.write(index);
document.write(array);
})
}결과 - 100200300400500 * 6
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
forEach문 공식
배열명.forEach(function(요소명){실행문});📣 배열 : 데이터 불러오기_for of
for문을 간결하게 쓰기 위해 생겼습니다.
{
const arr = [100, 200, 300, 400, 500];
for(let a of arr){
document.write(a);
}
}결과 - 100 200 300 400 500 600
📣 배열 : 데이터 불러오기_for in
객체의 열거 가능한 '속성들'을 순회할 수 있도록 해줍니다.
객체의 key값에 접근 가능하고, value값에는 직접 접근 불가합니다.
모든 객체에서 사용 가능합니다.
{
const arr = [100, 200, 300, 400, 500];
for(let a in arr){
document.write(a);
}
}결과 - 01234
📣 배열 : 데이터 불러오기_map()
Map 객체는 키-값 쌍을 저장하며 각 쌍의 삽입 순서도 기억하는 콜렉션입니다.
아무 값(객체와 원시 값)이라도 키와 값으로 사용할 수 있습니다.
{
const num = [100, 200, 300, 400, 500];
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]
📣 배열 : 데이터 불러오기_배열 펼침연산자(Spread Operator)
펼침 연산자(spread operator)는 배열, 객체 또는 문자열 등을 펼쳐서(iterate) 개별 요소로 분리할 수 있습니다.
배열에서 펼침 연산자를 사용하면 배열의 각 요소를 개별적인 값으로 분리하여 전달할 수 있습니다.,
배열끼리의 결합도 가능합니다.
{
let arr1 = [100, 200, 300, 400, 500];
let arr2 = [600, 700];
console.log(arr1, "<br>"); //배열로 값이 출력됨.
console.log(...arr1,); //개별적인 값으로 분리하여 출력됨.
console.log(...arr1, ...arr2); //arr1과 arr2의 개별적인 값이 같이 출력됨.
}결과 - [100, 200 300, 400, 500]
100, 200, 300, 400, 500
100, 200, 300, 400, 500, 600, 700
📣 배열 : 데이터 불러오기_배열 구조분해할당(Destructuring assignment)
배열 구조 분해 할당(Array destructuring assignment)은 배열이나 객체의 값들을 추출하여 변수에 할당할 수 있습니다.
이를 통해 코드의 가독성과 유지보수성을 높일 수 있습니다.
{
let a, b, c;
[a, b, c] = [100, 200, "javascript"];
console.log(a);
console.log(b);
console.log(c);
}결과 - 100 200 javascript
📣 객체 : 데이터 불러오기_기본
객체에 저장되어있는 데이터를 불러오는 방법 중 가장 기본적인 방법입니다.
{
const obj = {
a: 100,
b: 200,
c: "javascript"
}
console.log(obj.a);
console.log(obj.b);
console.log(obj.c);
}결과 - 100 200 javascript
📣 객체 : 데이터 불러오기_Object
객체에서 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)); //둘 다 불러옴.
}결과 - {'a', 'b', 'c'}
{100, 200, 'javascript'}
['a', 100]
['b', 200]
['c', 'javascript']
📣 객체 : 데이터 불러오기_변수
{
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 javascript
📣 객체 : 데이터 불러오기_for in
for...in문은 객체의 속성을 열거하기 위한 반복문입니다.
for...in문은 객체의 속성 중 열거 가능한(enumerable) 속성을 대상으로 하며, 해당 객체의 프로토타입 체인 상에 정의된 속성은 제외됩니다.
{
const obj = {
a: 100,
b: 200,
c: "javascript"
}
for(let key in obj){
console.log(key); //키의 값만 불러옴
console.log(obj[key]); //저장된 값을 불러옴
}
}결과 -
a
100
b
200
c
javascript
📣 객체 : 데이터 불러오기_map()
객체의 map() 메서드는 배열의 map() 메서드와 유사한 기능을 하며, 객체의 속성을 순회하면서 속성 값을 변환하여 새로운 객체를 생성합니다.첫 번째 매개변수는 현재 속성의 값, 두 번째 매개변수는 현재 속성의 이름(키), 세 번째 매개변수는 원본 객체 그 자체입니다.콜백 함수는 반환값을 갖는 함수로 작성되며, 이 값은 새로운 객체의 속성 값으로 사용됩니다.배열 안에 객체가 있는 구조에서 주로 쓰입니다.
{
const obj = [
{a:100, b:300, c:"javascript"}
]
obj.map(function(el){
console.log(el.a);
console.log(el.b);
console.log(el.c);
});
//화살표 함수
obj.map((el) => {
console.log(el.a);
console.log(el.b);
console.log(el.c);
});
}결과 - 100 300 javascript
📣 객체 : 데이터 불러오기_hasOwnProperty()
hasOwnProperty() 메서드는 객체가 특정 속성(프로퍼티)을 가지고 있는지를 검사하는 JavaScript 내장 메서드입니다.
이 메서드는 인자로 전달된 속성의 이름이 객체의 직속 속성(즉, 객체 자신이 직접 가지고 있는 속성)인 경우에만 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")); //flase
// 약식으로 쓰는 방법
console.log("a" in obj);
console.log("b" in obj);
console.log("c" in obj);
}결과 -
true
true
true
false
📣 객체 : 데이터 불러오기_객체 펼침연산자
객체 펼침 연산자(Object spread operator)는 JavaScript에서 객체를 펼쳐서 새로운 객체를 만들기 위한 문법입니다. 이 연산자는 ...으로 표시됩니다. 객체 펼침 연산자를 사용하면 기존 객체의 속성을 새로운 객체에 포함시키면서, 새로운 속성을 추가하거나 덮어쓸 수 있습니다.
{
// 기본 형태
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
react
📣 객체 : 데이터 불러오기_객체 구조분해할당(비구조화 할당)
객체 구조 분해 할당(Object 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
객체 구조 분해 할당은 배열에서도 사용할 수 있습니다. 배열의 경우 대괄호([ ])를 사용합니다.
오늘은 이렇게 데이터를 불러오는 다양한 방법을 알아보았는데요,
도움이 되셨다면 공감과 댓글 부탁드려요!!!!!!!!!
