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);
결과 확인하기

변수는 3가지 선언자가 있다.

변수는 var, let, const 3가지의 선언자가 있다.
'var'은 동일한 변수로 재선언도 가능하고, 이미 선언된 변수에 새로운 값을 재할당 할 수 있다.
'let'은 동일한 변수로 재선언은 불가능하지만, 이미 선언된 변수에 새로운 값을 재할당 할 수 있다.
'const'는 동일한 변수로 재선언도 불가능하고, 이미 선언된 변수에 새로운 값도 재할당 할 수 없다.
'var'은 재선언에 대한 문제 때문에 잘 쓰이지 않고, 상황에 따라 let과 const를 사용하는 것이 좋다.
변수는 var(선언자) x(변수) = 100(데이터)로 변수에 데이터를 저장한다.

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);
결과 확인하기

선언된 변수에 값을 재할당 할 수 있다.

x, y, z에 각각 데이터를 저장했어도 이후의 재선언으로 변경이 가능하다.
다만 let은 데이터의 변경이 아닌 let x = 300;과 같은 동일 변수의 재선언은 불가능하다.

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);
결과 확인하기

연산자를 통해 데이터를 추가할 수 있다.

변수를 이용해서 연산이 가능하다.
연산에는 산술 연산자, 대입 연산자, 비교 연산자, 논리 연산자 등이 있다.

04. 변수 : 지역 변수 + 전역 변수(스코프)

전역 변수와 지역 변수는 값이 영향을 미치는 범위가 다르다.

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);
결과 확인하기

변수와 함수의 유효 범위를 스코프(scope)라 한다.

전역 스코프는 코드 어디에서나 접근할 수 있는 범위이며, 지역 스코프는 함수 내에서 정의된 변수와 함수에만 접근할 수 있는 범위입니다.
함수 내부에서 정의된 변수는 해당 함수의 지역 스코프에서만 유효합니다. 따라서 함수 외부에서는 해당 변수에 접근할 수 없습니다. 반면, 전역 스코프에서 정의된 변수는 어디에서나 접근할 수 있습니다.
위의 예시에서 x와 z처럼 선언 없이 변수를 지정하는 경우, 전역 변수로 기능하지만 오류의 가능성이 있어 쓰지 않는 것이 좋다.

05. 상수 : 데이터 저장 + 데이터 변경(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'

const를 통해 선언한 변수는 '상수'라고 하며 let과 같이 중복 선언이 불가능하다.
또한 상수는 값을 재지정할 수도 없다.

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]);
결과 확인하기

다양한 데이터를 저장하는 배열

선언자 const로 변수 arr에 배열 생성자 'Array()'로 배열을 저장한다. 'new'는 변수의 타입을 정하는 자바스크립트 연산자다.
배열에서의 대괄호([])에 넣는 숫자는 배열의 위치를 가리키는 숫자이며, 인덱스(index)라고 한다.
인덱스는 0부터 시작하며 양의 정수만 가능하다.

07. 배열 : 데이터 저장(여러 개) : 표현방법2

저장된 여러 개의 데이터를 한 줄에 나타낸다.

const arr = new Array(100, 200, "javascript");

console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
결과 확인하기

저장된 데이터를 표시하는 여러 방법이 있다.

각각의 인덱스에 저장된 데이터를 일일이 나열하지 않고 배열 생성자 Array()안에 나타내면 코드가 간결해진다.

08. 배열 : 데이터 저장(여러 개) : 표현방법3

대괄호([])는 배열을 만드는 기호이다.

const arr = [];
arr[0] = 100;
arr[1] = 200;
arr[2] = "javascript";

console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
결과 확인하기

배열 선언을 간단히 해보자.

배열을 선언했던 new Array()는 대괄호([])로 함축적이고 직관적으로 표현이 가능하다.

09. 배열 : 데이터 저장(여러 개) : 표현방법4

배열을 좀 더 직관적으로 표현한다.

const arr = [100, 200, "javascript"];

console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
결과 확인하기

가장 직관적인 표현방법

배열 생성자 Array()의 괄호 안에 데이터를 저장했듯이, 대괄호([]) 안에 데이터를 나타내는 것도 가능하다.
코드는 함축적이고 직관적으로 적어야 유지 및 보수에 좋기 떄문에 최대한 그렇게 적을 수 있도록 노력해야 한다.

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]);
결과 확인하기

객체는 키(key)와 값(value)으로 이뤄진다.

객체는 키로 값을 불러온다. 그 키와 값들은 속성(property)이라고 부른다.
객체 변수로 선언된 obj는 배열 방식([])을 키로 이용하여 값을 저장하고 불러올 수 있다.

11. 객체 : 데이터 저장(키와 값) : 표현방법2

