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
✍️ 변수란?
변수(variable)란 데이터(data)를 저장하기 위해 프로그램에 의해 이름을 할당받은 메모리 공간을 의미합니다.
즉, 변수란 데이터(data)를 저장할 수 있는 메모리 공간을 의미하며, 이렇게 저장된 값은 변경될 수 있습니다.
C언어에서 숫자 표현에 관련된 변수는 정수형 변수와 실수형 변수로 구분할 수 있습니다.
또다시 정수형 변수는 char형, int형, long형 변수로, 실수형 변수는 float형, double형 변수로 나눌 수 있습니다.
또한, 데이터가 저장된 메모리의 주소를 저장하고 처리하는 포인터 변수가 있습니다.
관련된 정보를 한 번에 묶어서 처리하는 사용자 정의 구조체 변수도 있습니다.
02. 변수 : 데이터 저장 + 데이터 변경
변수는 데이터를 저장 할수도 있지만 변경도 가능하다.
{
let x = 100;
let y = 200;
let 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
javascirptreact
✍️ 연산자 : 변수로 연산이 가능하다.
변수를 이용해서 연산이 가능하고, 연산에는 산술 연산자, 대입 연산자, 비교 연산자, 논리 연산자, 비트 연산자, 삼항 연산자가 있다.
04. 변수 : 지역 변수 + 전역 변수(스코프)
지역 변수는 정의된 블록(함수 블록) 내에서만 사용할 수 있는 변수입니다.
전역 변수는 자바스크립트 코드 내의 어느곳(함수 밖이나 안)에서나 자유롭게 접근할 수 있는 변수입니다.
{
let x = 100; // 전역 변수 : 자바스크립트 어느곳에서나 사용해서 실행문에 실행되는 변수
let y = 200; // 전역 변수
function func(){
let x = 300; // 지역 변수 : 정의된 블록 내에서만 사용해서 블럭 내의 실행문에만 실행되는 변수
y = 400; // 전역 변수 : 저장된 y의 데이터를 변경
z = "javascript" // 전역 변수(틀린 문법, 코드 내에서 잡아줌... 원래는 쓰면 안됩니다.)
function func(){}
console.log("함수안" + x);
console.log("함수안" + y);
console.log("함수안" + z);
}
func();
console.log("함수밖" + x);
console.log("함수밖" + y);
console.log("함수밖" + z);
}
결과 확인하기
함수안400
함수안javascript
함수밖100
함수밖400
함수밖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);
}
결과 확인하기
//Assignment to constant variable.
//Assignment to constant variable.
✍️ 상수란?
상수(constant)란 변수와 마찬가지로 데이터를 저장할 수 있는 메모리 공간을 의미합니다.
하지만 상수가 변수와 다른 점은 프로그램이 실행되는 동안 상수에 저장된 데이터는 변경할 수 없다는 점입니다.
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)은 같은 타입의 변수들로 이루어진 유한 집합으로 정의됩니다.
배열을 구성하는 각각의 값을 배열 요소(element)라고 하며, 배열에서의 위치를 가리키는 숫자는 인덱스(index)라고 합니다.
C언어에서 인덱스는 언제나 0부터 시작하며, 0을 포함한 양의 정수만을 가질 수 있습니다.
배열은 같은 종류의 데이터를 많이 다뤄야 하는 경우에 사용할 수 있는 가장 기본적인 자료 구조입니다.
배열은 선언되는 형식에 따라 1차원 배열, 2차원 배열뿐만 아니라 그 이상의 다차원 배열로도 선언할 수 있습니다.
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
여러 개의 데이터를 하나의 변수에 저장하기 위한 것이다.
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
여러 개의 데이터를 하나의 변수에 저장하기 위한 것이다.
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
✍️ 객체란?
자바스크립트의 기본 타입(data type)은 객체(object)입니다.
객체란 이름(name)과 값(value)으로 구성된 프로퍼티(property)의 정렬되지 않은 집합입니다.
프로퍼티의 값으로 함수가 올 수도 있는데, 이러한 프로퍼티를 메소드(method)라고 합니다.
자바스크립트에서는 숫자, 문자열, 불리언, undefined 타입을 제외한 모든 것이 객체입니다.
하지만 숫자, 문자열, 불리언과 같은 원시 타입은 값이 정해진 객체로 취급되어, 객체로서의 특징도 함께 가지게 됩니다.
11. 객체 : 데이터 저장(키와 값) : 표현방법2
여러 개의 데이터를 하나의 변수에 저장하고 데이터가 추가되면 추가된 데이터를 식별해서 가져올 수 있다.
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
여러 개의 데이터를 하나의 변수에 저장하고 데이터가 추가되면 추가된 데이터를 식별해서 가져올 수 있다.
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
여러 개의 데이터를 하나의 변수에 저장하고 데이터가 추가되면 추가된 데이터를 식별해서 가져올 수 있다.
ex) const 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: "javacscript"
}
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( ){
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]); //undefind
console.log(obj.c);
console.log(obj.d); //(X)
obj.d( );
obj.e( );
obj.f( );
}
결과 확인하기
200
300
//undefind
javascript
ƒ ( ){ console.log("javascript가 실행되었습니다."); } //잘못된 출력 방법
javascript가 실행되었습니다.
javascript가 실행되었습니다.
javascript가 실행되었습니다.
++ 식별자, 예약자
식별자는 변수, 함수, 매개변수 등의 이름을 지정하는 데 사용됩니다.
예약자는 언어에서 특별한 의미를 가지는 단어로, 변수 또는 함수 이름으로 사용할 수 없습니다.
{
식별자 규칙
식별자는 반드시 문자, 밑줄(_), 달러 기호($)로 시작해야 합니다.
식별자는 문자, 숫자, 밑줄, 달러 기호를 포함할 수 있습니다.
식별자는 예약자가 아니어야 합니다.
에약자 목록
break, case, catch, class, const, continue, debugger, default, delete, do, else, export, extends, false, finally, for, function, if, import, in, instanceof,
new, null, return, super, switch, this, throw, true, try, typeof, var, void, while, with, yield 등이 있습니다.
}
++ 연산자(전치, 후치)
연산자에는 전치, 후치의 개념이 있습니다.
개념에 따라 결과 값이 달라집니다.
연산자의 종류 참고
{
var score = 10;
// ++score; // 11
// score++; // 12
// var result = ++score; // 11
var result = score++;
// 출력 시 '=' 연산자가 '++' 연산자가 후치에 있으면 우선순위가 '=' 연산자이므로 먼저 실행 출력 후 '++' 연산자가 실행하고 출력됩니다.
console.log(result, score);
}
결과 확인하기
✍️ 연산자를 혼합 사용한 예시
{
let a = 1, b = 2, c = 3, result;
result = ++a + b++ + ++c;
// 변수보다 전치(++a, ++c)에 있으면 '=' 연산자보다 전치 '++' 연산자가 먼저 실행되고 실행문 실행 후 후치 '++' 연산자가 실행됩니다.
console.log(result); // 8
console.log(a); // 2
console.log(b); // 3
console.log(c); // 4
}
값 : 8, 2, 3, 4
✍️ 삼항 연산자를 사용한 예시
{
let a, b, c, result;
a = 20, b = 30, c = 30;
result = a < b ? b++ : --c; // 삼항 연산자의 조건식에 맞는 실행문만 실행됩니다.
console.log(result); // 30 // 실행문의 결과는 true인데 결과가 30인 이유는 '++' 연산자는 후치에 있으므로 이후에 실행됩니다.
console.log(a); // 20
console.log(b + c); // 61
console.log(c); // 30
}
값 : 30, 20, 61, 30
++ 비트 연산자
컴퓨터에서 비트 단위로 데이터를 처리할 때 사용되는 연산자입니다.
비트 연산자는 이진수로 표현된 데이터에서 비트를 조작하거나 추출하는데 사용됩니다.
비트 연산자 종류
& (AND연산자) : 두 비트가 모두 1일 경우에만 결과가 1이 되며, 그 외에는 0이 됩니다.
| (OR연산자) : 두 비트 중 하나 이상이 1일 경우 결과는 1이 되며, 둘 다 0인 경우에만 0이 됩니다.
~ (NOT연산자) : 비트를 반전시킵니다. 0은 1로, 1은 0으로 바꿉니다.
^ (XOR연산자) : 두 비트가 서로 다른 경우 결과는 1이 되며, 같은 경우에는 0이 됩니다.
<< (LEFT SHIFT) : 왼쪽으로 이동시 오른쪽 끝자리는 0이 됩니다.
>> (RIGHT SHIFT) : 오른쪽으로 이동시 왼쪽 끝자리는 0이 됩니다.
✍️ 예시
{
let num1 = 16, num2 = 80;
let result;
result = num1 > num2 ? num1 & num2 : num1 ^ num2;
document.write(result);
}
값 : 64
++ 형변화, typeof( )
typeof( )는 JavaScript에서 사용하는 연산자이며, 주어진 값의 데이터 유형을 반환합니다.
{
let x = 100, y = "200", z;
const func = function(){}
document.write(x);
document.write(typeof(x));
document.write(y);
document.write(typeof(y));
document.write(z);
document.write(typeof(z));
document.write(func);
document.write(typeof(func));
}
결과 확인하기
number
200
string
undefined
undefined
function(){}
function
✍️ 변수의 데이터 형태를 설정하면 형태가 변형할 수 있습니다.
{
let x = 100, y = "200";
x = String (x); // 숫자 형태의 데이터를 문자 형태로 변형
document.write(typeof(x));
y = Number(y); // 문자 형태의 데이터를 숫자 형태로 변형
document.write(typeof(y));
}
값 : string, number