01. 변수 : 데이터 저장
자바스크립트(JavaScript)에서 데이터를 저장하는 저장소입니다.
{
let x = 100;
let y = 200;
let z = "javascript"
console.log(x);
console.log(y);
console.log(z);
}
var: 과거에 사용되던 변수 선언 방식으로, 현재는 잘 사용하지 않습니다.
결과 확인하기
200
javascript
02. 변수 : 데이터 저장 + 데이터 변경
자바스크립트(JavaScript)에서 데이터를 저장하고 변경합니다.
{
let x = 100;
let y = 200;
let z = "javascript"
x = 300;
y = 400;
z ="jquery"
console.log(x);
console.log(y);
console.log(z);
}
let: 블록 범위 변수를 선언하는 최신의 방법입니다.
결과 확인하기
400
jquery
03. 변수 : 데이터 저장 + 데이터 변경 + 데이터 추가
자바스크립트(JavaScript)에서 데이터를 저장하고 추가합니다.
{
let x = 100;
let y = 200;
let z = "javascript"
x += 100;
y += 100;
z += "jquery"
console.log(x);
console.log(y);
console.log(z);
}
let: 블록 스코프(block-scoped) 변수를 선언하는 데 사용됩니다. 블록 스코프란 중괄호 {} 내부에서만 변수가 유효한 범위를 가집니다.
결과 확인하기
300
javascriptjquery
04. 상수 : 데이터 저장 + 데이터 변경(x)
자바스크립트(JavaScript)에서 상수는 데이터를 저장할 수 있으나 변경이 불가합니다.
{
const x = 100;
const y = 200;
const z = "javascript"
// x = 300;
// y = 400;
// z = "jquery";
console.log(x);
console.log(y);
console.log(z);
}
상수의 값을 변경하려고 할때, 에러가 뜨면서 데이터변경이 안됩니다.
결과 확인하기
200
javascript
05. 배열 : 데이터 저장(여러개) : 표현방법1 : 배열선언(new Array)
배열을 선언 후 데이터를 할당합니다.
{
const arr = new Array();
arr[0] = 100;
arr[1] = 200;
arr[2] = "javascript"
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
}
배열 인덱스: 배열 요소는 0부터 시작하는 인덱스로 접근됩니다.
결과 확인하기
200
javascript
06. 배열 : 데이터 저장(여러개) : 표현방식2 : 배열 선언과 동시에 초기값 설정(new Array();)
배열을 선언 하고 동시에 데이터를 할당합니다.
{
const arr = new Array(100, 200, "javascript");
console.log(arr); // 100, 200,"javascript"
console.log(arr[0]); // 100
console.log(arr[1]); // 200
console.log(arr[2]); // javascript
console.log(arr[3]); // undefined
}
new Array는 배열 생성자(constructor)입니다. 괄호 안에 넣은 값들은 배열의 초기 요소로 들어가게 됩니다.
결과 확인하기
100
200
javascript
undefined
07. 배열 : 데이터 저장(여러개) : 표현방법3 : 리터럴 방식으로 배열 선언
배열을 약식으로 선언 하고 데이터를 할당합니다.
{
const arr = [];
arr[0] = 100;
arr[1] = 200;
arr[2] = "javascript"
console.log(arr); // 100, 200,"javascript"
console.log(arr[0]); // 100
console.log(arr[1]); // 200
console.log(arr[2]); // javascript
console.log(arr[3]); // undefined
}
undefind는 변수가 값이 할당되지 않았을 때 자동으로 할당되는 기본 값입니다.
결과 확인하기
100
200
javascript
undefined
08. 배열 : 데이터 저장(여러개) : 표현방법4 :리터럴 방식으로 배열 선언과 동시에 초기값 설정
배열을 약식으로 선언 하고 데이터를 할당합니다.
{
const arr = [100, 200, "javascript"];
console.log(arr); // 100, 200,"javascript"
console.log(arr[0]); // 100
console.log(arr[1]); // 200
console.log(arr[2]); // javascript
console.log(arr[3]); // undefined
const arr2 = [[100,200], [300,400], ["javascript","jquery"]];
console.log(arr2[0][0]); // 100
console.log(arr2[0][1]); // 200
console.log(arr2[1][0]); // 300
console.log(arr2[1][1]); // 400
console.log(arr2[2][0]); // javscript
console.log(arr2[2][1]); // jquery
}
arr2는 2차원 배열을 생성하는 예시입니다. 2차원 배열은 배열을 요소로 갖는 배열로, 각 배열은 서로 다른 그룹을 나타내거나 행렬 형태의 데이터를 표현할 때 유용합니다.
결과 확인하기
100, 200,"javascript"
100
200
javascript
jquery
-arr2-
100
200
300
400
javascript
jquery
09. 배열 : 데이터 저장(여러개) : 표현방법5 : 2차 배열
2차원 배열은 배열 안에 또 다른 배열을 포함시킴으로써 구현됩니다.
{
const arr = [100, [200, 300], ["javascript", "jquery"]];
console.log(arr[0]); // 100
console.log(arr[1][0]); // 200
console.log(arr[1][1]); // 300
console.log(arr[2][0]); // javascript
console.log(arr[2][1]); // jquery
}
주의할 점은, 각 행의 길이가 서로 다를 수 있기 때문에 배열의 형태를 확인하고 접근할 때 주의해야 합니다.
결과 확인하기
200
300
javascript
jquery
10. 배열 : 데이터 저장(여러개) : 표현방법6 : 배열 구조 분해 할당
배열 구조 분해 할당(Array Destructuring Assignment)은 배열의 각 요소를 추출하여 개별 변수로 할당하는 자바스크립트의 기능입니다.
{
const arr = [100, 200, "javascript"];
const [a, b, c] = arr;
console.log(a);
console.log(b);
console.log(c);
}
배열 구조 분해 할당은 배열의 요소 값을 쉽게 변수로 분해하여 활용할 수 있는 유용한 자바스크립트 문법입니다.
결과 확인하기
200
javascript
11. 배열 : 데이터 저장(여러개) : 표현방법7 : 배열 펼침연산자
배열 펼침 연산자(Spread Operator)는 배열이나 이터러블한 객체를 전개하여 개별 요소로 분해하는 역할을 합니다.
{
const arr1 = [100, 200, "javascript"];
const arr2 = [300, 400, "jquery"];
const arr3 = [...arr1,500];
console.log(arr1); // 100, 200, javascript
console.log(...arr1); // 100 200 javascript
console.log(...arr1, ...arr2); // 100 200 javascript 300 400 jquery
console.log(...arr3); // 100 200 javascript 500
}
배열 펼침 연산자는 ES6(ES2015)에서 도입되었으며, 현재는 대부분의 브라우저와 Node.js에서 지원됩니다. 이를 통해 코드를 간결하게 작성하고 더 나은 가독성과 유지보수성을 확보할 수 있습니다.
결과 확인하기
100, 200, javascript
100 200 javascript 300 400 jquery
100 200 javascript 500
12. 객체 : 데이터 저장(키와값) : 표현방법1 : 객체 선언 후 배열 방식으로 데이터 입력
객체를 선언한 후 데이터를 할당하는 방식입니다. 데이터를 입력할 때 배열 방식도 적용됩니다.
{
const obj = new Object();
obj[0] = 100;
obj[1] = 200;
obj[2] = "javascript";
console.log(obj[0]);
console.log(obj[1]);
console.log(obj[2]);
}
객체는 여러 속성(또는 프로퍼티)을 그룹화하여 표현하는 자료 구조입니다. 객체는 이름-값 쌍으로 구성된 속성들의 집합이며, 이러한 속성들은 객체 내에서 점 또는 대괄호 표기법을 사용하여 접근할 수 있습니다.
결과 확인하기
200
javascript
13. 객체 : 데이터 저장(키와값) : 표현방법2 :객체 선언 후 객체 방식으로 데이터 입력
객체를 선언한 후 데이터를 할당하는 방식입니다. 데이터를 할당 할때에는 키와 값으로 입력합니다.
{
const obj = new Object();
obj.a = 100;
obj.b = 200;
obj.c = "javascript";
console.log(obj.a);
console.log(obj.b);
console.log(obj.c);
}
new Object();는 JavaScript에서 빈 객체를 생성하는 방법 중 하나입니다. 이 코드는 기본적으로 빈 객체를 생성하여 반환합니다.
결과 확인하기
200
javascript
14. 객체 : 데이터 저장(키와값) : 표현방법3 : 리터럴 방식으로 객체 선언
객체를 약식으로 선언하고 데이터를 할당합니다.
{
const obj = {} ;
obj.a = 100;
obj.b = 200;
obj.c = "javascript";
console.log(obj.a);
console.log(obj.b);
console.log(obj.c);
}
obj.a(키)라고 불리고, 100(값)으로 불린다.
결과 확인하기
200
javascript
15. 객체 : 데이터 저장(키와값) : 표현방법4 :리터럴 방식으로 객체 선언과 동시에 초깃값을 설정
객체를 약식으로 선언하고 동시에 데이터를 할당합니다.
{
const obj = {
a: 100,
b: 200,
c:"javascript"
};
console.log(obj.a);
console.log(obj.b);
console.log(obj.c);
}
객체 리터럴 표기법(Object Literal Notation)은 중괄호 {}를 사용하여 객체를 만들고, 장점으로는 간결함과 직관성,가독성을 가진다.
결과 확인하기
200
javascript
16. 객체 : 데이터 저장(키와값) : 표현방법5 : 배열안에 객체가 있는 방식
배열 안에 객체를 선언했을 때
{
const obj = [
{
a: 100,
b: 200,
c:"javascript"
}
];
console.log(obj[0].a); // 100
console.log(obj[0].b); // 200
console.log(obj[0].c); // javascript
const obj2 = [
{
a: 100,
b: 200,
c:"javascript"
},
{
a: 300,
b: 400,
c: "jquery"
}
];
console.log(obj2[0].a); // 100
console.log(obj2[0].b); // 200
console.log(obj2[0].c); // javascript
console.log(obj2[1].a); // 300
console.log(obj2[1].b); // 400
console.log(obj2[1].c); // jquery
}
배열 안에 객체를 넣는 것은 다차원 데이터 구조를 생성하는 방법 중 하나입니다. 이러한 구조를 사용하면 여러 사람의 정보를 관리하는 것이 간단하고 효율적으로 가능합니다.
결과 확인하기
100
200
javascript
-obj2-
100
200
javascript
300
400
jquery
17. 객체 : 데이터 저장(키와값) : 표현방법6 :객체안에 배열이 있는 방식
객체 안에 배열을 선언했을 때
{
const obj = {
a: 100,
b: [200, 300],
c: "javascript",
};
console.log(obj.a); // 100
console.log(obj.b[0]); // 200
console.log(obj.b[1]); // 300
console.log(obj.c); // javascipt
const obj2 = {
a: 100,
b: {x: 300, y: [400,500]},
c: "javascript",
};
console.log(obj2.a); // 100
console.log(obj2.b.x); // 300
console.log(obj2.b.y[0]); // 400
console.log(obj2.b.y[1]); // 500
console.log(obj2.c); //javascript
}
객체 안에 배열을 선언하는 것은 데이터를 구조화하고 조직화하는데 매우 유용한 방법 중 하나입니다. 이렇게 하면 객체 내의 속성 중 하나가 배열이 되며, 해당 배열 안에 여러 개의 값이 저장될 수 있습니다.
결과 확인하기
100
200
300
javascript
obj2
100
300
400
500
javascript
18. 객체 : 데이터 저장(키와값) : 표현방법7 : 객체안에 객체가 있는 방식
객체 안에 객체를 선언했을 때
{
const obj = {
a: 100,
b: {x: 200, y:300},
c: "javascript",
};
console.log(obj.a); // 100
console.log(obj.b.x); // 200
console.log(obj.b.y); // 300
console.log(obj.c); // javascript
const obj2 = {
a: 100,
b: {x: 200, y:{d: 300, e:{f:400, g: 500}}},
c: "javascript",
};
console.log(obj2.a); // 100
console.log(obj2.b.x); // 200
console.log(obj2.b.y.d); // 300
console.log(obj2.b.y.e.f); // 400
console.log(obj2.b.y.e.g); // 500
console.log(obj2.c); // javascript
}
객체 안에 객체를 넣는 것은 다차원 데이터를 표현하거나 중첩된 정보를 나타내는데 매우 유용합니다. 중첩된 객체를 사용하면 복잡한 정보를 계층적으로 표현하고 다룰 수 있습니다. 이를 통해 데이터를 더 구조화하고 관리하는데 도움이 됩니다.
결과 확인하기
100
200
300
-obj2
100
200
300
400
500
javascript
19. 객체 : 데이터 저장(키와값) : 표현방법8 :객체 + 함수 : 객체 + 함수가 있는 방식
객체안에 함수가 선언했을때
{
const obj = {
a: 100,
b: [200, 300],
c: {x: 400, y: 500},
d: "javascript",
e: function(){
console.log("javascript");
},
f: function(){
console.log(obj.d);
},
g: function(){
console.log(this.d);
},
}
console.log(obj.a); //100
console.log(obj.b[0]); //200
console.log(obj.b[1]); //300
console.log(obj.c.x); //400
console.log(obj.c.y); //500
console.log(obj.d); //javascript
obj.e(); //javascript(함수)
obj.f(); //javascript(함수)
obj.g(); //javascript(함수)
}
객체 내부에서 함수를 선언하면 데이터와 함수가 논리적으로 묶여 유지보수가 용이해지며, 코드의 가독성과 모듈성이 향상됩니다.
결과 확인하기
200
300
400
500
javascript
javascript
javascript
javascript
20. 객체 : 데이터 저장(키와값) : 표현방법9 : 객체 구조 분해 할당
객체 구조를 분해해서 할당할때
{
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: {x: 200, y: 300},
c: "javascript",
};
const {a, b:{x, y}, c} = obj;
console.log(a);
console.log(x); // 200
console.log(y); // 300
console.log(c);
}
객체의 속성 값을 추출하여 개별 변수로 할당하는 방법을 말합니다. 이를 통해 객체의 속성에 쉽게 접근하고 변수로 사용할 수 있습니다.
결과 확인하기
200
javascript
100
200
300
javascirpt
21. 객체 : 데이터 저장(키와값) : 표현방법10 : 객체 펼침연산자
ES6(ES2015)에서 도입된 기능으로, 객체의 속성들을 복사하고 새로운 객체를 생성하는 역할을 합니다.
{
const obj1 = { a: 100, b: 200, c: "javascript"} ;
const obj2 = {...obj1, d: "jquery" } ;
const obj3 = {...obj1, ...obj2};
console.log(obj1);
console.log(obj2);
console.log(obj2.b);
console.log(obj2.c);
console.log(obj2.d);
console.log(obj3);
}
객체 펼침연산자는 객체 복사 및 수정, 객체 병합, 객체 속성 추가, 중첩 객체 펼침를 사용합니다.
결과 확인하기
a: 100, b: 200, c: javascript,d:jquery
200
javascript
jquery
a: 100, b: 200, c: javascript,d:jquery
22. 파일 : 데이터 교환(JSON)
JSON은 데이터를 간결하고 구조화된 형태로 표현하여 데이터 교환과 저장을 쉽게 할 수 있도록 도와줍니다.
{
// json 데이터를 객체로 변환
const jsonString = '{"name": "webs", "age": "30"}';
const jsonObject = JSON.parse(jsonString);
console.log(jsonObject.name); //webs
// 객체를 json 데이터로 변환
const person = {name: "webs", age: 30};
const jsonPerson = JSON.stringify(person);
console.log(jsonPerson); //'{"name": "webs", "age": "30"}'
}
JSON 데이터를 JavaScript 객체로 변환:
JSON.parse() 함수를 사용하여 JSON 문자열을 JavaScript 객체로 변환할 수 있습니다.
주어진 JSON 문자열 jsonString을 파싱하여 jsonObject로 저장합니다.
JavaScript 객체를 JSON 데이터로 변환:
JSON.stringify() 함수를 사용하여 JavaScript 객체를 JSON 형식의 문자열로 변환할 수 있습니다.
주어진 JavaScript 객체 person을 문자열로 직렬화하여 jsonPerson에 저장합니다.
JSON 데이터와 JavaScript 객체 간의 변환을 사용하면 서버와 클라이언트 간에 데이터를 교환하거나 웹 애플리케이션에서 데이터를 다룰 때 매우 편리합니다.
JSON은 데이터를 구조화하고 전송하기 위한 표준 형식 중 하나로 널리 사용되며, 이러한 변환 함수들은 데이터 처리 작업을 단순화하고 효율적으로 수행할 수 있도록
도와줍니다.
결과 확인하기
23. 변수 : 지역변수 + 전역변수
지역변수는 특정 범위 내에서만 접근 가능한 변수로, 변수가 선언된 함수 또는 블록의 스코프(scope) 내에서만 유효합니다. 전역변수는 어떤 함수나 블록에서도 접근 가능한 변수로, 프로그램 전체 범위에서 사용할 수 있습니다.
{
let x = 100; //전역변수
let y = 200; //전역변수
let z = "javascript"; //전역변수
console.log("함수밖1:"+ x, y, z);
function func(){
let x = 300; // 지역변수
y += 400; // 전역변수 y의 값에 400을 추가
z = "jquery"; // 전역변수 z의 값에 문자열 "jquery"를 추가
console.log("함수안:"+ x, y, z);
}
func();
console.log("함수밖2:"+ x, y, z);
}
지역변수를 사용하여 변수의 범위를 좁히고, 필요한 경우에만 전역변수를 사용하는 것이 좋습니다.
결과 확인하기
함수안: 300, 600, javascriptjquery
함수밖2 : 100, 600, jquery
24. 연산자: 산술 연산자
프로그래밍에서 숫자들 간의 기본적인 수학적 연산을 수행하는 데 사용되는 기호나 기능이고, 산술 연산자에는 더하기(+), 빼기(-), 곱하기(*), 나누기(/), 나머지(%)가 있습니다.
{
let x = 15;
let y = 2;
console.log(x+y); // 17
console.log(x-y); // 13
console.log(x*y); // 30
console.log(x/y); // 7.5
console.log(x%y); // 1
}
산술 연산자는 일반적으로 우선순위를 가지며, 수학적인 규칙을 따릅니다. 따라서 복잡한 표현식에서는 연산자 우선순위와 괄호를 올바르게 사용하여 원하는 결과를 얻을 수 있습니다.
| 종류 | 기본형 | 설명 |
|---|---|---|
| + | A+B | 더하기 |
| - | A-B | 빼기 |
| * | A*B | 곱하기 |
| / | A/B | 나누기 |
| % | A%B | 나머지 |
결과 확인하기
13
30
7.5
1
25. 연산자: 문자 결합 연산자
연산 대상 데이터가 문자형 데이터 입니다. 여러 개의 문자를 하나의 문자형 데이터로 결합할 때 사용합니다.
{
let x = "학교종이";
let y = " 땡땡땡 ";
let a = 8282;
let b = " 어서모이자";
console.log(x+y+a+b); // 학교종이 땡땡땡 8282 어서모이자
}
문자형 데이터 + 숫자형 데이터 = 하나의 문자형 데이터 (ex):"100"+200 = "100200";/p>
결과 확인하기
26. 연산자: 대입 연산자
대입 연산자는 변수에 값을 할당하는 데 사용되는 연산자입니다. 이를 통해 변수에 특정 값을 저장하거나, 다른 변수의 값을 복사하여 할당할 수 있습니다.
{
let num1 = 10;
let num2 = 3;
console.log(num1 += num2 ); // 13
console.log(num1 -= num2 ); // 13-3 = 10
console.log(num1 *= num2 ); // 10*3 = 30
console.log(num1 %= num2 ); // 30%3 = 0
}
복합 대입 연산자(+=,-=,*=,/=,%=)는 산술 연산자와 대입 연산자가 복합적으로 적용된 것을 말합니다./p>
결과 확인하기
10
30
0
27. 연산자: 증감 연산자
증가 연산자(++) = 숫자형 데이터를 1씩 증가, 감소 연산자(--) = 숫자형 데이터를 1씩 감소
{
let x = 5;
let y = 10;
x++; // x는 이제 6이 됨
y--; // y는 이제 9가 됨
console.log(x);
console.log(y);
}
전위 증감연산자와 후위 증감연산자가 있습니다.
결과 확인하기
9
28. 연산자: 비교 연산자
두 개의 값을 비교하여 그 결과를 true(참) 또는false(거짓)형태로 반환하는 연산자입니다.
{
//크기 비교(>, <, >=, <=);
console.log(7 > 3);
//동등 비교 (==);
console.log(7 == "7"); // 두 값이 서로 동등한지 확인, 자료형은 무시
//일치 비교 (===);
console.log(7 ==="7"); // 두 값과 자료형이 모두 동일한지 확인
//부등 비교 (!=);
console.log(3 != "7"); // 두 값이 서로 다른지 확인, 자료형은 무시
//불일치 비교 (!==);
console.log(7 !== "7"); // 두 값과 자료형이 모두 다른지 확인
}
비교연산자 ==와!=는 피연산자의 자료형이 비교 연산자의 실행결과에 영향을 미치지 않습니다. ===과 !==는 피연산자 자료형에 따라 결괏값이 달라집니다.
결과 확인하기
true
false
true
true
29. 연산자: 논리 연산자
논리 연산자에는 ||(or), &&(and), !(not)이 있으며, 논리 연산자는 피연산자가 논리형 데이터인 true 또는 false로 결괏값을 반환합니다.
{
let a = true;
let b = false;
let And = a && b;
let Or = a || b;
let NotA = !a;
let NotB = !b;
console.log(And);
console.log(Or);
console.log(NotA);
console.log(NotB);
}
연산자 우선순위
1. ()
2. 단항 연산자 (--,++,!)
3. 산술 연산자(*,/,%,+,-)
4. 비교 연산자(>,>=,<,<=,==,===,!==,!=)
5. 논리 연산자(&&, ||)
6 대입 연산자(=,+=,-=,*=,/=,%=)
결과 확인하기
true
false
true
30. 연산자: 삼항 조건 연산자
조건문을 간단하게 작성할 수 있는 연산자입니다. 조건에 따라 두 가지 중 하나의 값을 선택하고 반환합니다.
{
let a = 20;
let b = 15;
let c = a > b ? "javascirpt" : "hello"
console.log(c); // a > b 가 true 이면 "javascript" 출력 false 이면 "hello" 출력
}
삼항 조건 연산자 구조
condition ? valueIfTrue : valueIfFalse
condition: 평가할 조건식입니다.
valueIfTrue: 조건이 참일 경우 반환할 값입니다.
valueIfFalse: 조건이 거짓일 경우 반환할 값입니다.
결과 확인하기
31. 연산자: 비트 연산자
비트 연산자는 정수형 데이터의 비트 수준(bitwise) 조작을 수행하는 데 사용되는 연산자들을 의미합니다.
{
let a = 5 // 0101
let b = 3 // 0011
//비트연산자 : AND 연산자(&)
console.log(a & b); // 0101 & 0011 = 1 (0001)
//비트연산자 : OR 연산자 (|)
console.log(a | b); // 7 0101 | 0011 = 7 (0111)
//비트연산자 : XOR 연산자 (^)
console.log(a ^ b); // 6 0101 ^ 0011 = 6 (0110)
//비트연산자 : NOT 연산자 (~)
console.log(~a); // a = 0101 = -6 (1010)
//비트연산자 : 왼쪽 시프트 연산자 (<<)
console.log(a << 2) // 0101를 왼쪽으로 2칸 이동하여 20(010100)
//비트연산자 : 오른쪽 시프트 연산자 (>>)
console.log(a >> 2)// 0101 를 오른쪽으로 2칸 이동하여 1 (1)
}
AND 연산자(&) :두 개의 비트가 모두 1인 경우에만 결과 비트가 1이 됩니다. 다른 모든 경우에는 결과 비트는 0이 됩니다.
OR 연산자 (|): 두 개의 비트 중 하나라도 1인 경우 결과 비트가 1이 됩니다.
XOR 연산자 (^): 두 개의 비트가 서로 다른 경우 결과 비트가 1이 됩니다.
NOT 연산자 (~): 비트를 반전시킵니다. 0은 1로, 1은 0으로 바뀝니다.
왼쪽 시프트 연산자 (<<): 특정 수를 왼쪽으로 비트 단위로 이동시킵니다. 이동된 비트는 0으로 채워집니다.
오른쪽 시프트 연산자 (>>): 특정 수를 오른쪽으로 비트 단위로 이동시킵니다. 이동된 비트는 부호 비트에 따라 0 또는 1로 채워집니다.
결과 확인하기
7
6
-6
20
1
32. 자료형 - 숫자
숫자 자료형은 정수와 부동 소수점 숫자(실수)를 모두 나타낼 수 있습니다. 숫자 자료형은 다양한 수학적 연산과 계산을 수행하는 데 사용됩니다.
{
let x = 7;
let y = -5;
let z = 3.14 ;
console.log(x);
console.log(y);
console.log(z);
}
숫자 자료형에는 정수, 부동 소수점 숫자 크게 두가지로 나뉩니다. 정수는 1,2,3 부동 소수점 숫자는 3.14 , 0.123 이고, 자바스크립트에서는 IEEE 754 표준에 따라 부동 소수점 숫자를 표현하며, 64비트를 사용하며 두 부분(부호, 지수, 가수)으로 나누어 표현됩니다.
결과 확인하기
-5
3.14
33. 자료형 - 문자열
텍스트 데이터를 나타내는 데 사용되며, 문자열은 작은따옴표(''), 큰따옴표(""), 또는 백틱(``)으로 감싸져 있습니다.
{
let x = "안녕하세요"
let y = '반갑습니다.'
let z = `수고하셨습니다.`
console.log(x);
console.log(y);
console.log(z);
}
문자열의 특징으로는 불변성(Immutability), 문자 접근, 이스케이프 시퀀스(Escape Sequences), 문자열 연결, 템플릿 리터럴(Template Literals)이 있다.
결과 확인하기
반갑습니다.
수고하셨습니다.
34. 자료형 - 논리
논리적인 참(True) 또는 거짓(False) 값을 표현하는 데 사용됩니다.
{
let x = 7;
console.log(x > 10);
console.log(x < 20);
}
논리 자료형을 사용하여 논리 연산자를 적용하거나 조건문을 평가할 수 있습니다. 주요 논리 연산자로는 && (논리 AND), || (논리 OR), ! (논리 NOT)가 있습니다.
결과 확인하기
true
35. 자료형 - null
값이 없거나 비어있음을 나타내는 특별한 값입니다. 이는 변수가 명시적으로 아무런 값도 가지지 않음을 나타내는 데 사용됩니다.
{
let x = null;
const arr = [null,300,400];
console.log(x);
console.log(arr);
}
null의 특징에는 5가지가 있습니다.
1.값이 없음: null은 값이 명시적으로 비어있음을 나타내므로, 어떤 종류의 값도 가지지 않습니다.
2.타입: null은 자체로 타입을 가집니다. null의 타입은 'object'입니다. 이는 역사적인 이유로 인한 것으로, 실제로는 객체가 아닙니다.
3.비교: null은 undefined와는 다른 개념입니다. null은 명시적으로 값이 비어있음을 나타내는 반면, undefined는 값이 할당되지 않음을
나타냅니다.
4.변수 초기화: 변수를 초기화하지 않거나 값이 없는 경우, 보통 null을 사용하여 명시적으로 변수가 값이 없음을 나타냅니다.
5.명시적 할당: 때로는 프로그래머가 값이 없음을 나타내기 위해 null을 할당합니다.
결과 확인하기
null,300,400
36. 자료형 - undefined
변수가 선언되었지만 아무런 값이 할당되지 않았을 때를 나타내는 값입니다.
{
let x = undefined;
const arr = [200,400]
console.log(x);
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
}
undefined의 특징에는
1.값이 없음: undefined는 변수에 값이 할당되지 않았음을 나타냅니다.
2.타입: undefined도 자체로 타입을 가집니다. undefined의 타입은 'undefined'입니다.
3.변수 선언: 변수를 선언하면, 자바스크립트는 기본적으로 undefined로 초기화합니다.
4.함수 인자: 함수 내에서 파라미터로 선언된 변수에 인자가 전달되지 않으면 해당 변수는 undefined로 설정됩니다.
5.리턴되지 않은 함수: 함수에서 명시적으로 리턴되지 않은 경우에도 함수의 반환값은 undefined가 됩니다.
결과 확인하기
200
400
undefined
37. 자료형 - object
객체는 이름과 값으로 구성된 속성(property)들의 집합이며, 속성의 값으로 함수도 포함할 수 있습니다.
{
const person = {
name: "John",
age: 30,
isStudent: false,
};
console.log(person.name);
console.log(person.age);
console.log(person.isStudent);
}
object의 특징에는
1.속성 (Properties): 객체의 데이터는 속성을 통해 표현됩니다. 속성은 이름과 값으로 구성되며, 속성 이름은 문자열입니다.
2.메서드 (Methods): 객체 내에 함수를 포함할 수 있으며, 이러한 함수를 메서드라고 합니다. 메서드는 객체의 동작을 정의하거나 처리하는 데 사용됩니다.
3.중첩 객체 (Nested Objects): 객체 내에 다른 객체를 속성 값으로 가질 수 있으며, 이로써 복잡한 데이터 구조를 생성할 수 있습니다.
4.속성 접근: 객체의 속성에 접근하기 위해서는 객체이름.속성이름 형식을 사용합니다.
5.속성 추가 및 변경: 객체의 속성은 동적으로 추가하거나 변경할 수 있습니다.
결과 확인하기
30
false
38. 자료형 - Array
여러 개의 값을 하나의 변수에 저장하는 자료구조로, 순서가 있는 리스트 형태의 자료형입니다.
{
const x = [100, 200, 300, 400];
console.log(x);
console.log(x[0]);
}
array의 특징에는
1.순서가 있는 자료구조: 배열의 각 요소는 순서를 가지며, 0부터 시작하는 인덱스를 통해 접근합니다.
2.동적 크기: 배열은 동적으로 크기가 조정될 수 있습니다. 요소를 추가하거나 제거하여 배열의 크기를 변경할 수 있습니다.
3.다양한 데이터 타입: 배열은 다양한 데이터 타입의 값을 포함할 수 있습니다. 숫자, 문자열, 객체, 함수 등 어떤 자료형이든 배열에 저장할 수 있습니다.
4.메서드와 속성: 배열은 다양한 메서드와 속성을 가지며, 배열의 요소를 조작하고 검색하는 데 사용할 수 있습니다. 예를 들어 push(), pop(), shift(),
unshift() 등의 메서드를 활용할 수 있습니다.
결과 확인하기
100
39. 자료형 - Function
코드 블록을 나타내며, 어떤 작업을 수행하거나 계산을 실행하는 데 사용되는 자료형입니다.
{
function add(a, b) {
return a + b;
}
const result1 = add(5, 3); // 5 + 3 => 8
console.log(result1);
function func(){
document.write("함수가 실행되었습니다.");
}
func();
}
function의 특징에는
1.재사용 가능한 코드 블록: 함수는 특정 작업을 수행하는 코드를 하나로 묶어 재사용할 수 있게 합니다.
2.매개변수(Parameter): 함수는 매개변수를 받아들일 수 있습니다. 매개변수는 함수 내에서 사용되는 값으로, 함수 호출 시 전달됩니다.
3.반환값(Return Value): 함수는 작업을 완료한 후 결과를 반환할 수 있습니다. return 문을 사용하여 값을 반환하며, 반환되는 값은 함수 호출 위치에
저장됩니다.
4.함수 표현식: 함수는 변수에 할당될 수 있습니다. 이를 함수 표현식이라고 부르며, 변수에 할당된 함수는 해당 변수를 함수처럼 호출할 수 있습니다.
결과 확인하기
함수가 실행되었습니다.