버튼을 클릭하면 명언이 나와요
-이름이 나와요
1.변수 : 데이터 저장(옛날 방식)
옛날 방식인 var는 변수, 상수가 동시에 가능한 타입 입니다.
변수는 데이터를 저장하는 저장소 입니다. x,y,z에 데이터를 저장하고 console.log()로 호출 중입니다.
var x = 100; //변수 X에 숫자 100을 저장함
var y = 200; //변수 y에 숫자 200을 저장함
var z = "javascript" //변수 z에 문자 "Javascript"를 저장함
console.log(x); // 100 출력
console.log(y); // 200 출력
console.log(z); // javascript 출력
- var는 변수, 상수가 동시에 가능하기 때문에 최근에는 사용을 안하고 있습니다.(쓰는거는 가능함)
- 최근부터는 let(변수), const(상수)를 사용합니다.
2.변수 : 데이터 저장 + 데이터 변경
최근에는 let(변수)와 const(상수)를 사용합니다.
let(변수)에 데이터를 저장하고 다른 값으로 변경하고. console.log()로 호출하는 중입니다.
let x = 100; // 변수 x에 값 100을 저장 함.
let y = 200; // 변수 y에 값 200을 저장 함.
let z = "javascript"; // 변수 z에 값 javascript을 저장 함.
// x, y, z에 저장된 데이터 값을 변경합니다.
x = 300;
y = 200;
z = "react"
console.log(x); // 300 출력
console.log(y); // 200 출력
console.log(z); // react 출력
3.변수 : 데이터 저장 + 데이터 변경 + 데이터 추가
변수에 데이터를 저장 시키고. 저장된 변수에 연산을 하고. console.log()로 출력 중입니다.
let x = 100;
let y = 200;
let z = "javascript";
x += 300; // x = x + 300
y += 400;
z += "react";
// let x = "100" + 300; --- 100300
console.log(x); // 400
console.log(y); // 600
console.log(z); // javascriptreact
4.상수 : 데이터 저장(0) + 데이터 변경(X)
최근에는 let(변수)와 const(상수)를 사용합니다.
상수에 데이터를 저장 후 변경 할려고 하지만 에러가 발생합니다.
const x = 100;
const y = 200;
const z = "javascript";
x = 300;
y = 400;
z = "react";
console.log(x); // Assignment to constant variable
console.log(y); // Assignment to constant variable
console.log(z); // Assignment to constant variable
결과 값 : Assignment to constant variable
5.배열 : 데이터 저장(여러개) : 표현방법1 / 4
자바스크립트에서 배열을 생성하는 방법은 4개입니다. 그중 1번째 방법 입니다.
배열을 new로 생성하고. 인덱스 번호 안에 데이터를 저장하고. console.log()로 호출 중입니다.
const arr = new Array();
arr[0] = 100;
arr[1] = 200;
arr[2] = "javascript";
console.log(arr[0]); // 100
console.log(arr[1]); // 200
console.log(arr[2]); // javascript
6.배열 : 데이터 저장(여러개) : 표현방법 2 / 4
자바스크립트에서 배열을 생성하는 방법은 4개입니다. 그중 2번째 방법 입니다.
배열을 new로 생성하고. new 안에다가 데이터를 저장 시키고. console.log()로 각각의 인덱스 번호에 접근해서 호출 중입니다.
const arr = new Array(100, 200, "javascript");
console.log(arr[0]); // 100
console.log(arr[1]); // 200
console.log(arr[2]); // javascript
7.배열 : 데이터 저장(여러개) : 표현방법 3 / 4
자바스크립트에서 배열을 생성하는 방법은 4개입니다. 그중 3번째 방법 입니다.
배열을 " [ ] " (대괄호)를 이용해여 생성하고. 데이터를 인덱스 번호에 저장 후 console.log()로 호출하는 예제입니다.
const arr = [];
arr[0] = 100;
arr[1] = 200;
arr[2] = "javascript";
console.log(arr[0]); // 100
console.log(arr[1]); // 200
console.log(arr[2]); // javascript
8.배열 : 데이터 저장(여러개) : 표현방법 4 / 4
자바스크립트에서 배열을 생성하는 방법은 4개입니다. 그중 4번째 방법 입니다.
배열을 " [ ] " (대괄호)를 이용해여 생성하고 그 안에 데이터를 저장하고. console.log()로 인덱스 번호로 호출 중입니다.
const arr = [100, 200, "javascript"];
console.log(arr[0]); // 100
console.log(arr[1]); // 200
console.log(arr[2]); // javascript
9.객체 : 데이터 저장(키와 값) : 표현방법 1 / 5
자바스크립트에서 객체을 생성하는 방법은 5개입니다. 그중 1번째 방법 입니다.
객체를 new로 생성하고. 인덱스 번호 안에 데이터를 저장하고. console.log()로 호출 중입니다.
const obj = new Object();
obj[0] = 100;
obj[1] = 200;
obj[2] = "javascript";
console.log(obj[0]); // 100
console.log(obj[1]); // 200
console.log(obj[2]); // javascript
10.객체 : 데이터 저장(키와 값) : 표현방법 2 / 5
자바스크립트에서 객체을 생성하는 방법은 5개입니다. 그중 2번째 방법 입니다.
객체를 new로 생성하고. 객체에 이름을 할당하여 데이터를 저장 후. console.log()로 객체의 이름에 접근하여 호출 중입니다.
const obj = new Object();
obj.a = 100;
obj.b = 200;
obj.c = "javascript";
console.log(obj.a); // 100
console.log(obj.b); // 200
console.log(obj.c); // javascript
11.객체 : 데이터 저장(키와 값) : 표현방법 3 / 5
자바스크립트에서 객체을 생성하는 방법은 5개입니다. 그중 3번째 방법 입니다.
객체를 " { } " (중괄호)로 생성하고. 객체에 이름을 할당하여 데이터를 저장 후 console.log()로 호출 중입니다.
const obj = {};
obj.a = 100;
obj.b = 200;
obj.c = "javascript";
console.log(obj.a); // 100
console.log(obj.b); // 200
console.log(obj.c); // javascript
12.객체 : 데이터 저장(키와 값) : 표현방법 4 / 5
자바스크립트에서 객체을 생성하는 방법은 5개입니다. 그중 4번째 방법 입니다.
객체를 " { } "로 생성하고 그 안에 데이터를 저장 후 console.log()로 호출 중입니다.
const obj = {a:100, b:200, c:"javascript"};
console.log(obj.a); // 100
console.log(obj.b); // 200
console.log(obj.c); // javascript
13.객체 : 데이터 저장(키와 값) : 표현방법 5 / 5
자바스크립트에서 객체을 생성하는 방법은 5개입니다. 그중 5번째 방법 입니다.
배열을 " [ ] " (대괄호)로 생성하고. 배열 안에다가 객체를 " { } " (중괄호)로 생성 하여 호출 중입니다.
const arr = [
{a:100, b:200},
{c:"javascript"}
];
console.log(arr[0].a); // 100
console.log(arr[0].b); // 200
console.log(arr[1].c); // javascript
14. 객체 : 마지막으로 객체를 활용한 예제
객체 안에 배열, function(함수)를 생성하여 접근 후 호출하는 예제입니다.
const j = "javascript";
const obj = {
a: 100,
b: [200, 300],
c: "javascript",
d: function(){
console.log("javascript가 실행되었습니다.");
},
e: function() {
console.log(obj.c + "가 실행되었습니다.");
},
f: function() {
// this : 자기 자신
console.log(this.c + "가 실행되었습니다.");
}
}
console.log(obj.a); // 100
console.log(obj.b[0]); // 200
console.log(obj.b[1]); // 300
console.log(obj.b[2]); //undefind
console.log(obj.c); // javascript
console.log(obj.d); //(X)
obj.d(); // javascript가 실행되었습니다.
obj.e(); // javascript가 실행되었습니다.
obj.f(); // javascript가 실행되었습니다.