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);
}
결과 확인하기
200
javascript
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);
}
결과 확인하기
200
react
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);
}
결과 확인하기
600
javascriptreact
04. 변수 : 지역 변수 + 전역 변수(스코프)
변수는 데이터를 저장하고, 변경하고, 추가할 수 있습니다
{
let x = 100; // 전역 변수
let y = 200; // 전역 변수
function func(){
x = 300; // 전역 변수
let y = 400; // 지역 변수
z = "javascript";
console.log("함수안"+x); //300
console.log("함수안"+y); //400
console.log("함수안"+z);
}
func();
console.log("함수밖"+x); //300
console.log("함수밖"+y); //200
}
결과 확인하기
400
javascript
300
200
05. 상수 : 데이터 저장 + 데이터 변경(X)
상수는 데이터 저장은 가능하나 변경은 불가능합니다. 상수 (const)는 이미 선언한 상수에 대해 중복 선언이 불가능하며 상수의 값을 재지정 할 수도 없습니다.
{
const x = 100;
const y = 200;
const z = "javascript";
x += 300; // x = x + 300
y += 400;
z += "react";
console.log(x);
console.log(y);
console.log(z);
}
결과 확인하기
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]);
}
결과 확인하기
200
javascript
07. 배열 : 데이터 저장 (여러개) : 표현방법2
여러개의 데이터를 저장할 수 있다.
{
const arr = new Array(100, 200, "javascript");
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
}
결과 확인하기
200
javascript
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]);
}
결과 확인하기
200
javascript
09. 배열 : 데이터 저장 (여러개) : 표현방법4
[ ]를 사용하여 간략히 데이터를 저장할 수 있다.
{
const arr = [100, 200, "javascript"];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
}
결과 확인하기
200
javascript
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]);
}
결과 확인하기
200
javascript
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);
}
결과 확인하기
200
javascript
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);
}
결과 확인하기
200
javascript
13. 객체 : 데이터 저장(키와 값) : 표현방법4
{ }를 사용하여 간략히 데이터를 저장할 수 있다.
{
const obj = {a:100, b:200, c:"javascript"};
console.log(obj.a);
console.log(obj.b);
console.log(obj.c);
}
결과 확인하기
200
javascript
14. 객체 : 데이터 저장 (키와값) : 표현방법5
배열 안에 객체가 있는 방법
{
const obj = [
{a:100, b:200},
{c:"javascript"}
];
console.log(obj[0].a);
console.log(obj[0].b);
console.log(obj[1].c);
}
결과 확인하기
200
javascript
15. 객체 : 데이터 저장 (키와값) : 표현방법6
객체 안에 배열
{
const obj = {
a: 100,
b: [200, 300],
c: {x: 400, y: 500},
d: "javascript"
}
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);
}
결과 확인하기
200
300
400
500
javascript
16. 객체 : 데이터 저장 (키와값) : 표현방법7
키값은 생략되어 있다.
{
const a = 100;
const b = 200;
const c = "javascript";
const obj = {a, b, c};
console.log(a);
console.log(b);
console.log(c);
}
결과 확인하기
200
javascript
17. 객체 : 데이터 저장 (키와값) : 표현방법8
객체 안에 실행문(함수)가 들어갈 수 있다.
{
const j = "javascript";
const obj = {
a: 100,
b: [200, 300],
c: "javascript",
d: function(){
console.log("javascript가 실행되었습니다.");
},
e: function(){
console.log(j + "가 실행되었습니다.");
},
f: function(){
console.log(this.c + "가 실행되었습니다.");
}
}
console.log(obj.a);
console.log(obj.b[0]);
console.log(obj.b[1]);
console.log(obj.b[2]);
console.log(obj.c);
console.log(obj.d);
obj.d();
obj.e();
obj.f();
}
결과 확인하기
200
300
indefined
javascript
X
javascript가 실행되었습니다.
javascript가 실행되었습니다.
javascript가 실행되었습니다.
연산자
{
const a = 10000;
const b = 20000;
// 연산자
console.log(a + b)
console.log(a - b)
console.log(a > b)
console.log(a * b)
console.log(a / b)
console.log(a % b)
let c = 10;
c = "100"
c = 1000;
c += 1000;
console.log(c)
}
결과 확인하기
-10000
false
200000000
0.5
10000
2000
연산자 : 변수로 연산이 가능하다.
변수를 이용해서 연산이 가능하고, 연산에는 산술 연산자, 대입 연산자, 비교 연산자, 논리 연산자, 비트 연산자, 삼항 연산자가 있다.
식별자, 예약자
식별자 : 변수나 함수, 프러퍼티, 함수 매개변수의 이름입니다.
식별자 작성 방식
1. Camel Case 방식
: 여러 단어로 이루어질 경우. 첫 번째 단어는 모두 소문자로 작성하고,
그 다음 단어부터는 첫 문자만 대문자로 작성하는 방식입니다.
numCakeDonuts
2. Underscore Case 방식
: 식별자를 이루는 단어들을 소문자로만 작성하고,
그 단어들은 언더스코어(_)로 연결하는 방식입니다.
num_cake_donuts
예약자 : 프로그램을 작성하는데 있어 필요한 명령문, 자료형 등 미리 컴퓨터가 지정해둔 명칭을 의미하며,
이는 반드시 식별자로 사용하면 안된다.
-var
-function
-typeof
-delete
-with
-const
연산자(전치, 후치), 비트연산자
{
// 연산자(전치, 후치)
var score = 10;
++score; // 11
score++; // 12
var result = score++; // 11
console.log(result, score);
// 비트연산자
let a = 9;
let b = 11;
let c = a^b;
console.log(c) //2
let num1 = 16, num2 = 80;
let result;
result = num1 > num2 ? num1 & num2 : num1 ^ num2; //64
}
결과 확인하기
2
64
연산자(전치, 후치)
연산자 기호(++, --)가 앞에 있으면 전치, 뒤에 있으면 후치가 되는 것입니다. a++ 나 ++a 둘 다 "a 값에 1씩 더한다"는 개념입니다.
다만, 증가(++) 및 감소(--)의 시점에 따라 연산을 수행하는 방식이 다릅니다.
전치 : 변수를 참조하기 전에 제일 먼저 연산을 수행합니다
후치 : 변수를 참조한 이후에 연산을 수행합니다.
비트 연산자는 정수 타입의 데이터를 2진수로 계산하는 연산자입니다.
AND(&) : 둘 다 1일 때 결과가 1이고, 하나라도 1이 아니면 결과가 0이다.
OR(|) : 둘 중 하나라도 1이면 결과가 1이다. 둘다 0일때만 결과가 0이다.
XOR(^) : 비트값이 서로 다를때 결과가 1이다.
NOT(~) : 비트부정연산자, 비트값이 1이면 0으로, 0이면 1로 변환한다.
<< : 이동연산자, 왼쪽으로 바로 이동 후 이동된 곳은 0으로 채운다.
>> : 이동연산자, 오른쪽으로 바로 이동 후 이동된 곳은 해당 부호 비트로 채운다.
>>> : 이동연산자, 오른쪽으로 바로 이동 후 이동된 곳은 무조건 0으로 채운다.
형변환, typeof
{
// String() 문자형으로 변환
console.log(String(3));
console.log(String(true));
console.log(String(null));
// number() 숫자형으로 변환
console.log(Number("3"));
console.log(Number(true));
console.log(Number(null));
// boolean() 참 거짓으로 변환
console.log(Boolean(0)) // false가 되는 경우 (빈문자열, null, undefined, NaN)
// 나머지는 true를 반환합니다.
// type of // 피연산자의 평가 전 자료형을 나타내는 문자열을 반환합니다.
console.log(type of undeclaredVariable);
console.log(type of null);
console.log(type of true);
console.log(type of 27);
console.log(type of {});
console.log(typeof Symbol());
console.log(typeof function() {});
}
결과 확인하기
3
true
null
// number()
3
1
0
// boolean()
false
// type of
undefined
object
boolean
number
object
Symbol
function