객체는 키를 호출할 때 "변수명.키"로 한다.

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);
결과 확인하기

객체의 키를 부르는 방법

앞서 배열은 대괄호([])에 인덱스를 넣어 데이터를 불러왔다면, 객체는 "변수명.키"로 데이터를 불러온다.

12. 객체 : 데이터 저장(키와 값) : 표현방법3

중괄호({})는 객체를 만드는 기호이다.

const obj = {};
obj.a = 100;
obj.b = 200;
obj.c = "javascript";

console.log(obj.a);
console.log(obj.b);
console.log(obj.c);
결과 확인하기

객체 선언을 간단히 해보자.

앞서 배열의 선언을 대괄호([])로 했듯이, 객체는 중괄호({})로 표현한다. 'new Object'보다 더 직관적인 표현 방법이다.

13. 객체 : 데이터 저장(키와 값) : 표현방법4

객체의 키와 값은 콜론(:)으로 한 쌍으로 표현할 수 있다.

const obj = {a:100, b:200, c:"javascript"};

console.log(obj.a);
console.log(obj.b);
console.log(obj.c);
결과 확인하기

객체 속성의 표현방법

객체는 키와 값의 구조로 되어 있으며 이들을 속성(property)이라고 부른다.
속성은 콜론(:)을 기준으로 왼쪽에 키, 오른쪽에 값으로 '키:값'으로 표현한다.

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);
결과 확인하기

배열 안에 들어간 객체를 호출하는 방법

배열 안에 들어간 객체 하나하나가 배열의 인덱스라고 본다.
배열을 먼저 호출한 뒤([])에 객체의 키로 저장된 값(키:값)을 부른다([].키).

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);
결과 확인하기

중첩된 데이터 타입을 호출하는 방법

객체 속에 들어간 여러 중첩된 데이터 타입을 호출할 땐 HTML의 부모, 자식 요소를 생각하면 된다.
처음 지정하는 객체를 부모 요소라 보고 그 안에 들어간 속성이나 배열, 객체를 자식 요소라고 생각한다.
class 안의 id를 지정할 때 "#class .id"라고 하듯이 "변수명.키"로 시작해서 그 안에 속한 데이터를 한 번 더 부르는 것이다. (변수명.키[] 또는 변수명.키.키)

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);
결과 확인하기

속성이 변수인 객체 호출 방법

앞서 변수로 선언된 변수명을 객체에 저장하고 그 변수명만 호출하면 값을 볼 수 있다.

17. 객체 : 데이터 저장(키와 값) : 표현방법8

객체의 속성으로 함수가 들어갈 수 있다. 함수를 호출할 땐 다른 문법이 필요하다.

const j = "javascript";

