javascript
1. hello world
- 첫번째, node js를 이용하여 hello world를 출력해보자
vscode에서 아래와 같은 코드를 입력한 후
console.log('Hello World');main.js 라고 저장했다.
node js를 설치한 뒤, cmd에서 node main.js 라고 입력한다.
(단, node -v로 확인했을때 오류가 나면 node js가 잘 설치되지 않은 것이다)
- 두번째, html을 이용하여 hello world를 출력해보자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="D:\main.js"></script>
</head>
<body>
</body>
</html>실행 후, 개발자모드의 console에 들어가면
hello world가 출력된다.
(console: 코드에서 작성한 메세지를 확인하고 자바스크립트를 실행할 수 있다.)
- use strict
use strict 를 사용해야 하는 이유: 자바스크립트는 유연한 언어이다. use strict는 그런 비상식적 코드를 에러처리해준다.
자바스크립트 엔진이 효율적으로 자바스크립트를 분석할 수 있다.
'use strict';
console.log('Hello World');- 변수
변경될 수 있는 값
let : mutable data type , read and write
'use strict'; let name = 'hello' console.log(name); name = 'world'; console.log(name);
block scope : 코드를 블럭안에 작성하게 되면 블럭 밖에서는 블럭 안의 내용을 볼 수 없다.
'use strict'; { let name = 'hello' console.log(name); name = 'world'; console.log(name); } console.log(name);
반대로, block을 쓰지 않고 파일 안에다 바로 쓰는 것을 global scope라고 한다. global은 어디서나 접근이 가능하다.
변수를 선언하는 다른 방법으로 [var]가 있는데 사용하지 않는것이 좋다.
1) var hoisting : 변수에 값이 할당되기도 전에 변수를 호출하는 것 (let은 불가)
2) var은 block scope이 없다.
const : 값을 할당한 후 변경 불가능한 변수 선언 방법, imutable data type , read only
- 메모리에 값이 저장되는 방식
1.primitive : 값 자체가 메모리에 저장, imutable
- object : 너무 커서 한번에 저장되지 못할때, reference를 가리키면 reference가 실제 값을 가리킴, mutable
- operater
console.log('my'+'cat');
console.log('1'+ 2 );
console.log(`string literals : 1+2 = ${1+2}`);
- Equlity operater
- == : loose equality , 값만 같으면 됨
- === : strict equality ,type도 같아함
const stringFive = '5';
const numberFive = 5;
console.log(stringFive == numberFive);
console.log(stringFive != numberFive);
console.log(stringFive === numberFive);
console.log(stringFive !== numberFive);
- function : fuction은 object type이다.
function printHello() {
console.log('Hello');
}
printHello();
function log(message) {
console.log(message);
}
log('Hello@');
log(1234);
- parameters
- premitive parameters: 값이 전달된다.
- object parameters: reference가 전달된다.
function changeName(obj) {
obj.name = 'coder';
}
const ellie = {name : ' ellie'};
changeName(ellie);
console.log(ellie);
- default parameters: 사용자가 입력하지 않았을때 default값을 설정할 수 있다.
function showMessage (message, from = 'unknown') {
console.log(`${message} by ${from}`);
}
showMessage('Hi!');
- Rest parameters : 배열 형태로 전달된다.
function printAll(...args) {
for (let i =0; i<args.length; i++) {
console.log(args[i]);
}
}
printAll('dream', 'coding', 'ellie');
- local scope: 밖에서는 안이 보이지않고, 안에서는 밖을 볼 수 있다.
let globalMessage = 'global';
function printMessage() {
let message = 'hello';
console.log(message);
console.log(globalMessage);
}
printMessage();
console.log(message);
- function expression
anonymous function : 이름이 없는 function
named function : 아룸이 있는 function
- callback function
function randomQuiz(answer, printYes, printNo){
if(answer === 'love you') {
printYes();
} else {
printNo();
}
}
const printYes = function() {
//anonymous function
console.log('yes!');
};
const printNo = function print() { //named function
console.log('no!');
};
randomQuiz('wrong', printYes, printNo);
randomQuiz('love you', printYes, printNo);
- arrow function: 함수를 간단하게 만들 수 있다.
const simplePrint = () => console.log('simplePrint!');
const add = (a,b) => a + b;
simplePrint();
- IIFE : 함수를 바로 실행할 수 있다.
(function hello(){
console.log('hello');
}) ();
- class = fields + methods
data class : fields만 있는
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
speak() {
console.log(`${this.name}: hello!`);
}
}
const ellie = new Person('ellie', 20);
console.log(ellie.name);
console.log(ellie.age);
ellie.speak();
- get , set
class user {
constructor(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age; //get set 호출
}
get age() {
return this._age;
}
set age(value) {
this._age = value;
}
}
const user1 = new user('steve', 'job', '23');
console.log(user1.age);
17 상속과 다양성
상속: 상속을 이용하게 되면 공통되는 것들을 일일히 작성하지 않아도 extends를 이용하여 재사용 할 수 있다.
다양성:필요한 함수만 재정의해서 쓸 수 있다(overriding)
class Shape {
constructor(width, height, color) {
this.width = width;
this.height = height;
this.color = color;
}
draw() {
console.log('drawing ${this.color} color!');
}
getArea() {
return this.width * this.height;
}
}
class Rectangle extends Shape {}
class Triangle extends Shape{
getArea() {
return (this.width * this.height) /2;
}
}
const rectangle = new Rectangle(20, 20, 'blue');
rectangle.draw();
console.log(rectangle.getArea());
const triangle = new Triangle(20,20, 'red');
triangle.draw();
console.log(triangle.getArea());
- instanceOf : class를 이용하여 만들어진 새로운 인스턴스, object가 class의 인스턴스인지 아닌지, 즉, object가 이 class를 이용하여 만들어진건지 확인할 수 있다.
console.log(rectangle instanceof Rectangle);- object: 각 파라미터를 연결할 수 있다.
const ellie = {name : 'ellie', age:4};자바스크립트는 동적인 언어라서 뒤늦게 인자를 추가할 수도 있다.
const ellie = {name : 'ellie', age:4};
ellie.hasJob = true;
delete ellie.hasJob; //삭제
ellie['hasJob'] = true;- computed properties
const ellie = {name : 'ellie', age:4};
console.log(ellie.name);
console.log(ellie['name']);
- lovely shorthand
const person1 = {name: 'bob', age:2};
const person2 = {name: 'steve', age:3};
const person3 = {name: 'dave', age:4};
const person4 = makePerson('ellie',30)
function makePerson(name, age){
return {
name, //key와 value가 동일하다면 생략 가능
age,
}
}- Constructer function
function Person(name, age) {
this.name = name;
this.age = age;
}- in operator : 해당하는 object안에 key가 있는지 없는지 확인
console.log('name' in ellie);
console.log('age' in ellie);- for.. in for ...of
for (key in ellie) {
console.log(key);
}
//배열 리스트
const array = [1,2,3,4];
for(value of array){
console.log(value);
}- cloning
const user = {name: 'ellie', age:'20'};
const user2 = user;
console.log(user);
const user3 ={};
for (key in user){
user3[key]= user[key];
}
console.clear();
console.log(user3);
const user4 ={};
Object.assign(user4, user);
console.log(user4);
const fruit1 ={ color:'red' };
const fruit2 = { color:'blue', size: 'big' };
const mixed= Object.assign({} , fruit1, fruit2);
console.log(mixed.color);
console.log(mixed.size);26. 배열
- 배열 선언
const arr1 = new Array();
const arr2 = [1,2];- 인덱스
const fruits = ['apple','banana'];
console.log(fruits);
console.log(fruits.length);
console.log(fruits[0]); //apple
console.log(fruits[fruits.length-1]); //banana- loop and search
//1. for
for (let i = 0; i< fruits.length; i++) {
console.log(fruits[i]);
}
//2. for of
for (let fruit of fruits) {
console.log(fruit);
}
//3.foreach
fruits.forEach((fruit) => console.log(fruit));27.배열에 넣고 빼기
- 제일 뒤에 넣기(push)
fruits.push('lemon','grape');
console.log(fruits);
- 뒤에서 빼기(pop)
fruits.pop();
console.log(fruits);- unshift : 앞부터 추가
fruites.unshift('melon','mango');
console.log(fruits);- shift: 앞부터 삭제
fruits.shift();
console.log(fruits);shift와 unshift는 pop과 push에 비하면 아주 느리다.
- splice: 특정 index부터 지우기
fruits.splice(1,1); //몇개를 지울지 지정안하면 전부 지운다.
fruits.log(fruits);
fruits.splice(1,1,'watermelon','strawberry'); //데이터를 넣을수도 있다.
fruits.log(fruits);- 두개의 배열을 합치기
const fruits2 = ['coconut','pear'];
const newFruits = fruits.concat(fruits2);
console.log(newFruits);- 검색
console.log(fruits);
console.log(fruits.indexOf('apple'));
console.log(fruits.includes('orange')); //value: true or false- lastIndexOF : 만약 똑같은 값이 배열에 두개있다면?
fruits.push('apple');
console.log(fruits);
console.log(fruits.indexOf('apple')); //제일처음값
console.log(fruits.lastindexOf('apple')); //제일마지막값- array 사이에 string 구분자 넣기
const fruits = ['apple','banana','orange'];
const result = fruits.join('|');
console.log(result);- 주어진 string을 array로
const fruits = 'banana, apple, orange, lemmon'
const result = fruits.split(',')- 배열 순서를 거꾸로
const array = [1,2,3,4,5];
const result = array.reverse();
console.log(result);
console.log(array);const students = [ new Student('A',29, true, 45), new Student('B',28, false, 80), new Student('C',30, true, 90), new Student('D',40, false, 66),
- 필터링
const result= students.filter((student) => student.enrolled);
console.log(result);- 점수만 뽑아내기
{
const result = students.map((student)=> student.score);
console.log(result);
}- 특정 점수보다 낮은것 뽑아내기
{
console.clear();
const result = students.some((student)=> student.score<50);
console.log(result);
const result2 = students.every((student)=>student.score<= 50)
console.log(result2);
}- 평균점수 구하기
{
const result = students.reduce((prev, curr) => {
console.log('----------');
console.log(prev);
console.log(curr);
return curr;
}, 0);
console.log(result);
}Json : 서버와 데이터를 주고받을 때 쓸 수 있는 포맷, 언어와 플랫폼에 상관없이 사용가능
- object->Json
let json = JSON.stringify(true);
console.log(json);
json = JSON.stringify(['apple','banana']);
console.log(json);
json으로 변환되는 건 오직 object만- JSON->object
const obj = JSON.parse(json);
console.log(obj);callback 함수를 이용해서 세밀하게 사용할 수 있다
- callback : 나중에 다시 부르는것
동기: 순서대로 코드 실행
비동기: 순서를 알 수 없음
console.log('1');
setTimeout(function(){
console.log('2');
},1000)
console.log('3');
- Synchronous callback:즉각적 , 동기적으로 실행
function printImmediately(print) {
print();
}
console.log('1');
setTimeout(function(){
console.log('2');
},1000)
console.log('3');
printImmediately(() => console.log('hello'));
- Asynchronous callback : 언제 실행할지 알 수 없음
function printWithDelay(print, timeout) {
setTimeout(print, timeout);
}
printWithDelay(()=>console.log('async callback'),2000);
Promise : 비동기를 간편하게 처리할 수 있도록 도와주는 object, 정해진 장시간의 기능을 수행하고 나서 정상적으로 기능이 수행이 되어졌다면 성공의 메세지와 함께 처리된 결과값을 전달해주고 만약 기능을 수행하다가 예상치 못한 문제가 발생하면 에러를 전달해준다.
-
pending: 프로그램이 실행중,
-
fulfilled : 완료한 상태
-
rejected : 실패한 상태
-
producer : 데이터를 만듬
-
consumer: 데이터의 소비자
1.producer, promise안에 네트워크 통신하는걸 만들면 그 순간 네트워크 통신이 됨
const promise = new Promise((resolve, reject) =>{ console.log('doing something...'); setTimeout(() => { resolve('ellie') },2000) });
- consumers: then, catch, finally 이용
promise.then(value => { console.log(value); }) .catch(error => { console.log(error); }) .finally(() => { console.log('finally'); });
3.promise chaining
const fetchNumber = new Promise((resolve, reject)=> { setTimeout(()=> resolve(1), 1000); }); fetchNumber .then(num=>num*2) .then(num=> num*3) .then(num => { return new Promise((resolve, reject)=>{ setTimeout(() => resolve(num-1), 1000); }); }) .then(num => console.log(num));
- error handling
const getHen = () => new Promise((resolve, reject)=> { setTimeout(() => resolve('chiken'), 1000); }); const getEgg = hen => new Promise((resolve, reject) => { setTimeout(() => reject(new Error(`error! ${hen} => egg`)), 1000); //에러 }); const cook = egg => new Promise((resolve, reject) => { setTimeout(() => resolve(`${egg} => fried egg`), 1000); }); getHen() .then(getEgg) //생략가능 .catch(error => { return 'bread'; })//대신 전달, 에러처리 .then(egg=> cook(egg)) .then(meal=>console.log(meal));
async, await
-async와 await를 이용하면 동기식으로 순서대로 코드를 작성하는 것처럼 간편하게 작성할 수 있게 도와준다. promise 위에 간편한 API
- syntatic sugar : 기존에 존재하는 것 위에 간편하게 쓸수있는 API를 제공하는 것
1.async
async function fetchUser() { return 'name'; } const user = fetchUser(); user.then(console.log); console.log(user);
2.await
function delay(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } async function getApple() { await delay(1000); return 'apple'; } async function getBanana() { await delay(1000); return 'banana'; } async function pickFruits() { const apple = await getApple(); const banana = await getBanana(); return `${apple} + ${banana}`; } pickFruits().then(console.log);
banana와 apple은 서로 연관이 없기 때문에 1초씩 기다리는건 비효율적이다.
async function pickFruits() { const applePromise = getApple(); const bananaPromise = getBanana(); const apple = await applePromise; const banana = await bananaPromise; return `${apple} + ${banana}`; }
깔끔하게 쓰기
function pickAllFruits() { return Promise.all([getApple(), getBanana()]) .then(fruits => fruits.join(' + ')); } pickAllFruits().then(console.log);
