01. 변수 : 데이터 불러오기
변수 데이터 불러오기 예시입니다.
{
let x = 100, y = 200, z = "javascript";
console.log(x, y, z);
}
let x = 100, y = 200, z = "javascript";세 개의 변수 x, y, z 각각의 초기 값을 선언합니다.
결과 확인하기
02. 상수 : 데이터 불러오기
상수 데이터 불러오기 예시입니다.
{
const x = 100, y = 200, z = "javascript";
console.log(x, y, z);
}
let x = 100, y = 200, z = "javascript";세 개의 변수 x, y및 z각각의 초기 값을 선언합니다.
const는 변경불가
결과 확인하기
03. 배열 : 데이터 불러오기
배열 데이터 불러오기 예시입니다.
{
const arr = [100, 200, "javascript"];
console.log(arr[0], arr[1], arr[2]);
}
const arr = [100, 200, "javascript"]; 상수 변수를 선언 하고 arr 3개의 요소가 포함된 배열로 초기화합니다
결과 확인하기
04. 배열 : 데이터 갯수 불러오기
배열 데이터 갯수 불러오기 예시입니다.
{
const arr = [100, 200, "javascript"];
console.log(arr.length);
}
console.log(arr.length); 배열의 길이를 arr콘솔에 기록합니다 '3'. 이는 배열에 세 가지 요소가 있기 때문입니다.
결과 확인하기
05. 배열 : 데이터 불러오기 : for()
배열 데이터 불러오기 for()문 예시입니다.
{
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
for(let i=0; i<arr.length; i++){
console.log(arr[i]);
}
}
const arr100부터 900까지의 숫자를 포함하는 9개의 요소로 배열을 초기화합니다.
루프는 지정한대로 'i=0' ~ 'i=8'까지 반복됩니다.
결과 확인하기
200
300
400
500
600
700
800
900
06. 배열 : 데이터 불러오기 : forEach
배열 데이터 불러오기 forEach문 예시입니다.
{
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
arr.forEach(function(elemunt){
console.log(elemunt);
});
arr.forEach(function(elemunt, index){
console.log(index);
});
arr.forEach(function(elemunt, index, array){
console.log(array);
});
// 약식 표현 (매개변수 한개일때 생략가능)
arr.forEach((el) => {
console.log(el);
});
arr.forEach(el => { // 괄호 생략
console.log(el);
});
arr.forEach(el => console.log(el)); // 리턴생략
}
제공된 코드에서는 메서드를 사용하여 forEach배열 요소를 반복 arr하고 콘솔에 인쇄합니다.
이 forEach메서드는 콜백 함수를 인수로 사용하고 이 함수는 배열의 각 요소에 대해 실행됩니다.
첫 번째 콜백 함수에서는 배열의 각 요소를 인쇄합니다.
두 번째 콜백 함수에서는 각 요소의 색인을 인쇄합니다.
세 번째 콜백 함수에서는 각 요소에 대한 전체 배열을 인쇄합니다.
결과 확인하기
0 1 2 3 4 5 6 7 8
100 200 300 400 500 600 700 800 900
100 200 300 400 500 600 700 800 900
100 200 300 400 500 600 700 800 900
100 200 300 400 500 600 700 800 900
100 200 300 400 500 600 700 800 900
100 200 300 400 500 600 700 800 900
100 200 300 400 500 600 700 800 900
100 200 300 400 500 600 700 800 900
100 200 300 400 500 600 700 800 900
07. 배열 : 데이터 불러오기 : for of
배열 데이터 불러오기 for of문 예시입니다.
{
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
for(let element of arr){
console.log(element);
}
}
for...of루프 에서는 배열 element의 각 요소를 arr순차적으로 나타내며 각 요소를 한 번에 하나씩 콘솔에 인쇄합니다.
이 루프는 명시적인 인덱스를 처리할 필요 없이 배열 요소를 반복하는 편리한 방법입니다.
결과 확인하기
200
300
400
500
600
700
800
900
08. 배열 : 데이터 불러오기 : for in
배열 데이터 불러오기 for in문 예시입니다.
{
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
for(let element in arr){
console.log(arr[element]);
}
}
for...in제공된 코드에서 루프를 사용하여 배열 요소를 반복 하고 각 요소를 콘솔에 인쇄하려고 합니다 .
그러나 for...in일반적으로 배열 요소를 반복하는 데 사용되지 않습니다.
주로 객체의 속성을 반복하는 데 사용됩니다.
결과 확인하기
200
300
400
500
600
700
800
900
09. 배열 : 데이터 불러오기 : map()
배열 데이터 불러오기 map 문 예시입니다.
{
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
arr.map((el) => {
console.log(el);
});
}
제공한 코드는 map메소드를 사용하여 호출된 배열을 반복 arr하고 각 요소를 콘솔에 기록합니다.
이 map방법은 일반적으로 배열을 변환하고 변환된 값으로 새 배열을 만드는 데 사용됩니다.
결과 확인하기
200
300
400
500
600
700
800
900
10. 배열 : 데이터 불러오기 : filter()
배열 데이터 불러오기 filter 문 예시입니다.
{
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
arr.filter((el) => {
console.log(el);
});
}
코드에서는 메서드를 사용하여 filter배열을 반복 arr하고 각 요소를 콘솔에 기록합니다.
이 filter방법은 조건에 따라 배열을 필터링하고 조건을 충족하는 요소가 포함된 새 배열을 생성하기 위한 것입니다.
결과 확인하기
200
300
400
500
600
700
800
900
11. 배열 : 데이터 불러오기 : 배열 펼침 연산자
배열 데이터 불러오기 : 배열 펼침 연산자 예시입니다.
{
const arr1 = [100, 200,"javascript"];
const arr2 = [300, 400,"jquery"];
const arr3 = [...arr1, 500];
console.log(arr1);
console.log(...arr1);
console.log(...arr1, ...arr2);
console.log(...arr3);
}
이를 통해 배열을 복사하거나, 여러 배열을 결합하거나, 함수에 매개변수로 전달할 때 유용하게 사용됩니다.
결과 확인하기
100 200 javascript
100 200 javascript 300 400 jqurey
100 200 javascript 500
12. 배열 : 데이터 불러오기 : 배열 구조 분해 할당
배열 데이터 불러오기 : 배열 구조 분해 할당 예시입니다.
{
const arr = [100, 200, "javascript"];
const [a, b, c] = arr;
console.log(a);
console.log(b);
console.log(c)
}
주어진 코드 조각은 세 개의 요소를 포함하는 'arr' 배열을 정의한 다음 구조 분해 할당을 사용하여 배열의 각 요소를 개별 변수 'a', 'b' 및 'c'에 할당합니다.
결과 확인하기
200
javascrip
13. 객체 : 데이터 불러오기
객체 데이터 불러오기 예시입니다.
{
const obj = {
a: 100,
b: 200,
c: "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세 가지 속성이 있는 개체가 있습니다 .
이러한 속성의 값에 액세스하려면 점 표기법과 대괄호표기법 이라는 두 가지 방법을 사용합니다
점 표기법과 대괄호 표기법 모두 객체 속성에 접근하는 데 사용될 수 있으며, 이 경우에는 동일한 결과를 산출합니다.
점 표기법은 일반적으로 속성 이름을 미리 알고 있고 유효한 JavaScript 식별자인 경우에 사용되는 반면, 대괄호 표기법은 더 유연하며 동적 이름이나 비표준 이름으로 속성에 액세스할 수 있도록 해줍니다.
결과 확인하기
200
javascript
100
200
javascript
14. 객체 : 데이터 불러오기 : Object.key()
객체 데이터 불러오기 Object.key 문 예시입니다.
{
const obj = {
a: 100,
b: 200,
c: "javascript",
}
console.log(Object.keys(obj));
}
Object.key() 메서드는 객체의 열거 가능한 속성 이름의 배열을 검색하는 데 사용됩니다.
결과를 콘솔에 기록하면 객체의 키(속성 이름)가 포함된 배열이 표시됩니다.
결과 확인하기
15. 객체 : 데이터 불러오기 : Object.values()
객체 데이터 불러오기 Object.values 문 예시입니다.
{
const obj = {
a: 100,
b: 200,
c: "javascript",
}
console.log(Object.values(obj));
}
이 메서드는 개체의 속성 값을 포함하는 배열을 검색하는 데 사용됩니다.
결과를 콘솔에 기록하면 개체 속성 값이 포함된 배열이 표시됩니다.
결과 확인하기
16. 객체 : 데이터 불러오기 : Object.entries()
객체 데이터 불러오기 Object.entries 문 예시입니다.
{
const obj = {
a: 100,
b: 200,
c: "javascript",
}
console.log(Object.entries(obj));
}
이 메서드는 객체 자체의 열거 가능한 속성 쌍의 배열을 검색하는 데 사용됩니다.
결과를 콘솔에 기록하면 이러한 쌍이 포함된 배열이 표시됩니다.
결과 확인하기
17. 객체 : 데이터 불러오기 : Object.assign()
배열 데이터 불러오기 Object.assign 문 예시입니다.
{
const obj1 = { a: 100, b: 200, c: "javascript"};
const obj2 = { d: 300, e: 400, f: "jquery"};
const obj3 = Object.assign(obj1, obj2);
console.log(obj3);
}
Object.assign()메서드는 하나 이상의 소스 개체에서 모든 열거 가능한 속성 값을 대상 개체로 복사하고 대상 개체를 반환하는 데 사용됩니다.
결과 확인하기
18. 객체 : 데이터 불러오기 : hasOwnProperty()
배열 데이터 불러오기 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"));
// in 연산자
console.log("a" in obj);
console.log("b" in obj);
console.log("c" in obj);
console.log("d" in obj);
}
hasOwnProperty 메서드는 객체가 특정 속성을 직접 소유하고 있는지 여부를 확인합니다.
obj.hasOwnProperty("a")는 true를 반환합니다. 왜냐하면 객체 obj는 a라는 속성을 직접 소유하고 있기 때문입니다.
obj.hasOwnProperty("b")도 true를 반환합니다. 객체는 b라는 속성을 직접 소유하고 있습니다.
obj.hasOwnProperty("c") 역시 true를 반환합니다. 객체는 c라는 속성을 직접 소유하고 있습니다
obj.hasOwnProperty("d")는 false를 반환합니다. 객체는 d라는 속성을 소유하고 있지 않기 때문입니다.
in 연산자는 객체의 속성을 포함하여 상속된 속성까지 확인합니다.
"a" in obj는 true를 반환합니다. 객체 내에 a 속성이 있으므로 true입니다.
"b" in obj도 true를 반환합니다. b 속성이 객체 내에 있으므로 true입니다.
"c" in obj 역시 true를 반환합니다. c 속성이 객체 내에 있으므로 true입니다.
"d" in obj는 false를 반환합니다. d 속성이 객체 내에 없기 때문입니다.
결과 확인하기
true
true
false
true
true
true
false
19. 객체 : 데이터 불러오기 : for in
객체 데이터 불러오기 for in 문 예시입니다.
{
const obj = {
a: 100,
b: 200,
c: "javascript",
}
for(let el in obj){
console.log(el + " : " + obj[el]);
}
}
위 코드에서 for...in 루프는 객체 obj의 속성을 순회합니다. 각 반복에서 el 변수는 현재 속성 이름을 나타내고, obj[el]은 해당 속성의 값을 나타냅니다.
따라서 반복문에서는 각 속성과 그 값이 순서대로 출력됩니다.
결과 확인하기
b : 200
c : javascrip
20. 객체 : 데이터 불러오기 : 객체 펼침 연산자
객체 데이터 불러오기 : 객체 펼침 연산자 예시입니다.
{
const obj1 = {
a: 100,
b: 200,
c: "javascript",
}
const obj2 = {
d: 300,
e: 400,
f: "jquery",
}
const obj3 = {...obj1, ...obj2}
const obj4 = {...obj1, d: "jquery"}
const obj5 = {...obj1, b: 300}
console.log(obj3);
console.log(obj4);
console.log(obj5);
}
obj1과 obj2의 모든 속성을 합쳐서 새로운 obj3 객체를 만듭니다.
obj1의 모든 속성을 obj4로 복사한 후, d 속성의 값을 "jquery"로 변경합니다.
obj1의 모든 속성을 obj5로 복사한 후, b 속성의 값을 300으로 변경합니다.
결과 확인하기
{a: 100, b: 200, c: 'javascript', d: 'jquery'}
{a: 100, b: 300, c: 'javascript'}
21. 객체 : 데이터 불러오기 : 객체 구조 분해 할당
객체 데이터 불러오기 : 객체 구조 분해 할당 예시입니다.
{
const obj1 = {
a: 100,
b: 200,
c: "javascript"
}
const {a, b, c} = obj1;
console.log(a);
console.log(b);
console.log(c);
const { a: x, b: y, c: z } = obj1;
console.log(x);
console.log(y);
console.log(z);
const obj2 = {
d: 100,
e: 200,
f: "javascript"
}
const {d, e, f, g = "jquery"} = obj2;
console.log(g);
const obj3 = {
x1: 100,
y1: {a1: 100, b1:200},
z1: "javascript"
}
const {x1, y1: {a1, b1}, z1} = obj3;
console.log(x1);
console.log(a1);
console.log(b1);
console.log(z1);
}
obj1 객체에서 a, b, c 속성을 추출하여 새로운 변수 a, b, c에 할당합니다.
obj1 객체에서 a, b, c 속성을 추출하되, a를 x, b를 y, c를 z로 변수 이름을 변경하여 할당합니다.
obj2 객체에서 d, e, f 속성을 추출하며, g는 기본값으로 "jquery"를 설정합니다.
obj3 객체에서 x1, y1, z1 속성을 추출합니다. y1은 중첩된 객체입니다.
결과 확인하기
200
javascript
100
200
javascript
jquery
100
100
200
javascript
22. 파일 : 서버 데이터 불러오기 : XMLHttpRequest
XMLHttpRequest 예시입니다.
{
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();
}
1. var xhr = new XMLHttpRequest();: 이 줄은 XMLHttpRequest 객체의 새 인스턴스를 생성합니다. 이 개체는 서버에 HTTP 요청을 보내고 응답을 처리하는 데 사용됩니다.
2. xhr.open("GET", "https://webstoryboy.github.io/webs2024/json/gineungsaJC2011_05.json", true);: 여기서는 openHTTP 요청을 구성하는 방법을 사용합니다. 요청 유형(이 경우 GET), 가져오려는 리소스의 URL(이 경우 JSON 파일) 및 true요청을 비동기식으로 만드는 세 번째 인수로 지정합니다.
3. xhr.onreadystatechange: XMLHttpRequest 객체의 상태 변경을 수신하는 이벤트 핸들러입니다. 상태가 변경되면 응답을 처리하기 위해 이 함수가 호출됩니다. 속성 readyState은 요청 상태를 나타내고 xhr.status응답의 HTTP 상태 코드를 나타냅니다.
4. 함수 내부에는 xhr.onreadystatechange조건부 검사가 있습니다.
xhr.readyState4(요청이 완료되었음을 의미)이고 xhr.status200(요청이 성공했음을 의미)이면 응답이 성공적으로 수신되었음을 의미합니다.
이 경우 xhr.responseTextJSON 데이터가 문자열로 포함된 를 사용하여 응답 데이터를 검색합니다.
그런 다음 JSON.parse(responseData)JSON 문자열을 JavaScript 개체로 구문 분석하는 데 사용됩니다.
readyState4이지만 status200이 아닌 경우 콘솔에 오류 메시지를 기록하여 데이터를 가져오는 데 문제가 있음을 나타냅니다.
xhr.send();: 이 줄은 JSON 데이터를 검색하기 위해 서버에 HTTP 요청을 보냅니다.
결과 확인하기
23. 파일 : 서버 데이터 불러오기 : fetch API
fetch API 예시입니다.
{
fetch("https://webstoryboy.github.io/webs2024/json/gineungsaJC2011_05.json")
.then(response => {
return response.json();
})
.then(data => {
console.log(data)
})
.catch(error => {
console.log(error)
})
}
1. fetch("https://webstoryboy.github.io/webs2024/json/gineungsaJC2011_05.json"): 이 fetch함수는 원격 서버에 있는 JSON 리소스인 지정된 URL에 대한 HTTP GET 요청을 시작하는 데 사용됩니다. 이 함수는 Promise를 반환합니다.
2. .then(response => { return response.json(); }): 요청을 시작한 후 .then()반환된 Promise에서 호출됩니다. 이 메서드는 Promise가 해결될 때 실행될 콜백 함수를 사용합니다. 이 경우 response객체를 수신합니다.
response.json()응답 본문을 JSON으로 구문 분석하기 위해 호출됩니다. 이 메서드는 또한 구문 분석된 JSON 데이터로 해결되는 Promise를 반환합니다.
3. .then(data => { console.log(data) }): .then()파싱된 JSON 데이터를 처리하기 위해 또 다른 블록이 사용됩니다. 이 블록은 dataJSON 데이터를 JavaScript 개체로 포함하는 변수를 받습니다.
이 블록 내에서는 console.log(data)JSON 데이터를 콘솔에 기록하여 디버깅이나 추가 처리를 위해 표시하는 데 사용됩니다.
4. .catch(error => { console.log(error) }).catch(): fetch 작업이나 JSON 파싱 시 발생할 수 있는 오류를 처리하는 블록 입니다 .
약속 체인의 어느 지점에서든 오류가 발생하면(예: 네트워크 문제, 잘못된 JSON) 이 블록이 실행됩니다. 매개 error변수에는 오류에 대한 정보가 포함되어 있습니다.