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
변수
변수는 데이터를 저장하고 참조할 때 사용하는 식별자(identifier)입니다. 변수는 값을 저장하는 메모리 공간을 가리키며, 필요한 경우 해당 값을 변경할 수 있습니다. 변수는 자바스크립트에서 프로그램의 상태를 저장하고, 조건문, 반복문 등에서 사용되어 프로그램의 흐름을 제어하는 데 중요한 역할을 합니다.
02. 변수 : 데이터 저장 + 데이터 변경
변수는 데이터를 저장할 수도 있지만 변경도 가능합니다.
{
let x = 100; //변수 x를 숫자 300으로 변경함
let y = 200; //변수 y를 숫자 200으로 변경함
let z = "javascript"; //변수 z를 문자 "react"로 변경함
x = 300;
y = 200;
z = "react";
console.log(x);
console.log(y);
console.log(z);
}
결과 확인하기
200
react
03. 변수 : 데이터 저장 + 데이터 변경 + 데이터 추가
변수는 데이터를 저장하며 데이터 변경과 데이터 추가도 가능합니다.
{
let x = 100; //변수 x에 숫자 300을 추가함
let y = 200; //변수 y에 숫자 400을 추가함
let z = "javascript"; //변수 z에 문자 "react"를 추가함
x += 300; // x = x + 300
y += 400; // y = y + 400
z += "react"; // z = z + "react"
console.log(x);
console.log(y);
console.log(z);
}
결과 확인하기
600
javascriptreact
연산자 : 변수로 연산이 가능하다.
변수를 이용해서 연산이 가능하고, 연산에는 산술연산자, 대입연산자, 비교 연산자, 논리 연산자, 비트 연산자, 상황 연산자가 있다.
04. 변수 : 지역 변수 + 전역 변수 (스코프)
{
let x = 100; //전역 변수
let y = 200; //전역 변수
function func(){
x = 300; //전역 변수 (let 있으면 지역 변수 100에서 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);
}
결과 확인하기
함수안400
함수안javascript
함수밖300
함수밖200
함수밖javascript
05. 상수 : 데이터 저장 + 데이터 변경(X)
상수는 데이터 저장은 가능하나 변경은 불가능합니다. 상수(const)는 이미 선언한 상수에 대해 중복 선언이 불가능하며 상수의 값을 재지정할 수도 없습니다.
{
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);
}
결과 확인하기
상수
상수(Constant)는 값을 변경할 수 없는 변수입니다. 즉, 한 번 값을 할당하면 그 이후로는 값을 변경할 수 없습니다. 상수는 보통 변하지 않는 값을 저장하거나, 코드에서 일정한 값을 사용해야 할 때 유용합니다.
자바스크립트에서 상수를 선언할 때는 "const" 키워드를 사용합니다. 상수를 선언할 때는 반드시 초기값을 할당해야 합니다.
기본 연산자 정리
{
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가 문자 "100"이 되었는데
c = 1000; // 다시 숫자 1000으로 바뀌고
c += 1000; // 숫자 1000이 더해져 2000이 되었음
console.log(c)
}
결과 확인하기
-10000
false
200000000
0.5
10000
2000
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)라는 숫자로 구분됩니다. 인덱스는 0부터 시작하며, 배열의 길이보다 작은 숫자를 사용하여 각 요소에 접근할 수 있습니다.
배열을 선언할 때는 대괄호([])를 사용합니다. 배열 요소는 쉼표로 구분하며, 각 요소에는 어떤 타입의 값이든 할당할 수 있습니다.
07. 배열 : 데이터 저장(여러개) : 표현방법2
배열은 여러개의 데이터를 하나의 변수에 저장할 수 있다. 반복되는 불필요한 코드를 줄일 수 있습니다.
ex) const arr = new Array(값, 값, 값);
{
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()를 []로 대체한 표현 방법입니다.
ex) const 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
09. 배열 : 데이터 저장(여러개) : 표현방법4
배열은 여러개의 데이터를 하나의 변수에 저장할 수 있다. new Array가 빠진 것을 한 줄로 만들어 가장 간결한 표현 방법입니다.
ex) const arr = [값, 값, 값];
{
const arr = [100, 200, "javascript"];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
}
결과 확인하기
200
javascript
10. 객체 : 데이터 저장(키와 값) : 표현방법1
객체는 데이터를 여러개 저장하는 방법 중 하나입니다. 각 데이터의 키와 값을 직접 지정할 수 있습니다.
ex) obj[키] = 값; / 츨력 : console.log(obj[키]);
{
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
객체
객체는 속성과 메서드를 가진 컨테이너입니다. 객체는 중괄호({})를 사용하여 정의되며, 각 속성은 이름과 값으로 구성됩니다.
객체는 다른 데이터 유형과는 달리 동적으로 속성을 추가하거나 제거할 수 있으며, 함수를 포함할 수도 있습니다. 이러한 함수를 객체의 메서드라고 합니다.
11. 객체 : 데이터 저장(키와 값) : 표현방법2
객체는 데이터를 여러개 저장하는 방법 중 하나입니다. 각 데이터의 키와 값을 직접 지정할 수 있습니다.
[숫자]대신 .a,b,c라는 키를 지정하였습니다.
ex) obj.키 = 값;
{
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
객체는 데이터를 여러개 저장하는 방법 중 하나입니다. 각 데이터의 키와 값을 직접 지정할 수 있습니다. new Obeject가 빠져 더 간결하게 표현하였습니다.
ex) const obj = {}; / 밑줄에 키와 값 나열
{
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
객체는 데이터를 여러개 저장하는 방법 중 하나입니다. 각 데이터의 키와 값을 직접 지정할 수 있습니다. new Obeject가 빠진 것을 가장 간결하게 표현한 방법입니다.
ex) xonst obj = {키:값, 키:값, 키:값};
{
const obj = {a:100, b:200, c:"javascript"};
console.log(obj.a);
console.log(obj.b);
console.log(obj.c);
}
결과 확인하기
200
javascript
14. 객체 : 데이터 저장(키와 값) : 표현방법5 : 배열 안에 객체
객체는 데이터를 여러개 저장하는 방법 중 하나입니다.배열 안에 객체를 불러옵니다.
ex) 출력 : console.log(obj[배열].객체);
{
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 : 객체 안에 배열
객체는 데이터를 여러개 저장하는 방법 중 하나입니다. 객체 안에 배열이 있습니다.
ex) 출력 : console.log(obj.객체); / console.log(obj[배열]); / console.log(obj.객체.객체)
{
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
객체는 데이터를 여러개 저장하는 방법 중 하나입니다. 변수를 객체 안에 넣어 키값을 생략하였습니다.
ex) const 키 = 값; / console.log(키);
{
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
객체는 데이터를 여러개 저장하는 방법 중 하나입니다. 함수가 들어갔습니다. 객체 안에는 실행문이 나올 수 있습니다.
함수 입력시키는 방법
ex) const obj = {키: function(){console.log(값);}; / 출력: obj.키();
함수 안에 다른 키 값과 문자를 입력
ex) const obj = {키: function(){console.log(obj.키 + "문자");, 키: function(){console.log(this.키 + "문자");}; / 출력 : obj.키();
{
const obj = {
a: 100,
b: [200,300],
c: "javascript",
d: function(){
document.wirte("javascript가 실행되었습니다.");
},
e: function(){
console.log(obj.c + "가 실행되었습니다.");
},
f: function(){
console.log(this.c + "가 실행되었습니다.");
}
}
console.log(obj.a);
console.log(obj.b[0]);
console.log(obj.b[1]);
console.log(obj.c);
console.log(obj.d); //이렇게 하면 문자가 써지는 것이 아니라 console로 인식되어 console창에 써짐
obj.d();
obj.e();
obj.f();
}
결과 확인하기
200
300
javascript
javascript가 실행되었습니다.
javascript가 실행되었습니다.
javascript가 실행되었습니다.
++ 식별자, 예약자
식별자(identifier)는 변수나 함수의 이름을 작성할 때 사용하는 이름을 의미합니다.
예약자는 언어에서 특별한 의미를 가지는 단어로, 변수 또는 함수 이름으로 사용할 수 없습니다.
{
식별자 규칙
1. 키워드를 사용하면 안 된다.
2. 숫자로 시작하면 안 된다.
3. 특수 문자는 _와 $만 허용된다.
4. 공백 문자를 포함할 수 없다.
예약어 목록
abstract, arguments, boolean, break, byte, case, catch, char, class*, const, continue, debugger, default, delete
do, double, else, enum*, eval, export*, extends*, false, final, finally, float, for, function, goto, if, implements,
import*, in, instanceof, int, interface, let, long, native, new, null, package, private, protected, public, return,
short, static, super*, switch, synchronized, this, throw, throws, transient, true, try, typeof, var, void, volatile, while,
with, yield
}
++ 연산자(전치,후치)
연산자에는 전치,후치가 있습니다.
{
var score = 10;
// ++score; //11
// score++; //12
var result = ++score; //11
console.log(result, score);
}
결과 확인하기
++ 위치에 따라 결과가 달라집니다.
{
var score = 10;
// ++score; //11
// score++; //12
var result = score++; //이렇게 쓰면 답이 10, 11로 나옴
console.log(result, score);
}
결과 : 10 11
<예제1>
{
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);
}
결과 확인하기
2
2
2
<예제2>
{
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
3
4
<예제3>
{
let x = 7, y = 7, result;
result = x > y ? ++x : y--;
console.log(result);
console.log(x);
console.log(y);
}
결과 확인하기
7
6
<예제4>
{
let a, b, c, result;
a = 20, b = 30, c= 30;
result = a < b ? b++ : --c;
console.log(result);
console.log(a);
console.log(b + c);
console.log(c);
}
결과 확인하기
20
61
30
++ 비트연산자
비트 연산자는 이진수를 다루는 연산자로, 이진수의 각 자리를 비교하여 연산합니다. 비트 연산자는 주로 저수준 프로그래밍에서 사용되며, 비트 조작과 데이터 압축, 암호화 등 다양한 분야에서 사용됩니다.
비트 연산자 종류
1. AND 연산 (&): 두 비트가 모두 1일 때만 1을 반환합니다.
2. OR 연산 (|): 두 비트 중 하나 이상이 1이면 1을 반환합니다.
3. XOR 연산 (^): 두 비트 중 하나만 1일 때 1을 반환합니다.
4. NOT 연산 (~): 비트를 반전시킵니다. 0은 1로, 1은 0으로 변환됩니다.
5. 왼쪽 시프트 (<<): 비트를 왼쪽으로 이동시킵니다. 예를 들어, 0001 << 2는 0100을 반환합니다.
6. 오른쪽 시프트 (>>): 비트를 오른쪽으로 이동시킵니다. 예를 들어, 0100 >> 2는 0001을 반환합니다.
1. & (AND 논리 연산자)
비교하는 비트가 모두 1이면 1을 반환한다.
{
const b1 = 2 & 3;
console.log(b1); //2
//2 0010
//3 0011
// 0010 = 2
}
결과 확인하기
2. | (OR 논리 연산자)
비교하는 비트 중에서 하나라도 1이면 1을 반환한다.
{
const b2 = 2 | 3;
console.log(b2); //3
//2 0010
//3 0011
// 0011 = 3
}
결과 확인하기
3. ^ (배타 논리 연산자)
비교하는 두 개의 비트가 같으면 0을, 다르면 1을 반환한다.
{
const b3 = 5 ^ 3;
console.log(b3); //6
//5 0101
//3 0011
// 0110 = 6
}
결과 확인하기
++ 형변환, typeof
typeof 연산자는 undefined, null, boolean, number, string, symbol, object, function의 자바스크립트가 가진 7가지 변수 타입을 구분하는 용도로 사용합니다.
{
문법
typeof operand
typeof(operand)
}
{
사용법
console.log(typeof undeclaredVariable);
console.log(typeof null);
console.log(typeof true);
console.log(typeof 27);
console.log(typeof 'YD');
console.log(typeof Symbol());
console.log(typeof function() {});
console.log(typeof {});
}
결과 확인하기
object
boolean
number
string
symbol
function
object