01. 변수 : 데이터 불러오기
변수에 데이터를 할당하고 불러옵니다.
{
let x = 100, y = 200, z = "javascript";
console.log(x, y, z);
}
세 개의 변수 x, y, z에 각각 값이 할당되고, 이 변수들의 값을 console.log() 함수를 사용하여 출력하는 코드입니다.
결과 확인하기
02. 상수 : 데이터 불러오기
상수에 데이터를 할당하고 불러옵니다.
{
const x = 100, y = 200, z = "javascript";
console.log(x, y, z);
}
세 개의 상수 x, y, z에 각각 값이 할당되고, 이 변수들의 값을 console.log() 함수를 사용하여 출력하는 코드입니다.
결과 확인하기
03. 배열 : 데이터 불러오기
배열을 이용하여 데이터를 불러옵니다.
{
const arr = [100, 200, "javascript"];
console.log(arr[0], arr[1], arr[2]);
}
배열 arr에 세 개의 요소가 할당되고, 이 배열의 각 요소들의 값을 console.log() 함수를 사용하여 출력하는 코드입니다.
결과 확인하기
04. 배열 : 데이터 불러오기 + 갯수
데이터의 길이를 불러오는 예제입니다.
{
{
const arr = [100, 200, "javascript"];
console.log(arr.length);
}
}
arr.length로 배열안의 데이터 갯수를 출력할수있습니다.
결과 확인하기
05. 배열 : 데이터 불러오기 : for()
for문을 이용하여 배열 데이터를 불러오는 예제입니다.
{
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
for(i=0; i<9; i++){
console.log(arr[i]);
}
}
i 변수가 0부터 시작하여 9보다 작으면 끝날때까지 arr[i]가 출력되고 한번 반복할떄마다 i 변수의 값이 1씩 증가합니다.
결과 확인하기
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(element){
console.log(element);
});
arr.forEach(function(el, index){
console.log(index);
});
arr.forEach(function(el, index, array){
console.log(array);
});
// 약식 표현
arr.forEach((el) => {
console.log(el);
});
arr.forEach(el => {
console.log(el);
});
arr.forEach(el => console.log(el));
}
위와 같은 방식으로 for문을 더 편하게 사용할수있습니다.
결과 확인하기
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
07. 배열 : 데이터 불러오기 : for of
for of를 이용해 데이터를 불러옵니다.
{
const arr = [100, 200, 300, 400, 500, 600, 700, 800, 900];
for(const element of arr){
console.log(element);
}
}
for of 루프는 배열의 각 요소를 직접 가져와서 순회하기 위한 편리한 방법입니다.
결과 확인하기
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 대신 for of 루프를 사용하는 것이 더 적절합니다.
결과 확인하기
09. 배열 : 데이터 불러오기 : map()
map()을 이용해 데이터를 불러오는 예제입니다.
{
const arr = [100, 200, "javascript"];
arr.map(function(el, index, array){
console.log("09 : " + el + " : " + index + " : " + array);
});
const arrNum = arr.map((el) => {
return el;
});
console.log("09 : " + arrNum);
}
JavaScript의 map() 함수는 배열의 각 요소에 대해 지정된 함수를 실행하고, 각 요소를 처리한 결과를 새로운 배열로 반환하는 메서드입니다.
결과 확인하기
09 : 100 : 0 : 100,200,javascript
09 : 200 : 1 : 100,200,javascript
09 : javascript : 2 : 100,200,javascript
console.log의 결과
09 : 100,200,javascript
10. 배열 : 데이터 불러오기 : filter()
filter()을 이용해 데이터를 불러오는 예제입니다.
{
const arr = [100, 200, "javascript"];
arr.filter(function(el, index, array){
console.log("09 : " + el + " : " + index + " : " + array);
});
const arrNum = arr.filter((el) => {
return el > 150;
});
const arrNum2 = arr.filter(el => {
return el > 150;
});
const arrNum3 = arr.filter(el => el > 150);
console.log(arrNum);
console.log(arrNum2);
console.log(arrNum3);
}
filter() 메서드는 주로 데이터를 필터링하거나 조건에 맞는 요소를 선택하는 데 사용됩니다.
결과 확인하기
09 : 100 : 0 : 100,200,javascript
09 : 200 : 1 : 100,200,javascript
09 : javascript : 2 : 100,200,javascript
[200]
[200]
[200]
11. 배열 : 데이터 불러오기 : 배열 펼침 연산자
배열 펼침 연산자에 관한 예제입니다.
{
// 배열 펼침 연산
const arr1 = [100, 200, 300];
const arr2 = [400, 500, 600];
console.log(arr1); //100,200,300
console.log(...arr1); //100 200 300
console.log(...arr1, ...arr2); //100 200 300 400 500 600 --< concat
console.log(...arr1, 400); //100 200 300 400 --< push()
console.log(...arr1.slice(0,2)); //100 200 --< slice()
// 함수 호출시 인수 전달
function addNum(a, b, d){
return a + b + c;
}
const num = [100, 200, 300];
const sum = addNum(...num);
console.log(sum);
}
배열 펼침 연산자는 코드를 더 간결하고 가독성 있게 작성하는 데 도움을 주며, 많은 다양한 상황에서 유용하게 활용됩니다.
결과 확인하기
100 200 300
100 200 300 400 500 600
100 200 300 400
100 200
600
12. 배열 : 데이터 불러오기 : 배열 구조 분해 할당
배열 구조 분해 할당에 대한 예제입니다.
{
// 단일 배열에서 구조 분해 할당
const [a, b, c] = [100, 200, 300];
console.log(a);
console.log(b);
console.log(c);
// 기존 배열에서 구조 분해 할당
const arr = [100, 200, 300];
const [x, y, z] = arr;
console.log(x);
console.log(y);
console.log(z);
// 나머지 요소 추출 분해 할당
const num = [100, 200, 300, 400, 500];
const [num1, num2, ...rest] = num;
console.log(num1);
console.log(num2);
console.log(rest); //배열로출력
console.log(...rest); //숫자만출력
}
배열 구조 분해 할당은 배열의 요소를 추출하여 변수에 할당하는 기술입니다.
결과 확인하기
200
300
100
200
300
100
200
[300, 400, 500]
300 400 500
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"]);
}
배열로도 불러올 수 있습니다.
결과 확인하기
200
javascript
100
200
javascript
14. 객체 : 데이터 불러오기 : Object.keys()
객체 키값만 불러오는 예제입니다.
{
const obj = {
a: 100,
b: 200,
c: "javascript",
}
console.log(Object.keys(obj));
}
키값만 불러오기때문에 a, b, c가 배열로 출력됩니다.
결과 확인하기
15. 객체 : 데이터 불러오기 : Object.values()
객체 value값만 불러오는 예제입니다.
{
const obj = {
a: 100,
b: 200,
c: "javascript",
}
console.log(Object.values(obj));
}
객체 value값이 배열로 출력됩니다.
결과 확인하기
16. 객체 : 데이터 불러오기 : Object.entries()
entries메서드를 이용해 키와 값을 출력하는 예제입니다.
{
const obj = {
a: 100,
b: 200,
c: "javascript",
}
console.log(Object.entries(obj));
}
Object.entries() 메서드는 JavaScript 객체에서 속성과 해당 값을 [key, value] 쌍의 배열로 반환하는 메서드입니다.
결과 확인하기
1:['b', 200]
2:['c', 'javascript']
17. 객체 : 데이터 불러오기 : Object.assign()
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() 메서드는 JavaScript에서 객체를 병합하거나 복사할 때 사용하는 메서드입니다.
결과 확인하기
18. 객체 : 데이터 불러오기 : 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(obj.hasOwnProperty("javascript")); // false -> 키값만 확인
// in 연산자
console.log("a" in obj);
console.log("b" in obj);
console.log("c" in obj);
console.log("d" in obj);
}
hasOwnProperty()는 JavaScript 객체의 메서드 중 하나로, 해당 객체가 특정 속성을 직접 소유하고 있는지 여부를 확인하는 데 사용됩니다.
결과 확인하기
true
true
false
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 루프는 JavaScript에서 객체의 속성을 반복하면서 해당 속성의 이름 또는 키를 가져오는 데 사용되는 반복문입니다.
결과 확인하기
b : 200
c : javascript
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}; // 키 b의 값을 변경
console.log(obj3);
console.log(obj4);
console.log(obj5);
}
객체 펼침 연산자는 ... 기호를 사용하여 객체 내의 속성을 다른 객체로 복사하거나 합칠 때 사용됩니다.
결과 확인하기
{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);
}
객체 구조 분해 할당은 객체의 속성을 추출하여 변수에 할당하는 기능입니다.
결과 확인하기
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.
XMLHttpRequest 객체를 생성합니다. 이 객체는 웹 페이지와 서버 간의 데이터를 비동기적으로 요청하고 응답을 처리하는 데 사용됩니다.
2.
메서드를 사용하여 HTTP GET 요청을 설정합니다. 이 요청은 지정된 URL에서 JSON 데이터를 가져올 것입니다.
세 번째 매개변수로 true를 전달하여 비동기 요청을 활성화합니다.
3.
XMLHttpRequest 객체의 상태가 변경될 때 호출될 함수를 정의합니다. 상태가 변경될 때마다 이 함수가 실행됩니다.
4.
XMLHttpRequest 객체의 상태(readyState)가 4(완료)이고 HTTP 상태 코드(status)가 200(성공)인 경우에만 코드 블록이 실행됩니다.
이는 서버에서 JSON 데이터를 성공적으로 가져온 경우입니다.
5.
서버에서 받아온 JSON 데이터를 responseText 속성을 통해 문자열 형태로 가져옵니다.
6.
JSON 데이터를 JavaScript 객체로 파싱합니다. JSON.parse 함수를 사용하여 문자열을 객체로 변환합니다.
7.
파싱된 JSON 데이터를 콘솔에 출력하여 확인합니다.
8.
서버에서 오류 응답(200 이외의 상태 코드)을 받은 경우, else if 블록이 실행되어 오류 메시지를 콘솔에 출력합니다.
9.
XMLHttpRequest 객체를 사용하여 실제 요청을 서버로 보냅니다. 이로써 서버에서 JSON 데이터를 가져오게 됩니다.
결과 확인하기
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() 함수를 사용하여 지정된 URL에서 JSON 데이터를 가져옵니다. 이것은 Promise 객체를 반환합니다.
2.
첫 번째 .then() 메서드에서는 서버로부터의 응답(response)를 처리합니다.
response.json()을 호출하여 JSON 데이터를 파싱하고 이를 Promise로 반환합니다.
이로써 다음 .then() 메서드에서 JSON 데이터를 처리할 수 있게 됩니다.
3.
두 번째 .then() 메서드에서는 JSON 데이터(data)를 받아와서 처리합니다. 이 코드에서는 JSON 데이터를 콘솔에 출력하여 확인합니다.
4.
.catch() 메서드에서는 네트워크 요청 또는 JSON 파싱 과정에서 발생할 수 있는 오류(error)를 처리합니다.
오류가 발생한 경우, 콘솔에 오류 메시지를 출력합니다.