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
02. 변수 : 데이터 저장 + 데이터 변경
변수는 데이터를 저장 할수도 있지만 변경도 가능합니다.
{
var x = 100;
var y = 200;
var z = "javascript";
x = 300; //변수 x를 숫자 300으로 변경함
y = 200; //변수 y를 숫자 200으로 변경함
z = "react"; //변수 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; // y = y + 400
z += "react"; // z = z + "react"
console.log(x)
console.log(y)
console.log(z)
}
결과 확인하기
600
javascriptreact
연산자 : 변수로 연산이 가능하다.
변수를 이용해서 연산이 가능하고, 연산에는 산술연산자, 대입연산자, 비교연산자, 논리 연산자, 비트 연산자, 삼향 연산자가 있습니다.
04. 변수 : 지역변수 + 전역변수(스코프)
함수 내부에서 선언된 변수는 지역 변수(local variable)라고 하며, 해당 함수 내에서만 접근할 수 있습니다.
반면에 함수 외부에서 선언된 변수는 전역 변수(global variable)라고 하며, 프로그램의 어느 곳에서든지 접근할 수 있습니다.
{
let x = 100; //전역 변수
let y = 200; //전역 변수
function func(){
let x = 300; //지역 변수 x앞에 let이 없으면 전역변수로 변경
let y = 400; //지역 변수
z = "javascript"; //전역 변수로 취급 string모드 선언하면 에러
console.log("함수 안"+x); //함수 안의 x값은 지역변수이기 때문에 사용가능
console.log("함수 안"+y);
console.log("함수 안"+z);
}
func();
console.log("함수 밖"+x);
console.log("함수 밖"+y);
console.log("함수 밖"+z);
}
결과 확인하기
함수 안400
함수 안javascript
함수 밖100
함수 밖200
함수 밖javascript
05. 상수 : 데이터 저장 + 데이터 변경(x)
상수는 데이터 저장은 가능하나 변경은 불가합니다. 상수(const)는 이미 선언한 상수에 대해 중복 선언이 불가능 하며 상수의 값을 재지정 할 수도 없습니다.
const 상수를 변경하려 하였으나 오류로 변경하지 못하였습니다.
{
const x = 100;
const y = 200;
const z = "javascript";
//x = 300; //Assignment to constant variable.
//y = 400; //Assignment to constant variable.
//z = "react"; //Assignment to constant variable.
console.log(x);
console.log(y);
console.log(z);
//let x = 100;
//let y = 200;
//let z = "javascript";
//x -= 1000; // 100 - 1000 = -900
//x += 1000; // -900 + 1000 = 100
//console.log(x, y, z);
}
결과 확인하기
200
javascript
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
new Array(100, 200, "javascript")는 새로운 배열을 생성합니다.
배열의 첫 번째 요소는 100이고, 두 번째 요소는 200이며, 세 번째 요소는 javascript입니다. 생성된 배열이 arr 변수에 할당됩니다.
{
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은 배열의 첫 번째 요소에 100을 할당합니다.
arr[1] = 200은 배열의 두 번째 요소에 200을 할당합니다.
arr[2] = "javascript"은 배열의 세 번째 요소에 "javascript"를 할당합니다.
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
09. 배열 : 데이터 저장(여러개): 표현방법4
배열 안에 값을 지정하여 식을 더욱 단순화 하였습니다.
const arr은 배열을 선언하고, 세 개의 요소 100, 200, "javascript"을 가지고 초기화합니다.
{
const arr = [100, 200, "javascript"];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
}
결과 확인하기
200
javascript
10. 객체 : 데이터 저장(키와 값) : 표현방법1
객체(objects): 객체는 이름-값 쌍을 저장하기 위한 자료 구조입니다.
객체에는 속성 이름과 값을 지정하여 값을 저장할 수 있습니다.
객체는 여러 개의 데이터 타입을 저장하는 데 적합합니다.
데이터와 키의 값을 직접 지정가능 합니다.
{
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
각 데이터와 키의 값을 직접 지정합니다. const obj는 새로운 객체를 선언합니다.
다음 예시는 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
javascript
12. 객체 : 데이터 저장(키와 값) : 표현방법3
각 데이터와 키의 값을 직접 지정합니다. const obj는 빈 객체를 선언합니다.
const obj = {}; 문법은 객체를 생성하고, {} 내부에 프로퍼티를 추가하는 방법입니다.
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
13. 객체 : 데이터 저장(키와 값) : 표현방법4
각 데이터와 키의 값을 직접 지정합니다.
const obj는 객체를 선언합니다.
객체 리터럴 구문 {a:100, b:200, c:"javascript"}를 사용하여 객체를 초기화합니다.
obj.a, obj.b, obj.c를 통해 객체의 프로퍼티에 접근하여 값을 출력합니다.
{
const obj = {a:100, b:200, c:"javascript"};
console.log(obj.a);
console.log(obj.b);
console.log(obj.c);
}
결과 확인하기
200
javascript
14. 객체 : 데이터 저장(키와 값): 표현방법5 : 배열안의 객체
배열 내부에 객체를 추가하고, 배열 내부 객체의 프로퍼티에 접근하여 값을 출력하는 예시입니다.
이를 통해 객체와 배열을 혼합하여 자료구조를 구성할 수 있음을 보여줍니다.
배열 안의 순서는 ','로 구분하여 a와 b는 obj[0], c는 obj[1]이 됩니다.
{
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 : 객체 안의 배열
객체 안의 배열 값은 obj.b[0]과 같이 배열 안의 값을 불러줘야 합니다.
obj.b를 호출하면 [200, 300]같이 배열이 통째로 불러집니다.
객체 내부에 a, b, c, d 프로퍼티를 추가합니다.
obj.a, obj.b[0], obj.b[1], obj.c.x, obj.c.y, obj.d를 통해 객체의 프로퍼티에 접근하여 값을 출력합니다.
{
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"는 각각 변수 a, b, c를 선언하고 값을 할당합니다.
const obj = {a, b, c}는 객체 리터럴 내에서 각 변수 이름을 사용하여 객체 obj를 선언합니다.
객체 리터럴에서 프로퍼티의 이름을 생략하면 자동으로 변수 이름이 프로퍼티 이름으로 할당됩니다.
{
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 j = "javascript"는 문자열 "javascript"를 변수 j에 할당합니다.
a, b, c는 숫자, 배열, 문자열 값을 갖는 프로퍼티입니다.
d, e, f는 함수를 값으로 갖는 프로퍼티입니다.
obj.b[2]는 배열내에 세번째 값이 없으므로 정의되지 않습니다.
함수의 값을 호출하기 위해서는 console.log가 아닌 obj.d()를 호출합니다.
함수는 실행문을 의미합니다.
{
const j = "javascript";
const obj = {
a: 100,
b: [200,300],
c: "javascript",
d: function(){
console.log("javascript가 실행되었습니다.");
},
e: function() {
console.log(obj.c + "가 실행되었습니다.");
// console.log(j + "가 실행되었습니다.")
},
f: function(){
console.log(this.c + "가 실행되었습니다."); //this 자기 자신을 표현하지만 여러가지 표현도 가능
}
}
console.log(obj.a);
console.log(obj.b[0]);
console.log(obj.b[1]);
// console.log(obj.b[2]); //undifined
console.log(obj.c);
// console.log(obj.d); //(x)
obj.d();
obj.e();
obj.f();
}
결과 확인하기
200
300
javascript
javascript가 실행되었습니다.
javascript가 실행되었습니다.
javascript가 실행되었습니다.
18. 식별자, 예약자
식별자(identifier)는 변수, 함수, 클래스 등의 이름으로 사용되는 단어나 구문입니다.식별자는 반드시 문자, 밑줄(_), 달러 기호($)로 시작해야 합니다. 식별자는 띄어쓰기 할 수 없습니다.
숫자로 시작하는 식별자는 사용할 수 없습니다.식별자는 대소문자를 구분합니다.식별자는 예약어(reserved word)를 사용할 수 없습니다.식별자는 길이에 제한이 없습니다.
예약어(reserved word)는 언어에서 특별한 의미를 갖는 단어입니다. 이러한 예약어는 변수, 함수, 클래스 등의 이름으로 사용될 수 없습니다.
만약 예약어를 변수, 함수, 클래스 이름으로 사용하려면, 오류가 발생하거나 예상하지 못한 동작을 할 수 있습니다.
{
var n um = 10; // 식별자는 띄어쓰기 할 수 없습니다.
var 1num = 10; // 식별자는 숫자로 시작할 수 없습니다.
var %num = 10; // 식별자는 특수문자로 시작할 수 없습니다.
var _num = 10; // _은 예외로 사용 가능 합니다.
var $num = 10; // $는 예외로 사용 가능 합니다.
// break case catch continue const default delete do else finally for function for function if
// in instanceof new return switch this throw try typeof this var void while with 등은 모두 예약어 입니다.
}
19. ++ 연산자(전치,후치), 비트 연산자
증감 연산자(++)는 변수의 값을 1 증가시키거나 감소시키는 연산자입니다. 전치 증감 연산자(++i, --i)와 후치 증감 연산자(i++, i--)로 나뉩니다.
전치 증감 연산자는 변수의 값을 증가시키거나 감소시킨 후, 연산을 수행합니다. 후치 증감 연산자는 연산을 수행한 후에 값을 변경합니다.
{
var score = 10;
// ++score; //11 순서대로 1씩 증가
// score++; //12 순서대로 1씩 증가
var result = ++score; //11 전치 연산자 이므로 score값이 먼저 1증가하고 결과로 들어감
var result = score++; //result 10 score 11 후치 연산자 이므로 결과값인 10이 먼저 나오고 score값은 다음에 1이 증가
console.log(result, score);
let hap, j, k, l;
j = k = l = 1;
hap = ++j + k++ + ++l;
console.log(hap); //5
console.log(j); //2
console.log(k); //2
console.log(l); //2
let sum = 0;
for(let i=0; i<10; i++){
sum += i
}
for(let i=10; i>0; i--){ //위의 식과 같음
sum += i
}
let a=1, b=2, c=3, result;
result = ++a + b++ + ++c;
console.log(result); // 8 a는 2 b는 2 c는 4
console.log(a); // 2
console.log(b); // 3 b++는 =보다 우선순위가 낮다
console.log(c); // 4
let x=7, y=7, result; // let x=7; let y=7; let result;
result = x > y ? ++x : y--; //x가 실행이 안됨 false이므로 y만 실행
console.log(result); // y값이 나오므로 7
console.log(x); // x는 실행이 안됬으므로 그대로 7
console.log(y); // --는 =보다 순위가 낮아서 result값이 나온 후 6이 됨
let a, b, c, result; // let a; let b; let c; let result;
a = 20, b=30, c=30
result = a < b ? b++ : --c; // b가 a보다 크므로 true 갑인 b++가 출력
console.log(result); //30 b++는 =보다 순위가 낮으므로 result는 30
console.log(a); //20 a는 실행이 되지 않아서 그대로 20
console.log(b + c); //61 b는 result 이후로 b++에 의해 1이 추가 되어서 31 c는 실행되지 않아서 그대로 30
console.log(c); //30 c는 실행되지 않아서 그대로 30
// 비트 연산자
{
let a = 9;
let b = 11;
let c = a ^ b; // "^" 기호는 비트 연산자 XOR를 나타냅니다. XOR 연산자는 두 개의 비트가 다른 경우 1을 반환하고, 같은 경우 0을 반환합니다.
console.log(c) // 9를 2진수로 표현하면 0000 1001, 11을 2진수로 표현하면 0000 1011 입니다. 비교 했을 때 두개의 비트가 다른경우는 0000 0010이므로 답은 2입니다.
}
{
let num1 = 16, num2 = 80;
let result;
result = num1 > num2 ? num1 & num2 : num1 ^ num2; // 16을 2진수로 표현하면 0001 0000 80을 2진수로 표현하면 0101 0000 입니다. 비교 하면 0100 0000 이므로 64가 나옵니다.
}
}
결과 확인하기
10
5
2
2
8
2
3
4
7
7
6
30
20
61
30
// 비트 연산자
2
64
OR(|) 연산자: 두 개의 비트를 OR 연산하여 결과를 반환합니다. 예를 들어, 0011 | 0101 = 0111 입니다.
XOR(^) 연산자: 두 개의 비트를 XOR 연산하여 결과를 반환합니다. XOR 연산은 두 개의 비트가 다를 때 1을 반환하며, 같을 때는 0을 반환합니다. 예를 들어, 0011 ^ 0101 = 0110 입니다.
NOT(~) 연산자: 비트의 값을 반전시켜 결과를 반환합니다. 예를 들어, ~0011 = 1100 입니다.
20. 형변환, typeof
식별자(identifier)는 변수, 함수, 클래스 등의 이름으로 사용되는 단어나 구문입니다.식별자는 반드시 문자, 밑줄(_), 달러 기호($)로 시작해야 합니다. 식별자는 띄어쓰기 할 수 없습니다.
숫자로 시작하는 식별자는 사용할 수 없습니다.식별자는 대소문자를 구분합니다.식별자는 예약어(reserved word)를 사용할 수 없습니다.식별자는 길이에 제한이 없습니다.
예약어(reserved word)는 언어에서 특별한 의미를 갖는 단어입니다. 이러한 예약어는 변수, 함수, 클래스 등의 이름으로 사용될 수 없습니다.
만약 예약어를 변수, 함수, 클래스 이름으로 사용하려면, 오류가 발생하거나 예상하지 못한 동작을 할 수 있습니다.
{
var n um = 10; // 식별자는 띄어쓰기 할 수 없습니다.
var 1num = 10; // 식별자는 숫자로 시작할 수 없습니다.
var %num = 10; // 식별자는 특수문자로 시작할 수 없습니다.
var _num = 10; // _은 예외로 사용 가능 합니다.
var $num = 10; // $는 예외로 사용 가능 합니다.
// break case catch continue const default delete do else finally for function for function if
// in instanceof new return switch this throw try typeof this var void while with 등은 모두 예약어 입니다.
}