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
javascipt
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
javasciptreact
연산자 : 변수로 연산이 가능하다.
변수를 이용해서 연산이 가능합니다.
연산에는 산술연산자, 대입연산자, 비교연산자, 논리연산자, 비트연산자, 삼항연산자 등이 있습니다.
04. 변수 : 지역 변수 + 전역 변수(스코프)
변수가 적용되는 범위를 나타낸다.
let x = 100;
let y = 200;
function func(){
let x = 300;
y = 400;
z = "javascript"
console.log("함수 안"+x);
console.log("함수 안"+y);
console.log("함수 안"+z);
}
func();
console.log("함수 밖"+x);
console.log("함수 밖"+y);
console.log("함수 밖"+z);
결과 확인하기
함수 밖100 함수 밖400 함수 밖javascript
변수의 적용범위 알아보기
전역변수 : 변수를 지정하면 다른 블록 안에서도 변수가 적용이 된다.
지역변수 : 블록 안에서 지정해주어 블록 안에서만 적용이 된다.
위 예문에서 이미 데이터가 저장된 x에 let을 이용해 함수안에서 재지정 해주었지만 오류가 나지 않는다.
함수 안에서 지정한 데이터가 아닌 기존의 데이터를 변경하는 것은 전역변수이다.
05. 상수 : 데이터 저장 + 데이터 변경불가
상수에 저장한 값은 변경 불가하다.
{
const x = 100;
const y = 200;
const z = "javascript";
x = 300; //Assignment to constant variable. 문구 뜸.
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
javascipt
07. 배열 : 데이터 저장(여러개) : 표현방법2
배열은 자동으로 0부터 시작이기 때문에 arr[number]를 생략가능
{
const arr = new Array(100, 200, "javascript");
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
}
결과 확인하기
200
javascipt
08. 배열 : 데이터 저장(여러개) : 표현방법3
new Array를 생략하고 데이터를 저장하는 방법
{
const arr = [];
arr[0] = 100;
arr[1] = 200;
arr[2] = "javascript"
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
}
결과 확인하기
200
javascipt
09. 배열 : 데이터 저장(여러개) : 표현방법4
new Array와 각각의 번호지정을 생략하고 저장하는 방법
{
const arr = [100, 200, "javascript"];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
}
결과 확인하기
200
javascipt
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
javascipt
11. 객체 : 데이터 저장(키와 값) : 표현방법2
배열 방식이 아닌 a, b, c의 키 값을 주고 데이터를 저장하는 방법
{
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
javascipt
12. 객체 : 데이터 저장(키와 값) : 표현방법3
new Object를 생략하고 데이터 저장가능
{
const obj = {}
obj.a = 100;
obj.b = 200;
obj.c = "javascript";
console.log(obj.a);
console.log(obj.b);
console.log(obj.c);
}
결과 확인하기
200
javascipt
13. 객체 : 데이터 저장(키와 값) : 표현방법4
배열과 마찬가지로 한줄로 데이터를 저장 가능하다.
{
const obj = {a:100, b:200, c:"javascipt"};
console.log(obj.a);
console.log(obj.b);
console.log(obj.c);
}
결과 확인하기
200
javascipt
객체 : 데이터 저장하는 방법
객체에는 해당하는 키에 대한 값을 저장해주어야 하므로
항상 키에 따른 결과값을 저장해주어야 한다.
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
javascipt
15. 객체 : 데이터 저장(키와 값) : 표현방법6
객체 안에 배열을 넣어줄 수도 있다
{
const obj = {
a: 100,
b: [200, 300],
c: {x: 400, y: 500},
d: "javascipt"
};
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
200
400
500
javascipt
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
javascipt
17. 객체 : 데이터 저장(키와 값) : 표현방법8
직접 저장한 객체들을 실행하는 실행문(함수)를 적용하는 방법
저장되지 않은 객체를 지정하면 undefined의 결과값을 가진다
{
const j = "javascipt"
const obj = {
a: 100,
b: [200, 300],
c: "javascript",
d: function(){
console.log("javascipt가 실행되었습니다.")
},
e: function(){
console.log(obj.c + "가 실행되었습니다.")
},
f: function(){
console.log(this.c + "가 실행되었습니다.")
},
g: function(){
console.log(j + "가 실행되었습니다.")
};
}
console.log(obj.a);
console.log(obj.b[0]);
console.log(obj.b[1]);
console.log(obj.b[2]);
console.log(obj.c);
obj.d();
obj.e();
obj.f();
obj.g(); // 실행문에는 console.log를 적지 않는다.
}
결과 확인하기
200
300
undefined
javascipt
javascipt가 실행되었습니다.
javascipt가 실행되었습니다.
javascipt가 실행되었습니다.
javascipt가 실행되었습니다.
함수 (실행문)
변수, 상수, 배열, 객체는 데이터를 저장하고
함수로 저장한 데이터를 출력할 수 있다.
this는 기본적으로 자기자신을 표현한다.
✔✔연산자 (전치, 후치)
연산자의 위치에 따라 달라지는 결과값 확인하기
{
var score = 10;
var result = ++score;
var result = score++;
console.log(result);
console.log(score);
}
{
let hap, j, k, l;
j = k = l = 1;
hap = ++j + k++ + ++l;
console.log(hap);
console.log(j);
console.log(k);
console.log(l);
}
결과 확인하기
12
5
2
2
2
연산자 (전치, 후치) 알아보기
연산자는 위치에 따라 결과값이 달라진다.
'++'연산자가 변수 앞에 오게되면 '='보다 우선순위가 높아 연산 후의 값이 적용이 되지만,
'++'연산자가 변수 뒤에 오게되면 '='보다 우선순위가 낮아 연산 전의 값이 적용이 된다.
그 값을 저장하는 변수에는 연산 전의 값이 적용이 되지만 해당 변수에는 연산이 적용된다.
✔✔비트 연산자
비트연산자의 and, or, xor 알아보기
{
let a = 30, b = 40;
console.log(a&b);
}
{
let a = 30, b = 40;
console.log(a|b);
}
{
let a = 30, b = 40;
console.log(a^b);
}
결과 확인하기
62
54
&(and) |(or) ^(xor) 알아보기
30의 2진수표현 : 00011110
40의 2진수 표현 : 00101000
1번 문제 : 30과 40의 &연산을 해준다. &연산은 이진수를 서로 비교하여 동시에 1일 경우에만 1의 결과를 갖는다.
2번 문제 : 30과 40의 |연산을 해준다. |연산은 이진수를 서로 비교하여 하나라도 1인 경우에 1의 결과를 갖는다.
3번 문제 : 30과 40의 ^연산을 해준다. ^연산은 이진수를 서로 비교하여 서로 같을 때는 0의 값을, 서로 다를 때는 1의 값을 갖는다.
각각의 결과를 다시 10진수로 표현해주면 된다.
✔✔식별자, 예약자
결과 확인하기
✔✔형변환, typeof