const obj = {
    a: 100,
    b: [200, 300],
    c: "javascript",
    d: function(){
        console.log("javascript가 실행되었습니다.");
    },
    e: function(){
        console.log(obj.c + "가 실행되었습니다.");  //(obj.c = j = "javascript")
    },
    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 정의할 수 없는, 값이 지정되지 않은 경우. null은 변수가 어떤 객체도 가리키고 있지 않은 경우.
console.log(obj.c);
console.log(obj.d);             // 실행문을 불러올 땐 다른 문법을 써야 한다.
obj.d();                        // 실행문은 ()를 붙인다.
obj.e();
obj.f();
결과 확인하기

함수 호출 방법

함수의 생성자는 function()으로 실행문을 통해 호출한다. 실행문은 ()를 붙여써야 한다.
실행문을 쓰지 않은 'console.log(obj.d);'의 경우
ƒ (){
console.log("javascript가 실행되었습니다.");
}
라는 의도하지 않은 데이터 값이 도출된다.

불러오려는 값 중에 이미 존재하는 속성 값이 있다면, 해당 속성 값을 지닌 변수나 객체, this를 통해 대체할 수 있다.

+1. 데이터 저장 : 식별자

식별자는 변수, 함수, 매개변수 등에 이름을 지정하는 데 사용됩니다.

let obj, arr1, _arr2, $arr3
//식별자는 문자, 숫자, 밑줄(_), 달러 기호($)로 구성됩니다.
//식별자는 숫자나 밑줄(_), 달러 기호($)를 제외한 특수문자로 시작할 수 없습니다.

let nu mber
//식별자는 띄어쓰기할 수 없습니다.

let if, for
//예약어(reserved word)는 식별자로 사용할 수 없습니다.
//예를 들어, "if", "for", "while" 등은 JavaScript에서 예약어이므로 식별자로 사용할 수 없습니다.

let myVar, myvar
//대소문자를 구분합니다. "myVar"와 "myvar"은 서로 다른 식별자입니다.
//식별자는 카멜 케이스(camel case)를 사용하는 것이 일반적입니다.
//즉, 첫 번째 단어는 소문자로 작성하고, 이후 단어의 첫 글자는 대문자로 작성합니다.
//예를 들어, "myVariable", "myFunction"과 같이 작성합니다.

+2. 데이터 저장 : 연산자(전치, 후치)

전치와 후치 연산자는 우선순위가 있어 결괏값에 영향을 미친다. 비트연산자

{
    let a = 1, b = 2, c = 3, result;
    result = ++a + b++ + ++c;

    console.log(result);    //후치 연산자는 "="보다 우선순위가 낮다 따라서 b++은 계산되지 않고 출력된다.
    console.log(a);
    console.log(b);
    console.log(c);
}
{
    let x = 7, y = 7, result;

    result = x > y ? ++x : y--;
    console.log(result);
    console.log(x);
    console.log(y);
}
{
    let a, b, c, result;
    a = 20, b = 30, c = 30;

    result = a < b ? b++ : --c;

    console.log(result);
    console.log(a);     
    console.log(b + c); 
    console.log(c);     
    console.log(b);     
}
결과 확인하기

연산자에는 우선순위가 있다?!

첫 번째 코드의 a, b, c 값은 1이 더해진 결과인 2, 3, 4가 나오지만, result의 값은 8이 나온다.
이는 후치연산자가 부등호(=)보다 우선순위가 낮기 때문이다. 위의 계산식에서 b++는 출력이 된 후에 계산이 되므로 결괏값에는 영향을 미치지 못한다.
삼항 연사자가 사용된 두 번째와 세 번째의 경우도 'y--'', 'b++'는 후치 연산자이기 때문에 result 값과 각 변수의 값이 다른 것을 볼 수 있다.

+3. 데이터 저장 : 형변환, typeof

형변환 함수를 이용해 저장된 데이터의 타입을 변경할 수 있다.

let y = '200';
const func = function(){}

document.write(typeof(y));
y = Number(y);
document.write(typeof(y));      //타입 변환
결과 확인하기

"typeof"는 변수의 데이터 타입을 반환하는 함수입니다. "Number"는 문자열의 숫자를 숫자로 반환하는 함수입니다.
문자열 '200'인 y의 값이 Number 함수에 들어가기 전에는 문자열(string) 타입이었지만, 이후의 y 값은 숫자(number) 형태로 변환됐습니다.
이런 "typeof"나 "Number" 같은 함수를 자바스크립트에 기본적으로 내장된 함수라 하여 "내장함수"라고 하며, 관련 함수는 여기서 확인할 수 있습니다.

+4. 데이터 저장 : 비트 연산자

비트 연산자는 0과 1로 이루어진 2진법의 연산자입니다.

let num1 = 16, num2 = 60;
let result = (num1 > num2) ? num1 & num2 : num1 ^ num2;
document.write(result);
document.write(num1 & num2);
결과 확인하기

비트 연산자는 피연산자를 10진수나 16진수나 8진수와 같은 숫자가 아니라, 0과 1로 이루어진 비트(bit)의 집합으로 표현하고 연산하는 연산자입니다.
위의 예시는 num1이 num2보다 작기 때문에 false이므로, "num1 ^ num2"의 계산을 진행합니다. 계산식은 다음과 같습니다.
16: 00010000
60: 00111100
----------------
XOR: 00101100 (44)

만약 "num1 & num2"의 계산일 경우에는
16: 00010000
60: 00111100
----------------
XOR: 00010000 (16)
의 결과가 나오게 됩니다.

비트 연산자에는 다음과 같은 종류가 있습니다.

연산자 설명 예시
~ 단항 비트 보수 연산자로, 피연산자의 모든 비트를 반전시킵니다. ~0101은 1010이 됩니다.
& 이진 논리 AND 연산자로, 두 피연산자의 각 비트를 AND 연산합니다. 0101 & 0011은 0001이 됩니다.
| 이진 논리 OR 연산자로, 두 피연산자의 각 비트를 OR 연산합니다. 0101 | 0011은 0111이 됩니다.
^ 이진 배타적 OR (XOR) 연산자로, 두 피연산자의 각 비트가 다르면 1을 반환하고 같으면 0을 반환합니다. 0101 ^ 0011은 0110이 됩니다.
<<, <<= 왼쪽 시프트(shift) 연산자로, 첫 번째 피연산자의 모든 비트를 왼쪽으로 두 번째 피연산자만큼 이동시킵니다. 오른쪽에는 0이 채워집니다. 00010100 << 2는 01010000이 됩니다.
>>, >>= 오른쪽 시프트(shift) 연산자로, 첫 번째 피연산자의 모든 비트를 오른쪽으로 두 번째 피연산자만큼 이동시킵니다. 왼쪽에는 부호비트가 채워집니다. -00010100 >> 2는 -00000101이 됩니다.