01. 변수 : 데이터 저장
변수는 데이터를 저장하는 저장소이고 값이 변할 수 있습니다.
{
var x = 100; //변수 x에 숫자 100을 저장함
var y = "200"; //변수 y에 문자 200을 저장함
var z = "javascript"; //변수 z에 문자 "javascript"를 저장함
console.log(x);
console.log(y);
console.log(z);
}
결과 확인하기
여러 개의 변수를 선언할 경우 다음과 같은 방법으로 선언할 수 있습니다.
var num, str, temp;
var num = 10, str = 'javascript', temp = true
02. 변수 : 데이터 저장 + 데이터 변경
변수는 데이터를 저장 할수도 있지만 변경도 가능하다.
{
let x = 100;
let y = 200;
let z = "javascript";
x = 300;
y = 200;
z = "react";
console.log(x);
console.log(y);
console.log(z);
}
결과 확인하기
변수는 새로운 데이터가 저장되면 기존 데이터는 사라집니다.
var num = 0;
num = 10;
document.write(num); // 10
03. 변수 : 데이터 저장 + 데이터 변경 + 데이터 추가
변수는 데이터를 저장하고, 변경하고, 추가할 수 있습니다.
{
let x = 100;
let y = 200;
let z = "javascript";
x += 300; // x = x + 300
y += 400;
z += "react";
console.log(x);
console.log(y);
console.log(z);
}
▶변수명 관련 주의사항
변수명은 띄어쓰기할 수 없습니다.
변수명의 첫 글자에는 숫자나 특수문자가 올 수 없으나 예외적으로 특수문자 중 '_'나 '$'는 사용할 수 있습니다.
예약어(reserved word)는 자바스크립트에서 특별한 용도를 가진 키워드를 의미하며, 변수명으로 사용할 수 없습니다.
변수, 함수, 객체 등을 선언할 때는 변수명, 함수면, 객체명과 같이 이름이 필요합니다. 이러한 이름에 일정한 규칙을 부여하면 코드에 대한 가독성을 높일 수 있습니다. 이를 명명 규칙 이라고 합니다.
04. 변수 : 지역 변수 + 전역 변수(스코프)
변수는 함수 블록{}을 기준으로 변수의 선언 위치에 따라 '전역 변수'와 '지역 변수'로 나누어집니다.
'전역 변수'는 함수 블록{} 밖이나 안에서 자유롭게 사용 가능하지만 '지역 변수'는 함수 블록{} 내에서만 사용할 수 있습니다.
{
function func(){
x = 300; //앞에 let을 붙이지 않으면 전역변수
let y = 400; //지역 변수
z = "javascript"; //전역 변수
function fux(){}
console.log("함수안"+x);-
console.log("함수안"+y);
console.log("함수안"+z);
}
func();
console.log(x);
console.log(y);
console.log(z);
}
결과 확인하기
함수안400
함수안javascript
300
200
javascript
05. 상수 : 데이터 저장 + 데이터 변경(x)
상수는 데이터 저장은 가능하나 변경은 불가능 합니다. 상수(const)는 이미 선언한 상수에 대해 중복 선언이 불가능하며 상수의 값을 재지정 할 수도 없습니다.
{
const x = 100;
const y = 200;
const z = "javascript";
//x = 300; Assignment to constant variable
//y = 400;
//z = "react"
}
결과 확인하기
06. 배열 : 데이터 저장(여러개): 표현방법1
대괄호 안에 여러가지 데이터들을 저장할 수 있게 했다.
{
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]);
}
결과 확인하기
07. 배열 : 데이터 저장(여러개) : 표현방법2
하나의 괄호 안에 다중의 데이터를 저장했다.
{
const arr = new Array(100, 200, "javascript");
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
}
결과 확인하기
08. 배열 : 데이터 저장(여러개) : 표현방법3
대괄호 안에 데이터를 보다 간단하게 저장했다.
{
const arr = [];
arr[0] = 100;
arr[1] = 200;
arr[2] = "javascript";
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
}
결과 확인하기
09. 배열 : 데이터 저장(여러개) : 표현방법4
대괄호 안에 데이터를 저장 함으로써 간단한 정리가 가능하게 되었다.
{
const arr = [100, 200, "javascript"];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
}
결과 확인하기
10. 객체 : 데이터 저장(키와 값) : 표현방법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]);
}
결과 확인하기
11. 객체 : 데이터 저장(키와 값) : 표현방법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);
}
결과 확인하기
12. 객체 : 데이터 저장(키와 값) : 표현방법3
중괄호를 이용하여 객체의 속성 값을 더 쉽게 저장했다.
{
const obj = {};
obj.a = 100;
obj.b = 200;
obj.c = "javascript";
console.log(obj.a);
console.log(obj.b);
console.log(obj.c);
}
결과 확인하기
13. 객체 : 데이터 저장(키와 값) : 표현방법4
간략하게 객체의 속성 값을 중괄호에 저장할 수 있게 되었다.
{
const obj = {a:100, b:200, c:"javascript"};
console.log(obj.a);
console.log(obj.b);
console.log(obj.c);
}
결과 확인하기
14. 연산자
{
const a = 20000;
const b = 40000;
console.log(a + b);
console.log(a - b);
console.log(a > b);
console.log(a * b);
console.log(a / b);
console.log(a % b);
}
결과 확인하기
변수로 연산이 가능하다.
변수를 이용해서 연산이 가능하고, 연산에는 산술 연산자, 대입 연산자, 비교 연산자, 논리 연산자, 비트 연산자, 삼향 연산자가 있다.
15. 객체 : 데이터 저장(키와값): 표현방법5
배열 안에 객체가 있는 방식
{
const obj = [
{a:100, b:200},
{c:"javscript"}
];
console.log(obj[0].a);
console.log(obj[0].b);
console.log(obj[1].c);
}
결과 확인하기
16. 객체 : 데이터 저장(키와값): 표현방법6
객체 안에 배열이 들어가 있는 방식
{
const obj = {
a: 100,
b: [200, 300],
c: {x: 400, y: 500},
d: "javscript"
}
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);
}
결과 확인하기
17. 객체 : 데이터 저장(키와값): 표현방법7
키 값에 변수를 저장함
{
const a = 100;
const b = 200;
const c = "javscript";
const obj = {a, b, c};
console.log(a);
console.log(b);
console.log(c);
}
결과 확인하기
18. 객체 : 데이터 저장(키와값): 표현방법8
객체 안에는 실행문이 들어갈 수 있다.
{
const obj = {
a: 100,
b: [200, 300],
c: "javscript",
d: function(){
console.log("jasvcript가 실행되었습니다.");
}
}
console.log(obj.a);
console.log(obj.b[0]);
console.log(obj.b[1]);
console.log(obj.b[2]); // undifined
console.log(obj.c);
console.log(obj.d); // 이렇게 사용 하면 전체를 문자열로 인식
obj.d();
}
결과 확인하기
19. 예제
함수에서 변수를 함께 실행하는 방법입니다.
{
const obj = {
a: 100,
b: [200, 300],
c: "javscript",
d: function(){
console.log("javscript가 실행되었습니다.");
},
e: function(){
console.log(obj.c + "가 실행되었습니다.");
},
f: function(){
console.log(this.c + "가 실행되었습니다.");
}
}
console.log(obj.a);
console.log(obj.b[0]);
console.log(obj.b[1]);
console.log(obj.c);
obj.d();
obj.e();
obj.f();
}
결과 확인하기
연산자(전치 , 후치)
추가 정리입니다.
전치 연산자는 변수의 값을 증가시키거나 감소시키고, 그 새로운 값을 반환합니다. 이를 통해 변수에 새로운 값을 대입하지 않아도 값이 변경됩니다. 전치 연산자는 변수 앞에 ++ 연산자를 사용하여 표시됩니다.
후치 연산자는 변수의 값을 증가시키거나 감소시키고, 그 이전 값을 반환합니다. 후치 연산자는 변수 뒤에 ++ 연산자를 사용하여 표시됩니다.
{
let a = 1, b = 2, c = 3, result;
result = ++a + b++ + ++c;
console.log(result);
console.log(a);
console.log(b);
console.log(c);
}
결과 확인하기
2
3
4
비트 연산자
비트 연산자는 많이 쓰는 연산자는 아닙니다 기본적인 내용만 확인하고 이런 연산자가 있다는 정도만 알고 넘어가면 됩니다.
비트 연산자를 사용하기 위해선 2진수에 대한 이해가 필요합니다.
{
let a = 5; // 이진수로 101
let b = 3; // 이진수로 011
console.log(a & b); // 1 (이진수로 001)
console.log(a | b); // 7 (이진수로 111)
console.log(a ^ b); // 6 (이진수로 110)
console.log(~a); // -6 (이진수로 11111111111111111111111111111010)
console.log(a << 1); // 10 (이진수로 1010)
console.log(a >> 1); // 2 (이진수로 10)
console.log(-a >>> 1);// 2147483646 (이진수로 01111111111111111111111111111110)
}
결과 확인하기
2
3
4
변수로 연산이 가능하다.
& (AND): 두 비트가 모두 1일 때 1을 반환하고, 그 외의 경우에는 0을 반환합니다.
| (OR): 두 비트 중 하나 이상이 1일 때 1을 반환하고, 그 외의 경우에는 0을 반환합니다.
^ (XOR): 두 비트가 다를 때 1을 반환하고, 같을 때는 0을 반환합니다.
~ (NOT): 비트를 반전시킵니다. 0은 1로, 1은 0으로 변환됩니다.
<< (LEFT SHIFT): 비트를 왼쪽으로 이동시킵니다. 오른쪽에는 0이 채워집니다.
>> (RIGHT SHIFT): 비트를 오른쪽으로 이동시킵니다. 왼쪽에는 부호 비트가 채워집니다.
>>> (UNSIGNED RIGHT SHIFT): 비트를 오른쪽으로 이동시킵니다. 왼쪽에는 0이 채워집니다.