01. 변수 : 데이터 불러오기
변수 데이터를 불러오는 것은 프로그램에서 변수에 할당된 값을 가져오는
것을 의미합니다.
이는 변수에 저장된 정보를 사용하여 다른 작업을 수행하는 데
사용됩니다.
변수 데이터를 불러오는 방법은 프로그래밍 언어에 따라 다를 수 있지만,
일반적으로 변수 이름을 사용하여 해당 변수에 저장된 값을 가져옵니다.
{
let x = 100, y = 200, z = "javascript"
console.log("01. 변수 : 데이터 불러오기");
console.log(x, y, z);
}결과 확인하기
100
200
javascript
02. 상수 : 데이터 불러오기
상수 데이터를 불러오는 것은 프로그램에서 상수에 할당된 값을 가져오는
것을 의미합니다.
상수는 한 번 할당되면 그 값을 변경할 수 없는 변수를 말합니다.
따라서 상수는 일반적으로 프로그램에서 변경되지 않는 값을 저장하는 데
사용됩니다.
대부분의 프로그래밍 언어에서 상수는 선언할 때 값을 할당하고, 그
이후에는 변경할 수 없습니다.
상수 데이터를 불러오는 방법은 변수 데이터를 불러오는 방법과
유사하며, 상수 이름을 사용하여 해당 상수에 할당된 값을 가져옵니다.
{
const x = 100, y = 200, z = "javascript"
console.log("02. 상수 : 데이터 불러오기");
console.log(x, y, z);
}결과 확인하기
100
200
javascript
03. 배열 : 데이터 불러오기
배열 데이터를 불러오는 것은 프로그램에서 배열에 저장된 값을 가져오는
것을 의미합니다.
배열은 여러 개의 값들을 하나의 변수에 저장하는 자료 구조입니다.
각 값은 배열 내에서 위치에 따라 인덱스로 식별됩니다.
{
const arr = [100, 200, "javascript"]
console.log("03. 배열 : 데이터 불러오기");
console.log(arr[0], arr[1], arr[2]);
}결과 확인하기
100
200
javascript
04. 배열 : 데이터 불러오기 : 갯수
배열의 length 속성은 해당 배열에 포함된 요소의 수를 나타냅니다.
이 속성을 사용하여 배열 데이터를 불러오는 것은 배열의 길이를
기준으로 배열 요소에 접근하는 것을 의미합니다.
JavaScript에서는 배열의 각 요소에는 인덱스가 부여되어 있으며,
length 속성을 사용하여 배열의 길이를 가져온 다음 이를 인덱스 값과
함께 사용하여 배열 데이터를 불러올 수 있습니다.
{
const arr = [100, 200, "javascript"]
console.log("04. 배열 : 데이터 불러오기");
console.log(arr.length);
}결과 확인하기
3
05. 배열 : 데이터 불러오기 : for()문
for()문을 사용하여 배열 데이터를 불러오는 것은 배열의 각 요소에
접근하고 이를 처리하는 반복 작업을 수행하는 방법입니다.
이는 배열의 길이를 이용하여 반복문을 설정하고, 각 인덱스에 해당하는
배열 요소를 차례대로 가져오는 것을 의미합니다.
{
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
console.log("05. 배열 : 데이터 불러오기 : for ()문");
for (let i = 0; i < arr.length; i++) { //초깃값; 조건식; 증감값;
console.log(arr[i]);
}
}
일반적으로 for()문을 사용하여 배열 데이터를 불러오는 과정은 다음과
같습니다.
배열의 길이를 가져옵니다.
1. for()문을 사용하여 반복 작업을 설정합니다. 이때 반복 횟수는
배열의 길이와 동일하게 설정합니다. 2. 각 반복에서 배열의 인덱스를
이용하여 해당 인덱스에 위치한 배열 요소를 가져옵니다. 3. 가져온 배열
요소를 사용하여 원하는 작업을 수행합니다.
결과 확인하기
100
200
300
400
500
600
700
800
900
06. 배열 : 데이터 불러오기 : forEach()문
forEach() 메서드는 배열의 각 요소에 대해 지정된 함수를 실행하는 배열
메서드입니다.
이 메서드를 사용하면 for()문보다 간결하고 가독성이 높은 코드를
작성할 수 있습니다.
forEach() 메서드는 배열의 각 요소를 순회하며 지정된 콜백 함수를
실행합니다.
이 콜백 함수에는 현재 요소, 현재 인덱스, 배열 전체가 매개변수로
전달됩니다.
콜백 함수는 배열의 각 요소에 대해 실행되며, 사용자가 정의한 작업을
수행할 수 있습니다.
{
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
console.log("06. 배열 : 데이터 불러오기 : forEach()문");
// 01
arr.forEach(function (element) {
console.log(element);
});
// 02
arr.forEach(function (element, index) {
console.log(index);
});
// 03
arr.forEach(function (element, index, array) {
console.log(array);
});
//<화살표 함수로 변경(평소 더 많이씀)>
// 01
arr.forEach((e) => {
console.log(e);
});
// 02
arr.forEach(e => {
console.log(e);
});
// 03
arr.forEach(e => console.log(e));
}
forEach() 메서드의 콜백 함수에 전달되는 세 가지 매개변수(element,
index, array)에 대해 설명해 드리겠습니다.
* element: 이 매개변수는 현재 배열 요소의 값을 나타냅니다. forEach()
메서드는 배열의 각 요소를 순회하면서 콜백 함수를 호출하고,
각 요소의 값이 이 매개변수로 전달됩니다. 따라서 콜백 함수 내에서 이
매개변수를 사용하여 배열 요소의 값을 참조할 수 있습니다.
* index: 이 매개변수는 현재 배열 요소의 인덱스를 나타냅니다.
forEach() 메서드는 배열의 각 요소를 순회하면서 콜백 함수를
호출하고,
각 요소의 인덱스가 이 매개변수로 전달됩니다. 이를 통해 콜백 함수
내에서 현재 배열 요소의 인덱스를 활용할 수 있습니다.
* array: 이 매개변수는 원본 배열 자체를 나타냅니다. forEach()
메서드는 콜백 함수에 현재 배열 요소뿐만 아니라 원본 배열 자체도
전달합니다.
이를 통해 콜백 함수 내에서 원본 배열에 대한 작업을 수행할 수
있습니다. 주로 드문 경우에만 사용되며, 대부분의 경우에는 사용하지
않습니다.
결과 확인하기
1번 : 100~900
2번 : 0~8
3번 : 100~900
*화살표 함수 사용시
1번 : 100~900
2번 : 100~900
3번 : 100~900
07. 배열 : 데이터 불러오기 : for of
for...of 문은 ES6(ECMAScript 2015)에서 도입된 새로운 루프 구문입니다. 이를 사용하면 배열, 문자열, Map, Set 등과 같은 iterable한 객체를 순회하면서 요소를 처리할 수 있습니다. for...of 문은 반복 가능한(iterable) 객체에서 각 요소를 차례로 가져와서 지정된 변수에 할당한 후 루프 본문을 실행합니다. 이것은 일반적으로 배열 데이터를 순회하고 각 요소를 처리하는 데 사용됩니다.
{
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
console.log("07. 배열 : 데이터 불러오기 : for of");
for (let element of arr) {
console.log(element);
}
}결과 확인하기
100
200
300
400
500
600
700
800
900
08. 배열 : 데이터 불러오기 : for in
for...in 문은 JavaScript에서 객체의 열거 가능한 속성을 순회하는 데
사용됩니다.
그러나 배열의 요소를 순회하는 데에는 for...in문을 사용하는 것이
좋지않습니다.
이유는 배열의 프로퍼티 중에서 숫자형 키가 아닌 다른 프로퍼티도
열거되기 때문입니다.
배열은 사실 객체이기 때문에 배열의 요소뿐만 아니라 배열에 추가된
사용자 정의 프로퍼티나 프로토타입 체인 상에서 상속받은 프로퍼티들도
열거될 수 있습니다.
그렇기 때문에 for...in을 사용하여 배열을 순회하면 배열의 요소 뿐만
아니라 다른 프로퍼티도 함께 열거될 수 있어서 원하지 않는 결과를 얻을
수 있습니다.
{
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
console.log("08. 배열 : 데이터 불러오기 : for in");
for (let element in arr) {
console.log(element); //기존방식 (0,1,2...)
}
for (let element in arr) {
console.log(arr[element]); //이런식으로도 쓸수있음 (100,200,300...)
}
}결과 확인하기
0
1
2
3
4
5
6
7
8
100
200
300
400
500
600
700
800
900
09. 배열 : 데이터 불러오기 : map()
JavaScript에서 배열(Array)은 여러 개의 항목을 저장하는 자료구조를
말합니다.
map() 메서드는 배열의 각 요소에 대해 주어진 함수를 호출하고, 그
결과를 모아서 새로운 배열을 반환합니다.
이처럼 map() 메서드는 반복문을 사용하지 않고도 간단하게 배열의 각
요소에 함수를 적용할 수 있도록 해줍니다.
이는 코드를 더 읽기 쉽고 간결하게 만들어줍니다.
또한, map() 메서드는 원래 배열을 변경하지 않고 새로운 배열을
생성하므로 함수형 프로그래밍의 관점에서 불변성(Immutability)을
유지하는 데 유용합니다.
{
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
console.log("09. 배열 : 데이터 불러오기 : map()");
arr.map(function (element) {
console.log(element); //[100~900]
});
}결과 확인하기
100
200
300
400
500
600
700
800
900
10. 배열: 데이터 불러오기: filter()
filter 함수는 파이썬 내장 함수 중 하나로,
주어진 iterable(반복 가능한 객체)에서 지정된 함수의 반환값이
참(True)인 요소들로 구성된 새로운 iterable을 반환합니다.
일반적으로 함수와 iterable을 인자로 받아들이고, iterable에 있는 각
요소를 함수에 적용하여 반환값이 참인 요소들만 모아 새로운 iterable을
생성합니다.
* function: 각 요소를 평가할 함수. 이 함수는 인자로 iterable의 각
요소를 받아들이고, 해당 요소가 참(True)일 경우 True를 반환해야
합니다.
* iterable: 요소를 평가할 iterable(리스트, 튜플, 집합 등).
{
const num = [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log("10")
num.filter(function (element) {
console.log(element);
})
num.filter(function (element, index) {
console.log(index);
})
num.filter(function (element, index, array) {
console.log(array);
})
const arr = num.filter(function (element) {
return element < 5;
});
console.log(arr);
const arr1 = num.filter((element) => {
return element < 5;
});
console.log(arr);
const arr2 = num.filter(element => {
return element < 5;
});
console.log(arr);
const arr3 = num.filter(e => e < 5);
console.log(arr);
}결과 확인하기
1~9
0~8
1~9
1~4
1~4
1~4
1~4
11. 배열 : 데이터 불러오기 : 배열 펼침연산자
* 첫 번째 : 배열 구조 분해
배열 구조 분해를 사용하여 배열의 각 요소를 개별적인 변수에
할당합니다.
const [a, b, c] = arr;에서는 arr 배열의 첫 번째 요소가 a 변수에, 두
번째 요소가 b 변수에, 세 번째 요소가 c 변수에 할당됩니다.
* 두 번째: 선언에서 분리한 할당
배열 구조 분해를 선언과 할당을 분리하여 사용합니다.
[a, b, c]는 배열의 요소에 대한 패턴을 나타내며, [100, 200,
"javascript"]은 할당할 배열입니다.
* 세 번째: 기본 값 설정
배열의 요소에 기본 값을 설정할 수 있습니다. 요소가 undefined일 경우
기본 값이 할당됩니다.
c = "javascript"는 배열의 세 번째 요소가 undefined인 경우에만
적용됩니다.
* 네 번째: 배열 일부 요소 무시
배열 구조 분해를 사용하여 일부 요소를 무시할 수 있습니다.
,로 표시된 부분은 해당 위치의 배열 요소를 무시합니다.
* 다섯 번째: 나머지 값 할당
...rest는 나머지 요소들을 모두 배열로 할당합니다. 이것을 나머지
매개변수(Rest parameter)라고 합니다.
rest는 배열로 할당되므로 배열의 메서드나 연산자를 사용하여 처리할 수
있습니다.
* 여섯 번째: 변수 값 교환
배열 구조 분해를 사용하여 변수의 값들을 교환합니다.
[b, a] = [a, b]는 a와 b의 값을 서로 바꿉니다.
* 일곱 번째: 다차원 배열 펼침 연산자
다차원 배열의 경우에도 배열 구조 분해를 사용할 수 있습니다. const
[a, [b, c]] = [1, [2, "javascript"]];에서 b와 c는 중첩된 배열의
요소에 접근합니다.
{
const arr = [100, 200, "javascript"];
const [a, b, c] = arr;
console.log("11. 배열: 데이터 불러오기: 배열 펼침연산자")
console.log(a);
console.log(b);
console.log(c);
} {
//선언에서 분리한 할당
const [a, b, c] = [100, 200, "javascript"];
console.log(a);
console.log(b);
console.log(c);
} {
//기본 값 설정
const [a, b, c = "javascript"] = [100, 200];
console.log(a);
console.log(b);
console.log(c);
} {
//배열 일부 요소 무시
const [a, , c] = [100, 200, "javascipt"];
console.log(a);
console.log(c);
} {
//나머지 값 할당
const [a, b, ...rest] = [100, 200, "javascript", "jquery"];
console.log(a);
console.log(b);
console.log(...rest);
} {
//변수 값 교환
let a = 100, b = 200;
[a, b] = [b, a]
console.log(a);
console.log(b);
} {
//다차원 배열 펼침연산자
const [a, [b, c]] = [1, [2, "javascript"]];
console.log(a);
console.log(b);
console.log(c);
}결과 확인하기
100
200
'javascript'
100
200
'javascript'
100
200
'javascript'
100
'javascript'
100
200
'javascript'
100
200
'javascript'
1
2
'javascript'
12. 배열 : 데이터 불러오기 : 배열 구조 분해 할당
* 배열 복사
배열을 복사할 때 배열 펼침 연산자 ...를 사용하여 새로운 배열을
생성합니다.
const copy = [...arr];에서 arr 배열의 모든 요소가 copy 배열에
복사됩니다.
* 배열 합치기
배열 합치기에는 배열 연결(concatenation)과 배열 펼침 연산자를 사용할
수 있습니다.
const merged1 = [...arr1, ...arr2];는 두 배열을 합칩니다.
const merged2 = [...arr1, "javascript", ...arr2, "jquery"];는 세
개의 배열을 합칩니다.
* 함수 인자로 사용하기
함수에 배열을 전달할 때 배열 펼침 연산자를 사용하여 각 요소를
개별적인 인수로 전달할 수 있습니다.
console.log(numbers(...nums));에서 nums 배열의 요소들이 함수
numbers의 인자로 전달됩니다.
* 문자열 배열로 변환
문자열을 배열로 변환할 때도 배열 펼침 연산자를 사용할 수
있습니다.
const text2 = [...text1];에서 문자열 text1의 각 문자가 개별적인
요소로 포함된 배열 text2가 생성됩니다.
{
//배열 복사
const arr = [100, 200, "javascript"];
const copy = [...arr];
console.log("12. 배열: 데이터 불러오기: 배열 구조 분해 할당")
console.log(arr);
console.log(...arr)
console.log(copy)
} {
//배열 합치기
const arr1 = [100, 200];
const arr2 = [300, 400];
const merged1 = [...arr1, ...arr2];
const merged2 = [...arr1, "javascript", ...arr2, "jquery"];
console.log(arr1.concat(arr2));
console.log(merged1);
console.log(merged2);
} {
//함수 인자로 사용하기
function numbers(a, b, c) {
return a + b + c;
}
const nums = [100, 200, 300];
console.log(numbers(...nums));
} {
//문자열 배열로 변환
const text1 = "javascript";
const text2 = [...text1];
console.log(text1);
console.log(text2);
}결과 확인하기
[100,200,'javascript']
100 200 javascript
[100,200,'javascript']
[100,200,300,400]
[100,200,300,400]
[100,200,'javascript',300,400,'jquery']
600
javascript
['j','a','v','a','s','c','r','i','p','t']
13. 객체 : 데이터 불러오기 : 기본
주어진 코드는 JavaScript에서 객체를 선언하고 객체의 속성들을
접근하여 출력하는 예제입니다. 아래는 코드의 각 부분에 대한
설명입니다.
const obj = { a: 100, b: 200, c: "javascipt" }: 객체 obj를 선언하고
초기화합니다.
이 객체는 세 개의 속성을 가지고 있습니다. 각 속성은 키-값 쌍으로
이루어져 있습니다.
여기서 a, b, c는 속성 이름(키)이고, 각각의 값은 100, 200,
"javascript"입니다.
★ 객체의 속성 접근:
console.log(obj.a);, console.log(obj.b);, console.log(obj.c);:
객체의 속성에 점 표기법을 사용하여 접근합니다.
이를 통해 각각의 속성에 대한 값을 출력합니다.
console.log(obj["a"]);, console.log(obj["b"]);,
console.log(obj["c"]);: 객체의 속성에 대괄호 표기법을 사용하여
접근합니다.
대괄호 내에는 속성 이름을 문자열로 전달합니다. 이를 통해 각각의
속성에 대한 값을 출력합니다.
따라서 이 코드는 객체 obj의 속성들을 두 가지 방식으로 접근하여 각
속성의 값을 출력합니다.
{
const obj = {
a: 100,
b: 200,
c: "javascipt"
}
console.log("13. 객체 : 데이터 불러오기 : 기본");
console.log(obj.a);
console.log(obj.b);
console.log(obj.c);
console.log(obj["a"]);
console.log(obj["b"]);
console.log(obj["c"]);
}결과 확인하기
100
200
javascipt
100
200
javascipt
14. 객체 : 데이터 불러오기 : object.keys()
Object.keys()는 JavaScript에서 사용되는 내장 함수 중 하나입니다. 이
함수는 객체의 속성 이름(키)들을 배열로 반환합니다.
이 함수를 사용하면 객체가 가진 속성들을 쉽게 반복하거나 속성들에
대해 작업을 수행할 수 있습니다.
이를 통해 객체의 속성을 동적으로 확인하고 처리하는 데 유용합니다.
참고로, Object.keys() 함수는 상속된 속성은 포함하지 않고, 객체가
직접 소유한 속성들만 반환합니다.
만약 상속된 속성까지 포함하여 모든 속성을 얻고 싶다면 for...in
반복문을 사용하거나
Object.getOwnPropertyNames()를 사용할 수 있습니다.
{
const obj = {
a: 100,
b: 200,
c: "javascipt"
}
console.log(배열 : 데이터 불러오기 : filter())
console.log(Object.keys(obj));
}결과 확인하기
a
b
c
15. 객체 : 데이터 불러오기 : object.values()
Object.values()는 JavaScript에서 사용되는 내장 함수 중 하나입니다.
이 함수는 객체의 속성 값들을 배열로 반환합니다.
Object.values()를 사용하면 객체가 가진 속성 값들을 쉽게 반복하거나
속성 값들에 대해 작업을 수행할 수 있습니다.
이를 통해 객체의 속성 값들을 동적으로 확인하고 처리하는 데
유용합니다.
참고로, Object.values() 함수는 상속된 속성의 값을 포함하지 않고,
객체가 직접 소유한 속성들의 값만을 반환합니다.
만약 상속된 속성의 값을 포함하여 모든 속성 값을 얻고 싶다면 for...in
반복문을 사용하거나
Object.getOwnPropertyNames()를 사용할 수 있습니다.
{
const obj = {
a: 100,
b: 200,
c: "javascipt"
}
console.log("15. 객체 : 데이터 불러오기 : object.values()");
console.log(Object.values(obj));
}결과 확인하기
100
200
javascipt
16. 객체 : 데이터 불러오기 : object.entries()
Object.entries()는 JavaScript에서 사용되는 내장 함수 중
하나입니다.
이 함수는 객체의 속성 이름과 해당 속성 값들을 [키, 값]의 쌍으로
이루어진 배열로 반환합니다.
Object.entries()를 사용하면 객체가 가진 속성들을 쉽게 반복하거나 각
속성에 대해 작업을 수행할 수 있습니다.
이를 통해 객체의 속성 이름과 값을 함께 동적으로 확인하고 처리하는 데
유용합니다.
참고로, Object.entries() 함수는 상속된 속성은 포함하지 않고, 객체가
직접 소유한 속성들의 [키, 값] 쌍만을 반환합니다.
만약 상속된 속성까지 포함하여 모든 속성들의 [키, 값] 쌍을 얻고
싶다면 for...in 반복문을 사용하거나
Object.getOwnPropertyNames()를 사용할 수 있습니다.
{
const obj = {
a: 100,
b: 200,
c: "javascipt"
}
console.log("16. 객체 : 데이터 불러오기 : object.entries()");
console.log(Object.entries(obj));
}결과 확인하기
[a, 100]
[b, 200]
[c, javascipt]
17. 객체 : 데이터 불러오기 : object.assign()
Object.assign()은 JavaScript에서 사용되는 내장 함수 중
하나입니다.
이 함수는 하나 이상의 소스 객체로부터 대상 객체로 속성을 복사할 때
사용됩니다.
이 함수는 대상 객체를 반환하며, 소스 객체들의 속성들이 대상 객체에
복사됩니다.
만약 소스 객체와 대상 객체가 동일한 속성 이름을 가지고 있다면, 이전
값은 덮어쓰여집니다.
Object.assign() 함수를 사용하면 여러 소스 객체들로부터 속성들을
하나의 대상 객체로 효율적으로 결합할 수 있습니다.
이를 통해 객체의 속성들을 쉽게 복사하거나 결합하는 데 유용합니다.
참고로, Object.assign() 함수는 대상 객체를 반환하며, 소스 객체들의
속성들이 대상 객체에 직접적으로 복사됩니다.
만약 소스 객체들을 수정하고 싶지 않다면 대신 빈 객체를 대상 객체로
지정하고 Object.assign()을 사용할 수 있습니다.
{
const obj1 = {
a: 100,
b: 200,
}
const obj2 = {
c: 300,
d: 400,
}
const obj3 = Object.assign(obj1, obj2);
console.log("17. 객체 : 데이터 불러오기 : object.assign()");
console.log(obj3);
}결과 확인하기
a: 100
b: 200
c: 300
d: 400
18. 객체 : 데이터 불러오기 : object.hasOwnproperty()
Object.hasOwnProperty()는 JavaScript 객체에서 특정 속성이 직접
객체에 속해 있는지 여부를 판별하는 메서드입니다.
이 메서드는 상속된 속성을 체크하지 않습니다. 즉, 객체가 직접적으로
소유한 속성인 경우에만 true를 반환하며,
다른 객체 체인을 통해 상속된 속성에는 false를 반환합니다.
Object.hasOwnProperty()는 객체의 속성을 동적으로 확인하고 처리하는
데 유용합니다.
예를 들어, 객체가 특정 속성을 가지고 있는지 확인한 후, 해당 속성이
있을 때에만 특정 작업을 수행할 수 있습니다.
{
const obj = {
a: 100,
b: 200,
c: "javascipt"
}
console.log("18...");
console.log(obj.hasOwnProperty("a"));
console.log(obj.hasOwnProperty("b"));
console.log(obj.hasOwnProperty("c"));
console.log(obj.hasOwnProperty("d"));
//in 연산자
console.log("a" in obj);
console.log("b" in obj);
console.log("c" in obj);
console.log("d" in obj);
}결과 확인하기
true
true
true
false
true
true
true
false
19. 객체 : 데이터 불러오기 : for in
주어진 코드는 JavaScript에서 객체를 선언하고, for...in 반복문을
사용하여 객체의 속성들을 반복적으로 접근하고 출력하는 예제입니다.
아래는 코드의 각 부분에 대한 설명입니다.
const obj = { a: 100, b: 200, c: "javascipt" }: 객체 obj를 선언하고
초기화합니다.
이 객체는 세 개의 속성을 가지고 있습니다. 각 속성은 키-값 쌍으로
이루어져 있습니다.
여기서 a, b, c는 속성 이름(키)이고, 각각의 값은 100, 200,
"javascript"입니다.
for (let el in obj) { ... }: for...in 반복문을 사용하여 객체의
속성을 반복적으로 접근합니다.
이 반복문은 객체의 모든 속성을 순회하며, 각 반복에서 현재 속성의
이름을 el에 할당합니다.
console.log(el + ":" + obj[el]);: 반복문 내에서 각 속성의 이름(el)과
해당 속성의 값을 출력합니다.
obj[el]을 통해 현재 반복 중인 속성의 값을 가져옵니다.
{
const obj = {
a: 100,
b: 200,
c: "javascipt"
}
console.log("19. 객체 : 데이터 불러오기 : for in");
for (let el in obj) {
console.log(el + ":" + obj[el]);
}
}결과 확인하기
a:100
b:200
c:javascipt
20. 객체 : 데이터 불러오기 : 객체 펼침연산자
* 객체의 속성 추출
객체 구조 분해를 사용하여 객체의 속성을 개별 변수에 할당합니다.
const { a, b, c } = obj;에서 obj 객체의 속성인 a, b, c를 추출하여
각각의 변수에 할당합니다.
* 기본 값 할당
객체 구조 분해를 할 때, 속성이 존재하지 않을 경우 기본 값을 설정할
수 있습니다.
c = "javascript"는 객체에 c 속성이 없을 경우에만 적용됩니다.
* 새로운 이름으로 변경
추출된 속성의 이름을 새로운 변수 이름으로 변경할 수 있습니다.
{ a: x, b: y, c: z }에서 객체의 속성 a를 변수 x에, b를 y에, c를 z에
할당합니다.
* 중첩된 객체에서의 속성 추출
중첩된 객체의 속성도 추출할 수 있습니다.
const { a, b: { c, d } } = obj;에서 obj 객체의 b 속성 내부의 c와 d를
추출합니다.
{
const obj = {
a: 100,
b: 200,
c: "javascript"
};
const { a, b, c, } = obj;
console.log("20. 객체: 데이터 불러오기: 객체 펼침연산자")
console.log(a);
console.log(b);
console.log(c);
} {
//기본 값 할당
const obj = {
a: 100,
b: 200
}
const { a, b, c = "javascript" } = obj;
console.log(a);
console.log(b);
console.log(c);
} {
//새로운 이름으로 변경
const obj = {
a: 100,
b: 200,
c: "javascript"
}
const { a: x, b: y, c: z } = obj;
console.log(x);
console.log(y);
console.log(z);
} {
const obj = {
a: 100,
b: { c: 200, d: "javascript" }
}
const { a, b: { c, d } } = obj;
console.log(a);
console.log(c);
console.log(d);
}결과 확인하기
100
200
javascipt
100
200
javascipt
100
200
javascipt
100
200
javascipt
21. 객체 : 데이터 불러오기 : 객체 구조 분해 할당
* 객체 병합
객체 펼침 연산자 ...를 사용하여 두 개의 객체를 병합합니다.
const merge1 = { ...obj1, ...obj2 }에서는 두 개의 객체의 속성들을
모두 포함하는 새로운 객체를 생성합니다.
const merge2 = { ...obj1, x: "javascript", ...obj2, y: "jquery"
}에서는 추가적으로 속성을 지정하여 두 객체를 병합합니다.
* 결과
merge1 객체는 obj1과 obj2의 모든 속성을 포함합니다.
merge2 객체는 obj1과 obj2의 속성뿐만 아니라 새로운 속성 x와 y도
추가되었습니다.
{
const obj1 = { a: 100, b: 200 }
const obj2 = { c: 300, d: 400 }
const merge1 = { ...obj1, ...obj2 }
const merge2 = { ...obj1, x: "javascript", ...obj2, y: "jquery" }
console.log("21. 객체 : 데이터 불러오기 : 객체 구조 분해 할당")
console.log(obj1)
console.log(obj2)
console.log(merge1)
console.log(merge2)
}결과 확인하기
{a:100, b:200}
{c:300, d:400}
{a:100, b:200, c:300, d:400}
{a:100, b:200,x:'javascript', c:300, d:400, y:'jquery'}
22. 객체 : 데이터 불러오기 : XMLHttRequest
XMLHttpRequest는 JavaScript에서 사용되는 객체로, 서버와 상호작용하여
웹 페이지의 일부를 동적으로 업데이트하는 데 사용됩니다.
이 객체는 서버로부터 데이터를 가져오거나 서버로 데이터를 보내는 데
사용됩니다.
주로 AJAX(Asynchronous JavaScript and XML) 기술을 통해 비동기적으로
서버와 통신할 때 활용됩니다.
✤ XMLHttpRequest 객체를 사용하면 다음과 같은 작업을 수행할 수
있습니다:
- 데이터 가져오기: 서버에서 데이터를 가져와서 웹 페이지의 일부를
업데이트합니다.
이를 통해 사용자는 페이지를 다시 로드하지 않고도 동적으로 데이터를
표시할 수 있습니다.
데이터 보내기: 사용자의 입력이나 페이지의 변경 내용을 서버로 보내고,
서버에서 적절한 응답을 받습니다.
예를 들어, 사용자가 폼을 제출할 때 폼 데이터를 서버에 보내고,
서버에서는 해당 데이터를 처리하여 응답합니다.
- 비동기 통신: XMLHttpRequest 객체는 비동기적으로 데이터를 요청하고
응답을 처리할 수 있습니다.
이는 페이지의 다른 부분과 독립적으로 데이터를 가져오거나 보낼 수
있음을 의미합니다.
이것은 사용자 경험을 향상시키고 웹 페이지의 성능을 향상시킵니다.
✤ XMLHttpRequest를 사용하여 데이터를 가져오거나 보내는 과정은 다음과
같습니다:
XMLHttpRequest 객체 생성
-요청 초기화: 요청의 유형(GET, POST 등), 요청할 URL, 요청의 비동기
여부 등을 설정합니다.
-요청 보내기: 서버에 요청을 보냅니다.
- 처리: 서버로부터 받은 응답을 처리합니다. 이때 응답은 비동기적으로
받을 수 있으며, 보통 이벤트 핸들러를 사용하여 처리합니다.
{
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://webstoryboy.github.io/webs2024/json/gineungsaJC2011_05.json", true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var responseData = xhr.responseText;
var jsonData = JSON.parse(responseData);
console.log(jsonData);
} else if (xhr.readyState === 4) {
console.error("데이터 불러오기 오류: " + xhr.status);
}
};
xhr.send();
}23. 객체 : 데이터 불러오기 : fetch API
Fetch API는 JavaScript의 네트워킹 기능을 담당하는 최신 API 중
하나입니다.
Fetch API를 사용하면 네트워크 요청을 보내고 응답을 처리할 수
있습니다.
이전에 많이 사용되던 XMLHttpRequest와 비교하여 Fetch API는 더
간단하고 강력한 방법으로 데이터를 불러오거나 보내는 기능을
제공합니다.
Fetch API의 주요 특징은 다음과 같습니다:
* 프로미스(Promise) 기반: Fetch API는 프로미스를 사용하여 비동기
네트워크 요청을 처리합니다.
이를 통해 더 간결하고 효율적인 비동기 코드를 작성할 수 있습니다.
* 간단한 사용법: Fetch API는 사용법이 간단합니다.
단일 함수 fetch()를 호출하여 네트워크 요청을 초기화하고, 반환된
프로미스를 통해 응답을 처리합니다.
* 요청과 응답 객체: Fetch API를 사용하면 요청 객체와 응답 객체를
명확하게 다룰 수 있습니다.
요청 객체는 요청의 URL, 메서드, 헤더 등을 설정하고, 응답 객체는
응답의 상태 코드, 헤더, 본문 등을 제공합니다.
* 자동 파싱: Fetch API는 기본적으로 응답을 자동으로 파싱합니다.
예를 들어, JSON 형식의 응답을 받으면 자동으로 JavaScript 객체로
파싱합니다.
* Cross-Origin Resource Sharing (CORS) 지원: Fetch API는 CORS를
지원하여 웹 애플리케이션이 다른 도메인의 리소스에 접근할 수 있도록
합니다.
Fetch API를 사용하여 데이터를 불러오는 과정은 다음과 같습니다:
fetch() 함수를 사용하여 네트워크 요청을 초기화합니다. 이때 요청할
URL과 옵션 객체를 전달합니다.
반환된 프로미스를 사용하여 요청이 성공했는지 여부를 확인하고, 응답
객체를 받습니다.
응답 객체를 사용하여 응답의 상태 코드, 헤더, 본문 등을 처리합니다.
{
fetch("https://webstoryboy.github.io/webs2024/json/gineungsaJC2011_05.json")
.then(Response => {
return Response.json();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error("데이터 불러오기 오류:", error);
})
}