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. 변수 : 데이터 저장 + 데이터 변경
변수는 데이터를 저장할 수도 있지만 변경도 가능합니다.
{
let x = 100;
let y = 200;
let z = "javascript";
x = 300;
y = 400;
z = "react";
console.log(x);
console.log(y);
console.log(z);
}
결과 확인하기
400
react
03. 변수 : 데이터 저장 + 데이터 변경 + 데이터 추가
변수는 데이터를 저장하고, 변경하고, 추가할 수 있습니다.
{
let x = 100;
let y = 200;
let z = "javascript";
x += 300; // x = x + 300
y += 400; // y = y + 400
z += "react";
console.log(x);
console.log(y);
console.log(z);
}
결과 확인하기
600
javascriptreact
연산자 : 변수로 연산이 가능합니다.
변수로 이용해서 연산이 가능하고, 연산에는 산술 연산자, 대입 연산자, 비교 연산자, 논리 연산자, 비트 연산자, 삼항 연산자가 있다.
04. 변수 : 지역 변수 + 전역 변수(스코프)
전역 변수는 어떤 함수나 블록 내에서도 선언되지 않은 변수를 말하며,
전역 범위(global scope)에서 선언된 변수는 어디에서든지 접근이
가능합니다. 이는 함수 외부에서 선언된 변수들을 말합니다.
지역 변수는 함수나 블록 내에서 선언된 변수를 말하며, 해당 함수나
블록 내에서만 접근이 가능합니다. 이는 함수 내부에서 선언된
변수들을 말합니다.
{
let x = 100; //전역 변수
let y = 200; //전역 변수
function func(){
x = 300; //전역 변수
let y = 400; //지역 변수
z = "javascript"; //전역 변수
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 = 500;
//z = "react";
console.log(x);
console.log(y);
console.log(z);
}
결과 확인하기
200
javascript
06. 배열 : 데이터 저장(여러개)_표현방법1
배열은 데이터를 여러개 저장할 수 있습니다.
배열 객체(Array)를 이용하거나 대괄호 문법([ ])을 사용하여 배열을
생성합니다.
{
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()에 데이터를 ","로 구분하여 저장하는 방법입니다.
{
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를 생략하고 인덱스에 데이터를 저장하는 방법입니다.
{
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를 생략하고 대괄호 안에 데이터를 ","로 구분하여 저장하는
방법입니다.
{
const arr = [100, 200, "javascript"];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
}
결과 확인하기
200
javascript
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
11. 객체 : 데이터 저장(키와 값)_표현방법2
객체는 데이터 값을 필요한대로 만들어 사용할 수 있습니다.
숫자 대신 문자 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
객체는 데이터 값을 필요한대로 만들어 사용할 수 있습니다.
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"};
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.b[2]); //undefined
console.log(obj.c);
//console.log(obj.d); //(X) 실행 되지 않음
obj.d();
obj.e();
obj.f();
}
결과 확인하기
200
300
undefined
javascript
javascript가 실행되었습니다.
javascript가 실행되었습니다.
javascript가 실행되었습니다.
식별자, 예약자
자바스크립트 식별자(Identifier)는 변수, 함수, 객체, 속성 등을
구분하는 데 사용되는 이름입니다.
자바스크립트 예약어(Reserved Keywords)는 이미 JavaScript에서
특별한 의미를 가지는 키워드입니다. 이러한 키워드는 변수, 함수,
클래스 이름 등의 식별자로 사용할 수 없습니다.
{
// 식별자 규칙
-식별자는 대소문자를 구분합니다.
-식별자는 밑줄(_), 달러 기호($) 및 문자로 시작해야합니다. 숫자로 시작하는 것은 허용하지 않습니다.
-식별자는 예약어(reserved keywords)를 사용할 수 없습니다.
-식별자는 공백을 포함해서는 안 됩니다.
-식별자는 가능한한 의미 있는 이름으로 지어야합니다.
// 예약어 목록
abstract, await, boolean, break, byte, case, catch, char, class, const, continue, debugger, default, delete, do, double, else, enum, 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
}
연산자 (전치, 후치), 비트 연산자
전치 연산자는 변수의 값을 먼저 증감시키고, 그 값을 반환합니다.
후치 연산자는 변수의 값을 반환한 후, 그 값을 증감시킵니다.
비트 연산자는 이진수로 표현된 숫자를 조작하는 데 사용됩니다.
이진수는 0과 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);
}
//비트 연산자
{
AND 연산자 (&)
두 개의 이진수를 비교하여 둘 다 1인 경우에만 1을 반환합니다. 예를 들어, 5 & 3의 결과는 1입니다.
OR 연산자 (|)
두 개의 이진수를 비교하여 둘 중 하나라도 1이면 1을 반환합니다. 예를 들어, 5 | 3의 결과는 7입니다.
XOR 연산자 (^)
두 개의 이진수를 비교하여 둘 중 하나만 1인 경우에만 1을 반환합니다. 예를 들어, 5 ^ 3의 결과는 6입니다.
}
결과 확인하기
2
2
2
연산자 (전치,후치)
전치 연산자와 후치 연산자는 변수의 값을 변경하기 때문에, 코드 작성 시 주의해서 사용해야 합니다. 특히, 여러 개의 증감 연산자가 함께 사용될 경우, 예상치 못한 결과가 발생할 수 있습니다. 또한 우선순위에 따라 실행이 달라지므로 그 점도 잘 살펴보아야 합니다.
형변환, typeof
함수와 연산자에 전달되는 값은 대부분 적절한 자료형으로 자동
변환됩니다.
이런 과정을 "형 변환(type conversion)"이라고 합니다.
typeof() : 자료형의 성질을 알 수 있다.
{
let x = 100, y = "200", z;
const func = function(){}
document.write(x);
document.write(typeof(x));
document.write(y);
y = "200";
document.write(typeof(y));
y = Number(y);
document.write(typeof(y));
document.write(z);
document.write(typeof(z));
document.write(func);
document.write(typeof(func));
}
결과 확인하기
number
200
string
number
undefined
undefined
function(){}
function
문자형으로 변환은 무언가를 출력할 때 주로 일어납니다.
String(value)을 사용하면 문자형으로 명시적 변환이 가능합니다.
숫자형으로 변환은 수학 관련 연산시 주로 일어납니다.
Number(value)로도 형 변환을 할 수 있습니다.
불린형으로 변환은 논리 연산 시 발생합니다.
Boolean(value)으로도 변환할 수 있습니다.