01.변수 : 데이터 저장
자바스크립트(javaScript) 변수는 데이터를 저장하는 저장소입니다.
{
var x = 100; //변수 x에 숫자 100을 저장
var y = 200; //변수 y에 숫자 200을 저장
var z = "javascript"; //변수 z에 문자 javascript를 저장
console.log(x);
console.log(y);
console.log(z);
}
var :var는 자바스크립트에서 변수를 선언하는 키워드 중 하나입니다. 그러나 현재는 잘 사용하지 않습니다.
결과 확인하기
200
javaScript
02. 변수 : 데이터 저장 + 데이터 변경
자바스크립트에서 데이터 변경은 변수의 값이나 객체의 속성 등을 수정하는 작업을 의미합니다. 이를 통해 프로그램의 상태나 동작을 조작하거나 업데이트할 수 있습니다. 데이터 변경은 변수의 재할당, 객체의 속성 수정, 배열의 요소 변경 등으로 이루어집니다.
{
let x = 100; // 변수 x에 숫자 100을 저장
let y = 200; // 변수 y에 숫자 200을 저장
let z = "javascript"; //변수 z에 문자 javascript를 저장
x = 300; // 변수 x에 값을 숫자 300으로 변경
y = 400; // 변수 y에 값을 숫자 400으로 변경
z = "jquery"; // 변수 z에 값을 문자 jquery로 변경
console.log(x);
console.log(y);
console.log(z);
}
let은 자바스크립트 변수 선언 키워드 중 하나입니다.
결과 확인하기
400
jquery
03.변수 : 데이터 저장 + 데이터 변경 + 데이터 추가
자바스크립트에서 변수는 데이터를 저장하고 변경하고, 추가할 수 있습니다.
{
let x = 100;
let y = 200;
let z = "javascript";
x += 100; // x = x + 100;
y += 100; // y = y + 100;
z += "jquery"; // z = z + "jquery";
console.log(x);
console.log(y);
console.log(z);
}
+= : '+='는 자바스크립트에서 사용되는 할당 연산자 중 하나로, 변수에 값을 더하거나 연결하는데 사용됩니다. x += y는 x = x + y와 동일한 의미를 가집니다. 이를 이용하여 변수에 값을 추가하거나 연산한 결과를 할당할 수 있습니다.
결과 확인하기
300
javascriptjquery
04.상수 : 데이터 저장 + 데이터 변경(x).
상수는 데이터 저장이 가능하나 변경은 불가능합니다.
{
const x = 100;
const y = 200;
const z = "javascript";
x=200; // TypeError: Assignment to constant variable.
console.log(x);
console.log(y);
console.log(z);
}
상수는 변경할 수 없기 때문에 오류가 발생합니다. const는 자바스크립트에서 사용되는 변수 선언 키워드 중 하나입니다. const로 선언된 변수는 한 번 할당된 후에는 재할당이 불가능한 상수입니다.
결과 확인하기
200
javascript
05.배열 : 데이터 저장(키와 값) : 표현방식1
배열은 여러개의 데이터를 하나의 변수에 저장할 수 있습니다. 배열을 선언해서 쓰는 방법입니다.
{
const arr = new Array(); // 배열선언
arr[0] = 100;
arr[1] = 200;
arr[2] = "javascript";
console.log(arr);
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[3]);
}
new Array()를 사용하여 배열을 선언하는 것은 가능하지만, 일반적으로 잘 사용하지 않는 방식이며 배열 리터럴인 []를 사용하여 배열을 생성하는 것이 더 흔하고 직관적입니다.
결과 확인하기
100
200
javaScript
undefined
06. 배열 : 데이터 저장(키와 값) : 표현방식2
자바스크립트에서 배열을 선언하는데는 여러 가지 방법 있습니다.
{
const arr = new Array(100, 200, "javascript");
console.log(arr);
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[3]);
}
Array() 생성자 함수를 호출하여 배열을 생성합니다만 잘 사용하지 않는 표현 방식입니다.
결과 확인하기
100
200
javaScript
undefined
07. 배열 : 데이터 저장(키와 값) : 표현방식3
[] 방식으로 약식으로 배열 선언합니다.
{
const arr = [];
arr[0] = 100;
arr[1] = 200;
arr[2] = "javascript";
console.log(arr);
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[3]);
}
new Array를 선언하지 않고 '[]'를 사용해 배열 사용이 가능합니다.
결과 확인하기
200
javaScript
08. 배열 : 데이터 저장(키와 값) : 표현방법4
[] 방식으로 배열 선언과 동시에 초기값 설정합니다.
{
const arr = [100, 200, "javascript"];
console.log(arr);
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[3]);
}
함수 선언을 생략하고 바로 값을 할당하는 방법입니다. 가장 많이 사용하는 표현방식입니다.
결과 확인하기
100
200
javaScript
undefined
09.배열 : 데이터 저장(여러개) : 표현방법5
JavaScript에서 2차원 배열은 배열을 요소로 갖는 배열로 구성됩니다. 2차원 배열은 행과 열로 구성된 격자 모양의 데이터 구조를 나타낼 때 유용합니다.
{
const arr = [100, [200,300], ["javascript", "jquery"]];
console.log(arr[0]);
console.log(arr[1][0]);
console.log(arr[1][1]);
console.log(arr[2][0]);
console.log(arr[2][1]);
}
배열의 배열로 구성되어 있기 때문에 각 요소에 접근할 때는 인덱스를 두 번 사용해야 합니다.
결과 확인하기
200
300
javaScript
jquery
10.배열 : 데이터 저장(여러개) : 표현방법6 : 배열 구조 분해 할당
: 배열 구조 분해 할당은 배열을 해체하여 배열의 각 원소를 개별 변수로 할당하는 문법입니다
{
const arr3 =[100, 200, "javascript"];
const [a, b, c] = arr3;
console.log(a); //100
console.log(b); //200
console.log(c); //javascript
}
배열 구조 분해 할당의 기본 문법은 const [요소1, 요소2, ...] = 배열; 입니다. 여기서 []대괄호 내에 추출하고자 하는 요소의 인덱스를 적어주면 됩니다. 이때 변수 이름은 배열의 인덱스에 해당하는 요소와 일치해야 합니다.
결과 확인하기
200
javaScript
11.배열 : 데이터 저장(여러개) : 표현방법7 : 배열 펼침 연산자
배열 펼침 연산자(spread operator)는 자바스크립트에서 배열이나 문자열과 같은 이터러블(iterable) 객체를 펼쳐서 개별 요소로 분해하는 데 사용되는 문법입니다. 배열 펼침 연산자는 ... 기호를 사용하여 표현됩니다.
{
const arr1 = [100, 200, "javascript"];
const arr2 = [300, 400, "jquery"];
const arr3 = [...arr1, ...arr2, 500];
console.log(arr1);
console.log(...arr1);
console.log(...arr1, ...arr2);
console.log(...arr3);
}
펼침 연산자는 배열의 요소를 얕게 복사하므로, 배열 내에 다른 배열이나 객체(중첩 구조)가 있을 경우 내부 요소를 깊게 복사하려면 추가적인 처리가 필요할 수 있습니다.
결과 확인하기
100 200 javascript
100 200 javascript 300 400 jquery
100 200 javascript 300 400 jquery 500
12. 객체 : 데이터 저장(키와값) : 표현방법1 : 객체 선언 후 배열 방식으로 데이터 입력
JavaScript 객체는 중괄호 {} 내부에 키와값으로 구성됩니다. 각 키는 문자열이며, 값은 어떤 데이터나 함수든 될 수 있습니다. 객체 내의 키는 고유해야 하며, 동일한 키를 여러 번 사용할 수 없습니다.
{
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
13. 객체 : 데이터 저장(키와값) : 표현방법2
객체 선언 후 데이터를 할당하는 방식입니다.
{
const obj = new Object();
obj.a = 100; //a라는 키에 100이라는 값을 입력
obj.b = 200;
obj.c = "javascript";
document.write(obj);
console.log(obj.a);
console.log(obj.b);
console.log(obj.c);
}
object Object 오류가 발생하는 이유는 document.write() 함수가 객체를 직접 출력할 때 해당 객체의 문자열 표현을 보여주기 때문입니다. 자바스크립트 객체의 기본 문자열 변환은 "[object Object]"와 같이 단순한 형태로 표시됩니다.
결과 확인하기
100
200
javaScript
14. 객체 : 데이터 저장(키와값) : 표현방법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
15. 객체 : 데이터 저장(키와값) : 표현방법4 {}방식으로 객체 선언과 동시에 초깃값을 설정
리터럴 방식으로 객체 선언과 동시에 초기값 설정합니다
{
const obj = {
a: 100,
b: 200,
c: "javascript"
};
console.log(obj.a);
console.log(obj.b);
console.log(obj.c);
}
객체를 생성하고 객체의 속성에 초기값을 할당한 후 해당 속성의 값을 출력하는 예시입니다.
결과 확인하기
200
javaScript
16. 객체 : 데이터 저장(키와값) : 표현방법5
배열 안에 객체가 있는 방식입니다.
{
const obj = [
{a: 100, b: 200, c: "javascript"}
];
console.log(obj[0].a);
console.log(obj[0].b);
console.log(obj[0].c);
const obj2 = [
{{a: 100, b: 200, c: "javascript"},
{a: 300, b: 400, c: "jquery" }}
];
console.log(obj2[0].a);
console.log(obj2[0].b);
console.log(obj2[0].c);
console.log(obj2[1].a);
console.log(obj2[1].b);
console.log(obj2[1].c);
}
객체 안에 배열을 불러올 시, '객체 이름'[인덱스].'키'의 형식을 취합니다.
결과 확인하기
200
javaScript
100
200
javaScript
300
400
jquery
17. 객체 : 데이터 저장(키와값) : 표현방법6
객체안에 배열이 있는 방식
{
const obj = {
a: [100, 200],
b: [300, 400],
c: "javascript",
d: "jquery"
};
console.log(obj.a[0]);
console.log(obj.a[1]);
console.log(obj.b[0]);
console.log(obj.b[1]);
console.log(obj.c);
console.log(obj.d);
}
객체 안에 배열을 불러올 시, '객체 이름'.'키'[인덱스]의 형식을 취합니다.
결과 확인하기
200
300
400
jvascript
jquery
18. 객체 : 데이터 저장(키와값) : 표현방법7
객체안에 객체가 있는 방식입니다.
{
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);
}
객체는 JavaScript에서 중요한 개념 중 하나이며, 거의 모든 것을 객체로 표현할 수 있습니다.
결과 확인하기
200
300
100
200
300
jvascript
19. 객체 : 데이터 저장(키와값) : 표현방법8 : 객체 + 함수가 있는 방식 -> 객체 생성자 함수
객체 안에 함수를 선언하는 방법입니다.
{
const obj = {
a: 100,
b: [200, 300],
c: {a:400, b:500, c:600},
d: "javascript",
e: function(){
console.log("jquery");
},
f: function(){
console.log(obj.a);
},
g: function(){
console.log(this.a)
}
}
console.log(obj.a);
console.log(obj.b[0]);
console.log(obj.b[1]);
console.log(obj.c.a);
console.log(obj.c.b);
console.log(obj.c.c);
console.log(obj.d);
obj.e();
obj.f();
obj.g();
console.log(obj.c.b);
console.log(obj.b[1] + obj.c.c);
console.log(obj.a + obj.b[0]);
}
객체 안에 함수를 표현할 시, '객체 이름'.'키'()의 형식을 취해야 합니다.
결과 확인하기
200
300
400
500
600
jquery
100
100
20. 객체 : 데이터 저장(키와값) : 표현방법 9 : 객체 구조 분해 할당
자바스크립트에서 객체 구조 분해 할당은 객체의 속성을 추출하여 여러 변수에 할당하는 문법입니다. 이를 통해 객체의 각 속성을 쉽게 변수에 할당하거나 기본값을 설정할 수 있습니다. 코드의 가독성과 유지보수성을 높이는 데 도움이 됩니다.
{
const obj = {
a: 100,
b: 200,
c: "javascript"
};
const {a, b, c} = obj; //전역 변수
console.log(a);
console.log(b);
console.log(c);
const obj2 = {
a: 300,
b: { x: 400, y: 500 },
c: "javascript",
}
const { a, b: { x, y }, c } = obj2;
console.log(obj2.a);
console.log(obj2.b.x);
console.log(obj2.b.y);
console.log(obj2.c);
console.log(obj2.b);
}
객체 구조 분해 할당은 객체의 속성을 빠르게 변수에 할당하거나 추출하는 유용한 기능입니다. 이를 통해 코드를 간결하게 작성하고 필요한 데이터를 쉽게 활용할 수 있습니다.
결과 확인하기
javascript
300
400
500
javascript
{x: 400, y:500}
21. 객체 : 데이터 저장(키와값) : 표현방법10 : 객체 펼침연산자
자바스크립트에서 객체 펼침 연산자(Object Spread Operator)는 객체의 속성을 펼쳐서 새로운 객체를 생성하거나 기존 객체에 다른 객체의 속성을 병합하는 기능을 제공합니다.
{
const obj1 = { a: 100, b: 200, c: "javascript"};
const obj2 = { ...obj1, d:"jquery" };
const obj3 = { ...obj1, ...obj2 };
console.log(obj1); //a: 100, b: 200, c: javascript
console.log(obj2); //a: 100, b: 200, c: javascript, d: jquery
console.log(obj2.a);
console.log(obj2.b);
console.log(obj2.c);
console.log(obj2.d);
console.log(obj3);
}
객체 펼침 연산자는 객체를 복사하거나 속성을 조작할 때 편리하게 사용할 수 있는 기능입니다. 다만, 객체 내부의 중첩된 객체까지는 얕은 복사만 수행되므로, 깊은 복사를 하려면 별도의 방법을 사용해야 합니다.
결과 확인하기
a: 100, b: 200, c: 'javascript', d: 'jquert'
100
200
javascript
jquery
a: 100, b: 200, c: 'javascript', d: 'jquert'
산술 연산자
산술 연산자는 덧셈, 뺼셈, 곱셈, 나눗셈과 같은 수학 연산을 수행하는 연사자를 말합니다.
{
let a = 15;
let b = 2;
console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);
console.log(a % b);
}
| 종류 | 기본형 | 설명 |
|---|---|---|
| + | A + B | 더하기 |
| - | A - B | 빼기 |
| * | A * B | 곱하기 |
| / | A / B | 나누기 |
| % | A % B | 나머지 |
산술 연산자는 +(더하기), -(빼기), *(곱하기), /(나누기), %(나머지: 나눈 후 나머지)가 있습니다.
산술 연산자는 숫자형 데이터에만 적용되며, 문자열 등 다른 데이터 타입에 사용하려고 하면 자동으로 형 변환이 이루어질 수 있습니다.
결과 확인하기
13
30
7.5
1
문자 결합 연산자
여러 개의 문자를 하나의 문자형 데이터로 결합합니다.
{
let a = "학교종이";
let b = " 땡땡땡 ";
let c = 8282;
let d = "어서 모이자";
console.log(a + b + c + d);
}
숫자형과 문자형이 섞이면 문자형 데이터로 저장됩니다.
결과 확인하기
대입 연산자
대입 연산자(=)는 연산된 데이터를 변수에 저장할 때 사용합니다.
{
let a = 10;
let b = 3;
a += b; // a = a+b
console.log(a);
a -= b; // a = a-b
console.log(a);
a *= b; // a = a * b
console.log(a);
a %= b; // a = a % b
console.log(a);
}
복합 대입 연산자(+=,-=,*=,/=,%=)는 산술 연산자와 대입 연산자가 복합적으로 사용된 것을 말합니다.
결과 확인하기
10
30
0
증감 연산자
증가(++), 감소(--)연사자는 변수의 값을 1씩 증가시키거나 감소시키는 데 사용되는 연산자입니다.
{
let a = 10; // a는 10입니다.
let b = a++ + 5 // b는 15, a는 11입니다.
console.log(a);
console.log(b);
let c = 10; // c는 10입니다.
let d = +cc + 5; // d는 16, c는 11입니다.
console.log(c);
console.log(d);
}
연산자(--, ++)가 피연산자 뒤에 있을 때는 연산식의 처리를 끝낸 다음에 적용됩니다. 반대로 앞에 있을 때는 연산식을 처리하기 전에 적용됩니다.
결과 확인하기
15
10
16
비교 연산자
비교 연산자는 두 데이터를 '크다, 작다, 같다'와 같이 비교할 때 사용하는 연산자입니다. 연산된 결괏값은 true 또는 false로 논리형 데이터를 반환합니다.
{
let a = 10;
let b = 20;
let c = 10;
let f = "20";
console.log(a > b); // false
console.log(a < b); // true
console.log(a <= b); // true
console.log(b == f); // true
console.log(a != b); // true
console.log(a <= 10); // true
console.log(b === f); // false
}
==, != 비교 연산자는 값만을 비교하고 형 변환을 수행하여 비교합니다. 반면에 ===, !===은 값과 데이터 타입을 함께 비교하므로 더 엄격한 비교를 수행합니다.
결과 확인하기
true
true
true
true
true
false
논리 연산자
논리 연산자는 불리언(boolean) 연산자라고도 하며 true,false를 처리하는 연산자입니다. 즉, true, false 자체가 피연산자인 연산자입니다.
{
// AND 논리 연산자 &&
console.log(true && true);
console.log(ture && false);
// OR 논리 연산자 ||
console.log(true || false);
console.log(false || flase);
// NOT 논리 연산자 !
console.log(!ture);
console.log(!false);
console.log(!5);
}
&&(AND)은 연산자는 값 중에 하나라도 false이 있으면 false이라는 결과값을 내보내고 ||(OR)연산자는 값 중에 true가 하나라도 있으면 true를 값으로 반환합니다. !(not)은 실제값이 true라면 결과값으로는 false를 결과값으로 반환합니다.
결과 확인하기
false
true
false
false
ture
flase
연산자 우선순의
연산자를 여러 개 사용했을 떄 어떤 연산자를 먼저 연산할지를 결정하는 기준입니다.
{
let sum = 10 + 20 * 3;
console.log(sum);
let sum = (10 + 20) * 3;
console.log(sum);
let num = 10;
let result = num *= 3;
console.log(result);
}
같은 연산자들을 사용했으면 연산자 우선 순위는 결합 순서에 따라 연산이 수행됩니다
결과 확인하기
90
30
삼항 조건 연산자
삼항 연산자는 세 항 중 가장 왼쪽에 있는 피연산자의 참, 거짓에 따라 나머지 두 항에 있는 피 연산자를 선택적으로 반환하는 연산을 수행합니다.
{
let score = 90;
let grade = score >= 90 ? 'A+' : 'B';
console.log(grade);
}
연산자는 ?며, x?y:z 세 항 중 x가 참이면 y를 반환하고, x가 거짓이면 z를 반환합니다.
결과 확인하기
비트 연산자
자바스크립트에는 비트 연산을 수행하는 다양한 비트 연산자가 있습니다.
{
let result1 = 5 & 3;
// 이진수 0101 & 0011 => 0001
// 두 개의 비트가 모두 1인 경우에만 결과 비트가 1이 된다.
let result2 = 5 | 3;
// 이진수 0101 | 0011 => 0111
// 두 개의 비트 중 하나 이상이 1인 경우 결과 비트가 1, 둘 다 0인 경우 0이 된다.
let result3 = 5 ^ 3;
// 이진수 0101 ^ 0011 => 0110
// 두 개의 비트가 서로 다를 경우에만 결과 비트가 1이 되고, 같은 경우 0이 된다.
let result4 = ~5;
// 이진수 ~0101 => 1010
// 비트를 반전시킨다. 1은 0으로, 0은 1로 변환한다.
let result5 = 5 << 1;
// 이진수 0101 << 1 => 1010
// 숫자의 비트를 왼쪽으로 지정된 수 만큼 이동시킵니다.
// 오른쪽에 새로운 비트가 추가되며, 왼쪽에 있는 비트는 사라집니다.
let result6 = 5 >> 1;
// 이진수 0101 >> 1 => 0010
// 숫자의 비트를 오른쪽으로 지정된 수 만큼 이동시킵니다.
// 왼족에 새로운 비트가 추가되거나, 오른쪽에서 비트가 사라집니다.
console.log(result1);
console.log(result2);
console.log(result3);
console.log(result4);
console.log(result5);
console.log(result6);
}
이 연산자들은 숫자의 이진 표현을 사용하여 비트 수준에서 작업을 수행합니다.
결과 확인하기
7
6
-6
10
2
변수 : 지역변수 + 전역변수
자바스크립트에서 변수를 선언하고 사용할때 변수가 적용 되는 범위를 스코프(scope)라고 합니다. 한 함수 안에서만 사용할 수 있는 변수를 지역변수(로컨변수)라고 하고, 스크립트 소스 전체에서 사용할 수 있는 변수를 전역변수(글로벌변수)라고 합니다.
{
let x = 100;
let y = 200;
let z = "javascript";
console.log("함수안:"+ x , y, z);
function func(){
let x = 300;
y += 400; //전역변수 y의 값에 400을 추가
let z = "jquery"; //전역변수 z의 값에 문자열 "jquery"를 추가
console.log("함수안:"+ x , y, z);
};
func();
console.log("함수밖:"+ x , y, z);
}
지역변수는 함수 안에서 선언하고 함수 안에서만 사용합니다. 지역변수를 선언하려면 예약어 let과 함께 변수이름을 지정해야 합니다.
결과 확인하기
함수안:300 600 Jquery
함수밖:100 600 Jquery
자료형
자바스크립트는 동적 타입 언어로서, 변수의 자료형을 선언하지 않아도 됩니다. 변수의 자료형은 변수에 할당된 값에 따라 자동으로 결정됩니다.
{
const func1 = 100; // 숫자
const func2 = "100"; // 문자열
const func3 = true; // 불리언
const func4 = false; // 불리언
const func5 = null; // null
const func6 = undefined; // undefined
const func7 = [100, 200, "javascript"]; // 배열
const func8 = [100, 200, "javascript"]; // 객체
const func9 = function (){}; // 함수
}
문자열(String): 문자들의 시퀀스입니다. 작은따옴표(')나 큰따옴표(")로 감싸서 생성할 수 있습니다.
불리언(Boolean): true 또는 false 값을 나타냅니다. 주로 조건식에서 사용됩니다.
null과 undefined: null은 값이 없음을 나타내는 특별한 값이고, undefined는 값이 할당되지 않은 상태를 나타냅니다.
배열(Array): 여러 값을 순차적으로 저장하는 자료구조입니다. 배열 내의 각 값은 인덱스로 접근할 수 있습니다.
객체(Object): 이름과 값의 쌍으로 데이터를 표현하는 자료구조입니다. 객체의 값은 속성(property) 또는 메서드(method)가 될 수 있습니다.
함수(Function): 일련의 작업을 수행하는 코드 블록을 나타냅니다. 함수는 호출되어 실행되며, 필요한 경우 결과값을 반환할 수 있습니다.