- 01. 변수 : 데이터 저장
- 02. 변수 : 데이터 저장 + 데이터 변경
- 03. 변수 : 데이터 저장 + 데이터 변경 + 데이터 추가
- 04. 변수 : 지역 변수 + 전역 변수(스코프)
- 05. 상수 : 데이터 저장 + 데이터 변경(X)
- 06. 배열 : 데이터 저장 (여러 개) : 표현방법1
- 07. 배열 : 데이터 저장 (여러 개) : 표현방법2
- 08. 배열 : 데이터 저장 (여러 개) : 표현방법3
- 09. 배열 : 데이터 저장 (여러 개) : 표현방법4
- 10. 객체 : 데이터 저장(키와 값) : 표현방법1
- 11. 객체 : 데이터 저장(키와 값) : 표현방법2
- 12. 객체 : 데이터 저장(키와 값) : 표현방법3
- 13. 객체 : 데이터 저장(키와 값) : 표현방법4
- 14. 객체 : 데이터 저장(키와 값) : 표현방법5
- 15. 객체 : 데이터 저장(키와 값) : 표현방법6
- 16. 객체 : 데이터 저장(키와 값) : 표현방법7
- 17. 객체 : 데이터 저장(키와 값) : 표현방법8
- 18. 식별자, 예약자
- 19. ++ 연산자
- 20. 비트 연산자
- 21. 형변환, typeof
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
변수
변수는 var 나 let으로 선언합니다.
var는 예전(구) 방식이므로 새로운(신) 방식인 let으로 선언하는 경우가 더 많습니다.
var는 중복 선언이 가능하지만, let은 중복 선언이 불가능합니다.
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
연산자
변수를 이용해서 연산이 가능.
연산자는 산술 연산자, 대입 연산자, 비교 연산자, 논리 연산자, 비트 연산자, 삼향 연산자로 총 6가지가 있다.
+ 연산자를 변수에 사용하면 더해진 값이 결과로 출력되고, 문자에 사용하면 두 값이 연결되어 나오는 연결 연산이 된 값이 출력됩니다.
04. 변수 : 지역 변수 + 전역 변수(스코프)
전역 변수와 지역 변수는 변수의 범위를 나타내는 개념이다.
{
let x = 100; //전역 변수
let y = 200; //전역 변수
function func() {
let x = 300;
y = 400; //변수 앞에 let이 없으면 전역 변수가 됨.
z = "javascript"; //let으로 선언한 적 없지만 전역변수 취급됨.
console.log("함수 안의"+x);
console.log("함수 안의"+y);
console.log("함수 안의"+z);
}
func();
console.log("함수 밖의"+x);
console.log("함수 밖의"+y);
console.log("함수 밖의"+z);
}
결과 확인하기
함수 안의 400
함수 안의 javascript
함수 밖의 100
함수 밖의 400
함수 밖의 javascript
전역 변수와 지역 변수
전역 변수는 어디에서든 접근 가능한 변수를 의미한다.
함수나 블록 안에서 선언되지 않은 경우에 전역 변수가 되며, 전체에서 공유되기 때문에 값을 변경하면 다른 부분에도 영향을 미친다.
지역 벼누는 함수나 블록 { } 안에서 선언된 변수로, 해당 함수나 블록 안에서만 접근 가능하다.
지역 변수는 전역 변수와 달리 해당 영역에서만 유효하기 때문에 변수 이름이 충돌하는 문제를 방지할 수 있다.
함수나 블록 안에 있어도 let이 없다면 전역 변수 취급 되니 주의해야 한다.
또한 함수나 블록 안에 있어도 따로 선언한 적 없는 변수는 전역 변수 취급 된다.
05. 상수 : 데이터 저장O, 데이터 변경 X
상수는 데이터 저장은 가능하나 변경은 불가능합니다.
{
const x = 100;
const y = 200;
const z = "javascript";
x = 300;
y = 400;
z = "react";
console.log(x);
console.log(y);
console.log(z);
}
결과 확인하기
상수
이미 선언한 상수에 대한 중복 선언이 불가능 하며 값을 재지정 할 수도 없다.
상수는 변하지 않는 값으로 let이 아닌 const를 사용.
상수의 값을 재지정하고 출력하면 변경 된 값이 출력되지 않고
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
배열은 여러 데이터를 저장할 수 있습니다.
new Array 선언을 빼고 arr를 사용하여 짧게 선언하는 방법입니다.
{
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
배열
new Array 선언을 빼고 arr를 사용하여 짧고 간단하게 선언하는 방법입니다.
09. 배열 : 데이터 저장(여러 개) : 표현방법4
배열은 여러 데이터를 저장할 수 있습니다.
new Array 선언을 빼고, 여러 번 선언하는 것을 한 줄로 줄인 표현 방법입니다.
{
const arr = [100, 200, "javascript"];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
}
결과 확인하기
200
javascript
배열
arr 선언이 반복되는 것을 줄여 한 줄로 만들 수도 있습니다.
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
객체
객체는 배열의 특징도 가지고 있습니다.
또한 데이터를 식별하여 가져올 수도 있습니다.
객체의 선언은 Object로 합니다.
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
객체
각 데이터의 키와 값을 직접 지정할 수 있습니다.
기본 키인 숫자 [0], [1], [2]가 아니라 a, b, 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);
}
결과 확인하기
200
javascript
객체
new Object 선언을 하지 않고 값을 지정할 수 있습니다.
객체는 중괄호{ }를 사용하여 선언합니다.
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
객체 안의 배열
객체 안에 배열을 넣어 하나의 객체 안에 두 개 이상의 값을 가질 수 있도록 할 수도 있습니다.
객체를 불러오는 방식이 배열의 특징과 (arr[ ])
객체의 특징을 (직접 지정한 키 a,b,c)을 모두 가지고 있습니다.
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
객체 안의 배열
b와 c 같이 객체 안에 배열이 존재하면 대괄호[]안에 키 값을 적어 배열 안의 값을 불러와야 하고
obj.n.x 처럼 x,y를 추가로 주어 값을 불러와야 합니다.
일반 객체를 불러오듯이 obj.b만 적는다면 값이 불러와지지 않고 배열이 불러와지기 때문입니다.
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
객체 : 데이터 값 안의 변수
데이터 값 안에 변수를 저장시킬 수 있습니다.
a 대신에 변수가 저장된 형태로 키 값은 생략합니다.
17. 객체 : 데이터 저장(키와 값) : 표현방법 8
함수가 사용된 객체 표현 방법.
{
const obj = {
a: 100,
b: [200,300],
c: "javascript",
d: function( ){
document.write("javascript가 실행되었습니다.");
};
console.log(obj.a);
console.log(obj.b[0]);
console.log(obj.b[1]);
console.log(obj.c);
obj.d( );
}
}
결과 확인하기
200
300
javascript
javascript가 실행되었습니다.
객체 안의 함수
(X) console.log(obj.b[2]); //undefiend
b의 배열에서는 [2]가 없습니다. 키 값은 0부터 시작하며, 없는 값을 불러오려고 하면 undefiend(값이 설정되지 않음)이라는 메시지가 뜹니다.
(X) console.log(obj.d);
또한 d는 함수가 포함된 실행문이기 때문에 console.log 작성 하지 않습니다.
obj.d( );만 작성해주면 실행문이 출력됩니다.
18. 식별자, 예약자(예약어)
식별자와 예약어의 차이
{
x = 10; //O
word_ = "실행"; //O (특수문자는 언더하이픈, $ 사용 가능)
myFunction = x > y ? x+=2 : y+=3 //예약어 X
Myobj = object() //예약어 X
3x = 10 //숫자 시작할 수 X
word-y = "실행" //하이픈 사용 X
for = 10 //예약어 사용X
}
식별자와 예약어
식별자는 변수, 함수, 클래스 등을 식별하는 이름을 뜻한다.
식별자를 사용할 때 따라야 할 규칙이 있다.
1. 대소문자를 구분할 것. (ex. 소문자 x와 대문자 X는 서로 다른 식별자가 된다)
2. 문자, 숫자, 언더 스코어(_), 달러($)로 이루어질 수 있다.
3. 숫자로 시작할 수 없다.
4. 예약어는 식별자로 사용할 수 없다.
예약어
자바스크립트에서 이미 사용되고 있는 이름으로 식별자로 사용할 수 없는 이름을 의미한다.
for, if, else, while, class, var, let 등이 있다.
이렇게 이미 의미를 가지고 사용되고 있는 단어들은 변수나 함수 이름으로 사용할 수 없다.
19. ++ 연산자
전치 연산자와 후치 연산자
{
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 (a = a+1)
3(b = b+1)
4(c = c+1)
전치 연산자와 후치 연산자
1. 전치 연산자
전치 연산자는 변수 앞에 붙어서 증감 연산을 수행하는 연산자이다.
변수를 증감시킨 후에 그 값을 반환한다.
2. 후치 연산자
후치 연산자는 변수 뒤에 붙어서 증감 연산을 수행하는 연산자이다.
후치 연산자는 먼저 변수를 출력한 후에 변수를 증감시키고 그 값을 반환한다.
원래 result의 값은 9가 되어야 하지만 후치 연산자가 =(등호)보다 우선순위가 낮기 때문에 result의 값이 8로 출력된다.
그러나 console.log(b)에서는 정상적으로 증감 연산된 값이 반영된다.
후치 연산자가 붙은 변수가 연산된 결과를 얻고 싶다면 =(등호)를 사용하지 않고 증감식만 작성해야 한다.
20. 비트 연산자
2진수에 대한 연산을 수행하는 연산자.
{
let a = 9;
let b = 11;
let c = a^b;
console.log(c)
}
결과 확인하기
비트 연산자
비트 연산자의 종류
비트 AND(&) 연산자: 두 비트의 값을 때 1을 반환한다.
비트 OR(|) 연산자: 두 비트의 값이 둘 중 하나라도 1이면 1을 반환한다.
비트 XOR(^) 연산자: 두 비트의 값이 서로 다를 때만 1을 반환한다.
10진수의 수를 2진수로 바꾸는 방법은 숫자를 2로 나누는 것이다.
순서는 다음과 같다.
1. 10진수 값을 2로 나눈 후, 나머지를 숫자의 가장 오른쪽에 적는다.
2. 몫이 0이 될 때까지 1번 과정을 반복합니다.
3. 나온 나머지들을 왼쪽 아래쪽부터 오른쪽 위쪽까지 뒤집은 'ㄴ' 모양으로 거슬러 올라가며 적는다.
2진수는 8자리로 이루어져 있기 때문에 자릿수가 모자라다면 맨 앞에서부터 모자란 자릿수만큼 0을 붙여준다.
예를 들어, 10진수 23을 2로 바꾸어보자면,
23을 2로 나누면 몫이 11이고 나머지가 1이 된다. 따라서 가장 오른쪽에 1을 적는다.
11을 2로 나누면 몫이 5이고 나머지가 1이 된다. 따라서 가장 오른쪽에 1을 적는다.
5를 2로 나누면 몫이 2이고 나머지가 1이 된다. 따라서 가장 오른쪽에 1을 적는다.
2를 2로 나누면 몫이 1이고 나머지가 0이 된다. 따라서 가장 오른쪽에 0을 적는다.
1을 2로 나누면 몫이 0이고 나머지가 1이 된다. 따라서 가장 오른쪽에 1을 적는다.
몫이 0이 되었으므로 반복을 종료한다.
위와 같은 절차를 거치면 10진수 23은 2진수 00010111로 바꿀 수 있다.
a의 값, 9를 2진수로 표현하면 00001001이고, b의 값, 11을 2진수로 표현하면 00001011 이다.
이 두 개의 2진수를 XOR 연산하면
1001^ 1011
-------
0010
-> 오른쪽 첫번째 수는 같으므로 0, 두번째 수는 다르므로 1, 세번째 수는 같으므로 0, 네번째 수는 같으므로 0이 된다.
따라서, 변수 c 에는 0010 이라는 2진수 값이 저장된다.
2진수를 10진수로 변환하는 방법은 2진수의 오른쪽 자릿수부터 2의 0승(거듭제곱), 2의 1승 ······ 2의 7승으로 세어내는 것이다.
1이 존재하는 자릿수의 승수를 계산하여 그 값을 합한 수가 10진수가 된다.
2진수 0010을 2의 1승 자리에 1이 있으므로 10진수 값은 2가 된다. 따라서 console.log(c)에 출력되는 값은 2이다.
거듭제곱은 같은 수를 곱하는 것이다. 2의 0승은 1, 2의 1승은 2, 2의 2승은 2X2, 2의 3승은 2X2X2가 된다. n승만큼 같은 수를 곱한다고 이해하면 쉽다.
21. 형변화, typeof()
변수 안에 저장된 데이터의 형식을 나타내는 명령어와 바꾸는 명령어
{
let x = 100, y = "200", z; //1
document.write(x);
document.write(typeof(x)); //2
y = Number(y); //3
document.write(y);
document.write(typeof(y));
document.write(z);
document.write(typeof(z));
document.write(typeof(func)); //4
}
결과 확인하기
형변화, typeof()
1. z는 변수 선언만 하고 값을 지정하지 않았음. 그렇기에 z는 출력시 전부 undefind로 출력됨.
2. typeof는 변수의 성질을 알려주는 명령어이다.
저장된 변수의 성질이 숫자라면 "number"라는 값을, 문자라면 "string"이라는 명령어를 출력한다.
3. 변수 이름 = Number(변수이름);은 그 변수에 저장된 값의 성질을 숫자로 변경하겠다는 의미의 명령어이다.
형변화 명령어라고 하며, 이를 사용했기 때문에 변수 y에 저장되어 있던 문자 "200"이 숫자 200으로 변경되었다.
4. 선언된 함수가 없기 때문에 함수가 출력되지 않고 undefiend가 출력된다.