01. 변수 : 데이터 저장소
자바스크립트(JavaScript)에서 변수는 데이터를 저장하는 저장소입니다.
{
var x = 100;
var y = 200;
var z = "javascript";
console.log(x);
console.log(y);
console.log(z);
}
var: 과거에 사용되던 변수 선언 방식으로, 재사용 가능하지만 현재는 잘 사용하지 않습니다.
var x: 변수 x에 값 100을 저장합니다.
var y: 변수 y에 값 200을 저장합니다.
var z: 변수 z에 문자열 javascript를 저장합니다.
결과 확인하기
200
javascript
02. 변수 : 데이터 저장 + 데이터 변경
자바스크립트(JavaScript)에서 변수는 데이터를 저장하고 변경할 수 있습니다.
{
let x = 100;
let y = 200;
let z = "javascript";
x = 300;
y = 400;
z = "jquery";
console.log(x);
console.log(y);
console.log(z);
}
let: 블록 범위 변수로서 해당 블록 내에서만 유효하며, 이미 선언된 변수를 다시 선언하면 에러가 발생합니다.
let x: 변수 x에 값 100을 저장합니다.
let y: 변수 y에 값 200을 저장합니다.
let z: 변수 z에 문자열 javascript를 저장합니다.
x: 변수 x에 값을 값 100로 변경합니다.
y: 변수 y에 값을 값 200로 변경합니다.
z: 변수 z에 값을 문자열 javascript로 합니다.
결과 확인하기
400
jquery
03. 변수 : 데이터 저장 + 데이터 변경 + 데이터 추가
자바스크립트(JavaScript)에서 변수는 데이터를 저장하고 변경하고, 추가할 수 있습니다.
{
let x = 100;
let y = 200;
let z = "javascript";
let a = 400;
x += 100;
y += 100;
z += "jquery";
a += "100"
console.log(x);
console.log(y);
console.log(z);
console.log(a);
}
""는 숫자를 문자처럼 저장합니다.
x: x에 값 100을 추가해서 저장합니다.
y: y에 값 100을 추가해서 저장합니다.
z: z에 문자열 jquery를 추가해서 저장합니다.
a: a에 값 100을 문자처럼 추가해서 저장합니다.
결과 확인하기
300
javascriptjquery
400100
04. 상수 : 데이터 저장 + 데이터 변경(X)
상수는 값을 한 번 할당한 후에는 변경할 수 없는 변수입니다.
{
const x = { name: 'John, age: 30' };
const y = 200;
const z = ["javascript", CSS];
x.age = 31;
//y += 200;
z.push(jquery);
console.log(x);
console.log(y);
console.log(z);
}
const: let과 같은 블록 범위 변수이나, 재할당이 불가능합니다. 그러나 객체나 배열의 내용은 변경 가능합니다.
만약 주석처럼 y += 200;를 작성하면 y는 const에 의해 할당되었기 때문에 에러가 발생합니다.
그러나 x와 z처럼 객체나 배열에 변경하거나 추가하는 것은 가능합니다.
따라서 x는 age 값이 31로 변경되고, z는 jquery가 추가됩니다.
결과 확인하기
200
[ javascript, CSS, jquery ]
05. 배열 : 데이터 저장(여러개) : 표현방법1 : 배열 선언
하나의 데이터를 저장하는 변수와 달리, 배열은 여러개의 데이터를 저장할 수 있습니다.
자바스크립트(JavaScript)의 배열을 선언하는데는 여러 가지 방법 있습니다.
그 중 배열을 생성한 뒤 배열의 원소에 값을 할당한 후 출력하는 예제입니다.
{
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]);
}
빈 배열을 생성하여 'arr' 변수에 할당하는 예제입니다.
arr[0]: '0'번 인덱스에 값 100을 할당합니다.
arr[1]: '1'번 인덱스에 값 200을 할당합니다.
arr[2]: '2'번 인덱스에 문자열 javascript을 할당합니다.
결과 확인하기
100
200
javascript
06. 배열 : 데이터 저장(여러개) : 표현방법2 : 배열 선언과 동시에 초기값 설정
배열을 생성하고 초기값을 설정한 후, 배열의 값을 출력하는 예제입니다.
{
const arr = new Array(100, 200, "javascript")
console.log(arr);
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
}
'new Array' 안에 값을 넣어 배열할 수 있습니다.
결과 확인하기
100
200
javascript
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]);
}
빈 배열을 생성해서 데이터를 할당한 방식입니다.
arr[0]: '0'번 인덱스에 값 100을 할당합니다.
arr[1]: '1'번 인덱스에 값 200을 할당합니다.
arr[2]: '2'번 인덱스에 문자열 javascript을 할당합니다.
결과 확인하기
100
200
javascript
08. 배열 : 데이터 저장(여러개) : 표현방법4 : 리터럴 방식으로 배열 선언과 동시에 초기값 설정
배열은 다양한 종류의 값을 모아서 저장하고 처리하는데 사용됩니다.
{
const arr = [100, 200, "javascript"]
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
}
[] 안에 직접 값을 넣어 배열할 수 있습니다.
결과 확인하기
200
javascript
09. 배열 : 데이터 저장(여러개) : 표현방법5 : 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]);
}
[100, [200, 300], ["javascript", "jquery"]]: 세 개의 요소로 이루어진 배열입니다.
첫번째 요소는 100이고, 두번째 요소는 [200, 300], 세번째 요소는 ["javascript", "jquery"]입니다.
결과 확인하기
200
300
javascript
jquery
10. 배열 : 데이터 저장(여러개) : 표현방법6 : 배열 구조 분해 할당
배열 구조 분해 할당(Array Destructuring Assignment)은 배열의 요소를 분해하여 개별 변수로 할당하는 방법입니다.
{
const arr = [100, 200, "javascript"];
const [a, b, c] = arr;
console.log(a);
console.log(b);
console.log(c);
}
배열의 요소에 각각 이름을 부여하거나, 배열에서 필요한 값을 추출하여 변수로 사용할 수 있습니다.
배열 구조 분해 할당을 사용하면 배열의 요소를 각각의 변수로 빠르고 간편하게 할당할 수 있으며, 코드의 가독성을 높일 수 있습니다.
a에 값 100을 할당합니다.
b에 값 200을 할당합니다.
c에 문자열 javascript를 할당합니다.
결과 확인하기
200
javascript
11. 배열 : 데이터 저장(여러개) : 표현방법7 : 배열 펼침연산자
배열 펼침 연산자는 배열이나 객체의 요소를 하나씩 분리하여 가져오는 기능을 제공합니다.
{
const arr1 = [100, 200, "javascript"]
const arr2 = [300, 400, "jquery"]
const arr3 = [...arr1, 500];
console.log(arr1);
console.log(...arr1, ...arr2);
console.log(...arr3);
}
배열을 펼쳐서 개별 요소를 다른 배열이나 함수의 매개변수로 전달하거나, 새로운 배열을 생성할 때 유용하게 사용됩니다.
배열 펼침 연산자는 ... (세 개의 점) 기호로 표현됩니다.
위의 예시에서 '[...arr1, 500]'은 기존 배열 'arr1'의 요소를 펼쳐서 새로운 배열을 만들고, 추가적인 요소 '500'을 붙인 새로운 배열을 생성합니다.
결과 확인하기
100 200 javascript 300 400 jquery
100 200 javascript 500
12. 객체 : 데이터 저장(키와값) : 표현방법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]);
const doctor = {
firstname: "Matt",
lastname: "Smith",
age: "42"
sayGeronimo: function(){
console.log("Geronimo!");
};
}
doctor.sayGeronimo();
}
객체(Object)는 JavaScript에서 데이터와 해당 데이터에 대한 동작(메소드)을 하나로 묶어서 관리하는 데이터 구조입니다.
객체는 중괄호 {}를 사용하여 생성하며, 각 데이터와 동작은 프로퍼티(Property)와 메소드(Method)로 나타낼 수 있습니다.
객체는 속성 이름과 해당 속성에 할당되는 값을 쌍으로 저장하며, 속성은 동적으로 추가하거나 변경할 수 있습니다.
객체는 변수 하나에 여러 정보와 동작을 포함시켜 관리할 수 있게 해주는 역할을 합니다.
빈 객체 obj를 생성하고 객체의 속성에 값을 할당한 후, 해당 값을 출력하는 예제입니다.
obj[0]에 값 100을 할당합니다.
obj[1]에 값 200을 할당합니다.
obj[1]에 문자열 javascript를 할당합니다.
doctor.sayGeronimo();: 객체 doctor의 sayGeronimo 속성의 함수는 "Geronimo!"를 출력합니다.
* 객체 doctor는 다음과 같은 프로퍼티와 메소드를 가지고 있습니다.
firstName, lastName, age: 데이터를 담는 프로퍼티로 각각 이름, 성, 나이 정보를 가집니다.
sayGeronimo: 동작을 수행하는 메소드로 "Geronimo!"를 출력하는 동작을 수행합니다.
결과 확인하기
200
javascript
Geronimo!
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);
}
new Object()를 사용하여 빈 객체를 생성하고, 이 객체는 상수 obj에 할당됩니다.
obj.a = 100; : 객체 obj의 속성 a에 값 100을 할당합니다.
obj.b = 200; : 객체 obj의 속성 b에 값 200을 할당합니다.
obj.c = "javascript"; : 객체 obj의 속성 c에 문자열 "javascript"을 할당합니다.
결과 확인하기
200
javascript
14. 객체 : 데이터 저장(키와값) : 표현방법3 : 리터럴 방식으로 객체 선언
new Object를 선언하지 않고, {}를 사용한 예제입니다. 만약 {}를 사용하여 데이터 입력시, 배열 방식은 사용할 수 없습니다.
{
const obj = {};
obj.a = 100;
obj.b = 200;
obj.c = "javascript"
console.log(obj.a);
console.log(obj.b);
console.log(obj.c);
}
중괄호 {}를 사용하여 빈 객체를 생성하고, 이 객체는 상수 obj에 할당됩니다.
obj.a = 100;: 객체 obj의 속성 a에 값 100을 할당합니다.
obj.b = 200;: 객체 obj의 속성 b에 값 200을 할당합니다.
obj.c = "javascript";: 객체 obj의 속성 c에 문자열 "javascript"을 할당합니다.
결과 확인하기
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);
}
obj: a, b, c 세 개의 속성을 가지는 객체를 생성하여 배열에 포함합니다.
obj2: a, b, c 세 개의 속성을 가지는 객체를 2개 생성하여 배열에 포함합니다.
배열의 첫번째 원소에 { a: 100, b: 200, c: "javascript" } 속성을 가지는 객체와
두번째 원소에 { a: 300, b: 400, c: "jquery" } 속성을 가지는 객체를 생성하여 배열에 포함합니다.
결과 확인하기
200
javascript
100
200
javascript
300
400
jquery
17. 객체 : 데이터 저장(키와값) : 표현방법6 : 객체안에 배열이 있는 방식
초기값을 가지는 객체를 생성하고, 객체안에 배열 값을 출력하는 예제입니다.
{
const obj = {
a: 100,
b: [200, 300],
c: "javascript",
}
console.log(obj.a);
console.log(obj.b[0]);
console.log(obj.b[1]);
console.log(obj.c);
const obj2 = {
a: 100,
b: {x: 200, y: [300, 400]},
c: "javascript",
}
console.log(obj2.a);
console.log(obj2.b.x);
console.log(obj2.b.y[0]);
console.log(obj2.b.y[1]);
console.log(obj2.c)
}
객체의 속성에는 점 표기법을 사용하여 접근할 수 있으며, 배열 내의 원소에도 인덱스를 사용하여 접근할 수 있습니다.
결과 확인하기
200
300
javascript
100
200
300
400
javascript
18. 객체 : 데이터 저장(키와값) : 표현방법7 : 객체안에 객체가 있는 방식
초기값을 가지는 객체를 생성하고, 객체안에 객체 값을 출력하는 예제입니다.
{
const obj = {
a: 100,
b: {x: 100, y: 200},
c: "javascript",
}
console.log(obj.a);
console.log(obj.b.x);
console.log(obj.b.y);
console.log(obj.c);
const obj2 = {
a: 100,
b: {x: 200, y: {d: 300, e: {f: 400, g: 500}}},
c: "javascript"
}
console.log(obj2.a);
console.log(obj2.b.x);
console.log(obj2.b.y.d);
console.log(obj2.b.y.e.f);
console.log(obj2.b.y.e.g);
console.log(obj2.c);
}
객체 내에 다른 객체를 중첩하여 속성을 구성할 수 있으며,
중첩된 객체의 속성에도 마찬가지로 점 표기법을 사용하여 접근할 수 있습니다.
결과 확인하기
200
300
javascript
100
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("javascript");
},
f: function(){
console.log(obj.d);
},
g: function(){
console.log(this.d);
};
}
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.e();
obj.f();
obj.g();
}
객체는 다양한 유형의 데이터와 동작을 함께 묶어서 사용할 수 있으며, 메서드 내에서 this 키워드를 사용하여 객체 내의 다른 속성에 접근할 수
있습니다.
const obj = {...} : 객체 obj 내에는 a, b, c, d, e, f라는 다양한 속성과 해당 값을 가진 메서드가 포함되어 있습니다.
console.log(obj.a); : 객체 obj의 a 속성은 값 100을 출력합니다.
console.log(obj.b[0]); : 객체 obj의 b 속성은 배열이며, 첫 번째 원소 값 200을 출력합니다.
console.log(obj.b[1]); : 객체 obj의 b 속성 중 두 번째 원소 값 300을 출력합니다.
console.log(obj.c); : 객체 obj의 c 속성은 문자열 "javascript"를 출력합니다.
console.log(obj.d); : 객체 obj의 d 속성은 함수 d의 console.log를 사용하여 "javascript가 실행되었습니다."를 출력하는
메서드입니다.
obj.d();: 객체 obj의 d 속성의 함수는 "javascript가 실행되었습니다."를 출력합니다.
obj.e();: 객체 obj의 e 속성의 함수는 obj.c 속성 값을 사용하여 "javascript가 실행되었습니다."를 출력합니다.
obj.f();: 객체 obj의 f 속성의 함수는 this.c를 사용하여 obj.c 속성 값을 사용하여 "javascript가 실행되었습니다."를 출력합니다.
*함수 e 를 화살표 함수로 나타낼 수 있습니다. (예) const func = () => {console.log("javascript");}
* this 는 함수나 메소드 내에서 해당 함수 또는 메소드를 호출한 객체에 대한 참조를 제공합니다.
이렇게 함으로써 코드 내에서 현재 객체에 접근하거나 객체의 프로퍼티와 메소드를 참조할 수 있게 됩니다.
this 의 값은 실행 컨텍스트에 따라 동적으로 변경될 수 있으므로 주의가 필요합니다.
함수나 메소드가 호출되는 문맥에 따라 this는 다른 객체를 참조할 수 있으므로 개발자가 코드를 작성할 때 이를 고려해야 합니다.
결과 확인하기
200
300
400
500
javascript
javascript
javascript
javascript
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 obj = {
a: 100,
b: {x: 200, y: 300},
c: "javascript"
}
const {a, b: { x, y }, c } = obj;
console.log(a);
console.log(x);
console.log(y);
console.log(c);
}
}
첫번째 코드 블럭의 객체 obj는 세 개의 속성 a, b, c 를 가지고 있습니다.
const { a, b, c } = obj;: 객체 obj의 속성을 분해하여 a, b, c 변수에 할당합니다.
이렇게 하면 변수 a에는 obj.a의 값인 100을, 변수 b에는 obj.b의 값인 200을, 변수 c에는 obj.c의 값인 "javascript"를 할당합니다.
console.log(a);, console.log(b);, console.log(c);는 각 변수의 값을 출력합니다.
두번째 코드 블록은 obj는 세 개의 속성 a, b, c 를 가지고 있습니다.
const { a, b: { x, y }, c } = obj;: obj의 속성을 분해하여 a, x, y, c 변수에 할당합니다.
여기서 b 속성은 또 다른 객체인 x와 y에 각각 200과 300을 할당합니다.
console.log(a);, console.log(x);, console.log(y);, console.log(c);: 각 변수의 값을 출력합니다.
이렇게 객체 구조 분해 할당을 사용하면 객체의 중첩된 구조에서도 각각의 속성을 간편하게 변수로 할당할 수 있습니다.
결과 확인하기
200
javascript
100
200
300
javascript
21. 객체 : 데이터 저장(키와값) : 표현방법10 : 객체 펼침연산자
객체 펼침 연산자는 객체의 속성을 복사하여 새로운 객체를 생성하거나, 객체의 속성을 다른 객체에 병합할 때 사용하는 기능입니다.
다음은 객체 펼침연산자를 이용해 객체를 병합하고 확장하는 예제입니다.
{
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.a);
console.log(obj2.b);
console.log(obj2.c);
console.log(obj2.d);
console.log(obj3);
}
obj1 객체는 속성 a, b, c를 가지고 있습니다.
obj2 객체는 obj1 객체의 속성을 모두 포함하면서 추가로 d 속성을 추가한 객체입니다.
obj3 객체는 obj1과 obj2 객체의 모든 속성을 포함한 객체입니다.
console.log(obj1);: 속성이 그대로 출력됩니다.
console.log(obj2);: obj1 객체의 속성을 포함하면서 d 속성을 추가하여 출력합니다.
console.log(obj2.a);: obj2 객체의 속성 a를 출력합니다.
console.log(obj2.b);: obj2 객체의 속성 b를 출력합니다.
console.log(obj2.c);: obj2 객체의 속성 c를 출력합니다.
console.log(obj2.d);: obj2 객체의 속성 d를 출력합니다.
console.log(obj3);: 객체 obj1과 obj2의 모든 속성을 합쳐서 출력합니다.
* console.log()는 배열에서 ...을 불러올 수 있지만 객체에서는 불러올 수 없습니다.
결과 확인하기
{ a: 100, b: 200, c: 'javascript', d: 'jquery' }
100
200
javascript
jquery
{ a: 100, b: 200, c: 'javascript', d: 'jquery' }
22. 객체 : 데이터 교환(JSON)
JSON 데이터와 JavaScript 객체 사이를 변환하는 방법에 대한 예시입니다.
JSON은 데이터 교환 형식으로 널리 사용됩니다.
{
// json 데이터를 객체로 변환
const jsonString = '{"name": "webs", "age": "30"}';
const jsonObject = JSON.parse(jsonString);
console.log(jsonObject.name);
// 객체를 json 데이터로 변환
const person = {name: "webs", age: 30};
const jsonperson = JSON.stringify(person);
console.log(jsonperson);
}
JSON은 데이터 교환 형식으로 매우 유용하며, 웹 애플리케이션과 서버 간에 데이터를 주고받을 때 주로 사용됩니다.
JSON을 사용하면 데이터를 구조화하고 효율적으로 교환할 수 있으며, 다양한 프로그래밍 언어에서 지원되므로 데이터 호환성을 제공합니다.
JSON.parse()를 사용하여 JSON 형식의 문자열을 객체로 변환합니다.
jsonString은 JSON 형식의 문자열이며, JSON.parse()를 사용하여 이를 객체로 변환한 후 객체의 name 속성에 접근하여 "webs"를 출력합니다.
JSON.stringify()를 사용하여 객체를 JSON 형식의 문자열로 변환합니다.
person 객체는 JavaScript 객체이며, JSON.stringify()를 사용하여 이 객체를 JSON 형식의 문자열로 변환한 후 문자열 '{"name":
"webs", "age": "30"}'을 출력합니다.
결과 확인하기
{"name": "webs", "age": "30"}
++ 변수의 종류 ++
01. 지역변수
지역 변수는 특정 범위 내에서만 접근할 수 있기 때문에 변수가 선언된 같은 블록에서만 사용됩니다.
따라서 같은 이름의 변수가 다른 블록 내에 사용될 수 있습니다.
{
function exampleFunction() {
let localVar = 10;
console.log(localVar);
}
exampleFunction();
//console.log(localVar);
}
localVar: 지역변수입니다.
객체 밖의 console.log(localVar);: localVar는 같은 블록에서만 접근할 수 있기 때문에 함수 exampleFunction에서는 오류가
발생합니다.
결과 확인하기
ReferenceError: localVar is not defined
02. 전역변수
전역변수는 코드의 어디에서든 접근할 수 있는 변수입니다.
코드 전체에서 사용되며, 어느 함수나 블록에서든 접근할 수 있습니다.
하지만 전역 변수는 너무 많이 사용하면 코드의 가독성이 떨어지고 버그 발생 가능성이 높아질 수 있습니다.
따라서 프로그램 전체에서 접근 가능하므로 유의해서 사용해야 합니다.
{
{
let x = 100;
let y = 200;
let z = "javascript";
console.log("함수밖1:" + x, y, z);
function func(){
let x = 300;
y += 400;
let z = "jquery";
console.log("함수안:" + x, y, z);
}
func();
console.log("함수밖2:" + x, y, z);
}
}
첫번째로 선언된 x, y, z: 전역 변수입니다.
이 변수들은 코드 블록 내에서 접근 가능하며 해당 블록 내의 모든 함수에서 사용할 수 있습니다.
console.log("함수밖1: " + x, y, z);: 전역 변수 x, y, z의 값을 출력합니다.
func(): 이 함수 내부에서 새로운 지역 변수 x, z를 선언하고, 전역 변수 y를 변경합니다.
func() 함수를 호출하면 함수 내부의 코드가 실행됩니다.
함수 내부에서 선언한 지역 변수 x, z와 전역 변수 y의 값이 변경됩니다.
console.log("함수안: " + x, y, z);: 함수 내부에서 선언한 지역 변수 x, z와 지역 변수 y에 전역 변수 y를 더한 값을 출력합니다.
console.log("함수밖2: " + x, y, z);: 함수 외부에서 전역 변수 x, z와 지역 변수 y에 전역 변수 y를 더한값을 출력합니다.
결과 확인하기
함수안:300 600 jquery
함수밖2:100 600 javascript
++ 연산자의 종류 ++
01. 산술 연산자
산술 연산자는 수학적인 연산을 수행하는데 사용되는 연산자입니다.
자바스크립트에서 산술 연산자는 숫자 값을 이용하여 다양한 계산을 할 수 있도록 도와줍니다.
{
const sum = 5 + 3;
const difference = 10 - 4;
const product = 3 * 6;
const quotient = 15 / 3;
const remainder = 17 % 5;
const power = 2 ** 3;
const result = (10 + 3) * 5;
console.log(sum);
console.log(difference);
console.log(product);
console.log(quotient);
console.log(suremainderm);
console.log(power);
console.log(result);
}
| 종류 | 기본형 | 설명 |
|---|---|---|
| 덧셈(+) | 5 + 3 | 두 숫자를 더하는 연산 |
| 뺄셈(-) | 10 - 4 | 한 숫자에서 다른 숫자를 빼는 연산 |
| 곱셈(*) | 3 * 6 | 두 숫자를 곱하는 연산 |
| 나눗셈(/) | 15 / 3 | 한 숫자를 다른 숫자로 나누는 연산 |
| 나머지(%) | 17 % 5 | 나눗셈의 나머지 값을 계산하는 연산 |
| 지수(**) | 2 ** 3 | 왼쪽 피연산자를 오른쪽 피연산자만큼 제곱한 값을 계산하는 연산 |
* const result: 연산의 순서와 연산자 간의 우선순위를 주의하여 괄호로 원하는 연산 순서를 명시합니다.
결과 확인하기
6
18
5
2
8
65
02. 대입 연산자
대입 연산자는 변수에 값을 할당하는 데 사용되는 연산자입니다.
자바스크립트에서 변수에 값을 저장하거나 수정할 때 주로 사용되며, 다양한 형태의 대입 연산자가 있습니다.
{
{
let x = 5;
let y = 10;
y += 3;
let z = 20;
z -= 4;
let a = 6;
a *= 2;
let b = 15;
b /= 3;
let c = 17;
c %= 5;
console.log(x);
console.log(y);
console.log(z);
console.log(a);
console.log(b);
console.log(c);
};
}
대입 연산자는 변수의 값을 변경하거나 계산 결과를 갱신할 수 있습니다.
1. 할당 (=): 오른쪽 피연산자의 값을 왼쪽 피연산자에 할당합니다.
2. 덧셈 후 할당 (+=): 왼쪽 피연산자에 오른쪽 피연산자를 더한 뒤 결과를 왼쪽 피연산자에 할당합니다.
3. 뺄셈 후 할당 (-=): 왼쪽 피연산자에서 오른쪽 피연산자를 뺀 뒤 결과를 왼쪽 피연산자에 할당합니다.
4. 곱셈 후 할당 (*=): 왼쪽 피연산자와 오른쪽 피연산자를 곱한 뒤 결과를 왼쪽 피연산자에 할당합니다.
5. 나눗셈 후 할당 (/=): 왼쪽 피연산자를 오른쪽 피연산자로 나눈 뒤 결과를 왼쪽 피연산자에 할당합니다.
6. 나머지 후 할당 (%=): 왼쪽 피연산자를 오른쪽 피연산자로 나눈 나머지를 왼쪽 피연산자에 할당합니다.
결과 확인하기
13
16
12
5
2
03. 증감 연산자
증감 연산자는 변수의 값을 1만큼 증가시키거나 감소시키는 데 사용되는 연산자입니다.
자바스크립트에서는 두 가지 형태의 증감 연산자가 있습니다.
이 연산자들은 주로 반복문이나 변수 값의 조작에 사용됩니다.
증감 연산자를 복잡한 표현식과 함께 사용할 경우 코드의 가독성을 해칠 수 있으므로 주의해야 합니다.
{
let x = 5;
let y = 8;
{
let a = 10;
let b = a++;
console.log(a);
};
{
let c = 15;
let d = c--;
console.log(c);
};
}
1. 증가 연산자 (++): 변수의 값을 1만큼 증가시킵니다.
2. 감소 연산자 (--): 변수의 값을 1만큼 감소시킵니다.
a: 먼저 b에 a의 값 10을 할당하고, 그 다음 a를 1 증가시킵니다.
c: 먼저 d에 c의 값 15를 할당하고, 그 다음 c를 1 감소시킵니다.
결과 확인하기
16
04. 비교 연산자
비교 연산자는 두 개의 값을 비교하여 참(true) 또는 거짓(false)을 반환하는 연산자입니다.
{
let a = 5;
let b = 10;
let c = 5;
let d = "10";
let result;
result = a > b;
console.log(result);
result = a b;
console.log(result);
result = a = b;
console.log(result);
result = a != b;
console.log(result);
result = b == d;
console.log(result);
result = b === d;
console.log(result)
}
1. 동등 비교 (==): 두 값이 같은지 비교합니다.
자료형이 다른 경우 자동으로 형 변환을 시도한 후 비교합니다.
값이 같다면 true를 반환하고, 다르다면 false를 반환합니다.
2. 일치 비교 (===): 두 값과 자료형이 모두 같은지 비교합니다.
값과 자료형이 모두 같으면 true를 반환하고, 하나라도 다르면 false를 반환합니다.
3. 부등 비교 (!=): 두 값이 다른지 비교합니다.
값이 다르다면 true를 반환하고, 같다면 false를 반환합니다.
4. 불일치 비교 (!==): 두 값과 자료형이 모두 다른지 비교합니다.
값 또는 자료형 중 하나라도 다르면 true를 반환하고, 둘 다 같으면 false를 반환합니다.
5. 크다(>), 작다(), 크거나 같다(>=), 작거나 같다(=): 두 값을 크기를 비교합니다.
각각 값이 크다, 작다, 크거나 같다, 작거나 같다면 true를 반환하고, 그렇지 않다면 false를 반환합니다.
* 동등 비교(==)는 값의 형 변환을 시도하여 비교하며, 일치 비교(===)는 값과 자료형 모두를 비교합니다.
결과 확인하기
true
true
true
true
false
05. 논리 연산자
논리 연산자는 논리적인 조건을 조합하여 복잡한 조건식을 만들거나, 논리적인 판단을 수행하는 데 사용되는 연산자입니다.
자바스크립트에서 주로 사용되는 논리 연산자는 AND(&&), OR(||), NOT(!) 입니다.
{
{
let isSinger = true;
let singsWell = true;
if (isSinger && singsWell) {
console.log("훌륭한 가수입니다.");
} else {
console.log("훌륭한 가수가 아닙니다.");
}
};
{
let isMuscialActor = true;
let isFrontendDeveloper = false;
if (isMuscialActor || isFrontendDeveloper) {
console.log("뮤지컬 배우 또는 프론트엔드 개발자입니다.");
} else {
console.log("뮤지컬 배우도 아니고 프론트엔드 개발자도 아닙니다.");
}
};
{
let isLogged = false;
if (!isLogged) {
console.log("로그인되지 않았습니다.");
}
}
}
1. AND 연산자 (&&): 두 개의 조건이 모두 참일 때만 전체 조건이 참으로 평가됩니다.
2. OR 연산자 (||): 두 개의 조건 중 하나 이상이 참일 때 전체 조건이 참으로 평가됩니다.
3. NOT 연산자 (!): 조건을 뒤집어 참을 거짓으로, 거짓을 참으로 변환합니다.
첫번째 객체: "훌륭한 가수"인지 아닌지를 판단하는 조건문입니다.
isSinger 와 singsWell 두 개의 변수가 모두 true인 경우에만 "훌륭한 가수입니다."라는 메시지가 출력됩니다.
만약 둘 중 하나라도 false라면 "우수한 학생이 아닙니다."라는 메시지가 출력됩니다.
두번째 객체: "뮤지컬 배우"인지 또는 "프론트엔드 개발자"인지를 판단하는 조건문입니다.
isMuscialActor 와 isFrontendDeveloper 두 개의 변수 중 하나라도 true인 경우에 "뮤지컬 배우 또는 프론트엔드 개발자입니다."라는
메시지가 출력됩니다.
둘 다 false라면 "뮤지컬 배우도 아니고 프론트엔드 개발자도 아닙니다."라는 메시지가 출력됩니다.
세번째 객체: "로그인되었는지 아닌지"를 판단하는 조건문입니다.
isLogged 변수의 값이 false인 경우 !isLogged는 true가 되므로 "로그인되지 않았습니다."라는 메시지가 출력됩니다.
만약 isLogged가 true라면 조건문은 실행되지 않고 아무런 출력도 일어나지 않습니다.
결과 확인하기
뮤지컬 배우 또는 프론트엔드 개발자입니다.
로그인되지 않았습니다.
06. 비트 연산자
비트 연산자는 컴퓨터의 내부 데이터를 다루는 데 사용되며, 비트 수준에서 비트(bit) 단위로 연산을 수행하는 연산자입니다.
자바스크립트에서도 비트 연산자를 지원하지만, 주로 정수 데이터에 대한 연산에 사용됩니다.
{
{
let num1 = 5; // 0101 (num1)
let num2 = 3; // & 0011 (num1)
---------------------
let result = num1 & num2; // 0001 (result)
console.log(result); // 1
};
{
let num1 = 5; // 0101 (num1)
let num2 = 3; // | 0011 (num1)
---------------------
let result = num1 | num2; // 0111 (result)
console.log(result); // 7
};
{
let num1 = 5; // 0101 (num1)
let num2 = 3; // ^ 0011 (num1)
---------------------
let result = num1 ^ num2; // 0110 (result)
console.log(result); // 6
};
{
let num = 5; // 0101 (num1)
let result = ~num; // 1010 (2의 보수)
console.log(result); // -6 (10진수)
};
{
let num = 5; // 0101 (num1)
let result = num 1; // 1010
console.log(result); // 10
};
{
let num = 5; // 0101 (num1)
let result = num >> 1; // 0010
console.log(result); // 2
};
}
1. 비트 AND (&): 두 비트가 모두 1일 때만 결과 비트가 1이 됩니다.
두 개의 숫자 num1과 num2에 대해 비트 AND 연산을 수행합니다.
num1의 2진 표현은 0101, num2의 2진 표현은 0011입니다.
각 비트 위치마다 두 숫자의 해당 비트를 AND 연산한 결과를 구하고, 그 결과를 10진수로 변환하여 출력합니다.
2. 비트 OR (|): 두 비트 중 하나 이상이 1이면 결과 비트가 1이 됩니다.
두 개의 숫자 num1과 num2에 대해 비트 OR 연산을 수행합니다.
num1의 2진 표현은 0101, num2의 2진 표현은 0011입니다.
각 비트 위치마다 두 숫자의 해당 비트를 OR 연산한 결과를 구하고, 그 결과를 10진수로 변환하여 출력합니다.
3. 비트 XOR (^): 두 비트가 서로 다를 때 결과 비트가 1이 됩니다.
두 개의 숫자 num1과 num2에 대해 비트 XOR 연산을 수행합니다.
num1의 2진 표현은 0101, num2의 2진 표현은 0011입니다.
각 비트 위치마다 두 숫자의 해당 비트를 XOR 연산한 결과를 구하고, 그 결과를 10진수로 변환하여 출력합니다.
4. 비트 NOT (~): 비트를 반전시킵니다(1을 0으로, 0을 1로).
숫자 num에 대해 비트 NOT 연산을 수행합니다.
num의 2진 표현은 0101입니다.
반전시키면 1010이 됩니다.
모든 비트를 반전시켜서 얻은 결과를 10진수로 변환하여 출력합니다.
5. 왼쪽 시프트 (): 비트를 왼쪽으로 이동시킵니다.
오른쪽에 0으로 채워집니다.
숫자 num의 비트들을 왼쪽으로 1만큼 이동시킵니다.
결과적으로 왼쪽으로 이동한 비트에는 0이 추가됩니다.
6. 오른쪽 시프트 (>>): 비트를 오른쪽으로 이동시킵니다.
왼쪽에 부호 비트(최상위 비트)와 동일한 값으로 채워집니다.
숫자 num의 비트들을 오른쪽으로 1만큼 이동시킵니다.
결과적으로 오른쪽으로 이동한 비트들은 사라지며, 왼쪽에는 부호 비트(최상위 비트)와 동일한 값으로 채워집니다.
* 모든 비트를 반전시키는 것을 1의 보수라고 하고, 비트를 반전시키고 1을 더해 음수로 표현하는 것을 2의 보수라고 합니다.
결과 확인하기
7
6
-6
10
2
++ 자료형의 종류 ++
자료형에는 데이터의 종류나 형태를 나타내는데 사용되는 개념입니다.
변수나 상수에 저장되는 값의 유형을 정의하고, 해당 값이 어떻게 저장되고 처리되어야 하는지를 결정합니다.
자료형의 종류에는 숫자/문자열/논리/unll/undefind/Object/Array/Function 이 있습니다.
{
let age = 25;
let height = 175.5;
let name = "John";
let message = 'Hello, world!';
let isStudent = true;
let isLoggedIn = false;
let emptyValue = null;
let notDefined;
let person = {
name: "Alice",
age: 30,
isStudent: false
};
let numbers = [1, 2, 3, 4, 5];
function add(a, b) {
return a + b;
}
console.log(age);
console.log(height);
console.log(name);
console.log(message);
console.log(isStudent);
console.log(isLoggedIn);
console.log(emptyValue);
console.log(notDefined);
console.log(person);
console.log(person.name);
console.log(person.age);
console.log(person.isStudent);
console.log(numbers);
console.log(numbers[0]);
console.log(numbers[1]);
console.log(numbers[2]);
console.log(numbers[3]);
console.log(numbers[4]);
let result = add(3, 7);
console.log(result);
}
1. 숫자 자료형: 숫자 자료형은 정수나 부동소수점 숫자를 나타냅니다.
age 변수는 정수값 25를, height 변수에는 부동소수점 값 175.5를 저장합니다.
2. 문자열 자료형: 텍스트 데이터를 나타냅니다.
name 변수에는 "John"을, message 변수에는 'Hello, world!'를 저장합니다.
3. 논리 자료형: 참(true) 또는 거짓(false) 값을 나타냅니다.
isStudent 변수는 true, isLoggedIn 변수는 false 값을 가지고 있습니다.
4. unll 자료형: "값이 없음"을 나타냅니다.
emptyValue 변수에는 아무 값도 없음을 나타내는 null이 저장되었습니다.
5. undefind 자료형: 변수가 선언되었지만 초기화되지 않았음을 나타냅니다.
notDefined 변수는 초기값이 할당되지 않았으므로 undefined입니다.
6. Object 자료형: 여러 속성과 값을 하나의 그룹으로 묶어 표현하는 데 사용됩니다.
객체 person은 이름, 나이, 학생 여부 등의 속성을 가지고 있습니다.
7. Array 자료형: 순서대로 나열된 값의 집합을 나타냅니다.
numbers 배열은 1부터 5까지의 숫자를 포함하고 있습니다.
8. Function 자료형: 코드 블록을 캡슐화하고 재사용 가능한 동작을 정의하는 데 사용됩니다.
add 함수는 두 개의 숫자를 더하는 기능을 정의하고 있습니다.
결과 확인하기
175.5
John
Hello, world!
true
false
null
{name: 'Alice', age: 30, isStudent: false}
Alice
30
false
[1, 2, 3, 4, 5]
1
2
3
4
5
10