01.변수 : 데이터 저장
변수는 데이터를 저장하는 저장소입니다.
{
var x = 100;
var y = 200;
var z = "javascript";
console.log(x);
console.log(y);
console.log(z);
}
결과 확인하기
100
200
"javascript"
200
"javascript"
변수의 저장방법.
변수 x에 숫자 100을 저장함 , 변수 y에 숫자 200을 저장함 , 변수 z에 문자 "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);
}
결과 확인하기
300
200
"react"
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);
}
결과 확인하기
400
600
"javascriptreact"
600
"javascriptreact"
연산자 : 변수로 연산이 가능하다.
변수를 이용해서 연산이 가능하고, 연산에는 산술 연산자, 대입 연산자, 비교 연산자, 논리 연산자, 비트 연산자, 삼향 연산자가 있다.
04. 변수 : 지역변수 + 전역 변수(스코프)
지역변수와 전역변수의 사용 방법을 알 수 있다.
{
let x = 100; //전역변수 :전체
let y = 200;
function func(){
let x= 300;
let y = 400;
console.log("함수안" + x);
console.log("함수안" + y);
}
func(); 전역변수:
console.log("함수밖"+x);
console.log("함수밖"+y);
//전역변수 변경
let x = 100;
let y = 200;
function func(){
x= 300; 전역변수다. //100에서 300으로 변경 let으로 선언하지 않고 변경만 했다.
let y = 400;
console.log("함수안" + x); //전역변수는 안과 밖 둘다 실행이 가능하다.
console.log("함수안" + y);
}
func(); 전역변수: //함수 안에 블록화 시켜셔 안에 있는 변수의 값이 나오는 것
console.log("함수밖"+x);
console.log("함수밖"+y);
//함수 안에 변수 추가
let x = 100;
let y = 200;
function func(){
x= 300;
let y = 400; //지역변수
z="javascript" //전역변수의 값이 선언이 되지 않아도 함수 안에서 새로 변수가 생성될 수 있다, 원래는 틀린모드이다. 자바스크립트 자체에서 let으로 실행시켜줌
console.log("함수안" + x); //300
console.log("함수안" + y); //400
console.log("함수안" + z); //javascript
}
func(); //전역변수: 함수 안에 블록화 시켜셔 안에 있는 변수의 값이 나오는 것
console.log("함수밖"+x); //300
console.log("함수밖"+y); //400
console.log("함수밖"+z); //javascript 전역변수라 함수 밖에서도 실행이 가능함
}
결과 확인하기
300"함수안"
400"함수안"
100"함수밖"
200"함수밖"
400"함수안"
100"함수밖"
200"함수밖"
전역변수, 지역변수
전역변수는 함수 밖에 있는 전체를 말하고 지역변수는 함수 안에 블록화 시킨 변수를 말한다. 함수 안에 존재해서 에러가 나지 않는다.
04. 상수 : 데이터 저장 + 데이터 변경(x)
상수는 데이터 저장은 가능하나 변경은 불가능합니다.
{
const x = 100;
const y = 200;
const z = "javascript"
x += 300;
y += 400;
z += "react";
console.log(x);
console.log(y);
console.log(z);
const x = 100, y = 200, z = "javascript";
let x = 100;
let y = 200;
let z = "javascript";
x -= 1000; // 100 - 1000 = -900
x += 1000; // -900 + 1000 = 100
console.log(x, y, z);
}
결과 확인하기
100
200
"javascript"
200
"javascript"
자료형(typeof) : 프로그램에서 처리하는 자료의 유형을 지정하는 자료의 형태
변숫자,문자,블린(논리),undefined,null(값이 없는것),객체,배열,심벌
05. 배열 : 데이터 저장 (여러개): 표현방법1
배열은 여러가지 데이터를 저장할 수 있습니다. 배열은 [ ]와array를 이용합니다.
{
const arr = new Array(); // arr = 배열 단점: 칸이 많이 생긴다
arr[0] = 100;
arr[1] = 200;
arr[2] = "javascript"
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
}
결과 확인하기
100
200
"javascript"
200
"javascript"
06. 배열 : 데이터 저장(여러개): 표현방법2
배열은 여러개 데이터르 저장해서 칸이 많아지는데 한 줄에 간편하게 정리할 수 있는 표현방법도 있습니다.
{
const arr = new Array(100,200,"javascript");
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
}
결과 확인하기
100
200
"javascript"
200
"javascript"
07. 배열 : 데이터 저장(여러개): 표현방법3
한줄에 입력해도 데이터가 많아지면 지저분 해지므로 괄호 안에 넣어두지 않는 더 간편한 표현방법도 있습니다.
{
const arr = [];
arr[0] = 100;
arr[1] = 200;
arr[2] = "javascript"
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
}
결과 확인하기
100
200
"javascript"
200
"javascript"
08. 배열 : 데이터 저장(여러개): 표현방법4
칸이 많아질 수 있으므로 [ ]안에 배열합니다.
{
const arr = [100, 200, "javascript"];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
}
결과 확인하기
100
200
"javascript"
200
"javascript"
09. 객체 : 데이터 저장(키와 값): 표현방법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]);
}
결과 확인하기
100
200
"javascript"
200
"javascript"
10. 객체 : 데이터 저장(키와 값): 표현방법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);
}
결과 확인하기
100
200
"javascript"
200
"javascript"
11. 객체 : 데이터 저장(키와 값): 표현방법3
{}를 이용해서 객체 값을 구할 수 있지만 양이 많아진다는 단점이 있습니다.
{
const obj = {};
obj.a = 100;
obj.b = 200;
obj.c = "javascript";
console.log(obj.a);
console.log(obj.b);
console.log(obj.c);
}
결과 확인하기
100
200
"javascript"
200
"javascript"
12. 객체 : 데이터 저장(키와 값): 표현방법4
{}를 이용해서 객체를 구할 수 있습니다.
{
const x = 100; // 변수
const arr = [100, 200, "javascript"]; // 배열
const obj = {a:100, b:200, c:"javascript"}; //객체
console.log(obj.a);
console.log(obj.b);
console.log(obj.c);
}
결과 확인하기
100
200
"javascript"
200
"javascript"
13. 배열 : 데이터 저장(키와 값)
키와 값을 이용한 표현방법들
{
const brr = new Array();
const crr = new Array(200, "react", false); // 옛날방식
const drr = [];
const err = [300, "arrat", true];
brr[0] = 100;
brr[1] = "javascript";
brr[2] = "true";
drr[0] = 100;
drr[1] = "javascript";
drr[2] = "true";
console.log(brr[0],brr[1],brr[2]);
console.log(crr[0],crr[1],crr[2]);
console.log(drr[0],drr[1],drr[2]);
console.log(err[0],err[1],err[2]);
}
결과 확인하기
100,"javascript","true"
200, "react", false
100,"javascript","ture"
300,"arrat","ture"
200, "react", false
100,"javascript","ture"
300,"arrat","ture"
14. 객체 : 데이터 저장 (키와 값 ): 표현방법 4
순서가 바뀌어서 써진 객체 표현방법 , ;는 마지막을 표시할 때 사용하지 않아도 된다.
{
const obj = {a:100, b:200, c:"javascript"};
console.log(obj.a);
console.log(obj.b);
console.log(obj.c);
}
결과 확인하기
100
200
"javascript"
200
"javascript"
15.객체 : 데이터 저장 (키와 값 ): 표현방법 5
배열 안에 객체가 있을 때
{
const obj = [
{a:100, b:200},
{c:"javascript"}
];
console.log(obj[0].a);
console.log(obj[0].b);
console.log(obj[1].c);
}
결과 확인하기
100
200
"javascript"
200
"javascript"
16.객체 : 데이터 저장 (키와 값 ): 표현방법 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); //obj 쓴 후 객체 a , obj 쓴후 객체 쓰고 배열 가져오기 obj쓴 후 객체 , 객체
결과 확인하기
100
200
300
400
500
"javascript"
200
300
400
500
"javascript"
17. 객체 : 데이터 저장 (키와 값 ): 표현방법 7
객체 안에 변수를 저장한 것 a대신에 변수를 넣어준 것 키값 생략
{
const a = 100;
const b = 200;
const c = "javascript";
const obj = {a, b, c}; // {},[]객체나 변수가 더 들어올 수 있음
console.log(a);
console.log(b);
console.log(c);
}
결과 확인하기
100
200
"javascript"
200
"javascript"
21.객체 : 데이터 저장 (키와 값 ): 표현방법 8
함수가 들어가는 것 , 객체 안에는 실행문이 나올 수 있다.
{
const obj = {
a: 100,
b: [200, 300],
c: "javascript",
d: function(){
console.log("javascript가 실행되었습니다.");
},
e: function(){
console.log( objc + "가 실행되었습니다.");
},
f: function(){
console.log( thisc + "가 실행되었습니다.");
}
}
console.log(obj.a);
console.log(obj.b[0]);
console.log(obj.b[1]);
console.log(obj.b[2]); //undifind
console.log(obj.c);
console.log(obj.d); //(이렇게 쓰면 안된다)
obj.d();
obj.e();
obj.f();
}
결과 확인하기
100
200,300
"javascript"
"javascript가 실행되었습니다." "javascript가 실행되었습니다." "javascript가 실행되었습니다."
200,300
"javascript"
"javascript가 실행되었습니다." "javascript가 실행되었습니다." "javascript가 실행되었습니다."
변수, 상수, 배열, 객체, 배열&객체, 함수, 클래스
변수 : 데이터 하나 저장 / 상수 : 변하지 않는 것 / 배열 : 데이터 저장 두개 이상 무제한 저장 / 객체 : 키와 값으로 저장 / 배열 & 객체 = 저장문 / 함수 : 실행문 (너무 난잡, 기능 추가 확대할때 불편) , 클래스보다 쉬움 / 클래스 : 함수의 집합체 (함수의 디테일 버전), 자바의 개념
20.식별자, 예약자
식별자와 예약자, 비트연산잔에 대한 설명입니다.
{
//식별자 변수는 띄어쓰기를 할 수 없습니다.
var n um = 10; // 띄어쓰기 불가능
//특수문자가 올 수 없으나 '_'나 '$'는 사용할 수 있습니다.
var 1ume = 10; //x
var %ume = 10; //x
var _ume = 10; //o
var $ume = 10; //o
//예약어 : 자바스크립트 안에서 특별한 용도를 가진 키워드를 의미합니다. 변수명으로 사용 불가능
//brea,case,catch,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var...
var break = 10;
var continue = 10;
}
결과 확인하기
21.연산자(전치,후치), 비트연산자
연산자의 전치연산자, 후치연산자 비트연산자 문제풀이입니다.
{
var score = 10;
++score; //전치 연산자 +1 11
score++; //후치 연산자 +1 12
var result = ++score //11
var result = score++ //10
console.log(result, score);
//문제1
let hap, j, k, l;
j = k = l = 1 //jkl안에 1이 들어가 있다.
hap = ++j + k ++ + ++l //후치 연산자는 우선순위가 낮다.
console.log(hap); //5 후치 연산자는 k가 계산이 안됌
console.log(j); //2
console.log(k); //2 계산이 되어서 나옴
console.log(l); //2
//문제2
let a = 1, b= 2, c = 3, result;
result = ++a + b++ + ++c;
console.log(result); //8
console.log(a); //2
console.log(b); //3
console.log(c); //4
//문제3
let x = 7, y = 7, result;
result = x ≶ y ? ++x : y--;
console.log(result); //7
console.log(x); //7
console.log(y); //6
//문제4
let = a, b, c, result;
a=20, b=30, c=30;
result= a< b ? b++ : --c;
//에이는 비보다 작으면 b++가 실행된다 아니면 --c가 실행된다.
console.log(result) //30 b++는 후치 연산자라 우선순위가 낮아서 계산이 되지 않고 실행된다.
console.log(a) //20 a의 값 그대로
console.log(b+c) //61 b는 +1로 31 c는 30 (c는 실행된 적이 없다. 그대로의 값)
console.log(c) //30 실행된 적 없으므로 c의 값이 그대로 실행된다.
//비트연산자
a = 5 // 0101(2진수)
b = 9 // 1001(2진수)
a = a ^ b
b = a ^ b
a = a ^ b
print("a =", a) // 1001(2진수), 즉 9
print("b =", b) // 0101(2진수), 즉 5
}
결과 확인하기
11,12
11,10
11,10
전치연산자,후치연산자,비트연산자
전치연산자는 우선순위가 result보다 높아서 값이 더해지지만 후치연산자는 우선순위가 낮아 더해지지 않습니다. 비트연산자는 AND연산(&): 두 비트가 모두 1이면 결과는 1, 그렇지 않으면 0이 됩니다. OR연산(|):두 비트 중 하나라도 1이면 결과는 1 아니면 0이 됩니다. XOR연산(^): 두 비트가 서로 다르면 결과는 1 같으면 0이 됩니다. NOT연산(~):비트 값을 반전시킵니다. 0은 1로 1은 0으로 변환됩니다. (<<):비트 값을 왼쪽으로 이동시키는데 이동한 비트는 0으로 채워집니다. (>>):비트 값을 오른쪽으로 이동시키는데 이동한 비트는 최상위 비트와 같은 값으로 채워집니다.
21.번외 형변화,typeof ()
변수는 데이터를 저장하는 저장소입니다.
{
let x = 100, y = "200", z;
const func = function(){} //함수도 변수에 들어갈 수 있음
document.write(x);
document.write(typeof(x)); //100을 넣어주면 숫자("Number")로 판단한다. typeof:성질을 알려준다
document.write(y);
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));
}
}
결과 확인하기
x= 100
typeof(x)= Number
y= "200" typeof(x)= string
y=Number(y)= : string 에서 number로 변환
(z)=undefined
typeof(z)=undefined
func=function
typeof(func)=function
typeof(x)= Number
y= "200" typeof(x)= string
y=Number(y)= : string 에서 number로 변환
(z)=undefined
typeof(z)=undefined
func=function
typeof(func)=function