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. 변수 : 데이터 저장
변수(variable)는 데이터(data)를 저장하는 저장소이다.
{
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. 변수 : 데이터 저장 + 데이터 변경
변수(variable)는 데이터(data)를 저장 할 수 있고, 변경도 가능하다.
{
let x = 100;
let y = 200;
let z = "javascript";
// var 는 원래는 중복 지정 안되지만 그냥 보여주는데, 요즘 쓰는 let은 중복으로 지정되면 에러가 뜸.
x = 300;
y = 200;
z = "react";
console.log(x);
console.log(y);
console.log(z);
}
결과확인하기
200
"react"
03. 변수 : 데이터 저장 + 데이터 변경 + 데이터 추가
변수(variable)는 데이터(data)를 변경, 추가도 가능하다.
{
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. 변수 : 지역변수 + 전역변수 (스코프)
var score = 10;
++score; //11
score++; //12
console.log(score);
//전역스코프와 지역스코프
//함수 외부에서 내부는 호출할 수 없다
//함수 내부에서 외부는 호출할 수 있다
let x = 100; //전역변수 : 함수 안에 있어도 밖에 있는 변수를 가져다 쓸 수 있다.
let y = 200;
z = "javascript"; //전역변수 : let생략으로 인식해서 전역변수로 치부된다.
function func(){
x = 300; //전역변수 x가 300으로 바뀐 것으로 치부된다.(let 이 없으므로)
//let x = 300; // 지역변수 : let x를 재선언 했으므로 원래는 에러이지만 함수 안에 있으므로 지역변수로 쓰인다
let y = 400; // 지역변수가 없을 때 전역변수를 불러다 쓴다.
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
상수 정의
상수(constant)란 변수와 마찬가지로 데이터를 저장할 수 있는 메모리 공간을 의미한다.
그러나 상수와 변수의 차이점은 상수에 저장된 데이터는 변수와 달리 프로그램이 실행되는 동안 변경할 수 없다는 점이다.
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
배열 정의
배열(array)이란 같은 타입의 변수들로 이루어진 유한 집합을 의미한다.
배열에서의 위치를 가리키는 숫자는 인덱스(index)라고 하는데, C언어에서 인덱스(index)는 언제나 0부터 시작하며, 0을 포함한 양의 정수만을 가질 수
있다.
또한, 배열은 같은 종류의 데이터를 많이 다뤄야 하는 경우에 사용할 수 있는 가장 기본적인 자료 구조로써,
배열은 선언 형식에 따라 1차원, 2차원뿐만 아니라 다차원 배열로도 선언할 수 있다.
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
개체는 키(key)값을 불러온다.
{
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)란, 자바스크립트의 기본 데이터 타입을 의미하며, 이름(name)과 값(value)으로 구성된 프로퍼티(property)*의 정렬되지 않은
집합이다.
* 프로퍼티의 값으로는 함수가 올 수 있으며, 이를 메소드(method)라고 한다.
자바스크립트에서는 숫자, 문자열, 불리언, undefined 타입을 제외한 모든 것이 객체가 된다.
그러나 원시타입(숫자, 문자열, 불리언)은 값이 정해진 객체로 취급되어, 객체로서의 특징과 갖게 된다.
11. 객체 : 데이터저장 (키와 값) : 표현방법2
객체는 키(key)를 쓰기 때문에 문자로 인덱스를 사용할 수 있다.
{
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 obj = {
a: 100,
b: [200, 300],
c: "javascript",
d : function(){
console.log("javascript가 실행되었습니다");
},
e: function(){
console.log(obj.c + "가 실행되었습니다.")
},
f: function(){
console.log(this.c + "가 실행되었습니다.")
}
//this 자기자신을 표현할 때 쓴다
// + 를 연결연산자로 쓴다.
//객체안에는 실행문이 들어갈수 있다
//변수에 함수넣을수 있다
};
console.log(obj.a);
console.log(obj.b[0]);
console.log(obj.b[1]);
console.log(obj.c);
obj.d();
obj.e();
obj.f();
결과확인하기
200
300
javascript
javascript가 실행되었습니다
javascript가 실행되었습니다
javascript가 실행되었습니다
18. 식별자, 예약자
* 식별자: 변수, 함수, 매개변수 등 이름을 지정하는 데 사용
* 예약자: 언어에서 특별한 의미를 가지는 단어(변수, 또는 함수 이름으로 사용 불가)
{
식별자 규칙
식별자는 반드시 문자, 밑줄(_), 달러 기호($)로 시작해야 합니다.
식별자는 문자, 숫자, 밑줄, 달러 기호를 포함할 수 있습니다.
식별자는 예약자가 아니어야 합니다.
에약자 목록
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, yield 등이 있습니다.
}
19. 연산자(전치, 후치)
연산자의 전치, 후치 개념에 따라 결과 값이 달라진다.
연산자 종류 참고
{
var score = 10;
// ++score; // 11
// score++; // 12
// var result = ++score; // 11
var result = score++;
// 출력 시 '=' 연산자가 '++' 연산자가 후치에 있으면 우선순위가 '=' 연산자이므로 먼저 실행 출력 후 '++' 연산자가 실행하고 출력됩니다.
console.log(result, score);
}
결과확인하기
11
(추가1) 연산자 혼합 사용 예시
{
let a = 1, b = 2, c = 3, result;
result = ++a + b++ + ++c;
// 변수보다 전치(++a, ++c)에 있으면 '=' 연산자보다 전치 '++' 연산자가 먼저 실행되고 실행문 실행 후 후치 '++' 연산자가 실행됩니다.
console.log(result); // 8
console.log(a); // 2
console.log(b); // 3
console.log(c); // 4
}
결과 값: 8, 2, 3, 4
(추가2) 삼항 연산자 사용 예시
{
let a = 1, b = 2, c = 3, result;
result = ++a + b++ + ++c;
// 변수보다 전치(++a, ++c)에 있으면 '=' 연산자보다 전치 '++' 연산자가 먼저 실행되고 실행문 실행 후 후치 '++' 연산자가 실행됩니다.
console.log(result); // 8
console.log(a); // 2
console.log(b); // 3
console.log(c); // 4
}
결과 값: 30, 20, 61, 30
20. 비트 연산자
비트 단위로 데이터를 처리할 때 사용하는 연산자로, 이진수 표현 데이터의 비트를 조작하거나 추출하는데 사용한다.
비트 연산자 종류
& (AND연산자) : 두 비트가 모두 1일 경우에만 결과가 1이 되며, 그 외에는 0이 됩니다.
| (OR연산자) : 두 비트 중 하나 이상이 1일 경우 결과는 1이 되며, 둘 다 0인 경우에만 0이 됩니다.
~ (NOT연산자) : 비트를 반전시킵니다. 0은 1로, 1은 0으로 바꿉니다.
^ (XOR연산자) : 두 비트가 서로 다른 경우 결과는 1이 되며, 같은 경우에는 0이 됩니다.
<< (LEFT SHIFT) : 왼쪽으로 이동시 오른쪽 끝자리는 0이 됩니다.
>> (RIGHT SHIFT) : 오른쪽으로 이동시 왼쪽 끝자리는 0이 됩니다.
비트 연산자 사용 예시
{
let num1 = 16, num2 = 80;
let result;
result = num1 > num2 ? num1 & num2 : num1 ^ num2;
document.write(result);
}
결과 값: 64
21. 형변화, 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));
document.write(z);
document.write(typeof(z));
document.write(func);
document.write(typeof(func));
}
결과확인하기
number
200
string
undefined
undefined
function(){}
function
형태 변형: 변수의 데이터 형태를 설정
{
let x = 100, y = "200";
x = String (x); // 숫자 형태의 데이터를 문자 형태로 변형
document.write(typeof(x));
y = Number(y); // 문자 형태의 데이터를 숫자 형태로 변형
document.write(typeof(y));
}
결과 값: string, number