01. 변수 : 데이터 저장
자바스크립트에서 변수는 값을 지정하고 참조하는데 사용합니다.
변수를 사용하면 데이터를 저장하고 나중에 해당 데이터를 재사용 할 수
있습니다.
JavaScript에서 let 키워드는 변수를 선언할 때 사용되는 중요한 키워드
중 하나입니다.
2015년에 ECMAScript 6(ES6)가 등장하면서 let은 var와 함께 변수 선언을
위한 새로운 옵션으로 소개되었습니다.
let은 주로 블록 스코프(block scope) 변수를 선언하는 데 사용됩니다.
🚀
{
let x = 100;
let y = 200;
let z = "javascript";
console.log("01. 변수 : 데이터 저장");
console.log(x);
console.log(y);
console.log(z);
}
결과 확인하기
100
200
javascript
02. 변수 : 데이터 저장 + 데이터 변경
가장 기본적인 방법으로, 변수를 사용하여 데이터를 저장하고 변경할 수
있습니다.
변수는 값을 할당하고 해당 값을 참조할 수 있는 식별자입니다.
console.log() 메소드는 개발자 콘솔에 메시지를 출력합니다. 이
메시지는 문자열일 수도 있고, JavaScript 객체일 수도 있습니다.
{
let x = 100;
let y = 200;
let z = "javascript";
x = 300;
y = 400;
z = "zquery"
console.log("02. 변수 : 데이터 저장 + 데이터 변경");
console.log(x);
console.log(y);
console.log(z);
}
결과 확인하기
300
400
zquery
03. 변수 : 데이터 저장 + 데이터 변경 + 데이터 추가
자바스크립트 변수를 사용하여 배열과 객체에 데이터를 추가할 수 있습니다.
{
let x = 100;
let y = 200;
let z = "javascript";
x += 300;
y += 400;
z += "zquery"
console.log("03. 변수 : 데이터 저장 + 데이터 변경 + 데이터 추가");
console.log(x);
console.log(y);
console.log(z);
}
결과 확인하기
400
600
javascriptzquery
04. 상수 : 데이터 저장 + 데이터 변경(x)
자바스크립트에서는 상수를 정의하는 데에는 const 키워드를
사용합니다.
상수는 한 번 정의되면 그 값을 변경할 수 없습니다.
이는 코드의 가독성과 유지 보수성을 향상시키는데 도움이 됩니다.
const는 JavaScript에서 상수를 선언할 때 사용하는 키워드입니다.
한번 선언되면 그 값은 변경할 수 없으며, 블록 스코프를 가집니다.
🚫
let은 재할당이 가능하지만, const는 불가능합니다.
{
const x = 100;
const y = 200;
const z = "javascript";
// x += 300;
// y += 400;
// z += "zquery"
console.log("04. 상수 : 데이터 저장 + 데이터 변경(x)");
console.log(x);
console.log(y);
console.log(z);
}
결과 확인하기
100
200
javascript
05. 배열 : 데이터 저장(여러개) : 표현방법1 : 배열선언
자바스크립트에서 배열은 여러 값을 담을 수 있는 데이터 구조입니다.
배열은 정수형 인덱스를 사용하여 값에 접근할 수 있습니다.
new Array()는 JavaScript에서 배열을 생성하는 한 가지 방법입니다.
배열이란 다양한 데이터를 순서대로 저장할 수 있는 자료구조로,
JavaScript에서는 매우 중요한 역할을 합니다. 📦
{
const arr = new Array();
arr[0] = 100;
arr[1] = 200;
arr[2] = "javascript";
console.log("05. 배열 : 데이터 저장(여러개) : 표현방법1 : 배열선언");
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
}
결과 확인하기
100
200
javascript
06. 배열 : 데이터 저장(여러개) : 표현방법2 : 배열선언과 동시에 초깃값 설정
자바스크립트에서 배열(Array)은 여러 개의 값을 순서대로 저장하는
자료구조입니다.
배열 선언과 동시에 초깃값을 설정할 수 있습니다.
{
const arr = new Array(100, 200, "javascript");
console.log("06. 배열 : 데이터 저장(여러개) : 표현방법2 : 배열선언과 동시에 초깃값 설정");
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
}
결과 확인하기
100
200
javascript
07. 배열 : 데이터 저장(여러개) : 표현방법3 : 리터럴 방식으로 배열을 선언하는 방법
자바스크립트에서 배열을 선언하는 가장 간단하고 직관적인 방법은
리터럴 방식을 사용하는 것입니다.
배열 리터럴은 대괄호 []를 사용하여 배열을 생성하며, 이 안에 원하는
만큼의 요소를 콤마 ,로 구분하여 넣으면 됩니다.
[]를 사용하는 것이 간결하고 읽기 쉬운 코드를 작성하는 데 도움이
됩니다.
예를 들어, var arr = [1, 2, 3];은 new Array(1, 2, 3);와 동일합니다.
{
const arr = [];
arr[0] = 100;
arr[1] = 200;
arr[2] = "javascript";
console.log("07. 배열 : 데이터 저장(여러개) : 표현방법3 : 리터럴 방식으로 배열을 선언하는 방법");
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
}
결과 확인하기
100
200
javascript
08. 배열 : 데이터 저장(여러개) : 표현방법4 : 리터럴 방식으로 배열 선언과 동시의 초깃값 설정
자바스크립트에서는 배열(array)을 다루는 가장 기본이자 간편한 방법 중
하나가 리터럴 방식입니다.
리터럴 방식으로 배열을 선언하는 것은 대괄호 []를 사용하며, 이 때
배열을 선언함과 동시에 초깃값을 설정할 수 있어 매우 편리합니다. 😊
{
const arr = [100, 200, "javascript"];
console.log("08. 배열 : 데이터 저장(여러개) : 표현방법4 : 리터럴 방식으로 배열 선언과 동시의 초깃값 설정");
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
}
결과 확인하기
100
200
javascript
09. 배열 : 데이터 저장(여러개) : 표현방법5 : push() 메서드를 이용한 배열 추가 방법
push() 메서드는 자바스크립트에서 배열의 끝에 하나 이상의 요소를
추가하고, 변경된 배열의 새로운 길이를 반환하는 데 사용됩니다.
📌 이 방법은 배열에 요소를 동적으로 추가할 수 있게 해주며, 매우
편리하고 널리 사용되는 방법 중 하나입니다.
arr.push('Fourth item')은 arr 배열의 끝에 'Fourth item'을
추가합니다.
{
const arr = [100, 200, "javascript"];
arr.push(400);
console.log("09. 배열 : 데이터 저장(여러개) : 표현방법5 : push() 메서드를 이용한 배열 추가 방법");
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[3]);
}
결과 확인하기
100
200
javascript
400
10. 배열 : 데이터 저장(여러개) : 표현방법6 : 다차원 배열
다차원 배열은 2차원 이상의 배열을 의미하며, 배열의 요소로 또 다른
배열을 포함하는 배열입니다.🌐
일반적으로 2차원 배열은 표 형태의 데이터를 다룰 때 유용하며, 3차원
이상의 배열은 더 복잡한 데이터 구조를 필요로 하는 애플리케이션에서
사용됩니다.
{
const arr = [100, [200, 300, [400, 500, [600]]], ["javascript", "zquery"]];
console.log("10. 배열 : 데이터 저장(여러개) : 표현방법6 : 다차원 배열");
console.log(arr[0]);
console.log(arr[1][0]);
console.log(arr[1][1]);
console.log(arr[2][0]);
console.log(arr[2][1]);
console.log(arr[1][2][2][0]);
}
결과 확인하기
100
200
300
javascript
zquery
600
11. 배열 : 데이터 저장(여러개) : 표현방법7 : 배열구조분해할당
배열 구조 분해 할당은 배열의 요소를 쉽고 직관적으로 개별 변수에
할당하는 효율적인 방법입니다.
🚀특히 자바스크립트에서 배열이나 객체로부터 데이터를 추출하고 변수에
할당할 때 매우 유용하게 사용됩니다.
{
const arr = [100, 200, "javascript"];
const [a, b, c] = [100, 200, "javascript"];
console.log("11. 배열 : 데이터 저장(여러개) : 표현방법7 : 배열구조분해할당");
console.log(a);
console.log(b);
console.log(c);
}
결과 확인하기
100
200
javascript
12. 배열 : 데이터 저장(여러개) : 표현방법8 : 배열펼침연산자
javaScript에서 ...arr 구문은 '확장 연산자(Spread Operator)'로 알려져
있으며, 배열이나 객체의 요소를 개별 요소로 확장하는데 사용됩니다.
주로 배열이나 함수의 인자 리스트에서 쓰이죠. 😉
배열이나 객체의 요소를 간편하게 확장하거나, 함수에 매개변수를 전달할
때 사용되는 연산자입니다.
마침표 세 개(...)를 사용하여 표현되며, 간단하지만 매우 유용한 여러
기능을 제공합니다. 📈
{
const arr1 = [100, 200];
const arr2 = [300, 400];
const merge1 = [...arr1, ...arr2];
const merge2 = [...arr1, "javascript", ...arr2, "jquery"];
console.log("12. 배열 : 데이터 저장(여러개) : 표현방법8 : 배열펼침연산자");
console.log(arr1);
console.log(...arr1)
console.log(...arr1, ...arr2)
console.log(merge1)
console.log(merge2)
}
결과 확인하기
[100,200]
100 200
100 200 300 400
[100,200,300,400]
[100,200,'javascript',300,400,'jquery']
13. 객체 : 데이터 저장(키와값) : 표현방법1 : 객체 선언 후 배열 방식으로 데이터 입력
자바스크립트에서는 객체를 이용해 키와 값으로 구성된 데이터를 저장할
수 있습니다.
특히, 객체 선언 후 배열 방식으로 데이터를 입력하는 방법은 다양한
상황에서 유용하게 사용됩니다.😊
객체 선언: 객체를 선언하기 위해서는 중괄호 {}를 사용합니다. 예를
들어, let user = {}와 같이 쓸 수 있습니다.
배열 방식으로 데이터 입력: 객체에 데이터를 입력할 때, 배열처럼
대괄호 []를 사용하여 키를 지정하고 값을 할당할 수 있습니다.
이 방식은 동적으로 키를 생성하거나 변수를 키로 사용할 때 유용합니다.
{
const obj = new Object();
obj[0] = 100;
obj[1] = 200;
obj[2] = "javascript";
console.log("13. 객체 : 데이터 저장(키와값) : 표현방법1 : 객체 선언 후 배열 방식으로 데이터 입력");
console.log(obj[0]);
console.log(obj[1]);
console.log(obj[2]);
}
결과 확인하기
100
200
javascript
14. 객체 : 데이터 저장(키와값) : 표현방법2 : 객체 선언 후 객체 방식으로 데이터 입력
객체를 선언한 후 객체 방식으로 데이터를 입력하는 것은
자바스크립트에서 매우 흔히 사용되는 방법입니다.
이를 통해 간단하게 데이터 구조를 만들고 관리할 수 있습니다. 객체는
여러 개의 속성을 가질 수 있으며, 각 속성은 키(key)와 값(value)의
쌍으로 이루어집니다.
const obj = new Object();를 사용하여 객체를 생성하는 방식은
자바스크립트에서 객체를 초기화하는 또 다른 방법입니다.
이 방식이나 {} (객체 리터럴) 방식 모두 유용하지만, 일반적으로 간결한
{} 리터럴 방식이 더 널리 사용됩니다.
그러나 특수한 경우에 new Object() 방식이 필요할 수도 있습니다.
객체에 데이터를 입력하고 관리하는 기본 원칙은 방식에 상관없이
동일합니다.
{
const obj = new Object();
obj.a = 100;
obj.b = 200;
obj.c = "javascript";
console.log("14. 객체 : 데이터 저장(키와값) : 표현방법2 : 객체 선언 후 객체 방식으로 데이터 입력");
console.log(obj.a);
console.log(obj.b);
console.log(obj.c);
}
결과 확인하기
100
200
javascript
15. 객체 : 데이터 저장(키와값) : 표현방법3 : 리터럴 방식으로 객체를 선언
리터럴 방식으로 객체를 선언한다는 것은 객체를 초기화할 때
중괄호({})를 사용해 객체의 내용을 직접 기술하는 것을 말합니다.
단순히 빈 객체를 생성하는 경우는 const obj = {};와 같이 표현할 수
있으며, 이는 객체 리터럴의 가장 간단한 형태입니다.
주어진 코드에서 객체 obj는 빈 객체로 시작하지만, 이후에 프로퍼티 a,
b, c가 추가됩니다.
이 방법도 유효하지만, 리터럴 방식의 기본적인 의도와는 조금
다릅니다.
리터럴 방식을 이용해 동일한 객체를 선언하려면, 처음부터 객체의
구조와 함께 초기 값을 포함시켜 선언하는 것이 특징입니다.
{
const obj = {};
obj.a = 100;
obj.b = 200;
obj.c = "javascript";
console.log("15. 객체 : 데이터 저장(키와값) : 표현방법3 : 리터럴 방식으로 객체를 선언");
console.log(obj.a);
console.log(obj.b);
console.log(obj.c);
}
결과 확인하기
100
200
javascript
16. 객체 : 데이터 저장(키와값) : 표현방법4 : 리터럴 방식으로 객체를 선언과 동시에 초깃값을 설정
객체 리터럴 방식은 자바스크립트에서 가장 흔하게 객체를 생성하는
방식입니다.
이 방법은 중괄호({})를 사용하여 객체를 직접 선언하며, 객체 내부에는
키와 값의 쌍(즉, 프로퍼티)을 쉼표(,)로 구분하여 나열합니다.
키는 보통 문자열 형식이지만, 자바스크립트에서는 따옴표를 생략할 수
있게 해줍니다. 각 키와 값은 콜론(:)으로 연결됩니다.
객체 리터럴은 객체를 생성하면서 동시에 그 내부에 프로퍼티들을
초기화할 수 있는 간결하고 효율적인 방법을 제공합니다
. 객체
리터럴을 사용하면 코드의 양을 줄일 수 있으며, 객체의 구조를 한눈에
파악하기 쉬워 코드의 가독성도 향상됩니다.
{
const obj = {
a: 100,
b: 200,
c: "javascript"
}
console.log("16. 객체 : 데이터 저장(키와값) : 표현방법4 : 리터럴 방식으로 객체를 선언과 동시에 초깃값을 설정");
console.log(obj.a);
console.log(obj.b);
console.log(obj.c);
}
결과 확인하기
100
200
javascript
17. 객체 : 데이터 저장(키와값) : 표현방법5 : 배열안에 객체가 있는 방식
배열 안에 객체가 있는 방식은 JavaScript에서 자주 사용되며, 복잡한
데이터 구조를 효율적으로 관리할 수 있게 해줍니다.
이 방식은 여러 개의 객체를 배열에 순차적으로 저장함으로써, 객체들의
집합을 쉽게 조작하고 접근할 수 있는 구조를 제공합니다.
각 객체는 배열의 요소로 존재하며, 중괄호({})를 사용하여 객체 리터럴
형태로 표현됩니다.
배열 내부의 객체는 서로 다른 구조를 가질 수도 있고, 동일한
키(속성명)와 값을 가진 객체들의 집합일 수도 있습니다.
배열과 객체의 조합의 장점
* 유연성 및 확장성: 다른 형태의 데이터를 유연하게 담을 수 있으며,
필요에 따라 쉽게 데이터 구조를 확장하거나 수정할 수 있습니다.
* 데이터 관리 효율성: 객체 배열을 사용하면 복잡한 데이터를
구조화하여 관리하기 쉬워집니다. 검색, 필터링, 정렬 등 다양한 데이터
조작 작업을 용이하게 합니다.
* 코드 가독성: 데이터가 구조화되어 있어, 개발자가 코드를 이해하고
작업하기가 더 쉬워집니다.
{
const obj = [
{ a: 100, b: 200, c: "javascript" },
{ a: 300, b: 400, c: "jquery" }
]
console.log("17. 객체 : 데이터 저장(키와값) : 표현방법5 : 배열안에 객체가 있는 방식");
console.log(obj[0].a);
console.log(obj[0].b);
console.log(obj[0].c);
console.log(obj[1].a);
console.log(obj[1].b);
console.log(obj[1].c);
}
결과 확인하기
100
200
javascript
300
400
jquery
18. 객체 : 데이터 저장(키와값) : 표현방법6 : 객체안에 배열이 있는 방식
객체 안에 배열이 있는 방식은 데이터를 구조화하여 관리하는 데 유용한
방법 중 하나로,
다양한 형태의 복잡한 데이터를 조직적으로 저장하고 관리할 수 있게
해줍니다.
이 방식은 특히, 하나의 개체(객체)가 여러 값을 묶어야 할 때 유용하며,
각각의 값이 다양한 속성을 갖고 있을 때도 효과적입니다.
객체의 속성 값으로 배열을 지정하여, 해당 속성에 여러 값을 순차적으로
저장할 수 있습니다.
{
const obj = {
a: 100,
b: [200, 300],
c: "javascript"
}
console.log("18. 객체 : 데이터 저장(키와값) : 표현방법6 : 객체안에 배열이 있는 방식");
console.log(obj.a);
console.log(obj.b);
console.log(obj.b[0]);
console.log(obj.b[1]);
console.log(obj.c);
}
결과 확인하기
100
200,300
200
300
javascript
19. 객체 : 데이터 저장(키와값) : 표현방법7 : 객체안에 객체가 있는 방식
객체 안에 객체가 있는 방식은 복잡한 데이터 구조를 구성하고 관리할 때
매우 유용한 방법입니다.
이러한 방식을 사용하면, 하나의 객체 내부에 다른 객체를 내포하여,
계층적이고 관계적인 데이터를 효율적으로 표현할 수 있습니다.
이는 데이터의 복잡도가 증가함에 따라 관련 정보를 그룹화하고
체계적으로 관리할 수 있게 해줍니다.
객체 내부에 있는 또 다른 객체의 속성에 접근하려면, 일반적으로 점(.)
연산자 또는 대괄호([]) 연산자를 사용하여 접근할 수 있습니다.
객체 안에 객체를 사용하는 장점
*계층적 데이터 표현: 복잡한 데이터 관계를 계층적으로 표현할 수 있어,
데이터의 구조와 관계를 명확히 이해할 수 있습니다.
*데이터의 캡슐화: 관련 데이터를 함께 묶어 관리함으로써 데이터의
캡슐화를 증진시키고, 가독성과 유지보수성을 개선할 수 있습니다.
*재사용성 및 확장성: 내부 객체를 독립적으로 정의하고 사용함으로써,
코드의 재사용성과 시스템의 확장성을 높일 수 있습니다.
{
const obj = {
a: 100,
b: { x: 200, y: 300 },
c: "javascript"
}
console.log("19. 객체 : 데이터 저장(키와값) : 표현방법7 : 객체안에 객체가 있는 방식");
console.log(obj.a);
console.log(obj.b.x);
console.log(obj.b.y);
console.log(obj.c);
}
결과 확인하기
100
200
300
javascript
20. 객체 : 데이터 저장(키와값) : 표현방법8 : 객체 + 함수가 있는 방식
객체와 함수를 함께 사용하는 방식은 객체 지향 프로그래밍에서 매우
중요한 개념입니다.
여기서 객체는 데이터(속성)와 그 데이터를 조작할 수 있는
기능(메서드)을 함께 캡슐화합니다.
이런 방식을 통해 데이터와 그 데이터를 처리하는 로직이 하나의 단위로
묶여 있어, 복잡성을 관리하고 코드의 재사용성과 유지 보수성을 높일 수
있습니다.
객체와 함수를 사용하는 장점
*캡슐화와 추상화: 객체는 관련된 데이터와 함수를 하나로 묶어
관리합니다.
이로 인해 외부에서 객체의 내부 구현을 몰라도, 제공된
인터페이스(메서드)를 통해 객체와 상호작용할 수 있습니다.
*재사용성: 객체와 메서드는 재사용성을 높여줍니다. 같은 기능을 하는
메서드를 여러 객체에서 활용할 수 있게 함으로써, 코드의 중복을 줄이고
유지보수를 용이하게 합니다.
*확장성: 새로운 속성이나 메서드를 추가하여 객체의 기능을 확장하기
쉽습니다. 기존 코드를 크게 변경하지 않고도 새 기능을 추가할 수
있습니다.
함수(function)는 특정 작업을 수행하는 코드의 묶음입니다.
프로그래밍에서 함수는 중요한 역할을 하며, 코드의 재사용성을 높이고,
프로그램의 구조를 조직화하는 데 도움을 줍니다.
함수는 여러 번 호출될 수 있고, 다양한 입력(인자 또는 매개변수)에
대해 특정 출력(반환 값)을 생성합니다.
"this"는 자바스크립트와 같은 객체지향 프로그래밍 언어에서 사용되는
키워드로, 현재 실행중인 객체의 컨텍스트를 가리키는 참조 변수입니다.
{
const obj = {
a: 100,
b: [200, 300],
c: { x: 400, y: 500 },
d: "javascript",
e: function () {
console.log("javascipt가 실행되었습니다.")
},
f: function () {
console.log(obj.d + "가 실행되었습니다.")
},
g: function () {
console.log(this.d + "가 실행되었습니다.")
}
}
console.log("20. 객체 : 데이터 저장(키와값) : 표현방법8 : 객체 + 함수가 있는 방식")
console.log(obj.a)
console.log(obj.b[0])
console.log(obj.b[1])
console.log(obj.c.x)
console.log(obj.c.y)
console.log(obj.d)
obj.e(); //객체안에 콘솔로그를 써서 실행분만 작성
obj.f();
obj.g();
}
결과 확인하기
100
200
300
400
500
javascript
javascript가 실행되었습니다.
javascript가 실행되었습니다.
javascript가 실행되었습니다.
21. 객체 : 데이터 저장(키와값) : 표현방법9 : 객체구조분해할당
객체 구조 분해 할당은 객체의 속성을 해체하여 그 값을 개별 변수에
담을 수 있게 해주는 JavaScript 문법입니다.
이는 코드를 보다 깔끔하고 이해하기 쉽게 만들어줍니다.😉
전달받은 객체나 배열에서 필요한 일부 데이터만 추출해야 할 때
사용됩니다.
const {key1, key2} = object 형태로 구조 분해 할당을 통해 객체의 키에
해당하는 값들을 개별 변수로 가져옵니다.
복잡한 객체나 중첩된 객체에서도 유용하게 사용됩니다.
{
const obj = {
a: 100,
b: 200,
c: "javascript"
}
const { a, b, c } = obj;
console.log("21. 객체 : 데이터 저장(키와값) : 표현방법9 : 객체구조분해할당");
console.log(a)
console.log(b)
console.log(c)
}
결과 확인하기
100
200
javascript
22. 객체 : 데이터 저장(키와값) : 표현방법10 : 객체 펼침연산자
객체 펼침 연산자는 JavaScript에서 사용되는 유용한 기능 중
하나입니다.
이 연산자는 객체 안의 속성들을 펼쳐서 해당 객체의 속성들을 다른
객체에 복사할 수 있게 해줍니다.
이 연산자는 주로 객체를 복제하거나 새로운 객체를 생성할 때 유용하게
사용됩니다.
{
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("22. 객체 : 표현방법10 : 객체 펼침연산자");
console.log(obj1)
console.log(obj2)
console.log(merge1)
console.log(merge2)
}
위 예제에서는 obj1과 obj2라는 두 개의 객체가 있습니다.
이 두 객체를 병합하여 mergedObj라는 새로운 객체를 만들었습니다.
객체 펼침 연산자인 ...를 사용하여 obj1과 obj2의 속성들을 펼쳐서
새로운 객체에 추가했습니다.
결과 확인하기
{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'}
23. 파일 : 데이터 교환(JSON)
JSON(JavaScript Object Notation)은 데이터를 효과적으로 교환하고
저장하기 위한 경량의 데이터 형식입니다.
특히 웹 프로그래밍에서 데이터를 주고받는 데 널리 사용됩니다.
SON은 사람과 기계가 모두 이해하기 쉬운 텍스트 기반 형식으로 데이터를
표현합니다.
JSON 데이터를 JavaScript 객체로 변환하거나 JavaScript 객체를 JSON
데이터로 변환하는 과정에는 몇 가지 차이가 있습니다.
* JSON 데이터를 객체로 변환하는 경우:
JSON 데이터를 JavaScript 객체로 변환할 때는 JSON.parse() 메서드를
사용합니다.
이 메서드는 JSON 형식의 문자열을 JavaScript 객체로 변환합니다.
변환된 JavaScript 객체는 일반적인 JavaScript 객체처럼 속성에
접근하여 사용할 수 있습니다.
* 객체를 JSON 데이터로 변환하는 경우:
JavaScript 객체를 JSON 데이터로 변환할 때는 JSON.stringify()
메서드를 사용합니다.
이 메서드는 JavaScript 객체를 JSON 형식의 문자열로 변환합니다.
변환된 JSON 문자열은 일반적인 문자열처럼 처리됩니다.
{
//01. JSON 데이터 --> 객체 변환
const jsonString = '{"name": "Hwang", "age": 30}';
const jsonObject = JSON.parse(jsonString);
console.log(jsonObject.name);
console.log(jsonObject.age);
}
{
//02. 객체 파일 --> JSON 데이터
const person = { name: "Hwang", age: 30 }
const jsonString = JSON.stringify(person);
console.log(jsonString);
}
주의할 점은 JSON.parse()를 사용할 때는 유효한 JSON 형식의
문자열이어야 하며,
JSON.stringify()를 사용할 때는 문자열로 변환할 수 있는 값이어야
합니다.
그렇지 않으면 오류가 발생할 수 있습니다.
또한, 객체를 JSON 데이터로 변환할 때는 일반적으로 객체의 모든 속성이
JSON으로 변환됩니다.
그러나 JavaScript 객체에는 함수와 같은 메서드와 같이 JSON으로
직렬화할 수 없는 속성이 있을 수 있습니다.
이러한 경우 해당 메서드나 속성은 무시되고 JSON 데이터에 포함되지
않습니다.
결과 확인하기
Hwang
30
{"name":"Hwang,"ang":30}
24. ++ 연산자
연산자는 프로그래밍 언어에서 다양한 작업을 수행하기 위해 사용되는
기호 또는 키워드입니다.
연산자는 피연산자라고 하는 하나 이상의 값에 대해 특정한 동작을
수행하고 그 결과를 생성합니다.
주로 사용되는 연산자들은 다음과 같습니다:
* 산술 연산자: 덧셈(+), 뺄셈(-), 곱셈(* ), 나눗셈(/), 나머지(%) 등의 연산을 수행합니다.
* 대입 연산자: 변수에 값을 할당하는데 사용됩니다. 예를 들어, (=)는 오른쪽의 값을 왼쪽의 변수에 할당합니다.
* 비교 연산자: 두 값의 비교를 수행하여 참(true) 또는 거짓(false)을 반환합니다. 예를 들어, (==), (!=), (>), (<), (>=), (<=) 등이 있습니다.
* 논리 연산자: 논리적인 연산을 수행하여 참(true) 또는 거짓(false)을 반환합니다. 주로 AND(&&), OR(||), NOT(!) 연산자가 사용됩니다.
* 증감 연산자: 변수의 값을 증가(++), 감소(--)시킵니다. 전위 증가(++x), 후위 증가(x++)와 같은 형태로 사용됩니다.
* 비트 연산자: 이진수로 표현된 숫자의 비트 단위 연산을 수행합니다. AND(&), OR(|), XOR(^), 비트 이동(<<, >>) 등이 있습니다.
* 삼항 연산자: 조건식을 평가하여 참일 경우 첫 번째 표현식을 반환하고 거짓일 경우 두 번째 표현식을 반환합니다. 일반적으로 (조건식 ? 표현식1 : 표현식2) 형태로 사용됩니다.
* typeof 연산자: 피연산자의 데이터 유형을 반환합니다.
* instanceof 연산자: 객체가 특정 클래스의 인스턴스인지 여부를 확인합니다.
* 접근 연산자: 객체의 속성이나 배열의 요소에 접근할 때 사용됩니다. 점(.) 연산자와 대괄호([]) 연산자가 있습니다.
25. ++ 자료형
자료형(data type)은 프로그래밍에서 변수나 상수가 가질 수 있는 값의
종류를 나타냅니다.
각각의 자료형은 데이터를 저장하고 처리하는 방식을 결정합니다.
대부분의 프로그래밍 언어에서는 다양한 자료형이 지원되며, 일반적으로
기본 자료형과 복합 자료형으로 구분됩니다.
1. 기본 자료형(Primitive Data Types):
* 정수형(Integer): 정수를 나타냅니다. 보통 정수형의 크기는 해당 프로그래밍 언어나 시스템에 따라 다르지만,일반적으로 정수형은 정수 값만을 표현합니다.
* 실수형(Floating-point): 실수를 나타냅니다. 부동 소수점 방식으로 숫자를 저장하여 실수 값을 표현합니다.
* 문자형(Character): 문자를 나타냅니다. 문자열은 여러 개의 문자로 이루어진 복합 자료형이며, 문자 자체를 나타내는 것은 문자형 자료형입니다.
* 부울형(Boolean): 참(True) 또는 거짓(False)을 나타냅니다.
2. 복합 자료형(Composite Data Types):
* 배열(Array): 동일한 자료형의 요소들을 순차적으로 저장합니다. 각 요소는 인덱스를 통해 접근할 수 있습니다.
* 구조체(Structure): 서로 다른 자료형의 요소들을 묶어서 하나의 자료형으로 만듭니다. 각 요소는 이름을 통해 접근할 수 있습니다.
* 리스트(List): 배열과 유사하지만 크기가 동적으로 변할 수 있습니다. 따라서 리스트의 크기를 미리 지정할 필요가 없습니다.
* 튜플(Tuple): 리스트와 유사하지만 변경할 수 없는(immutable) 요소들을 저장합니다.
* 사전(Dictionary 또는 Map): 키-값 쌍으로 데이터를 저장합니다. 특정 키를 이용하여 값을 검색하거나 수정할 수 있습니다.