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이 됩니다. |