01. 변수 : 데이터 저장
변수는 데이터를 저장하는 "저장소" 이며 이 저장소에는 숫자, 문자, 함수, 객체 등을 저장할수 있습니다.{
var x = 100;
var y = 200;
var z = "javascript";
console.log(x);
console.log(y);
console.log(z);
}
결과 확인하기
200
"javascript"
JavaScript es6가 나온 후로는 var를 쓰지 않습니다.
왜냐하면 var는 문제점이 많기 때문입니다. var의 많은 문제점들중 하나는 변수 중복입니다.
변수가 중복이되어 에러가 나야하는 코드를 입력했을때 var를 사용하면 정상적으로 결과가 출력이 됩니다.
혼자서는 문제가없을지 모르지만, 이게 다수와 함께하는 프로젝트라면 나비효과처럼 엄청난 문제를 일으킬것입니다.
02. 변수 : 데이터 저장 + 데이터 변경
변수는 데이터를 저장 할수도 있지만 변경도 가능 합니다.{
let x = 100;
let y = 200;
let z = "javascript";
x = 300;
y = 400;
z = "react";
console.log(x);
console.log(y);
console.log(z);
}
결과 확인하기
400
"react"
let과 var는 데이터 저장은 물론, 데이터 변경이 가능합니다.
보통, 변경해야할 데이터가 있을때 let을 사용하면 됩니다.
변수 x , y , z 각각에 100, 200, "javascript"를 할당했고 변수 x, y, z를 각각 300, 400 "react"로 변경하였습니다.
03. 변수 : 데이터 저장 + 데이터 변경 + 데이터 추가
변수는 데이터를 저장,변경할수도있고 추가도 할 수 있습니다.
{
let x = 100;
let y = 200;
let z = "javascript";
x += 300;
y += 400;
z += "react";
console.log(x);
console.log(y);
console.log(z);
}
결과 확인하기
600
"javascriptreact"
var대신 let을 사용했습니다.
let과 var는 데이터를 저장,변경 그리고 데이터 추가 까지 가능합니다.하지만 위에 언급했다시피 var는 많은 문제점들이 있어 요즘은 잘 사용하지 않고 변수를 사용할때 let을 주로 쓰게됩니다.
변수 x, y, z 각각에 100, 200, "javascript"를 할당시킨뒤 변수 x, y, z에 각각 300, 400, react를 추가합니다.
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
✍Scope?
Scope란, 유효범위, 영역을 뜻합니다.scope는 참조 대상 식별자(identifier,변수,함수의 이름과 같이 어떤 대상을 다른대상과 구분하여 식별할 수 있는 유일한 이름)
를 찾아내기 위한 규칙이다. 자바스크립트는 이 규칙대로 식별자를 찾는다.
이러한 scope는 다음과 같이 2가지로 나눌 수 있습니다.
(전역)Global scope = 코드 어디에서든지 참조할 수 있다.
(지역)Local scope or Function-level scope = 함수 코드 블록이 만든 스코프로, 함수 자신과 하위 함수에서만 참조할 수 있다.
모든 변수는 스코프를 갖게됩니다.. 변수의 관점에서 스코프를 구분하면 다음과 같이 2가지로 나눌 수있다.(전역)Global variable = 전역에서 선언된 변수이며 어디에든 참조할 수 있다.
(지역)Local variable = 지역(함수) 내에서 선언된 변수이며 그 지역과 그 지역의 하부 지역에서만 참조할 수 있다.
변수는 선언위치(전역 또는 지역) 에 의해 스코프를 가지게 됩니다. 즉, 전역에서 선언된 변수는 전역 스코프를 갖는 전역 변수이고,
지역(자바스크립트의 경우 함수 내부) 에서 선언된 변수는 지역 스코프를 갖는 지역 변수가됩니다.
전역 스코프를 갖는 전역 변수는 전역(코드어디에서든지)에서 참조할 수 있습니다.
지역(함수 내부)에서 선언된 지역 변수는 그 지역과 그지역의 하부 지역에서만 참조할 수 있습니다.
✍Global variable?
전역변수는 자바스크립트 코드내의 어느곳에서나 접근할 수 있는 변수를 말합니다.전역변수를만드는 방법은 다음과 같습니다.
❶선언하지 않고 직접사용 합니다.
❷var로 선언시 함수 밖에서 선언 합니다.
❸let으로 선언시 블럭 밖에서 선언합니다.
위의 결과값처럼 전역 변수는 함수 외부뿐만 아니라 내부에서도 접근하여 사용할수 있습니다.
✍Local variable?
지역변수는 정의된 블록내에서만 사용할 수 있는 변수를 말합니다.❶var로 함수내에서 선언시 선언된 함수 내에서만 유효합니다.
❷let로 블럭내에서 선언시 선언된 블럭 내에서만 유효합니다.(const와 동일)
함수의 본문 내에서 지역변수는 같은 이름을 가진 전역변수보다 우선합니다.
전역변수와 동일한 이름으로 지역 변수 또는 함수 매개변수를 선언하면 전역변수가 숨겨집니다.
지역변수와 전역변수에대헤 자세한 내용은 아래 링크 참조하세요
https://dlscks0930.tistory.com/40
05. 상수 : 데이터 저장 + 데이터 변경(X)
상수는 데이터 저장은 가능하나 변경은 불가능합니다.{
const x = 100;
const y = 200;
const z = "javascript";
x = 300; //상수 x의 값을 300으로 변경한다.
y = 400; //상수 y의 값을 400으로 변경한다.
z = "react"; //상수 y의 값을 react로 변경한다.
console.log(x);
console.log(y);
console.log(z);
}
결과 확인하기
한가지가 다른데, 그것은 바로 재할당이 불가합니다.
변수에 데이터를 집어넣고 let과 var는 그 변수의 값을 변경할수 있었습니다. 하지만 const는 재할당이 불가합니다.
✍const와 let은 각각 언제 사용하나요?
const와 let을 언제 사변경해야 할시 사용하면되고, 반대로 const는 데이터를 바꿀 필요가 없을때 사용하면 됩니다.그렇게 한다면 여러명이 용할지 정하는 법은 간단합니다.
let은 데이터를 프로젝트를 진행할때 const와 let만 봐도 "어디에서 변경이되는구나" "얘는 끝까지 값이 변경이 되지않는구나" 를 누구나 알수있습니다.
06. 배열 : 데이터 저장(여러개): 표현방법1
배열은 여러개의 데이터를 저장 할수있는 저장소이며, 표현 방법도 여러가지 입니다.그중 첫번째 표현방법입니다.
{
const arr = new Array(); //비어있는 배열, 즉 length가 0인 배열을 생성합니다.
arr[0] = 100; //배열의 첫 번째 요소에 숫자 100을 대입합니다.
arr[1] = 200; //배열의 두 번째 요소에 숫자 200을 대입합니다.
arr[2] = "javascript"; //배열의 세 번째 요소에 문자 javascript를 대입합니다.
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
}
결과 확인하기
200
javascript
배열의 요소는 배열에서 자신의 위치를 나타내는 0이상의 정수인 인덱스를 갖으며
인덱스는 배열의 요소에 접근 할때 사용한다.
✍인덱스란?
인덱스(index) : 배열의 순서, 위치를 나타내며 1이 아닌 0부터 시작한다.07. 배열 : 데이터 저장(여러개): 표현방법2
배열은 여러개의 데이터를 저장 할수있는 저장소이며, 표현 방법도 여러가지 입니다.그중 두번째 표현방법입니다.
{
const arr = new Array(100, 200, "javascript");
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
}
결과 확인하기
200
javascript
✍new Array란?
'new Array'는 JS에서 배열을 생성하는 방법중 하나입니다.'Array'는 JS의 내장 객체이며, 'new' 연산자와 함께 사용하여 새로운 배열을 생성할 수 있습니다.
또는 new Array를 사용하여 배열을 생성할 때, 인자를 전달하지 않아도 됩니다.
이 경우, 빈 배열이 생성됩니다. 예를 들어, new Array()는 빈 배열을 생성합니다.
08. 배열 : 데이터 저장(여러개): 표현방법3
배열은 여러개의 데이터를 저장 할수있는 저장소이며, 표현 방법도 여러가지 입니다.그중 세번째 표현방법입니다.
{
const arr = []; //비어있는 배열,즉 length가 0인 배열을 생성합니다.
arr[0] = 100; //배열의 첫 번째 요소에 숫자 100을 대입합니다.
arr[1] = 200; //배열의 두 번째 요소에 숫자 200을 대입합니다.
arr[2] = "javascript"; //배열의 첫 번째 요소에 숫자 javascript를 대입합니다.
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
}
결과 확인하기
200
javascript
배열 리터럴을 사용하여 배열을 생성할 수도 있습니다.
✍배열 리터럴이란?
배열 리터럴은 배열을 생성의 방법중 하나입니다. 대괄호([ ])로 표현되며, 괄호 안에 배열 요소를 나열하여 전달합니다.예를 들어, [1, 2, 3]은 1, 2, 3을 요소로 갖는 배열을 생성합니다.
몰론 따로 인자를 전달하지 않아도 됩니다. 이경우 빈배열이 생성됩니다. 예를 들어, const arr = [];는 빈배열을 생성합니다.
09. 배열 : 데이터 저장(여러개): 표현방법4
배열은 여러개의 데이터를 저장 할수있는 저장소이며, 표현 방법도 여러가지 입니다.
그중 네번째 표현방법 입니다.
{
const arr = [100, 200, "javascript"]; //100,200,javascript 배열을 생성합니다. length는 3입니다.
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
}
결과 확인하기
200
javascript
표현방법2와 원리는 같지만, newArray를 생략하고 대괄호를 사용하여 표현방법2보다 코드가 간단하게 되었습니다.
여러 표현방법중 가장 간단하여 자주쓰입니다.
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
javascript
✍키(key)
이름,혹은 식별자로 사용되는 문자열(string) 또는 Symol타입의 값입니다.key는 string 혹은 symbol타입이 될수도있으며 반드시 문자열일 필요는 없으며,
Symbol값으로도 사용될수도 있습니다.
✍값(value)
value는 Javascript에서 사용 가능한 모든 데이터 타입을 사용할 수 있습니다.예를 들어, 숫자(Number),문자열(String),불린(Boolean),배열(Array),객체(Object),함수(function)등
어떤 데이터 타입이든 객체의 값으로 사용할수 있습니다.
✍SymbolType
여러 데이터 타입 중 하나로, 고유하고 변경 불가능한 값을 나타내는Symbol 타입은 다른 모든 데이터 타입과 구분되는 유일한 값입니다.
✍식별자
변수,함수,매개변수와 같은 개체를 구분하는데 사용되는 name입니다.식별자의 예로는 변수명과 함수명 등등이 이있습니다.
식별자의 규칙으로는
❶.키워드를 사용하면 안 된다.
❷.숫자로 시작하면 안 된다.
❸.특수 문자는 _와 $만 허용된다.
❹.공백 문자를 포함할 수 없다.
✍불린(boolean)
자바스크립트에서 불린(Boolean)은 논리 데이터 타입으로,참(true) 또는 거짓(false)의 두 가지 값 중 하나를 나타냅니다.
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);
}
결과 확인하기
200
javascript
대괄호([])를 생략하고 마침표(.)를 이용하여 변수와키를 구분시켜주어
지금까지의 표현방법보다 조금더 간단해진것을 확인할수있습니다.
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);
}
결과 확인하기
200
javascript
생략한것을 중괄호 ({})만으로 표현을 해서 코드가 한층더 간결해졌습니다.
13. 객체 : 데이터 저장(키와 값) : 표현방법4
변수는 데이터 값을 하나밖에 저장하지 못하지만 객체는 값이 필요한 대로 만들어 쓸 수 있습니다.객체는 여러방법으로 표현할수있지만 그 중 네 번째 방법입니다.
{
const obj = {a:100, b:200, c:"javascript"};
console.log(obj.a);
console.log(obj.b);
console.log(obj.c);
}
결과 확인하기
200
javascript
애초에 객체를 생성할때 바로 키에 값을 지정하는 표현방법입니다.
다른 표현방법들에 비해 굉장히 짧고 간단한 방법입니다.
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
javascript
consol.log(obj[0].a)는 첫번째 객체에 a의 값을 출력하도록하는것이고
consol.log(obj[0].b)는 첫번째 객체에 b의 값을 출력하도록하는것이고
consol.log(obj[1].c)는 두번째 객체에 c의 값을 출력하도록하는것이다.
15. 객체 : 데이터 저장(키와 값) : 표현방법6
객체 속에 배열이 있는 표현 방법입니다.{
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
consol.log(obj.a)는 obj객체안에 있는 a에 값을 출력 하도록 하는것이다.
consol.log(obj.b[0])는 obj객체안에 있는 배열b의 첫번째요소의 값을 출력하도록하는것이다.
consol.log(obj.b[1])는 obj객체안에 있는 배열b의 두번째요소의 값을 출력하도록하는것이다.
consol.log(obj.c.x)는 obj객체안에 있는 객체c의 x의 값을 출력하도록하는것이다.
consol.log(obj.c.y)는 obj객체안에 있는 객체c의 y의 값을 출력하도록하는것이다.
console.log(obj.d)는 obj객체안에 있는 객체d의 값을 출력하도록 하는것이다.
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
javascript
const obj={a,b,c} 같은 경우 키 값을 대신해서 변수를 입력시키는 방법입니다.
17. 객체 : 데이터 저장(키와 값) : 표현방법8
여러 개의 데이터를 하나의 변수에 저장하고 데이터를 식별해서 가져오는 표현방법입니다.{
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가 실행되었습니다.
이 코드는 JavaScript로 작성된 것으로, 상수(const) a, b, c를 정의하고 있습니다. 그리고 객체(object) obj를 만들어서 a, b, c를 프로퍼티(property)로 갖도록 하고 있습니다.
그 다음에는 각각의 상수인 a, b, c를 console.log로 출력하고 있습니다.
따라서, 이 코드를 실행하면 콘솔에는 100, 200, "javascript"가 차례로 출력됩니다.
18. 연산자 (전치, 후치)
연산자의 위치에 따라 달라지는 결과값 확인하기
{
var score = 10;
var result = ++score;
var result = score++;
console.log(result);
console.log(score);
}
{
let hap, j, k, l;
j = k = l = 1;
hap = ++j + k++ + ++l;
console.log(hap);
console.log(j);
console.log(k);
console.log(l);
}
결과 확인하기
연산자는 위치에 따라 결과값이 달라진다.
'++'연산자가 변수 앞에 오게되면 '='보다 우선순위가 높아 연산 후의 값이 적용이 되지만,
'++'연산자가 변수 뒤에 오게되면 '='보다 우선순위가 낮아 연산 전의 값이 적용이 된다.
그 값을 저장하는 변수에는 연산 전의 값이 적용이 되지만 해당 변수에는 연산이 적용된다.
19. 비트 연산자
비트연산자의 and, or, xor 알아보기
{
let a = 30, b = 40;
console.log(a&b);
}
{
let a = 30, b = 40;
console.log(a|b);
}
{
let a = 30, b = 40;
console.log(a^b);
}
결과 확인하기
30의 2진수표현 : 00011110
40의 2진수 표현 : 00101000
1번 문제 : 30과 40의 &연산을 해준다. &연산은 이진수를 서로 비교하여 동시에 1일 경우에만 1의 결과를 갖는다.
2번 문제 : 30과 40의 |연산을 해준다. |연산은 이진수를 서로 비교하여 하나라도 1인 경우에 1의 결과를 갖는다.
3번 문제 : 30과 40의 ^연산을 해준다. ^연산은 이진수를 서로 비교하여 서로 같을 때는 0의 값을, 서로 다를 때는 1의 값을 갖는다.
각각의 결과를 다시 10진수로 표현해주면 된다.
20. 식별자, 예약자
식별자는 변수, 함수, 매개변수 등의 이름을 지정하는 데 사용됩니다.
예약자는 언어에서 특별한 의미를 가지는 단어로, 변수 또는 함수 이름으로 사용할 수 없습니다.
{
let a = 30, b = 40;
console.log(a&b);
}
{
let a = 30, b = 40;
console.log(a|b);
}
{
let a = 30, b = 40;
console.log(a^b);
}
결과 확인하기
30의 2진수표현 : 00011110
40의 2진수 표현 : 00101000
1번 문제 : 30과 40의 &연산을 해준다. &연산은 이진수를 서로 비교하여 동시에 1일 경우에만 1의 결과를 갖는다.
2번 문제 : 30과 40의 |연산을 해준다. |연산은 이진수를 서로 비교하여 하나라도 1인 경우에 1의 결과를 갖는다.
3번 문제 : 30과 40의 ^연산을 해준다. ^연산은 이진수를 서로 비교하여 서로 같을 때는 0의 값을, 서로 다를 때는 1의 값을 갖는다.
각각의 결과를 다시 10진수로 표현해주면 된다.
21. 형변화, 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));
}
결과 확인하기
30의 2진수표현 : 00011110
40의 2진수 표현 : 00101000
1번 문제 : 30과 40의 &연산을 해준다. &연산은 이진수를 서로 비교하여 동시에 1일 경우에만 1의 결과를 갖는다.
2번 문제 : 30과 40의 |연산을 해준다. |연산은 이진수를 서로 비교하여 하나라도 1인 경우에 1의 결과를 갖는다.
3번 문제 : 30과 40의 ^연산을 해준다. ^연산은 이진수를 서로 비교하여 서로 같을 때는 0의 값을, 서로 다를 때는 1의 값을 갖는다.
각각의 결과를 다시 10진수로 표현해주면 된다.