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 = 200;
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;
z += "react";
console.log(x);
console.log(y);
console.log(z);
}
결과 확인하기
600
javascript react
연산자 : 변수로 연산이 가능하다.
변수를 이용해서 연산이 가능하고, 연산에는 산술 연산자, 대입 연산자, 배교 연산자, 논리 연산자, 비트 연산자, 삼항 연산자 등이 있습니다.
04. 변수 : 지역 변수 + 전역 변수(스코프)
지역변수는 해당 함수, 메소드, 블록 내에서만 사용되는 변수이다.
해당 범위를 벗어나면 메모리에서 사라진다. 반면 전역 변수는 프로그램 전역에서 사용되는 변수이며
프로그램이 종료될 때까지 유지된다.
{
let x = 100; //전역 변수
let y = 200; //변수
//let x = 300;
//let y = 400; 적용불가
function func(){ //함수를 써서 값이 나옴
//let x = 300;
x = 400; //변수값을 지우면 전역변수로(전역변수변경가능)
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
함수밖400
함수밖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);
}
결과 확인하기
200
javascript
06. 배열 : 데이터 저장(여러개) : 표현방법1
배열은 여러 개의 데이터를 하나의 변수에 저장하기 위한 것이라고 할 수 있습니다.
배열을 new 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
javacript
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
javacript
09. 배열 : 데이터 저장(여러개) : 표현방법4
new Array를 생략하고 배열을 [ ]를 사용해 한번에 나열하여 지정해줍니다.
{
const arr = [100, 200, "javascript"];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
}
결과 확인하기
200
javacript
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
javacript
11. 객체 : 데이터 저장(키와 값) : 표현방법2
객체를 사용해 인덱스를 문자로 사용할수 있습니다.
숫자 대신 문자 a,b,c에 변수를 직접 선언합니다.
{
const obj = new Object();
obj.a = 110;
obj.b = 200;
obj.c = "javascript";
console.log(obj.a);
console.log(obj.b);
console.log(obj.c);
}
결과 확인하기
200
javacript
12. 객체 : 데이터 저장(키와 값) : 표현방법3
객체를 사용해 값을 하나씩 지정할수도 있습니다.
new Object를 생략하고 { }사용해주는 방법입니다.
{
const obj = {};
obj.a = 100;
obj.b = 200;
obj.c = "javasrpit";
console.log(obj.a);
console.log(obj.b);
console.log(obj.c);
}
결과 확인하기
200
javacript
13. 객체 : 데이터 저장(키와 값) : 표현방법4
객체는 데이터 값을 필요한대로 만들어 사용가능합니다.
객체 선언 코드를 생략하고 { }안에 키와값을 직접 입력하여 저장하는 방법입니다.
{
const obj = {a:100, b:200, c:"javascript"};
console.log(obj.a);
console.log(obj.b);
console.log(obj.c);
}
결과 확인하기
200
javacript
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
javacript
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
javacript
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
javacript
17. 객체 : 데이터 저장(키와값) : 표현방법8
객체는 데이터 값을 필요한대로 만들어 사용가능합니다.
객체 안에는 함수인 실행문이 들어간다. 실행문을 실행시켜줄 때 쓰는 방법입니다.
{
const obj = {
a: 100,
b: [200, 300],
c: "javacript",
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가 실행되었습니다.
++ 식별자, 예약자
++식별자는 변수나 배열의 값을 1 증가시키는 연산자이다.
++식별자는 변수 또는 배열 이름 앞에 위치할 수 있고, 전치 후치 연산자 두 가지 형태가 있다.
예약자는 프로그래밍 언어에서 이미 정해져 있는 단어나 구문으로, 변수나 함수의 이름으로 사용할 수 없는 단어를 말한다.
{
int x = 3;
int y = ++x; // x의 값을 먼저 1 증가시킨 후, 그 값을 y에 대입합니다.
// x의 값은 4, y의 값은 4가 됩니다.
int x = 3;
int y = x++; // x의 값을 먼저 y에 대입한 후, x의 값을 1 증가시킵니다.
// x의 값은 4, y의 값은 3이 됩니다.
}
++ 연산자(전치, 후치), 비트연산자
++연산자는 자주 사용되는 연산자 중 하나이며,
전치 연산자와 후치 연산자를 적절히 사용해 변수나 배열의 값을 증가시키거나 반복문에서 활용할 수 있습니다.
💜전치 연산자
전치 연산자인 경우 ++ 연산자를 변수나 배열 이름 앞에 붙여 사용한다. ++연산자는 먼저 값을 증가시킨 후 , 그 값을 사용한다.
💜후치 연산자
후치 연산자인 경우 ++연산자를 변수나 배열 이름 뒤에 붙여 사용한다. ++연산자는 먼저 값을 사용한 후, 그 값을 증가시킨다.
예제1
{
var score = 10;
//++score;//11
score++;//12
//var result = ++score;//11
var result = score++;//11
console.log(result, score); //result 먼저
}
결과 확인하기
예제2
{
let hap, j, k, l;
j = k = l = 1
hap = ++j + k++ + ++l;
console.log(hap);
console.log(j); //합은 1로 계산되는데 합 하고 다음에 다시 불러오면 2(순서중요)후치(시험)
console.log(k);
console.log(l);
}
결과 확인하기
2
2
2
예제3
{
let a = 1, b = 2, c = 3, result;
result = ++a + b++ + ++c;
console.log(result);
console.log(a);
console.log(a+b);
console.log(b);
console.log(c);
}
결과 확인하기
2
5
3
4
예제4
{
let x = 7, y = 7, result;
result = x > y ? ++x : y--;
console.log(result);
console.log(x);
console.log(y);
}
결과 확인하기
7
6
예제5
{
let = a,b,c,result;
a = 20, b = 30, c = 30;
result = a < b ? b++ : --c; //b++ 보다 =이 우선순위가 더 높아서 b++가 실행되지 않음
console.log(result);
console.log(a);
console.log(b);
console.log(a + c);
console.log(c);
}
결과 확인하기
20
31
50
30
💜비트 연산자
이진수로 표현된 데이터를 다룰 때 사용되는 연산자 입니다.
AND(&) : 비트 단위로 두 개의 피연산자가 모두 1일 때 1을 반환하고, 그 외에는 0을 반환합니다.
OR(|) : 비트 단위로 두 개의 피연산자 중 하나라도 1이면 1을 반환하고, 그 외에는 0을 반환합니다.
XOR(^) : 비트 단위로 두 개의 피연산자 중 하나만 1이면 1을 반환하고, 둘 다 0이거나 둘 다 1이면 0을 반환합니다.
NOT(~) : 피연산자의 모든 비트를 반전시킵니다.
시프트 연산자(<<,>>) 등이 있습니다.
{
let a = 9;
let b = 11;
let c = a ^ b;
console.log(c)
}
{
let num1 = 16, num2 = 80;
let result;
result = num1 > num2 ? num1 & num2 : num1 ^ num2;
document.write(result)
}
결과 확인하기
/
64
++ 형변환, typeof()
💜형변환
데이터 타입을 다른 데이터 타입으로 반환하는 것을 말한다. 연산자가 서로 다른 데이터 타입을 요구할 수 있으며, 또는 데이터를 저장하고 검색하는 데이터 구조에서 데이터 타입이 일치해야 한다.
💜typeof()
javacript에서 내장된 함수로서, 피연산자의 타입을 나타내는 문자열을 반환한다.
{
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