00. 연산자
변수는 여러 연산자로 계산을 할 수 있다.
{
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
연산자을 익혀 둡시다.
연산자에는 여러 연산자가 있지만 기본으로 사용하는 산술 연산자와 비교 연산자를 알아두면 유용하게 사용할 수 있습니다.
사칙 연산과 수학에서 배운 비교를 떠올리면 편합니다.
01.변수 : 데이터 저장
변수는 데이터를 저장하는 저장소입니다.
예전에는 var로 변수를 선언했지만 요즘은 let을 사용하는 경우가 많습니다.
{
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 x = 100;'은 변수 x에 숫자 100을 저장함을 'console.log(x)'는 x의 값을 console로 출력함을 의미합니다.
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
변수는 데이터를 저장하고 변경이 가능합니다.
변수을 선언하고 변경할 수 있는데 이때 다시 변수를 선언하는 var나 let을 사용하지 않고 'x = 300;'으로
변수의 데이터를 변경할 수 있습니다. 변수를 다시 선언하게 되면 오류가 나기때문에 주의 해야합니다.
🤔var와 let의 차이
var는 데이터를 두번 저장되게되면 오류메세지 없이 출력이 됩니다.
하지만 let은 데이터를 두번 저장하게 되면 오류 메세지가 출력되는 것을 볼 수 있습니다.
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
저장된 변수에 값을 추가 할 수있습니다.
let x = 100으로 변수에 데이터를 선언 후 데이터를 추가 할 수 있는데 이 때 'x += 으로 300'을 추가 하게되면 'console.log'로 출력시 100+300이 된 값이 출력됩니다.
x +=300은 x = x + 300라는 뜻입니다
04. 변수 : 지역 변수 + 전역 변수 (스코프)
변수는 위치에 따라서 영향을 줍니다.
{
let x = 100; //전역 변수 : 함수와 다른 출력문에까지 영향을 수는 변수
let y = 200; //전역 변수
function func(){
// x = 300; // 전역 변수 변경 : 변수를 변경이 가능하지만 아무리 함수 안에 있어도 선언을 다시하지 않고 변경만 한다면 전역변수입니다.
let x = 300; // 지역 변수 : 함수 안에 선언된 변수로 함수 밖에 영향울 주지 못한다.
let y = 400;
z = "javascript" // 전역 변수입니다.: let같이 변수 선언이 없어도 생략으로 받아 드려 사용 가능하지만 전역 변수로 인식합니다.
console.log("함수안"+x);
console.log("함수안"+y);
console.log("함수안"+z);
};
func();
console.log("함수밖"+x);
console.log("함수밖"+y);
console.log("함수밖"+z);
}
결과 확인하기
지역변수와 전역변수
😖지역 변수: 함수 내부에서 선언된 변수로, 해당 함수 내부에서만 사용할 수 있습니다. 함수 실행이 끝나면 지역 변수는 소멸되며, 다시 사용할 수 없습니다.
😖전역 변수: 함수 외부에서 선언된 변수로, 모든 함수에서 사용할 수 있습니다. 스크립트가 실행되면 생성되고, 스크립트가 종료될 때까지 유지됩니다. 전역 변수는 어디서든 접근할 수 있으므로, 변수 이름이 같은 경우 충돌이 발생할 수 있습니다.
04. 상수 : 데이터 저장 + 데이터 변경(x)
상수는 데이터 저장은 가능하나 변경은 불가능합니다.
{
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);
}
결과 확인하기
200
javascript
데이터 변경과 추가가 불가능한 상수
상수는 데이터를 저장 할 수 있지만 변경 할수 없는 데이터 형으로 만약 x += 으로 데이터를 추가한다면 ‘Assignment to constant variable.’라는 창이 뜨면서 결과가 뜨지 않습니다 상수를 사용할 땐 데이터를 변경, 추가 할 필요없을 상황에서 사용하는 것이 좋습니다.
05. 배열 : 데이터 저장(여러개): 표현방법1
배열은 데이터를 배열요소(element)로 저장하고 인덱스(index)로 찾아내는 정렬된 값의 집합입니다.
배열안에 데이터 여러개를 저장하고 그걸 검색해서 꺼낸다고 생각하시면 됩니다.
배열안에 저장하고 출력하는 방법에는 여러개가 있습니다.
{
const arr = new Array();
arr[0] = 100; // 0은 인덱스, 100은 엘레멘트입니다.
arr[1] = 200; // 1은 인덱스, 200은 엘레멘트입니다.
arr[2] = "javascript" // 2은 인덱스, "javascript"은 엘레멘트입니다.
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
}
결과 확인하기
200
javascript
배열의 가장 기본적인 표현법
배열에서 데이터를 선언할 때 'arr[0] = 100;'에서의 0은 인덱스로 값을 찾을 수 있는 번호입니다. 배열의 0번째 인덱스에 100이라는 숫자를 저장하여 console.log(arr[0]);로 출력하게 됩니다.
06. 배열 : 데이터 저장(여러개): 표현방법2
자바스크립트에서는 중복되는 코드를 한줄로 줄이는 속기법들이 있습니다.
데이터를 저장하는 코드도 중복된다면 줄일 수 있습니다.
위 방법에는 중복되는 값 배정 코드를 한줄로 줄일 수있습니다.
{
const arr = new Array(100, 200, "javascript");
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
}
결과 확인하기
200
javascript
배열의 다른 표현법
new Array로 받은 배열의 요소들은 자연스럽게 순서가 정해져 있어 출력할때 0부터 시작 된다는 것을 기억해야합니다.
07. 배열 : 데이터 저장(여러개): 표현방법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
javascript
배열의 3번째 표현법
new Array로 배열 선언하는 방법이 아닌 []로 배열을 선언하여 그 안에 값을 넣는 방식입니다.
08. 배열 : 데이터 저장(여러개): 표현방법4
위 방법에서 중복되는 값 배정코드와 new Array로 배열 선언하는 코드를 줄여 한줄로 만들 수 있다.
{
const arr = [100, 200, "javascript"];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
}
결과 확인하기
200
javascript
배열의 4번째 표현법
값을 선언하여 저장하는 코드를 모두 없애고 배열과 데이터를 한번에 선언하고 저장하는 방법입니다. 지금까지 중에 코드가 가장 짧은 방식입니다.
09. 객체 : 데이터 저장(키와값): 표현방법1
지금까지 배열에서는 아이템에 대한 식별자(검색어)를 인덱스라고 했다면 객체에서의 식별자는 key라고 합니다.
배열과 비슷한 방법으로 표현하지만 new object를 선언하여 데이터를 저장하는 방법입니다.
{
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라는 단어를 사용하여 객체에 저장하고 있습니다. 배열과 비슷한 모습을 하였습니다.
10. 객체 : 데이터 저장(키와값): 표현방법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
객체의 또다른 표현법
객체에서는 출력문을 출력할때 []없이 다른 방법으로 데이터를 호출 할 수 있습니다.
11. 객체 : 데이터 저장(키와값): 표현방법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
javascript
객체의 3번째 표현법
new object를 삭제하고 {}을 사용하여 객체를 저장할 수있습니다.
12. 객체 : 데이터 저장(키와값): 표현방법4
변수 선언을 없애고 객체 선언에 한번에 표현할 수 있습니다.
{
const obj = {a: 100, b: 200, c: "javascript"}
console.log(obj.a);
console.log(obj.b);
console.log(obj.c);
}
결과 확인하기
200
javascript
객체의 4번째 표현법
변수 선언을 모두 없애고 객체 선언에 한번에 표현할 수있습니다.
객체를 선언할 때 가장 짧고 간단한 표현법입니다.
13. 객체 : 데이터 저장(키와값): 표현방법5
배열안에 객체를 넣을 수 있습니다.
{
const obj = [
{a: 100, b: 200},
{c: "javascript"}
];
console.log(obj[0].a); // 첫번째 배열에 a의 객체를 출력
console.log(obj[0].b);
console.log(obj[1].c);
}
결과 확인하기
200
javascript
객체의 5번째 표현법
변수 선언할 때 배열안에 다른 배열과 객체를 넣어 표현하는 방법도 있습니다.
14. 객체 : 데이터 저장(키와값): 표현방법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
객체의 6번째 표현법
반대로 변수 선언할 때 객체 안에 다른 배열과 객체를 넣어 표현할 수도 있습니다.
15. 객체 : 데이터 저장(키와값): 표현방법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
객체의 7번째 표현법
객체안에 데이터를 값으로 넣는 것이 아닌 선언된 변수를 넣어 활용하여 출력 할 수있습니다.
16. 객체 : 데이터 저장(키와값): 표현방법8
함수를 활용하여 값을 출력할 수 있습니다.
{
//함수 내용 포함
const obj = {
a: 100,
b: [100,300],
c: "javascript",
d: function(){
console.log("javascript가 실행되었습니다.") // 함수 출력1
},
e: function(){
console.log(obj.c+"가 실행되었습니다.") // 함수 출력2
},
f: function(){
console.log(this.c+"가 실행되었습니다.") // 함수 출력3
}
}
console.log(obj.a);
console.log(obj.b[0]);
console.log(obj.b[1]);
// console.log(obj.b[2]); // undefined뜸
console.log(obj.c);
// console.log(obj.d); // ' document.~' 까지 전부다 문자로 인식
obj.d(); // 객체를 출력
obj.e();
obj.f();
}
결과 확인하기
100
300
javascript
javascript가 실행되었습니다.
javascript가 실행되었습니다.
javascript가 실행되었습니다.
객체의 8번째 표현법
함수를 객체에 저장하여 출력하는 방식으로 객체의 값을 함수로 다시 불러 낼 수도 있습니다.
++식별자, 예약어
식별자 : 식별자(identifier)는 자바스크립트 코드에서 변수, 함수, 메서드, 클래스 등의 이름으로 사용되는 단어입니다.
예약어 : 예약어(reserved word)는 자바스크립트에서 이미 특별한 의미가 부여된 단어입니다.
{
// 식별자
var myVariable;
function myFunction() {
// ...
}
class MyClass {
// ...
}
const myObject = {};
// 예약어
break case catch class const
continue debugger default delete do
else export extends false finally
for function if import in
instanceof new null return super
switch this throw true try
typeof var void while with
}
++연산자(전치,후치)
연산자의 위치에 따라 계산할때 받아드리는 것이 다릅니다.
{
var score = 10;
// ++score; //11
// score++; //12 위에서부터 시작하게되면 이렇게 되는 것이 맞다
var result = ++score // ++score는 전치 증가 연산자로 score의 값을 증가시키고 증가된 값을 반환합니다. 결과값 : 11
var result = score++ // score++는 후치 증가 연산자로 score의 값을 증가시키지만 증가되기전에 값을 반환합니다. : 11(위에서 받아온 값)
console.log(result,score) // result는 var로 새롭게 선언되었으며 마지막 증가 연산자인 score++를 연산하여 score로 반환되었으니 10이고
// score는 먼저 선언된 var result에서 받은 값인 11이 아래에서 그냥 score라는 변수에서 반환되었기때문에 score는 11입니다.
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);
}
결과 확인하기
++비트연산자
이진수로 표현된 숫자에 대해 수행되는 연산자입니다.
{
let a = 9;
let b = 11;
let c = a^b;
console.log(c);
// ^ 는 2진수로 변경 할때 서로 비교했을 때 다르면 1
let num1 = 16, num2 = 80;
let result1;
let result2;
result1 = num1 > num2 ? num1 & num2 : num1 ^ num2 ; // 64
result2 = num1 < num2 ? num1 & num2 : num1 ^ num2 ; // 16
// ^ : 서로 비교했을 때 다르면 1(xor 연산자)
// & : 서로 비교했을 때 같으면 그 값이 출력 다르면 출력하지 않음(and 연산자)
console.log(result1);
console.log(result2);
}
결과 확인하기
result1 : 64
result2 : 16
++비트 연산자
&(and 연산자) : 두 수를 2진법으로 변경하여 비교했을때 두 수가 모두 똑같이 1이여야 1이 출력됩니다.
|(or 연산자) : 두 수를 2진법으로 변경하여 비교했을때 두 수가 하나라도 1이면 1이 출력됩니다.
~(not 연산자) : 두 수의 결과 값에 반대의 부호를 사용합니다.(음수로 만듭니다.)
^(xor 연산자) : 두 수를 2진법으로 변경하여 비교했을때 두 수가 달라야 1이 출력됩니다.(1=1,0=0 모두 0으로 출력)
<<(left shift) : 수를 전체적으로 왼쪽으로 이동합니다(1<<2 : 왼쪽으로 두칸이동)
>>(right shift) : 수를 전체적으로 오른쪽으로 이동합니다(1>>3 : 오른쪽으로 세칸이동)
++형변화, typeof()
데이터 형을 변형할 수도 판별할 수도 있습니다.
{
let x= 100, y = "200", z= undefined;
const func = function(){}
document.write(x,"<br>");
document.write(typeof(x),"<br>"); // 타입 판별
//*******데이터 저장하기에
document.write(y,"<br>");
document.write(typeof(y),"<br>"); // 타입 판별
y= Number(y,"<br>"); // 타입 변경
document.write(typeof(y),"<br>"); // 타입 판별
document.write(z,"<br>");
document.write(typeof(z),"<br>"); // 타입 판별
document.write(func,"<br>");
document.write(typeof(func)); // 타입 판별
}
결과 확인하기
number
200
string
number
undefined
undefined
function(){}
function
형변환과 typeof()
형변환에 앞서 typeof()는 형을 판별하는 함수로 여기서는 typeof()로 형을 판별 후 y= Number(y,"<br>")에서 Number()함수로 문자열을 숫자로 변환 하였습니다.
하지만 문자로된 문자열은 사용할 수 없습니다.