JavaScript Basic
ํ์ด์ง๐๋ฅผ ๋์ ์ผ๋ก ๋ง๋ค์ด์ฃผ๊ธฐ ์ํด ํ์ํ JavaScript!! ๊ทธ ์ฌ์ฉ๋ฒ์ ๋ฑ๋ฑ์ด ํํด์ณ๋ณด์!
Variableโ
var
let / const
-
์ ์ธ๊ณผ ํ ๋น
-
var
var myVar; // ์ ์ธ
myVar = 1; // ํ ๋น
var myVar = "Hello"; // ์ฌ์ ์ธ ๊ฐ๋ฅ -
let
let myLet; // ์ ์ธ
myLet = 2; // ํ ๋น
myLet = 3; // ์ฌํ ๋น ๊ฐ๋ฅ
let myLet = "hi" // SyntaxError -> ์ด๋ฏธ ์ ์ธ๋จ -
const
const myConst // SyntaxError -> ์ด๊ธฐํ ๋๋ฝ
const myConst = "hi"; // ๋ฐ๋์ ๊ฐ๊ณผ ํจ๊ป ์ ์ธ
myConst = "bye" // TypeError -> ์ฌํ ๋น ๋ถ๊ฐ
-
-
Scope
-
var
let VarFunction = function () {
var myVar = 0;
if (true) {
var myVar = 1;
console.log(myVar); // 1
}
console.log(myVar); // 1
}; -
let
let LetFunction = function () {
let myLet = 0;
if (true) {
let myLet = 1;
console.log(myLet); // 1
}
console.log(myLet); // 0
}
-
Hoistingโ
-
var
console.log(mooyeon); // undefined
var mooyeon = "๋ฌด์ฐ";์์ ์ฝ๋๋ ๋ค์๊ณผ ๊ฐ์ด ์ดํดํ๋ค.
var mooyeon; // hoisting
console.log(mooyeon);
mooyeon = "๋ฌด์ฐ"; -
let
console.log(dooly); // ReferenceError - ์ด๊ธฐํํ๊ธฐ ์ ์ ๊ทผ ๊ธ์ง
let dooly = "๋๋ฆฌ"; -
์ดํดํ๊ธฐ
-
var
- ์ ์ธ๊ณผ ๋์์ ์ด๊ธฐํ
- ํ ๋น
-
let
,const
TDZ(temporal Dead Zone)์ด ์กด์ฌ
- ์ ์ธ
- TDZ
- ์ด๊ธฐํ
- ํ ๋น
-
Typeโ
- ์์ํ์ (primitive data type)
- boolean
- null
- undefined
- number
- string
- symbol (ES6+)
- ๊ฐ์ฒดํ์ (object)
- object
-
Number
3 - 5;
Infinity; // typeof Infinity >> "number"
NaN; // typeof NaN >> "number" ์ฐ์ ์ฐ์ฐ ๋ถ๊ฐ, number๊ฐ ์๋๋ผ๋ number..
10 / 0; // Infinity
0 / 0; // NaN -
String
let myName = "๋ฌด์ฐ";
myName = '๋ฌด์ฐ';
// ` (backtick) : ES6+, ํ ํ๋ฆฟ ๋ฆฌํฐ๋ด
// string interpolation, ์ค๋ฐ๊ฟ(๊ฐํ) - ์ํฐ๋ ์ธ์ํ์ฌ ์ถ๋ ฅ๋๋ค.
myName = `๋ฌด
์ฐ`; -
Boolean
true;
false; -
Empty value
undefined; // typeof undefined >> "undefined"
null; // typeof null >> "object"
Operatorโ
-
๋๋ฑ ์ฐ์ฐ์ (
==
)1 == '1'; // true
-
์ผ์น ์ฐ์ฐ์ (
===
)1 === '1' // false
-
ํ ๋น
=
,+=
,-=
,*=
,/=
, ...
-
๋น๊ต
>
,<
,>=
,<=
, ...
-
๋ ผ๋ฆฌ
- and :
&&
- or :
||
- and :
-
Not (
!
) -
์ผํญ์ฐ์ฐ์ ํํ์
? true : false
2 > 4 ? true : false
Flowโ
-
if๋ฌธ
if (userName === "ssafy") {
message = "<h1>Hello ssafy</h1>";
} else if (userName === "1q2w3e4r") {
message = "<h1>Admin page์ ๋๋ค</h1>";
} else {
message = `<h1>${userName} ํ์ํฉ๋๋ค.</h1>`;
} -
switch๋ฌธ
switch (userName) {
case "1q2w3e4r": {
message = "<h2>๊ด๋ฆฌ์๋ ์ถฉ์ฑ์ถฉ์ฑ</h2>";
break;
}
case "ssafy": {
message = '<a href="http://edu.ssafy.com">์ธํผ</a>';
break;
}
default: {
message = `<h1>${userName} ํ์ํฉ๋๋ค.</h1>`;
}
} -
for๋ฌธ
/*
*๋ฐ๋ณต๋ฌธ
var๋ ํจ์์ค์ฝํ๋ฅผ ๊ฐ์ง๊ณ ์์ด์ for๋ฌธ ์ดํ์ i ๋ณ์์ ๊ฐ์ด ์ ์ง
let์ ๋ธ๋ก์ค์ฝํ๋ฅผ ๊ฐ์ง๊ณ ์์ด์ for๋ฌธ ์ดํ์ ํด๋น ๋ณ์๋ ์์.
*/
for (var i = 0; i < 3; i++) {
console.log(i);
}
console.log(i); // 3
for (let i = 0; i < 3; i++) {
console.log(i);
}
console.log(i); // ReferenceErrorlet myArray = ["๋ฌด์ฐ", "ํํ", "์๋ฒ"];
for (let name of myArray) {
document.write(name);
}
Functionโ
-
์ ์ธ์๊ณผ ํํ์
console.log(myAdd(2, 3)); // 5
console.log(myAdd2(3, 5)); // ReferenceError: myAdd2 is not defined
// ์ ์ธ์ -> hoisting ๋๋ค
function myAdd(a, b) {
return a + b;
}
// ํํ์ -> hoisting ์๋๋ ์ฌ๋งํ๋ฉด ํํ์์ผ๋ก ํจ์ ๋ง๋ค์.
let myAdd2 = function (a, b) {
return a + b;
}; -
Arrow function
let myFunction = function (a) {
return a + 1;
};
// 1. function ํค์๋ ์ญ์ ํ =>
let myArrowFunction1 = a => {
return a + 1;
};
// 1-1. ์ธ์๊ฐ ํ๋๋ผ๋ฉด, ์๊ดํธ ์๋ต ๊ฐ๋ฅ
// 1-2. ๋ฌธ์ฅ์ด ํ ์ค์ด๊ณ , ๋ฆฌํด์ด๋ผ๋ฉด ์ค๊ดํธ ๋ฐ return ํค์๋ ์๋ต ๊ฐ๋ฅ
let myArrowFunction2 = (a) => a + 1;
// 1-3. ์ธ์๊ฐ ์๋ ๊ฒฝ์ฐ์๋ () or _
let ArrowGreeting2 = () => {
console.log("happy!");
}; -
๊ธฐ๋ณธ ์ธ์
let greeting2 = (name = "ํํค") =>
name(
/*
* ์ต๋ช ํจ์
*/
(function (a) {
return a * 10;
})(10)
)((a) => a + 10)(10);
Arrayโ
-
Array ์ ์ธ
let numbers = [10, 1, 3, 5];
-
Index ์์ ์ ๊ทผ
numbers[0]; // 10
numbers[-1]; // undefined
numbers.length; // 4 -
๋ค์ง๊ธฐ
numbers.reverse(); // return + ์๋ณธ ๋ณ๊ฒฝ.
-
๋ง์ง๋ง์ ์์ ์ถ๊ฐ
numbers.push(20); // ๋ง์ง๋ง์ ์์ ์ถ๊ฐ + return (๊ธธ์ด)
-
๋ง์ง๋ง ์์ ์ ๊ฑฐ ๋ฐ
return
numbers.pop(); // 20 : ๋ง์ง๋ง ์์ pop + return (ํด๋น ์์)
-
๊ฐ์ฅ ์์ ์์ ์ถ๊ฐ ๋ฐ ๊ธธ์ด
return
numbers.unshift(3); // ๋งจ์์ ์์ ์ถ๊ฐ + return (๊ธธ์ด)
-
๋งจ์ ์์ ์ ๊ฑฐ ๋ฐ
return
numbers.shift(); // ๋งจ์ ์์ ์ ๊ฑฐ + return (ํด๋น ์์)
-
ํฌํจ ์ฌ๋ถ ํ์ธ
numbers.includes(1); // true : ํฌํจ์ฌ๋ถ ํ์ธ
-
ํฌํจ ์ฌ๋ถ + ๊ฐ์ฅ ๋จผ์ ์กด์ฌํ๋ ์์น ๋ฐํ
numbers.indexOf(1); // ๊ฐ์ฅ ๋จผ์ ์กด์ฌํ๋ ์์น
-
String์ผ๋ก ๋ฐ๊พธ๊ธฐ
numbers.join(); // ๊ธฐ๋ณธ์ด ,
numbers.join("-"); // -๋ก ์ฐ๊ฒฐ.
Objectโ
-
Object ์์ฑ
// ํค๊ฐ์ ""๋ก ๊ตณ์ด ์๋ฌถ์ด๋ ๋๋ค.
const me = {
// ํ๋กํผํฐ
name: "kim",
"phone number": "01012345678",
phone: {
type: "iphone XS MAX",
},
// ๋ฉ์๋ function ํค์๋๋ง ์์ฑํ์!
greeting: function () {
console.log(this); // me
console.log(`hi ${this.name}`); // this : '๋'๋ฅผ ๋ปํ๋ค. self.name์ฒ๋ผ
},
greeting2: () => {
console.log(this); // ์ ์ญ๊ฐ์ฒด window
console.log(`hi ${this.name}`); // ์ด๊ฑด this๊ฐ ์๋จนํ๋ค!? arrow function์์์ this๋ ๋ฌด์กฐ๊ฑด ์์ object! ๋์ค๊ฐ๋ฉด ์ ์ฉํ ๊ฑธ!?
},
};// ํจ์์ ์ธ์ผ๋ก ์ฐ๋ฆฌ๊ฐ ์ต์ํ ํํ์ object ์์ฑ ๊ฐ๋ฅ
// ์ธ์๋ฅผ ๋ฐ์์ ๋ญ๊ฐ๋ฅผ ํ๋, ๋ค์ํ ๊ฐ์ฒด๋ฅผ ๋ง๋ค๊ณ ์ถ์ ๋.
// ๋ค์๊ณผ ๊ฐ์ด ํจ์๋ก ๋ง๋ค์ด ๋๊ณ ''new'' ํค์๋๋ก ๋ถ๋ฌ์ ๊ฐ์ฒด ์์ฑ๊ฐ๋ฅ.
const Person = function(name, phone) {
this.name = name
this.phone = phone
this.greeting = function() {
return 'hi' + this.name
}
}
const moo = new Person('์ต๋ฌด์ฐ', '010-????-????') // new! ํน์ ํ ์ค๋ธ์ ํธ๋ฅผ ๋ง๋๋ ํค์๋
lee.name
lee.greeting()
// ๊ทธ๋ผ arrow func ์ผ๋ก๋ ๋ ๊น?
const Animal = name => {
this.name = name
}
const dog = new Animal('dog') // Error!!!!!!!!!
// ์์ฑ์ ํจ์์์๋ arrow func ์ฌ์ฉ ๊ธ์ง
// object ๋ฆฌํฐ๋ด
const name = '๊ฒจ๋ '
const phone = '010-0000-2222'
const greeting = function () {
return 'hi,' + this.name
}
const you = {
name,
phone,
greeting
}
//์ด๋ฐ์์ผ๋ก ์ฐ๋๊ฒ ์ค๋ธ์ ํธ ๋ฆฌํฐ๋ด ๋ฐฉ๋ฒ. ์ถ์ฝํ์ด๋ค ๋ผ๊ณ ๊ฐ๋จํ ์๊ฐํ๋ฉด ๋๋ค. -
์ค๋ธ์ ํธ ๋ฆฌํฐ๋ด (ES6+)
let book = "์๋ฐ์คํฌ๋ฆฝํธ ์์ ์ ๋ณต";
let album = {
IU: ["์ข์๋ ", "๋ฐคํธ์ง"],
BTS: ["์์๊ฒ๋ค์ ์ํ ์"],
};
// ์์ ๊ฐ๋ค์ object์ ๋ฃ์ผ๋ฉด ๋ฐ๋ก key,value๋ก ์์์ ๋ค์ด๊ฐ๋ค.
let bag = {
book,
album,
}; -
JSON
// JSON (Javascript Object Notation - ์๋ฐ์คํฌ๋ฆฝํธ ์ค๋ธ์ ํธ ํ๊ธฐ๋ฒ)
// JSON์ ๊ธฐ๋ณธ์ ์ผ๋ก ์๋ฐ์คํฌ๋ฆฝํธ ์ค๋ธ์ ํธ ํ๊ธฐ๋ฒ์ ๊ฐ์ง "๋ฌธ์์ด"์ด๋ค
// object -> JSON
let jsonData = JSON.stringify(me);
let myObject = JSON.parse(jsonDate);