01. 변수 : 데이터 저장소
자바스크립트(Javascript)에서 변수는 데이터를 저장하는 저장소입니다.
{
var x = 100; // 변수 x에 100을 저장
var y = 200; // 변수 y에 100을 저장
var z = "javascript"; // 변수 y에 javascript을 저장
console.log(x);
console.log(y);
console.log(z);
}
과거에 사용되던 변수 선언 방식으로, 현재는 잘 사용하지 않습니다.
결과 확인하기
200
javascript
02.변수 : 데이터 저장소 + 데이터 변경
자바스크립트(Javascript)에서 변수는 데이터를 변경하는 것이 가능합니다.
{
let x = 100; // 변수 x에 숫자 100을 저장
let y = 200; // 변수 y에 숫자 200을 저장
let z = "javascript"; // 변수 z에 숫자 javascript를 저장
x = 300; //변수 x에 값을 숫자 300으로 변경
y = 400; //변수 y에 값을 숫자 400으로 변경
z = "jquery" ; //변수 z에 값을 숫자 jquery으로 변경
console.log(x);
console.log(y);
console.log(z);
}
let은 변수를 선언하는 데 사용됩니다. 값이 변경될 수 있습니다. var는 재소환 가능 하지만 let은 불가합니다.
결과 확인하기
400
jquery
03.변수 : 데이터 저장 + 데이터 변경 + 데이터 추가
자바스크립트(Javascript)에서 변수는 데이터를 추가 할 수가 있습니다.
{
let x =100;
let y =200;
let z ="javascript";
x += 100 // x = x + 100;
y += 100 // y = y + 100;
z += "jquery" // z = z + jquery;
console.log(x);
console.log(y);
console.log(z);
}
자바스크립트에서 +=는 덧셈 후 할당(Addition Assignment) 연산자입니다. 이 연산자를 사용하면 변수의 현재 값에 다른 값을 더한 후, 그 결과를 다시 변수에 할당할 수 있습니다.
결과 확인하기
300
javascript jquery
04. 상수 : 데이터 저장 + 데이터 변경 (X)
상수는 데이터 저장이 가능하나 변경은 불가능합니다.
{
const x = 100;
const y = 200;
const z = "javascript";
//x = 200; //TypeError:Assignment to constant variable
console.log(x);
console.log(y);
console.log(z);
}
자바스크립트에서는 const 키워드를 사용하여 상수를 선언할 수 있습니다. const로 선언된 변수는 초기값을 할당한 후에는 그 값을 변경할 수 없습니다
결과 확인하기
const y = 200;
const z = "javascript";
05. 배열 : 데이터 저장(여러개) : 표현방법1 : 배열선언
상수는 데이터 저장이 가능하나 변경은 불가능합니다.
{
const arr = new Array();
arr[0] = 100;
arr[1] = 200;
arr[2] = "javascript";
console.log(arr);
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[3]);
}
자바스크립트에서는 const 키워드를 사용하여 상수를 선언할 수 있습니다. const로 선언된 변수는 초기값을 할당한 후에는 그 값을 변경할 수 없습니다
결과 확인하기
200
javascript
undefined
06. 배열 : 데이터 저장(여러개) : 표현방법2 : 배열 선언과 동시에 초기값 설정
배열은 여러개의 데이터를 하나의 변수에 저장할 수 있습니다. 배열을 선언해서 쓰는 방법입니다.
{
const arr = new Array(100,200,"javascript");
console.log(arr);
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[3]);
}
자바스크립트에서 배열(Array)은 데이터 요소를 저장하는 컨테이너로, 하나의 변수에 여러 개의 값을 순서대로 저장할 수 있습니다.
결과 확인하기
100
200
javascript
undefined
07. 배열 : 데이터 저장(여러개) : 표현방법3 : [] 방식으로 배열 선언
new Array() 생성자를 사용한 배열 선언에서 배열 생성자에 초기값을 지정한 방법입니다.
{
const arr = [];
arr[0] = 100;
arr[1] = 200;
arr[2] = "javascript";
console.log(arr);
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[3]);
}
"new Array" 대신 대괄호를 사용하여 배열을 생성하는 것이 권장됩니다.
결과 확인하기
100
200
javascript
undefined
08. 배열 : 데이터 저장(여러개) : 표현방법4 : [] 방식으로 선언과 동시에 초기값 설정
배열을 생성하는 더 간편한 방법은 배열 리터럴을 사용하는 것입니다. 배열 리터럴은 [ ]를 사용하여 배열을 만드는 방법입니다.(사용빈도수 높음)
{
const arr = [100, 200, "javascript"];
console.log(arr);
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[3]);
}
[]' 안에 곧바로 데이터를 입력할 수 있습니다.
결과 확인하기
100
200
javascript
undefined
09. 배열 : 데이터 저장(여러개) : 표현방법5 : 2차 배열
2차 배열은 배열을 포함한 배열로 구성된 데이터 구조를 나타냅니다. 이는 배열 내부에 또 다른 배열이 있는 형태로, 행과 열을 가지는 표나 격자 형태의 구조를 표현할 때 주로 사용됩니다.
{
const arr = [100, [200,300], ["javascript" , "jquery"]];
console.log(arr[0]);
console.log(arr[0][1]);
console.log(arr[1][0]);
console.log(arr[1][1]);
console.log(arr[2][0]);
console.log(arr[2][1]);
}
[] 안에 곧바로 데이터를 입력할 수 있습니다.
자바스크립트에서 배열 안에 배열을 선언하려면, 배열 리터럴을 사용하여 중첩된 배열을 생성하면 됩니다.
기본적으로 배열의 배열을 만들어 내부 배열을 행으로 간주하고, 각 행의 요소들을 열로 간주합니다.
결과 확인하기
200
300
javascript
jquery
10. 배열 : 데이터 저장(여러개) : 표현방법5 : 배열 구조 분해 할당
리터럴를 이용해 생성자 선언 없이 바로 초기값까지 선언하는 방법이다.(사용빈도수 높음)
{
const arr3 = [100, 200, "javascript"];
const [a, b, c] = arr3;
console.log(a);
console.log(b);
console.log(c);
}
빈 배열이나 초기값을 가지는 배열 모두 요소를 접근하고 변경하거나 배열의 크기를 조작하는게 유용하게 쓰입니다.
배열 구조 분해 할당의 기본 문법은 const [요소1, 요소2, ...] = 배열; 입니다. 여기서 [ ]대괄호 내에 추출하고자 하는 요소의 인덱스를 적어주면 됩니다.
이때 변수 이름은 배열의 인덱스에 해당하는 요소와 일치해야 합니다.
결과 확인하기
200
javacript
11.배열 : 데이터 저장(여러개) : 표현방법7 : 배열 펼침연산자
배열이나 문자열과 같은 이터러블(iterable) 객체를 펼쳐서 개별 요소로 분해하는 데 사용되는 문법입니다. 배열 펼침 연산자는 ... 기호를 사용하여 표현됩니다.
{
const arr1 = [100, 200, "javascript"];
const arr2 = [300, 400, "jquery"];
const arr3 = [...arr1, 500];
console.log(arr1); //100, 200, javascript
console.log(...arr1, ...arr2); //100 200 javascript 300 400 jquery
console.log(...arr3); //100 200 javascript 500
}
배열 펼침 연산자는 배열뿐만 아니라 다른 이터러블 객체에서도 사용할 수 있습니다. 또한 여러 개의 배열을 하나로 합칠 때도 유용하게 사용됩니다
결과 확인하기
100 200 javascript 300 400 jquery
100 200 javascript 500
12. 객체 : 데이터 저장(키와값||속성과 메서드) : 표현방법1 : 객체 선언 후 배열 방식으로 데이터 입력
객체를 선언한 후 데이터를 할당받는 방식입니다. 데이터를 입력할 때 배열 방식도 적용됩니다.
{
const obj = new Object();
obj[0] = 100;
obj[1] = 200;
obj[2] = "javasciprt";
console.log(obj);
console.log(obj[0]);
console.log(obj[1]);
console.log(obj[2]);
}
객체(Object)는 이름-값 쌍의 모음으로 데이터를 저장하고 표현하는데 사용됩니다. 배열 괄호([ ])를 이용해 배열처럼 사용할 수도 있습니다만 이것은 객체라고 하기 어렵습니다. 객체 괄호는 ({ }) 중괄호를 이용합니다. 배열 괄호를 쓸 수 있는 이유는 배열의 상위호환이 객체이기 때문입니다.
결과 확인하기
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);
}
자바스크립트에서 객체를 출력할 때에는 객체 이름 뒤에 .키(속성)을 선언 하게 되면 해당 객체에 있는 해당 키의 값을 출력합니다.
예를 들면 console.log(obj.a);는 객체 obj의 속성 중 a라는 속성의 값을 출력하는 코드입니다.
결과 확인하기
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);
}
배열 리터럴([])을 이용해 배열 선언을 약식으로 할 수 있는 것처럼 객체 또한 객체 리터럴인 ({})을 이용해 약식으로 선언이 가능합니다.
결과 확인하기
200
javascript
15. 객체 : 데이터 저장(키와값||속성과 메서드) : 표현방법4 : {} 방식으로 객체 선언과 동시에 초기값 설정
객체를 약식으로 선언하고 동시에 데이터를 입력합니다.
{
const obj = { a: 100, b: 200, c: "javascript"};
console.log(obj.a); //100
console.log(obj.b); //200
console.log(obj.c); //javascript
}
배열의 약식 선언과 데이터 입력 방법 : const arr = [100, 200, "javasciprt"]
객체의 약식 선언과 데이터 입력 방법 : const obj = { a : 100, b : 200, c : "javascript" };
결과 확인하기
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 obj1 = [
{a: 100, b: 200, c: "javascript"},
{a: 300, b: 400, c: "jquery"}
];
console.log(obj1[0].a); // 100
console.log(obj1[0].b); // 200
console.log(obj1[0].c); // javascirpt
console.log(obj1[1].a); // 300
console.log(obj1[1].b); // 400
console.log(obj1[1].c); // jquery
}
자바스크립트 배열 안에 객체를 생성 할 수 있습니다.
출력 할 때에는 배열 안에 객체가 있는 것이므로 먼저 [ ]을 통해서 몇 번째 배열인지 선언해 주고 그 뒤에 .키(속성)을 표시해서 출력하면 해당 값이 출력 됩니다.
예를 들자면 console.log(obj[0].a); 은 obj 배열의 0번째 요소에 들어 있는 속성들 중에 속성 이름이 a인 값을 출력한다는 뜻 입니다.
결과 확인하기
200
javascript
100
200
javascript
300
400
jquery
17. 객체 : 데이터 저장(키와값||속성과 메서드) : 표현방법6 : 객체안에 배열이 있는 방식
객체 안에 배열를 선언했을때
{
const obj ={
a: [100, 200],
b: [300, 400],
c: "javascript",
d: "jquery"
};
console.log(obj.a[0]); // 100
console.log(obj.a[1]); // 200
console.log(obj.b[0]); // 300
console.log(obj.b[1]); // 400
console.log(obj.c); // javascript
console.log(obj.d); // jquery
}
자바스크립트 객체 안에 배열를 생성 할 수 있습니다.
출력 할 때에는 객체 안에 배열이 있는 것이므로 먼저 .키(속성)을 통해 해당 값을 불러오고 값 안에 저장된 배열[]의 몇 번째 요소를 출력할 것인지 선언하면 해당 결과 값이 출력합니다.
예를 들면 console.log(obj.a[0]);은 obj이라는 객체 안에 a라는 키(속성)의 값에 저장된 배열 중에 0번째 요소를 출력한다는 뜻입니다.
결과 확인하기
200
300
400
javascript
jquery
18. 객체 : 데이터 저장(키와값||속성과 메서드) : 표현방법7 : 객체안에 객체가 있는 방식
{
const obj = {
a: 100,
b: [200, 300],
c: { x: 400, y: 500},
d: "javascript"
}
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
}
자바스크립트 객체 안에 객체를 생성 할 수 있습니다.
출력 할 때에는 객체 안에 객체가 있는 것이므로 먼저 .키(속성)을 통해 해당 값을 불러오고 값 안에 저장된 객체의 해당.
키(속성)을 통해 해당 값을 출력할 것인지 선언하면 해당 결과 값이 출력합니다. 예를 들면 console.log(obj.c.x);은 obj이라는 객체 안에 c라는 키(속성)의 값에 저장된 객체 중 x라는 키(속성)의 값을 출력한다는 뜻입니다.
결과 확인하기
200
300
400
500
javascript
19. 객체 : 데이터 저장(키와값||속성과 메서드) : 표현방법8 : 객체 + 함수가 있는 방식
{
const obj = {
a: 100,
b: [200, 300],
c: {a:400, b:500, c:600},
d: "javascript",
e: function(){
console.log("jquery");
},
f: function(){
console.log(obj.a);
},
g: function(){
console.log(this.a)
}
}
console.log(obj.a);
console.log(obj.b[0]);
console.log(obj.b[1]);
console.log(obj.c.a);
console.log(obj.c.b);
console.log(obj.c.c);
console.log(obj.d);
obj.e();
obj.f();
obj.g();
console.log(obj.c.b);
console.log(obj.b[1] + obj.c.c);
console.log(obj.a + obj.b[0]);
}
자바스크립트 객체 안에 함수를 생성 할 수 있습니다.
e라는 키(속성)에 "jquery"라는 콘솔을 출력하는 함수를 값으로 넣어 e 키(속성)의 값으로 함수를 할당한 것입니다.
f라는 키(속성)에 obj.a의 값을 출력하는 함수를 할당하여 f의 값으로 obj.a의 값 100을 출력시키게 합니다.
즉 obj는 객체 자체를 나타내므로 객체의 속성에 접근할 때 obj.를 사용할 수 있습니다. g라는 키(속성)에는 this.a라는 값을 출력합니다.
this.a는 해당 메소드가 속해 있는 객체를 가리키는 것이므로 this.a는 obj.a와 동일한 역할을 하여 100을 출력하는 것입니다.
객체의 키에 함수를 사용하여 값을 주었을 경우에는 함수 출력 방식을 사용해야합니다. 예를 들자면 obj.e();, obj.f(); 등 실행문으로 출력해야 합니다.
결과 확인하기
200
300
400
500
600
javascript
jquery
100
100
500
900
300
20. 객체 : 데이터 저장(키와값||속성과 메서드) : 표현방법9 : 객체 구조 분해 할당
객체 구조 분해 할당(Object Destructuring Assignment)은 자바스크립트에서 객체의 속성을 추출하여 변수에 할당하는 문법적 기능입니다.
이를 통해 객체의 각 속성을 개별 변수로 분리하여 사용할 수 있습니다.
{
const obj ={
a: 100,
b: 200,
c: "javascript"
};
const {a, b, c} = obj; //전역 변수
console.log(a); //100
console.log(b); //200
console.log(c); //javascript
const obj2 ={
d: 100,
e: {x: 300, y: 400},
f: "javascript"
};
const {d, e:{x, y}, f} = obj2;
console.log(d); //100
console.log(x); //300
console.log(y); //400
console.log(f); //javascript
}
객체 구조 분해 할당을 사용하여 속성의 이름을 변경하거나, 속성이 존재하지 않는 경우 기본값을 설정하는 등의 다양한 활용이 가능합니다.
객체 구조 분해 할당의 기본 문법은 const { 속성1, 속성2, ... } = 객체; 입니다.
{} 중괄호 내에 추출하고자 하는 속성 이름을 적어주면 됩니다.
이때 변수 이름은 객체 내의 속성 이름과 일치해야 합니다. 객체 구조 분해 할당을 사용하면 속성의 값이 해당 변수에 할당됩니다.
결과 확인하기
200
javascript
100
300
400
javascript
21. 객체 : 데이터 저장(키와값) : 표현방법10 : 객체 펼침연산자
객체 펼침 연산자는 JavaScript에서 도입된 문법 중 하나로, 객체의 속성을 복사하여 새로운 객체를 생성하거나,
객체의 속성을 다른 객체에 병합할 때 사용하는 기능입니다.
이 연산자는 주로 객체를 다룰 때 유용하며, 코드를 간결하게 작성하고 객체 간의 작업을 편리하게 처리할 수 있게 도와줍니다.
{
const obj1 = { a: 100, b: 200, c: "javascrtipt" };
const obj2 = { ...obj1, d: "jquery"};
const obj3 = { ...obj1, ...obj2};
console.log(obj1); //a: 100, b: 200, c: javascript
console.log(obj2); //a: 100, b: 200, c: javascript, d: jquery
console.log(obj2.a); //100
console.log(obj2.b); //200
console.log(obj2.c); //javascript
console.log(obj2.d); //jquery
console.log(obj3); //a: 100, b: 200, c: javascript, d: jquery
}
객체 펼침 연산자는 세 개의 점(...)으로 표현되며, 1.객체 병합 (Object Merging): 두 개 이상의 객체를 하나로 병합할 때 사용됩니다. 2.객체 복사 (Object Cloning): 기존 객체의 내용을 그대로 복사하여 새로운 객체를 생성할 때 사용됩니다.
결과 확인하기
a: 100, b: 200, c: javascript, d: jquery
100
200
javascript
jquery
a: 100, b: 200, c: javascript, d: jquery
22. 파일 : 데이터 교환(JSON)
json 데이터를 객체로 변환시킬 수 있으며 객체르 json 데이터로 변환 할 수 있습니다. 데이터 교환(JSON)은 JavaScript Object Notation의 약자로, 데이터를 효과적으로 교환하고 저장하기 위한 경량의 데이터 형식입니다
{
// 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 문자열 형태는 const 변수 = '{"속성": "값"}' 입니다.
JSON 문자열을 객체로 변환(JSON.parse)
JSON.parse()는 JSON 형식의 문자열을 JavaScript 객체로 변환하는 JavaScript의 내장 함수입니다. 이 함수는 JSON 데이터를 파싱하고 객체로 변환하여 사용자가 쉽게 데이터를 조작하고 처리할 수 있도록 합니다.
JSON.parse() 함수에 JSON 형식의 문자열을 인자로 전달하면, 해당 문자열을 분석하여 JavaScript 객체나 배열 등 JSON 데이터가 포함된 구조를 반환합니다. 이 함수를 사용하면 웹 애플리케이션에서 서버로부터 받은 JSON 데이터를 JavaScript에서 사용 가능한 형식으로 변환할 수 있습니다. JSON 문자열을 파싱하는 동안 유효한 JSON 형식이어야 하며, 문법 오류가 있는 경우 예외를 발생시킵니다.
객체를 JSON 문자열로 변환 (JSON.stringify)
JSON.stringify()는 JavaScript 객체를 JSON 형식의 문자열로 변환하는 JavaScript의 내장 함수입니다. 이 함수를 사용하면 JavaScript 객체나 배열과 같은 데이터를 JSON 형식으로 직렬화(serialize)하여 문자열로 만들 수 있습니다.
JSON.stringify() 함수에 JavaScript 객체나 배열을 인자로 전달하면 해당 객체를 JSON 형식의 문자열로 변환하고 반환합니다. 이렇게 생성된 JSON 문자열은 다른 시스템 또는 서버로 전송하거나 저장할 때 주로 사용됩니다. JSON.stringify() 함수는 두 개의 선택적 매개변수를 가질 수 있습니다
SON.stringify() 함수는 주로 데이터 교환 및 저장 시에 JavaScript 데이터를 JSON 형식으로 변환하는 데 사용되며, 반대로 JSON.parse() 함수를 사용하여 JSON 문자열을 JavaScript 객체로 파싱할 수 있습니다.
결과 확인하기
"); //webs // 객체를 json 데이터로 변호나 const person = {name: "webs", age: 30}; const jsonPerson = JSON.stringify(person); document.write(jsonPerson); //'{"name": "webs", "age": "30"}' }
: 변수 종류 :
변수 : 지역변수 + 전역변수
지역변수는 특정 범위 내에서만 접근 가능한 변수로, 변수가 선언된 함수 또는 블록의 스코프(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"를 추가
sconsole.log("함수안:"+ x, y, z);
}
func();
console.log("함수밖2:"+ x, y, z);
}
지역 변수는 특정한 블록(scope) 내에서 선언되고 사용되는 변수를 의미합니다. 이 블록은 주로 함수 내부가 될 수 있습니다. 전역 변수는 프로그램의 어느 곳에서나 접근 가능한 변수를 의미합니다. 이 변수는 어떤 함수나 블록 밖에서 선언되어 프로그램 전체에서 사용할 수 있습니다.
결과 확인하기
100
200
javascript
함수안
300
600
javascriptjquery
함수밖2
100
600
jquery
: 연산자 종류 :
+ 연산자 : 산술 연산자
{
let x = 11
let y = 6
let z = 6
console.log(x+y);
console.log(x-y);
console.log(x*y);
console.log(x/y);
console.log(x%y);
console.log(x%z);
}
| 종류 | 기본형 | 설명 |
|---|---|---|
| + | A+B | 더하기 |
| - | A-B | 빼기 |
| * | A*B | 곱하기 |
| / | A/B | 나누기 |
| % | A%B | 나머지 |
산술 연산자에는 더하기(+), 빼기(-), 곱하기(*), 나누기(/), 나머지(%)가 있습니다.
연산 대상은 데이터가 반드시 2개 있어야합니다.
결과 확인하기
5
66
1.8333333333333333
5
5
+ 문자결합연산자
{
let t1 = "학교종이";
let t2 = "땡땡땡";
let t3 = 8282;
let t4 = "어서 모이자";
let result;
result = t1 + t2 + t3 + t4;
console.log(result);
}
문자 결합 연산자는 프로그래밍 언어에서 문자열을 이어붙일 때 사용되는 연산자입니다.
이 연산자를 사용하면 두 개 이상의 문자열을 하나로 합칠 수 있습니다.
대부분의 프로그래밍 언어에서 문자열 결합 연산자는 + 기호를 사용합니다.
결과 확인하기
+ 연산자 : 대입 연산자
{
let x = 5; // 변수 x에 값 5를 할당
let y = 10; // 변수 y에 값 10을 할당
x = y; // 변수 x에 변수 y의 값을 할당 (x는 이제 10)
}
대입 연산자는 프로그래밍에서 변수에 값을 할당하는데 사용되는 연산자입니다. 변수는 데이터를 저장하는 공간을 의미하며,
변수에 값을 할당함으로써 그 값을 보관하거나 처리할 수 있습니다. 주로 = 기호를 사용합니다.
해석: 위 코드에서 첫 번째 줄과 두 번째 줄에서 변수 x와 y에 각각 값을 할당합니다.
세 번째 줄에서는 대입 연산자인 =를 사용하여 변수 y의 값을 변수 x에 할당합니다. 이제 변수 x의 값은 10이 됩니다.
결과 확인하기
+ 증가 연산자
증가 연산자는 변수의 값을 1 증가시킵니다. 변수에 ++를 붙이면 해당 변수의 값을 1 증가시킵니다.
{
let x = 5;
x++; // x는 이제 6
}
증가 연산자 (++): 변수의 값을 1 증가시킵니다.
감소 연산자 (--): 감소 연산자는 변수의 값을 1 감소시킵니다. 변수에 --를 붙이면 해당 변수의 값을 1 감소시킵니다.
결과 확인하기
+ 삼항 조건 연산자
{
let age = 25;
let message = age >= 18 ? "성인" : "미성년자";
console.log(message); // 만약 age가 18 이상이면 "성인." 출력, 그렇지 않으면 "미성년자." 출력
}
삼항 조건 연산자는 조건에 따라 두 가지 다른 값을 반환하는 데 사용되는 JavaScript와 많은 프로그래밍 언어에서 지원되는 연산자입니다. 다른 이름으로는 "조건 연산자"나 "삼항 연산자"라고도 합니다.
결과 확인하기
+ 비교 연산자
비교 연산자(Comparison Operators)는 두 값을 비교하여 참(true) 또는 거짓(false)을 반환하는 연산자입니다.
{
let a = 7
let b = 8;
let d = "8";
console.log(a == 7); // true (a의 값이 7과 같다)
console.log(a != 10); // true (a의 값이 10과 다르다)
console.log(a < 15); // true
console.log(b > 9); // false
console.log(b >= 5); // true
console.log(a <= 10); // true
console.log(a === 7); // true (a의 값이 7와 데이터 형식과 값이 같다)
console.log(a !== 9); // true (a의 값이 9와 데이터 형식과 값이 다르다.)
console.log(d == 8); // true
console.log(d === 8); // false
}
비교 연산자는 값만을 비교하고 형 변환을 수행하여 비교합니다.
결과 확인하기
true
true
false
true
true
true
true
true
false
+ 논리 연산자
논리적인 조건을 평가하고, 여러 개의 조건식을 결합하여 복합적인 조건을 만들 때 사용되는 연산자입니다.
{
let x = 5;
let y = 10;
console.log(x > 0 && y < 20); //true
console.log(x > 0 || y < 20); //true
console.log(!(x > 0)); //false
}
&&(AND)은 연산자는 값 중에 하나라도 false이 있으면 false이라는 결과값을 내보내고 ||(or)연산자는 값 중에 true가 하나라도 있으면 true를 값으로 반환합니다. !(not)은 실제값이 true라면 결과값으로는 true 반대로 false를 결과값으로 반환합니다.
결과 확인하기
true
false
: 자료형 종류 :
> 자료형 : 숫자
숫자 자료형은 정수와 부동소수점 숫자를 나타냅니다
{
let x = 42;
console.log(x);
}
기본적인 수학 연산(+, -, *, / 등)을 수행할 수 있습니다.
42나 3.14와 같은 숫자는 모두 숫자 자료형에 속합니다.
결과 확인하기
> 자료형 : 문자열
문자열 자료형은 텍스트 데이터를 나타냅니다. 작은따옴표나 큰따옴표로 둘러싸여 있습니다.
{
let x = "hello"
let y = 'world'
let z = 'i\'m lee'
console.log(x); //hello
console.log(y); //world
console.log(z); //i'm lee
}
작은 따옴표안에 작은 따옴표 포함하려면 이스케이프 문자 \를 사용하여 해당 따옴표를 이스케이프해야 합니다.이스케이프 문자를 사용하면 자바스크립트는 문자열 내의 따옴표를 그대로 해석하고 문자열을 제대로 구성할 수 있습니다.
결과 확인하기
world
i'm lee
> 자료형 : 논리
자바스크립트에서의 논리 자료형은 논리적인 참과 거짓을 나타내는 값입니다. 이 자료형은 true와 false 두 가지 값만을 가질 수 있습니다.
{
let x = 10;
console.log(x<20);
console.log(x>15);
}
논리 자료형의 특징으로는 4가지가 있습니다.
1. true(참), false(거짓) 두가지 값만 가질 수 있음
2. 논리 연산자를 통해 조합되어 사용
3. 건문 (if문, switch문 등)에서 조건식으로 사용되어 조건에 따라 코드 블록이 실행되거나 건너뛰게 됨
4. 비교 연산자를 사용하여 논리 자료형을 생성하고 비교
결과 확인하기
false
> 자료형 : null
null은 자바스크립트의 기본 데이터 타입 중 하나로, "값이 없음"을 나타내는 특별한 값입니다. null은 변수가 명시적으로 값이 없음을 나타내기 위해 사용되며, 변수에 대한 초기화나 값의 재할당으로 명시적으로 할당됩니다.
{
let x = null;
const arr = [null, 100, 200];
console.log(x);
console.log(arr);
}
null 자료형의 주요 특징으로는 3가지가 있습니다.
1. 값이 없음
2. null은 자체적으로 "null" 타입을 갖음
3. 변수에 null을 할당하면 해당 변수느 명시적으로 값이 없음을 가리케됨으로써 변수의 초기화 상태나 값이 없을 나타낼수 있음
결과 확인하기
null, 100, 200
> 자료형 : nudefined
undefined는 변수가 선언되었지만 값을 할당받지 않은 상태를 나타냅니다.
{
let x = undefined;
const arr = [100, 200];
console.log(x);
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
}
undefined 자료형의 주요 특징으로는 3가지가 있습니다.
1. 값이 할당되지 않음
2.undefined라는 자체적인 타입을 갖음
3. 변수를 선언만 하고 어떤 값을 할당하지 않은 경우 변수는 암묵적으로 undefined로 초기화 됨
결과 확인하기
100
200
undefined
> 자료형 : Object
Object는 데이터를 구조화하고 표현하기 위해 사용되는 자료형입니다.
{
const person = {
name: "John",
age: 30,
profession: "Developer"
}
console.log(person.name);
console.log(person.age);
console.log(person.profession);
}
JavaScript에서 객체(Object)는 여러 개의 속성(key-value pair)을 포함하는 데이터 구조입니다. 객체는 이름(키)과 값으로 구성된 속성을 가지며, 이러한 속성들은 객체 내에서 특정 순서 없이 저장됩니다.
결과 확인하기
30
Developer
> 자료형 : Array
Arry은 같은 종류의 데이터들을 순차적으로 저장하기 위한 자료형입니다.
{
const numbers = [1, 2, 3, 4, 5];
console.log(numbers);
}
JavaScript에서 배열(Array)은 여러 개의 값을 하나의 변수에 저장하는 자료형입니다. 배열은 순서가 있는 리스트 형태로, 각 값은 인덱스(index)라 불리는 위치에 저장됩니다. 배열은 다양한 종류의 데이터(숫자, 문자열, 객체 등)를 담을 수 있으며, 배열 자체도 변수처럼 다룰 수 있습니다.
결과 확인하기
> 자료형 : function
function은 자바스크립트에서 기능을 정의하고 호출하는 데 사용되는 데이터 타입입니다.
{
function add(a, b) {
return a + b;
}
const result1 = add(6, 7); // 5 + 3 => 8
console.log(result1);
function func(){
document.write("함수가 실행되었습니다.");
}
func();
}
javaScript에서 함수(Function)는 재사용 가능한 코드 블록을 나타내는 자료형입니다. 함수는 특정 작업을 수행하는 코드의 묶음으로, 함수를 정의하고 호출함으로써 코드의 재사용성을 높일 수 있습니다.
결과 확인하기
함수가 실행되었습니다.