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: 과거에 사용되던 변수 선언 방식으로, 현재는 잘 사용하지 않습니다.
결과 확인하기
200
javascript
02. 변수 : 데이터 저장 + 데이터 변경
자바스크립트(javascript)에서 변수는 데이터를 저장하는 저장소입니다.
{
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. 변수 : 데이터 저장 + 데이터 변경 + 데이터 추가
자바스크립트(javascript)에서 변수는 데이터를 저장하는 저장소입니다.
{
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);
}
let: 변수 선언 방식으로, 변수를 선언하면 블록 범위(block-scoped)의 변수가 생성됩니다.
결과 확인하기
300
javascriptjquery
04. 상수 : 데이터 저장 + 데이터 변경(X)
자바스크립트에서 상수(constant)는 값이 한 번 할당되면 그 값을 변경할 수 없는 변수를 말합니다. const 키워드를 사용하여 상수를 선언합니다.
{
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);
}
한 번 값이 할당되면 다른 값으로 변경할 수 없습니다. 상수는 주로 변하지 않는 값을 나타내는데 사용됩니다.
결과 확인하기
200
javascript
05. 배열 : 데이터 저장(여러개) : 표현방법1 : 배열 선언
Array 생성자 함수를 사용하여 빈 배열을 만든 후, 이 배열을 arr 변수에 할당합니다.
{
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]);
}
const arr = new Array();: 이 부분은 Array 생성자를 사용하여 빈 배열 arr을 생성합니다.
arr[0] = 100;: 배열의 첫 번째 인덱스(0번 인덱스)에 100이라는 값을 할당합니다.
arr[1] = 200;: 배열의 두 번째 인덱스(1번 인덱스)에 200이라는 값을 할당합니다.
arr[2] = "javascript";: 배열의 세 번째 인덱스(2번 인덱스)에 "javascript"라는 문자열 값을 할당합니다.
console.log(arr);: 배열 arr 전체를 출력합니다. 이 시점에서 배열의 내용은 [100, 200, "javascript"]입니다.
console.log(arr[0]);: 배열의 첫 번째 인덱스 값을 출력합니다. 이 경우 100이 출력됩니다.
console.log(arr[1]);: 배열의 두 번째 인덱스 값을 출력합니다. 여기서는 200이 출력됩니다.
console.log(arr[2]);: 배열의 세 번째 인덱스 값을 출력합니다. 이 때 "javascript"가 출력됩니다.
console.log(arr[3]);: 배열의 네 번째 인덱스 값을 출력합니다. 하지만 이 배열은 네 번째 인덱스가 할당되지 않았으므로 undefined가 출력됩니다.
결과 확인하기
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]);
}
JavaScript에서 새로운 배열을 생성하려면 new 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]);
}
주어진 코드는 빈 배열 arr을 생성하고, 그 배열에 세 개의 값(숫자 100, 숫자 200, 문자열 "javascript")을 각각 할당하며, 마지막으로 배열과 각 요소를 출력합니다. 그리고 배열의 네 번째 요소에는 할당된 값이 없기 때문에 undefined가 출력됩니다.
결과 확인하기
100
200
javascript
undefined
08. 배열 : 데이터 저장(여러개) : 표현방법4 : 리터럴 방식으로 배열 선언과 동시에 초기값 설정
배열을 약식으로 선언 후 데이터를 할당합니다.
{
const arr = [100,200,"javascript"];
console.log(arr); //100,200, javascript
console.log(arr[0]); //100
console.log(arr[1]); //100
console.log(arr[2]); //javascript
console.log(arr[3]); //undefind
}
여기서 arr은 초기에 세 개의 값을 가진 배열로 선언되었습니다. 이후에 배열의 각 요소와 배열 전체를 출력했습니다. arr[3]은 네 번째 요소를 가리키며, 해당 요소는 없기 때문에 undefined가 출력됩니다.
결과 확인하기
100
200
javascript
undefind
09. 배열 : 데이터 저장(여러개) : 표현방법5 : 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]);
}
이 코드에서는 다차원 배열을 사용하여 배열 안에 배열을 중첩했습니다.
첫 번째 요소는 숫자 100을 포함하는 단순한 값입니다.
두 번째 요소는 내부 배열 [200, 300] 입니다.
세 번째 요소는 내부 배열 ["javascript", "jquery"]입니다.
이렇게 중첩된 배열에서 [1][0]과 같이 인덱스를 조합하여 내부 배열의 요소에 접근할 수 있습니다.
결과 확인하기
200
300
javascript
jquery
10. 변수 : 데이터 저장(여러 개) : 표현방법6 : 배열 구조 분해 할당
배열 구조 분해 할당은 배열에서 원하는 값을 추출하여 변수에 할당하는 JavaScript 기능입니다.
{
const arr3 = [100, 200, "javascript"];
const [a, b, c] = arr3;
console.log(a);
console.log(b);
console.log(c);
}
arr3 배열의 첫 번째 원소가 a 변수에, 두 번째 원소가 b 변수에, 세 번째 원소가 c 변수에 할당됩니다.
그 후 각 변수의 값을 출력하면 배열의 값들이 순서대로 출력됩니다.
결과 확인하기
200
javascript
11. 배열 : 데이터 저장(여러개) : 표현방법7 : 배열 펼침연산자
배열 펼침 연산자는 배열의 요소들을 풀어서 새로운 배열을 만들거나 함수의 인수로 전달하는 등 다양한 상황에서 사용되는 JavaScript의 기능입니다.
{
const arr1=[100, 200, "javascript"];
const arr2=[300, 400, "jquery"];
const arr3=[...arr1, 500];
console.log(arr1); //100, 200, javascript
console.log(...arr1,...arr2); //100, 200, javascript, 300, 400, jquery
console.log(arr3); //100, 200, javascript, 500
}
배열 펼침 연산자를 사용하여 두 배열을 합치거나 함수의 인수로 배열을 전달하는 방법을 보여줍니다.
연산자는 "..."으로 표현되며, 배열을 분해하고 각 요소를 개별적으로 다룰 수 있게 해줍니다.
결과 확인하기
100, 200 ,"javascript", 300, 400, jquery
100, 200, "javascript", 300, 500
12. 객체 : 데이터 저장(키와값) : 표현방법1 : 객체 선언 후 배열 방식으로 데이터 입력
객체를 선언한 후 데이터를 할당하는 방식입니다.
데이터를 입력할 때 배열 방식도 적용됩니다.
{
const obj = new Object();
obj[0] = 100;
obj[1] = 200;
obj[2] = "javascript";
console.log(obj);
console.log(obj[0]); //100
console.log(obj[1]); //200
console.log(obj[2]); //javascript
}
주어진 코드에서 obj는 빈 객체를 생성한 후, 각각의 인덱스를 속성 이름으로 사용하여 값을 할당하고 있습니다.
객체의 속성 이름은 문자열 또는 심볼(Symbol)이 될 수 있습니다.
여기서 [0], [1], [2]와 같이 숫자를 속성 이름으로 사용한 것은 JavaScript에서 가능하지만, 일반적으로는 문자열을 더 많이 사용합니다.
이후에 console.log를 사용하여 객체 전체와 각 속성 값을 출력했습니다. obj[0]은 객체의 "0"이라는 이름의 속성에 해당하는 값을 출력하며, obj[1]은 "1"이라는 이름의 속성 값을 출력합니다.
결과 확인하기
100
200
javascript
13. 객체 : 데이터 저장(키와값) : 표현방법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);
}
주어진 코드에서 obj는 빈 객체를 생성한 후, . (도트) 표기법을 사용하여 객체의 속성에 값을 할당하고 있습니다. obj.a, obj.b, obj.c는 객체의 속성 이름이며, 여기에 각각 값을 할당하고 있습니다.
이후에 console.log를 사용하여 객체의 속성 값들을 출력했습니다.
obj.a는 객체의 "a"라는 이름의 속성에 해당하는 값을 출력하며, obj.b는 "b"라는 이름의 속성 값을 출력합니다. 마찬가지로 obj.c는 "c"라는 이름의 속성 값을 출력합니다.
결과 확인하기
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);
}
주어진 코드에서 obj는 빈 중괄호 {}를 사용하여 빈 객체를 생성하고 있습니다. 그 이후에 .a, .b, .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);
}
주어진 코드에서 obj는 중괄호 {}를 사용하여 객체를 생성하고 있습니다.
중괄호 내부에 a: 100, b: 200, c: "javascript"와 같이 속성 이름과 값을 나타내는 쌍을 넣어 객체의 속성을 정의하고 있습니다.
obj.a는 객체의 "a"라는 이름의 속성에 해당하는 값을 출력합니다. 여기서 obj는 객체를 나타내며, a는 "a"라는 이름의 속성을 나타냅니다. 마찬가지로 obj.b는 "b"라는 이름의 속성 값을 출력하며, obj.c는 "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 obj1 = [
{a: 100, b: 200, c: "javascript"},
{a: 300, b: 400, c: "jquery"}
];
console.log(obj1[0].a);
console.log(obj1[0].b);
console.log(obj1[0].c);
console.log(obj1[1].a);
console.log(obj1[1].b);
console.log(obj1[1].c);
}
첫 번째 부분: 주어진 코드에서 obj는 배열을 나타냅니다. 이 배열은 하나의 객체를 요소로 갖고 있습니다. obj[0]은 배열의 첫 번째 요소인 객체를 가리킵니다. 이 객체는 속성 a, b, c를 가지고 있으며, obj[0].a는 해당 객체의 "a" 속성 값을 출력하고, obj[0].b는 "b" 속성 값을 출력하며, obj[0].c는 "c" 속성 값을 출력합니다.
두 번째 부분: obj1은 배열을 나타내며, 이 배열은 두 개의 객체를 요소로 가지고 있습니다. obj1[0]은 배열의 첫 번째 요소인 첫 번째 객체를 가리키며, obj1[1]은 두 번째 요소인 두 번째 객체를 가리킵니다. 각 객체는 속성 a, b, c를 가지고 있고, 위의 코드에서 obj1[0].a, obj1[1].c와 같이 객체의 속성에 접근하여 값을 출력합니다.
이러한 방식으로 배열 내부에 객체를 포함하여 복잡한 데이터 구조를 만들고, 배열 요소와 내부 객체의 속성 값을 접근하고 조작할 수 있습니다.
결과 확인하기
200
javascript
100
200
javascript
300
400
jquery
17. 객체 : 데이터 저장(키와값) : 표현방법6 : 객체 안에 배열이 있는 방식
객체(obj) 내에 중첩된 배열과 문자열 데이터를 저장하고, 해당 데이터에 접근하여 출력하는 예제입니다.
{
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);
}
주어진 코드에서 obj는 객체를 나타내며, 이 객체는 속성 a, b, c, d를 가지고 있습니다.
a와 b는 각각 배열을 값으로 가지고 있으며, c와 d는 문자열 값을 가지고 있습니다.
obj.a[0]는 객체의 "a"라는 이름의 속성 값인 배열 중 첫 번째 요소를 출력하며, obj.a[1]은 두 번째 요소를 출력합니다.
마찬가지로 obj.b[0]와 obj.b[1]은 "b" 속성 값인 배열의 첫 번째와 두 번째 요소를 출력합니다.
그 후에 obj.c는 "c" 속성 값인 문자열 "javascript"를 출력하고, obj.d는 "d" 속성 값인 문자열 "jquery"를 출력합니다.
이렇게 객체 내부의 속성 값으로 배열과 문자열을 가지고 있는 경우, . 표기법과 인덱스([0], [1] 등)를 사용하여 내부의 값을 접근할 수 있습니다.
결과 확인하기
200
300
400
javascript
jquery
18. 객체 : 데이터 저장(키와값) : 표현방법7 : 객체 안에 객체가 있는 방식
주어진 코드는 객체(obj) 내에 다양한 종류의 데이터를 저장하고, 해당 데이터에 접근하여 출력하는 예제입니다.
{
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);
}
주어진 코드에서 obj는 객체를 나타내며, 이 객체는 속성 a, b, c, d를 가지고 있습니다.
obj.a: 객체의 "a" 속성 값인 100을 출력합니다.
obj.b[0]: 객체의 "b" 속성 값인 배열의 첫 번째 요소를 출력합니다.
obj.b[1]: 객체의 "b" 속성 값인 배열의 두 번째 요소를 출력합니다.
obj.c.x: 객체의 "c" 속성 값인 내부 객체의 "x" 속성 값을 출력합니다.
obj.c.y: 객체의 "c" 속성 값인 내부 객체의 "y" 속성 값을 출력합니다.
obj.d: 객체의 "d" 속성 값인 문자열 "javascript"를 출력합니다.
결과 확인하기
200
300
400
500
javascript
19. 객체 : 데이터 저장(키와값) : 표현방법8 : 객체 + 함수가 있는 방식 --> 객체 생성자 함수
주어진 코드는 객체(obj) 내에 다양한 종류의 데이터와 메소드(함수)를 저장하고, 해당 데이터 및 메소드를 사용하여 출력하는 예제입니다.
{
const obj = {
a: 100,
b: [200, 300,],
c:{ x:400, y: 500},
d:"javascript"
e:function(){
console.log("jquery")
},
f:function(){
console.log(obj.a)
}
g:function(){
console.log(this.a) // 같은 객체 안에 있는 값을 불러올 때 사용
}
}
console.log(obj.a); //100
console.log(obj.b[0]); //200
console.log(obj.b[1]); //300
console.log(obj.c.a); //400
console.log(obj.c.b); //500
console.log(obj.c.c); //600
console.log(obj.d); //javascript
obj.e(); //jquery
obj.f(); //100
obj.g(); //100
}
위 코드에서 obj 객체는 숫자, 배열, 객체, 문자열, 함수 등 다양한 종류의 데이터와 메소드를 포함하고 있습니다. 각 프로퍼티 및 메소드는 해당하는 값이나 동작을 수행하게 됩니다. "e", "f", "g" 메소드는 객체 내에서 메소드를 정의하고 호출하는 예시를 보여줍니다.
결과 확인하기
200
300
400
500
600
javascript
jquery
100
100
20. 객체 : 데이터 저장(키와값) : 표현방법9 : 객체 구조 분해 할당
객체(Object)는 키와 값, 또는 속성과 메서드를 포함하는 데이터 구조입니다.
{
const obj = {
a: 100,
b: 200,
c: "javascript";
};
const { a, b, c } = obj;
console.log(a); //100
console.log(b); //200
console.log(c); //javascript
const obj2 = {
d: 100,
e: { x: 300, y:400},
f: "javascript";
};
const { d, e: {x,y}, f } =obj2
console.log(d); //100
console.log(x); //300
console.log(y); //400
console.log(f); //javascript
}
첫 번째 예시: obj 객체의 속성인 a, b, c를 객체 구조 분해 할당을 사용하여 각각의 변수에 할당한 후 그 값을 출력하고 있습니다.
두 번째 예시:이 코드에서는 obj2 객체의 속성 d, e, f를 객체 구조 분해 할당을 사용하여 각각의 변수에 할당한 후 그 값을 출력하고 있습니다.
객체 내부의 객체인 e의 속성 x와 y도 추출하여 변수에 할당하고 출력하고 있습니다.
결과 확인하기
200
javascript
100
300
400
javascript
21. 객체 : 데이터 저장(키와값) : 표현방법9 : 객체 펼침연산자
객체 펼침 연산자는 객체의 프로퍼티들을 풀어서 다른 객체에 복사하거나 결합할 때 사용되는 JavaScript의 기능입니다.
{
const obj1 = { a: 100, b: 200, c: "javascript"};
const obj2 = { ...obj1, d: "jquery"};
const obj3 = { ...obj1, ...obj2 };
console.log(obj1);
console.log(obj2);
console.log(obj2.b);
console.log(obj2.c);
console.log(obj2.d);
console.log(obj3);
}
위 코드에서 obj1 객체는 초기 프로퍼티를 가지고 있고, obj2 객체는 obj1의 프로퍼티를 복사한 뒤 새로운 d 프로퍼티를 추가하였습니다. 마찬가지로 obj3 객체는 obj1과 obj2의 프로퍼티를 모두 복사하여 생성되었습니다.
프로퍼티(Property)는 JavaScript 객체(Object) 내에서 값(Value)이나 다른 객체를 가리키는 이름과 값의 쌍을 의미합니다.
결과 확인하기
a: 100, b:200, c:javascript, d:jquery
100
200
javascript
jquery
a: 100, b:200, c:javascript, d:jquery
22. 파일 : 데이터 교환(JSON)
데이터 교환을 위한 JSON(JavaScript Object Notation) 파일은 일반적으로 텍스트 형식의 데이터를 구조화하고 교환하기 위해 사용됩니다.
{
// json 데이터를 객체로 변환
const jasonString = '{"name": "webs", "age": "30"}';
const jasonObject = JSON.parse(jasonString);
console.log(jasonObject.name); //webs
// 객체를 json 데이터로 변환
const personString = {name: "webs", age: "30"};
const jasonPerson = JSON.stringify(person);
console.log(jasonPerson);
// '{"name": "webs", "age": "30"};'
}
위 코드에서 obj1 객체는 초기 프로퍼티를 가지고 있고, obj2 객체는 obj1의 프로퍼티를 복사한 뒤 새로운 d 프로퍼티를 추가하였습니다. 마찬가지로 obj3 객체는 obj1과 obj2의 프로퍼티를 모두 복사하여 생성되었습니다.
프로퍼티(Property)는 JavaScript 객체(Object) 내에서 값(Value)이나 다른 객체를 가리키는 이름과 값의 쌍을 의미합니다.
결과 확인하기
a: 100, b:200, c:javascript, d:jquery
100
200
javascript
jquery
a: 100, b:200, c:javascript, d:jquery
++ 지역변수/전역변수
지역변수 (Local Variable):
지역변수는 특정 블록이나 함수 내에서 선언된 변수로, 그 블록이나 함수 내부에서만 접근할 수 있습니다. 지역변수는 선언된 범위 내에서만 유효하며, 함수 호출 시마다 해당 함수 내부에서 재선언되어 사용됩니다. 다른 함수나 블록에서는 해당 변수에 접근할 수 없습니다.
전역변수 (Global Variable):
전역변수는 프로그램 어디에서든지 접근 가능한 변수로, 프로그램 전체의 범위에서 사용될 수 있습니다. 전역변수는 함수 내부가 아닌 어느 곳에서든 선언될 수 있으며, 프로그램 실행 동안 계속해서 유지됩니다.
하지만 과도한 전역변수 사용은 코드의 관리와 유지보수를 어렵게 할 수 있으므로 지양하는 것이 좋습니다.
{
let x = 100; //전역변수
let y = 200; //전역변수
let z = "javascript"; //전역변수
console.log("함수밖1:"+ x, y, z);
function func(){
let x = 300; //지역변수
y +=400; //전역변수 y의 값에 400을 추가
z = "jquery"; //전역변수 z의 값에 문자열"jquery"를 대체한 것
console.log("함수 안:"+ x, y, z)
};
func();
console.log("함수 밖2:"+ x, y, z)
}
주어진 코드는 전역변수와 지역변수를 사용하여 변수의 범위와 값의 변경을 보여주는 예제입니다.
결과 확인하기
함수 안: 300, 600, jquery
함수 밖2: 100, 600, jquery
01. 연산자 : 산술 연산자
산술 연산자는 수학적 계산을 수행하는 데 사용되는 연산자입니다.
{
let num1 = 15;
let num2 = 2;
console.log(num1 + num2);
console.log(num1 - num2);
console.log(num1 * num2);
console.log(num1 / num2);
console.log(num1 % num2);
}
덧셈 (+): 두 값을 더합니다.
뺄셈 (-): 한 값에서 다른 값을 뺍니다.
곱셈 (*): 두 값을 곱합니다.
나눗셈 (/): 한 값을 다른 값으로 나눕니다.
나머지 (%): 나눗셈의 나머지를 반환합니다.
결과 확인하기
13
30
7.5
1
02. 연산자 : 문자 결합 연산자
문자 결합 연산자는 문자열을 이어붙이는 데 사용되는 연산자입니다.
{
let a = "학교종이";
let b = "땡땡땡";
let c = 8282;
let d = "어서 모이자";
console.log(a + "" + b + "" + c + "" + d);
}
JavaScript에서는 변수 c의 값이 숫자이므로 문자열과 숫자를 결합할 때 숫자를 자동으로 문자열로 변환하여 결합합니다.
공백 문자열을 " "로 나타내어 문자열들을 연결할 때 각 문자열 간에 공백이 추가됩니다.
결과 확인하기
03. 연산자 : 대입 연산자
대입 연산자(=)는 연산된 데이터를 변수에 저장할 때 사용합니다.
{
let num1 = 10;
let num2 = 3;
console.log(num1 += num2);
console.log(num1 -= num2);
console.log(num1 *= num2);
console.log(num1 %= num2);
}
num1 += num2: num1에 num2를 더한 후, 그 결과인 13을 출력합니다.
num1 -= num2: num1에서 num2를 뺀 후, 그 결과인 10을 출력합니다.
num1 *= num2: num1에 num2를 곱한 후, 그 결과인 30을 출력합니다.
num1 %= num2: num1을 num2로 나눈 나머지를 출력합니다. 따라서 30을 3으로 나눈 나머지인 1을 출력합니다.
결과 확인하기
10
30
0
04. 연산자 : 증감 연산자
증감 연산자는 변수의 값을 1씩 증가시키거나 감소시키는데 사용되는 연산자입니다.
{
let num1 = 10;
let num2 = 20;
num1--;
console.log(num1);
num1++;
console.log(num1);
result=num2++;
console.log(result);
result=++num2;
console.log(result);
}
num1--;: num1 변수의 값을 1 감소시킵니다. 따라서 num1의 값은 9가 됩니다.
console.log(num1);: num1의 현재 값을 출력합니다. 따라서 출력 결과는 9가 됩니다.
num1++;: num1 변수의 값을 1 증가시킵니다. 따라서 num1의 값은 다시 10이 됩니다.
console.log(num1);: num1의 현재 값을 출력합니다. 따라서 출력 결과는 10이 됩니다.
result=num2++;: num2의 현재 값을 result 변수에 대입한 후, num2의 값을 1 증가시킵니다. 따라서 result의 값은 20이 되고, num2의 값은 21이 됩니다.
console.log(result);: result의 값을 출력합니다. 따라서 출력 결과는 20이 됩니다.
result=++num2;: num2의 값을 1 증가시킨 후, 그 값을 result 변수에 대입합니다. 따라서 result의 값은 22가 되고, num2의 값은 22이 됩니다.
console.log(result);: result의 값을 출력합니다. 따라서 출력 결과는 22가 됩니다.
결과 확인하기
10
result : 20
num2 : 21
result : 22
num2 : 22
05. 연산자 : 비교 연산자
비교 연산자는 두 값 또는 피연산자를 비교하여 논리적인 참(True) 또는 거짓(False) 결과를 반환하는 연산자입니다.
{
let a = 10;
let b = 20;
let c = 10;
let f = "20";
console.log(a > b);
console.log(a < b);
console.log(a <= b);
console.log(b == f);
console.log(a != b);
console.log(b === f);
}
console.log(a > b);: a가 b보다 큰지 여부를 판단하여 결과를 출력합니다. 10은 20보다 작으므로 출력 결과는 false가 됩니다.
console.log(a < b);: a가 b보다 작은지 여부를 판단하여 결과를 출력합니다. 10은 20보다 작으므로 출력 결과는 true가 됩니다.
console.log(a <= b);: a가 b보다 작거나 같은지 여부를 판단하여 결과를 출력합니다. 10은 20보다 작으므로 출력 결과는 true가 됩니다.
console.log(b == f);: b와 f가 값이 같은지 여부를 판단하여 결과를 출력합니다. b는 숫자 20이고, f는 문자열 "20"입니다. 자료형 변환 후 값이 같으므로 출력 결과는 true가 됩니다.
console.log(a != b);: a와 b가 값이 다른지 여부를 판단하여 결과를 출력합니다. 10과 20은 값이 다르므로 출력 결과는 true가 됩니다.
console.log(b === f);: b와 f가 값과 자료형까지 같은지 여부를 판단하여 결과를 출력합니다. b는 숫자 20이고, f는 문자열 "20"입니다. 자료형이 다르므로 출력 결과는 false가 됩니다.
결과 확인하기
true
true
true
true
false
06. 연산자 : 논리 연산자
논리 연산자는 논리적인 조건을 평가하거나 조합하는 데 사용되는 연산자입니다.
{
let a = true;
let b = false;
console.log(a || b);
console.log(a && b);
console.log(!b);
}
console.log(a || b);: a와 b 중 하나라도 true이면 true를 반환하는 OR 연산을 수행합니다. a는 true이고 b는 false이므로 출력 결과는 true가 됩니다.
console.log(a && b);: a와 b 모두 true일 때만 true를 반환하는 AND 연산을 수행합니다. a는 true이고 b는 false이므로 출력 결과는 false가 됩니다.
console.log(!b);: b의 논리값을 반전시키는 NOT 연산을 수행합니다. b가 false이므로 !b는 true가 됩니다.
결과 확인하기
false
true
07. 연산자 : 연산자 우선순위
연산자 우선순위는 표현식에서 연산이 어떤 순서로 수행되는지를 결정하는 규칙입니다.
{
let a = 10;
let b = 20;
let m = 30;
let n = 40;
console.log(a > b || b >=m || m > n);
console.log(a > b || b >=m || m <= n);
console.log(a <= b && b >=m && m <= n);
console.log(a <= b && b <=m && m <= n);
console.log(a > b );
}
console.log(a > b || b >= m || m > n);: 이 표현식은 세 개의 조건 중 하나 이상이 true라면 true를 반환하는 OR 연산을 수행합니다. a > b는 false, b >= m은 true, m > n은 false이므로 최소 하나의 조건이 true인지 검사하여 결과를 출력합니다. 출력 결과는 true가 됩니다.
console.log(a > b || b >= m || m <= n);: 이 표현식은 a > b가 false, b >= m가 true, m <= n이 true인 경우 하나 이상의 조건이 true임을 검사하여 결과를 출력합니다. 출력 결과는 true가 됩니다.
console.log(a <= b && b >= m && m <= n);: 이 표현식은 모든 조건이 true일 때만 true를 반환하는 AND 연산을 수행합니다. a <= b가 true, b >= m이 true, m <= n도 true인 경우, 모든 조건이 만족되므로 결과는 true가 됩니다.
console.log(a <= b && b <= m && m <= n);: 이 표현식도 모든 조건이 true일 때만 true를 반환하는 AND 연산을 수행합니다. 모든 조건이 만족되므로 결과는 true가 됩니다.
console.log(a > b);: a가 b보다 큰지 여부를 판단하여 결과를 출력합니다. a가 b보다 작으므로 출력 결과는 false가 됩니다.
결과 확인하기
true
true
true
false
08. 연산자 : 삼항 조건 연산자
자바스크립트(javascript)에서 변수는 데이터를 저장하는 저장소입니다.
{
let a = 10;
let b = 3;
let c = a > b ? "javascript" : "hello";
console.log(c);
}
주어진 코드는 삼항 조건 연산자를 사용하여 a와 b의 비교 결과에 따라 변수 c에 "javascript" 또는 "hello"를 할당하고 출력하는 예시입니다.
코드를 실행하면 a가 10이고 b가 3이므로 조건 a > b는 true가 됩니다. 따라서 삼항 조건 연산자는 true일 때 "javascript"를 선택하여 변수 c에 할당하고 출력합니다.
결과 확인하기
01. 자료형 : 숫자
숫자(Number) 자료형은 수학적 숫자 값을 나타내는 데이터 유형입니다. 이 자료형은 정수(integer)와 부동소수점 숫자(floating-point number)를 포함합니다.
{
let integerNumber = 42; // 정수
let floatNuber = 3.14; // 부동소수점 숫자
let x = 10;
let y = 5;
let addition = x + y;
console.log(addition); // 15
}
먼저 숫자 자료형의 정의를 보여주고, 이어서 let을 사용하여 변수를 선언하고 초기화하였습니다.
마지막으로 덧셈 연산을 수행하여 결과를 출력하였습니다.
결과 확인하기
02. 자료형 : 문자열
문자열(String) 자료형은 텍스트 데이터를 나타내는 데이터 유형입니다.
{
let greeting = "안녕하세요!";
console.log(greeting);
}
문자열은 작은따옴표(')나 큰따옴표(")로 둘러싸인 텍스트입니다.
결과 확인하기
03. 자료형 : 논리
논리(Boolean) 자료형은 두 가지 값 중 하나인 true나 false를 나타내는 데이터 유형입니다.
{
let isTrue = true;
let isFalse = false;
console.log(isTrue);
console.log(isFalse);
let x = 5;
let y = 10;
let result = x < y;
console.log(result);
}
논리 자료형은 주로 조건문이나 논리 연산에서 사용되며, 어떤 조건이 참인지 거짓인지를 판별하는 데에 사용됩니다.
결과 확인하기
false
true
04. 자료형 : null
null은 JavaScript에서 사용되는 특별한 값 중 하나로, 변수에 의도적으로 '비어있음'을 나타내기 위해 사용됩니다.
{
let emptyValue = null; // null의 정의
let name = null;
console.log(name);
}
null은 값이 존재하지 않는 상태를 나타내며, 변수에 null을 할당하면 해당 변수는 비어있는 상태가 됩니다.
결과 확인하기
05. 자료형 : undefined
undefined는 변수가 선언되었지만 값이 할당되지 않은 상태를 나타냅니다.
{
let variable; // undefined 정의
console.log(variable);
}
위 예제에서는 변수 variable을 선언했지만 초기 값을 할당하지 않았습니다. 이렇게 되면 variable의 값은 자동으로 undefined가 됩니다.
variable은 실제로는 단순한 이름이므로 자체적인 의미가 있는 것은 아닙니다.
결과 확인하기
06. 자료형 : object
object는 JavaScript에서 가장 중요하고 복잡한 자료형 중 하나로, 다양한 데이터와 기능을 그룹화하는 데 사용됩니다.
{
let person = {
name : "John",
age : 30,
isStudent : false
};
console.log(person.name);
console.log(person.age);
console.log(person.isStudent);
}
위 예제에서는 person이라는 이름의 object를 정의했습니다. 이 object는 name, age, isStudent라는 세 개의 프로퍼티를 갖습니다.
각 프로퍼티는 이름과 그에 대응하는 값을 가지며, 이름은 문자열이며 값은 다양한 데이터 타입일 수 있습니다.
결과 확인하기
30
false
07. 자료형 : Array
Array는 JavaScript에서 여러 개의 값을 순차적으로 저장하는 자료형입니다.
{
let numbers = [ 10, 20, 30, 40, 50];
console.log(numbers.[0]);
console.log(numbers.[2]);
}
위 예제에서는 numbers라는 이름의 Array를 정의했습니다. 이 배열은 숫자 요소를 가지며, 각 요소는 인덱스를 사용하여 접근할 수 있습니다.
결과 확인하기
30
08. 자료형 : Function
Function은 JavaScript에서 코드 블록을 그룹화하고 재사용 가능한 기능 또는 동작을 정의하는 데 사용되는 자료형입니다.
{
function greet(name){
return "안녕하세요," + name + "님!";
}
let greeting = greet("John");
console.log(greeting);
}
위 예제에서는 person이라는 이름의 object를 정의했습니다. 이 object는 name, age, isStudent라는 세 개의 프로퍼티를 갖습니다.
각 프로퍼티는 이름과 그에 대응하는 값을 가지며, 이름은 문자열이며 값은 다양한 데이터 타입일 수 있습니다.