01. 변수 : 데이터 저장
변수는 데이터를 저장하는 저장소입니다
var는 동일한 변수를 중복해서 사용이 가능합니다.
{
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은 이미 선언한 변수를 중복해서 선언 할 수 없습니다.
{
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
javascript
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
javascript
연산자 : 변수로 연산이 가능하다.
변수를 이용해서 연산이 가능하고, 연산에는 산술 연산자, 대입 연산자, 비교 연산자, 논리 연산자, 비트 연산자, 삼항 연산자가 있다.
04. 변수 : 지역 변수 + 전역 변수(스코프)
변수의 위치에 따라 값이 달라집니다
{
let x = 100; //전역 변수
let y = 200; //전역 변수
function func(){
x = 300; //전역 변수
let y = 400; //지역 변수 //함수 안에 있어서 에러가 안남
z = "javascript" //위에서 생략했다고 생각해서 값이 나온다.
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;
y = 400;
z = "react"
console.log(x);
console.log(y);
console.log(z);
}
결과 확인하기
Assignment to constant variable
Assignment to constant variable
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
08. 배열 : 데이터 저장(여러개) : 표현방법4
배열은 데이터를 여러개 저장 할 수 있습니다.
{
const arr = [100, 200, "javascript"];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
}
결과 확인하기
200
javascript
10. 객체 : 데이터 저장(키와값) : 표현방법1
객체는 키(key)와값(value)을 저장할 수 있는 구조입니다.
배열보다 좀 더 효율적인 사용이 가능하며 배열의 성질을 가지고 있습니다.
여러 속성을 하나의 변수에 저장하며 데이터를 식별하여 가져올 수 있습니다.
{
const obj = new Object( );
obj[0] = 100;
obj[1] = 200;
obj[2] = "javascript";
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[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 x = 100;
const arr = [100, 200, "javascript"];
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(obj.c + "가 실행되었습니다.")
} // 문자와 객체를 합쳐주는 방식
e: function( ){
console.log(j + "가 실행되었습니다.");
},
f: function( ) {
console.log(this.c + "가 실행되었습니다.");
} //this는 자기자신한테만 쓸 수 있음
}
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); //모두 문자열로 인식하기 때문에 X
obj.d( );
obj.e( );
obj.f( );
}
결과 확인하기
200
300
undefined
javascript
undefined //모두 문자열로 인식하기 때문에 X
javascript가 실행되었습니다.
javascript가 실행되었습니다.
javascript가 실행되었습니다.
++ 식별자, 예약자
식별자는 변수, 함수, 클래스, 모듈 등의 이름을 정의하는데 사용되는 단어입니다.자바스크립트 코드에서 사용하는 이름을 의미합니다.
예약어는 자바스크립트에서 특별한 용도로 예약된 단어입니다.
{
{
//식별자 예시 여기서 a,b,c는 식별자 입니다.
let a = 1;
function b() {}
class c {}
}
{
// 예약어는 변수, 함수, 클래스 이름으로 사용할 수 없음
let if = 10; // SyntaxError: Unexpected token 'if'
function else() {} // SyntaxError: Unexpected token 'else'
class while {} // SyntaxError: Unexpected token 'while'
}
}
자바스크립트에서 사용할 수 있는 식별자 규칙
식별자는 반드시 문자, 숫자, 밑줄(_), 달러 기호($)로 시작해야 합니다.
식별자는 예약어가 아니어야 합니다.
식별자는 대소문자를 구분합니다.
식별자는 최대 255자까지 사용할 수 있습니다.
++ 연산자(전치, 후치)
전치 연산자는 변수의 값을 1 증가시킨 후, 그 값을 반환합니다.
후치 연산자는 변수의 값을 반환한 후, 값을 1 증가시킵니다.
전치 연산자는 변수의 값을 먼저 증가시킨 후, 그 값을 반환합니다.
전치 연산자는 먼저 실행되고, 그 다음에 다른 연산이 수행되지만 후치 연산자는 다른 연산이 먼저 수행되고, 그 다음에 변수의 값을 증가시킵니다.
{
{
var score = 10;
// ++score; //11
// score++; //12
var result = ++score; //11
var result = score++; // 우선순위가 달라서 값이 다르게 나온다.
console.log(result,score);
}
}
결과 확인하기
++ 비트연산자
2진수로 표현된 값에 대해 비트(bit) 단위로 연산을 수행합니다.
//비트 연산자의 종류
& : AND 연산자 : 두 비트가 모두 1인 경우 1을 반환하고, 그 외에는 0을 반환합니다.
| : OR 연산. 두 비트 중 하나 이상이 1인 경우 1을 반환하고, 그 외에는 0을 반환합니다.
^ : XOR 연산. 두 비트가 서로 다른 경우 1을 반환하고, 그 외에는 0을 반환합니다.
~ : NOT 연산. 단항 연산자로, 비트를 반전시킵니다. 0은 1로, 1은 0으로 바뀝니다.
<< : 왼쪽 시프트(shift) 연산. 이진수를 왼쪽으로 지정된 비트 수만큼 이동시킵니다. 오른쪽으로 이동 시 왼쪽 끝자리는 0이 됩니다.
>> : 오른쪽 시프트(shift) 연산. 이진수를 오른쪽으로 지정된 비트 수만큼 이동시킵니다. 오른쪽으로 이동 시 왼쪽 끝자리는 0이 됩니다.
// 예시
{
{
let a = 9;
let b = 11;
let c =a^b; //비트연산자 10진수를 2진수로 바꾸고 계산
console.log(c) // 2
}
{
let num1 =16, num2 = 80;
let result;
result = num1 < num2 ? num1 & num2 : num1 ^ num2; // 조건연산자
console.log(result) // 64
}
}
++ 형변화, typeof()
typeof : 문자인지 숫자인지 구분해줍니다.
= 는 우변에 있는 값을 좌변에 옮깁니다.
피연산자의 데이터 유형을 변환하지 않습니다.
typeof 연산자를 사용하여 반환된 데이터 유형은 원래 데이터 유형과 동일합니다.
{
let x = 100, y = "200", z;
const func =function(){}
document.write(x);
document.write(typeof(x));
document.write(y);
document.write(typeof(y));
y = Number(y);
document.write(typeof(y)); //Number로 형변환
// document.write(func);
// document.write(typeof(func));
}
결과 확인하기
number
200
string
undefined
undefined
function(){}
function