즐거운 코딩 생활 ( funyphp ) > community > javascript&jQuery

[ javascript ] CDATA 사용 이유

웹지기 — 2022-01-20T13:28:48+09:00

1) CDATA로 감싼 JAVASCRIPT부분이 의도치 않게 XML Parser 에 의해 잘못 인식되는 것을 막기 위함.

2) XHTML이 아닌 HTML로 인식되는 경우에도 JAVASCRIPT가 문제없이 동작하도록 하기 위함.

3) javascript안에서 태그를 사용할 경우 CDATA 선을 해줘서 오류처리를 막기 위함.

사용예제

[ javascript ] promise 를 async & await 로 쉽게 써보자

웹지기 — 2021-02-27T23:44:35+09:00

promise 를 async & await 로 쉽게 써보자

//promise는 chaning가 가능하다.

//체인이 많아 지면 복잡해진다.

//async await 동기식으로 순서를 작성하는 것 처럼 간편하게 작성가능

//기존에 존재하는 promise 위에 간단한 api를 제공하는데

//더 간편하게 제공하는 것을 syntactic sugar

//프로토 타입을 베이스트로한 살짝 덭붙여진 것

//async & await

//clear style of using promise :)

//1. async(비동기)

function fetchUser() {

//do network request in 10 secs....

//return 'test';

return new Promise((resolve, reject) => {

//do network request in 10 secs....

resolve('test');

})

}

const user = fetchUser();

user.then(console.log);

console.log(user);

//이러한 promise를 async를 통해서 바로 실행이 가능하다.

//syntactic sugar

async function fetchUser2() {

return 'test2';

}

const user2 = fetchUser2();

user2.then(console.log);

console.log(user2);

//2. await

function delay(ms) {

//promise를 리턴하는데,

//정해진 ms(밀리세컨드)가 지나면 resolve를 호출하는 promise를 리턴하게 된다.

return new Promise(resolve => setTimeout(resolve, ms));

}

async function getApple() {

//await는 async 함수가 붙은 곳에서만 사용이 가능

await delay(1000);

//에러처리를

return 'apple';

}

async function getBanana() {

await delay(1000);

return 'banana';

}

* promise로 사용하는 함수를 만들어보자면

* 이런식의 체이닝으로 구성이 가능하다.

function getBanana() {

return delay(1000)

.then(()=> 'banana');

}

function pickFruits(){

//이런식으로 promise도 중첩적으로 너무 체인닝을 하게 되면

//콜백지옥이 되는건 마찬가지이다.

return getApple()

.then(apple =>{

return getBanana()

.then(banana => `${apple}+${banana}`);

});

}

pickFruits().then(console.log);

//이녀석을 async를 통해서 간단하게 해줄 수 가 있다.

async function pickFruits2() {

const apple = await getApple();

const banana = await getBanana();

return `${apple} + ${banana}`;

}

pickFruits2().then(console.log);

* 에러처리

async function getApple3() {

await delay(1000);

throw 'error';

return 'apple3';

}

async function getApple3() {

await delay(1000);

return 'apple3';

}

async function getBanana3() {

await delay(1000);

return 'banana3';

}

async function pickFruits3() {

//여기서 사과와 바나나를 불러오는데

//사과에서 1초대기, 바나나에서 또 1초대기를 하게 된다.

//이렇게 순차로 진행되면 비효율 적이다.

//const apple = await getApple3();

//const banana = await getBanana3();

//이렇게 하면 1초만에 병렬적으로 두개를 실행하는게 가능해 진다.

//이렇게 getApple3과 getBanana3이 서로 다른것을 불러올때는

//서로의 관계가 없으므로 다른 방법으로 불러온다.

//promise에서 제공하는 all이라는 api를 사용하면 된다.

const applePromise3 = getApple3();

const bananaPromise3 = getBanana3();

const apple3 = await applePromise3;

const banana3 = await bananaPromise3;

return `${apple3} + ${banana3}`;

}

pickFruits3().then(console.log);

//3. useful Promise APIs

function pickAllFruits() {

return Promise.all([getApple3(), getBanana3()])

.then(fruits => fruits.join('+++'));

}

pickAllFruits().then(console.log);

//먼저출력되는 값중 하나를 출력하는 함수

function pickOnlyOne() {

return Promise.race([getApple3(), getBanana3()]);

}

pickOnlyOne().then(console.log);

[ javascript ] callback to promise 콜백을 프로미스로 바꿔서 콜백지옥 벗어나자

웹지기 — 2021-02-21T01:44:06+09:00

callback to promise 콜백을 프로미스로 바꿔서 콜백지옥 벗어나자

//콜백지옥 코드( 콜백 체인 )

//Callback Hell example

class UserStorage{

loginUser(id, password) {

return new Promise((resolve, reject) => {

setTimeout(()=>{

if(

(id === 'test' && password === 'dream') ||

(id === 'coder' && password === 'academy')

) {

resolve(id);

} else {

reject(new Error('not found'));

}

}, 2000);

});

}

getRoles(user) {

return new Promise((resolve, reject) => {

setTimeout(() => {

if(user === 'test') {

resolve({name:'test', role:'admin'});

} else {

reject(new Error('no access'));

}

}, 1000);

});

}

//1. 사용자에게 아이디 비밀번호 받아와서 로그인

//로그인이 성공이면 역할을 요청해서 받아온다.

//역할이 성공적으로 받아지면 object를 출력한다.

const userStorage = new UserStorage();

const id = prompt('enter you id');

const password = prompt('enter your password');

userStorage.loginUser(id, password)

.then(userStorage.getRoles)

.then(user => alert(`Hello ${user.name}, you have a ${user.role}`))

.catch(console.log);//오류발생시 console에

[ javascript ] promise

웹지기 — 2021-02-21T01:42:51+09:00

'use strict'

//promse 코드를 이용해서 비동기식으로 처리 하는 방법

//Promse is a JavaScript object for asynchronous operation.

//state : pending(진행중) -> fulfilled(성공적으로 종료) or rejected(파일을 찾을 수 없거나 문제가 생기면)

//Producer(원하는 기능을 수행해서 해당데이터를 만듬) vs Consumer(해당 데이터를 소비)

//1. Producer

//promise가 만들어지는 순간 네트워크 통신을 수행하게 된다.

//버튼을 눌러서 네트워크를 연결해야 할 경우는 사용하지 않는게 좋다.

//when new Promise is created, the executor runs automatically.

//promise 변수를 Promise Object 로 만들자

const promise = new Promise((resolve, reject) => {

//doing some heavy work(network, read files) 비동기처리가 유리

console.log('doing something...');

setTimeout(()=>{

//resolve('test'); //성공했을 때 나타내는 핸들링

reject(new Error('no network')) //오류를 나타내는 핸들링

}, 2000);

});

//2. Consumers : then, catch, finally

//아래 .then은 promise가 리턴이되고 자신을 호출하는것과 같아서

//그래서 다시 promise에 .catch를 등록할 수가 있게 된다.

//※※※※※※※※※이것을 체이닝이라고 한다. 굉장히 중요함.

promise

.then((value)=>{ //성공적인 부분

console.log(value);

})

.catch(error=>{ //오류가 발생하는 부분을 console.log로 출력

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));

//4. Error Handling

const getHen = () =>

new Promise((resolve, reject) => {

setTimeout(() => resolve('Chicken'), 1000);

});

const getEgg = hen =>

new Promise((resolve, reject) => {

//오류처리구문

setTimeout(() => reject(new Error(`${hen} => Egg `)), 1000);

//정상구문

//setTimeout(() => resolve(`${hen} => Egg `), 1000);

});

const cook = egg =>

new Promise((resolve, reject) => {

setTimeout(() => resolve(`${egg}=> Fry`), 1000);

});

getHen()

.then(hen => getEgg(hen))

.then(egg => cook(egg))

.then(meal => console.log(meal));

//콜백함수를 전달할 때 받아오는 value를 하나로 호출한 경우는 생략이 가능하다.

//.then(han=> getEgg(hen)) ==> .then(getEgg)

//.then(egg =>cook(egg)) ==> .then(cook)

//.then(meal => console.log(meal)) ==> .then(console.log)

//즉 getHen().then(getEgg).then(cook).then(console.log);

//이렇게 사용이 가능하다

//프리티어 포멧에서 한줄로 작성

getHen()

.then(getEgg)

//오류처리구문이 존재할 때 대체구문으로 진행을 마무하게 해주는 catch문

.catch(error => {

return 'bread';

})

.then(cook)

.then(console.log)

.catch(console.log); //오류처리

[ javascript ] 콜백지옥 - callback

웹지기 — 2021-02-21T01:42:23+09:00

'use strict'

//JavaScript is synchronous.

//Execute the code block by orger after hoisting.

//hoisting: var, function declearation

//1. 동기와 비동기

console.log('1'); //동기식

setTimeout(function(){ //비동기식

console.log('2');//브라우져에서 함수에 의해 대기했다가 실행(비동기 실행방법)

},1000);

// 여기서 function 으로 사용되는 callback 함수는

// arrow function expression으로 변경이 가능

//변경하게 되면

setTimeout( () => console.log('4'), 1000); //비동기식

//이러한 형태로 변경이 가능하다.

console.log('3'); //동기식

//Synchronous callback (동기적)

function printImmediately(print) {

print();

}

printImmediately(()=> console.log('hello')); //동기

//Aynchronous callback (비동기적)

function printWithDelay(print, timeout) {

setTimeout(print, timeout);

}

printWithDelay(()=> console.log('async callback'), 2000); //비동기

//콜백지옥 코드( 콜백 체인 )

//Callback Hell example

class UserStorage{

loginUser(id, password, onSuccess, onError) {

setTimeout(()=>{

if(

(id === 'test' && password === 'dream') ||

(id === 'coder' && password === 'academy')

) {

onSuccess(id);

} else {

onError(new Error('not found'));

}

}, 2000);

}

getRoles(user, onSuccess, onError) {

setTimeout(() => {

if(user === 'test') {

onSuccess({name:'test', role:'admin'});

} else {

onError(new Error('no access'));

}

}, 1000);

}

//1. 사용자에게 아이디 비밀번호 받아와서 로그인

//로그인이 성공이면 역할을 요청해서 받아온다.

//역할이 성공적으로 받아지면 object를 출력한다.

const userStorage = new UserStorage();

const id = prompt('enter you id');

const password = prompt('enter your password');

userStorage.loginUser(

id,

password,

(user) => {

userStorage.getRoles(

user,

userWithRole => {

alert(`Hello ${userWithRole.name}, you hava a ${userWithRole.role} role`);

error => {

console.log(error);

}

);

error => {console.log(error)}

);

[ javascript ] json 사용법

웹지기 — 2021-02-21T01:41:42+09:00

JSON

//simplest data interchange format.

//lightweight text-abased structure.

//easy to read.

//key-value pairs.

//used for serialization and transmission of data between the network the network the network connection.

//independent programming language and platform.

//Javascript Object Notation

//1. Object to JSON

//Stringfy(obj)

let json = JSON.stringify(true);

console.log(json);

json = JSON.stringify(['apple', 'banana']);

console.log(json);

const rabbit = {

name:'tori',

color:'white',

size:null,

birthDate:new Date(),

//포암되지 않는 데이터들 simbol function

//symbol:Symbol('id'),

jump:() => {

console.log(`${name} can jump!`);

};

json = JSON.stringify(rabbit);

console.log(json);

//해당하는 내용만 json으로 변경가능

json = JSON.stringify(rabbit, ['name', ['size'], ['color']]);

console.log(json);

//더 세밀한 callback을 통해 내용 전달

json = JSON.stringify(rabbit, (key, value) => {

console.log(`key: ${key}, value:${value}`);

//return value;

//더 새밀한 값을 설정

return key === 'name' ? 'test' : value;

});

console.log(json);

//2. JSON to Object

//parse(json)

console.clear();

json = JSON.stringify(rabbit);

console.log(json);

const obj = JSON.parse(json);

const obj2 = JSON.parse(json, (key, value) => {

console.log(`key : ${key}, value : ${value}`);

//return value;

return key === 'bitrhDate' ? new Date(value) : value;

});

console.log(obj);

rabbit.jump();

//obj.jump();

console.log(rabbit.birthDate.getDate());

[ javascript ] 유용한 함수들 10가지

웹지기 — 2021-02-15T22:58:53+09:00

javascript 유용한 함수들 10가지

https://youtu.be/3CUjtKJ7PJg

// Q1. make a string out of an array
{
    const fruits = ['apple', 'banana', 'orange'];
    const result = fruits.join();
    console.log(result);
}
  
// Q2. make an array out of a string
{
    const fruits = 'apple, banana, melon, tomato';
    const result = fruits.split(",");
    console.log(result);
}

// Q3. make this array look like this: [5, 4, 3, 2, 1]
{
    const array = [1, 2, 3, 4, 5];
    const arrSort = array.reverse();
    console.log(arrSort);
    console.log(array);
}

// Q4. make new array without the first two elements
{
    const array = [1, 2, 3, 4, 5];
    const result = array.splice(2, 5);
    console.log(result);
    console.log(array);
}

class Student {
    constructor(name, age, enrolled, score) {
        this.name = name;
        this.age = age;
        this.enrolled = enrolled;
        this.score = score;
    }
}
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),
    new Student('E', 18, true, 88),
];

// Q5. find a student with the score 90
{
    console.clear();
    /*
    * 해당하는 배열만 찾아 낼 때 find()
    const result = students.find(function(student, index){
        //console.log(student, index);
        return student.score === 90;
    });
    */
    //arrow function expression 으로 변경
    const result = students.find((student) => student.score === 90);
    console.log(result);
}

// Q6. make an array of enrolled students
{
    console.clear();
    /*
    * 조건에 맞는 배열만을 가져오고 싶을 때 filter()
    const result = students.filter(function(student){
        //console.log(student);
        return student.enrolled === true;
    });
    */
    //arrow function expression 으로 변경
    const result = students.filter((student) => student.enrolled);
    console.log(result);
}

// Q7. make an array containing only the students' scores
// result should be: [45, 80, 90, 66, 88]
{
    console.clear();
    /*
    * 학생들의 점수만을 새로운 배열로 넣고 싶을 때 map()
    const result = students.map(function(student){
    //점수를 두배로 바꾸고 싶다면 return student.score * 2를 해주면 된다.
        return student.score;
    });
    */
    //arrow funtion expression 으로 변경
    const result = students.map((student) => student.score);
    console.log(result);
}

// Q8. check if there is a student with the score lower than 50
{
    console.clear();
    //배열의 조건이 만족할 때 출력하고 싶다면 some()
    /*
    const result = students.some(function(student) {
        return student.score < 50;
    });
    */
    //arrow function expression
    const result = students.some((student) => student.score < 50);
    console.log(result);

    //모든 배열의 조건이 만족하게 하고 싶다면 every()
    //some()처럼 사용하고 싶으면 !을 사용하면 된다.
    //const result2 = !students.every(function(student) {
    //    return student.score >= 50;
    //});
    /*
    * 이값은 모든 조건이 50보다 작은값이 아니므로 false
    const result2 = students.every(function(student) {
        return student.score < 50;
    });
    */
    //arrow function expression
    const result2 = !students.every((student) => student >= 50);
    console.log(result2);
}

// Q9. compute students' average score
{
    console.clear();
    //reduce는 어떤값을 돌면서 누적할 때 사용
    //reduceRight는 뒤에서 부터 반복해서 누적할 때 사용
    //reduce는 curr에 배열이 하나 하나씩 순차적으로 전달이 된다.
    //prev는 처음에는 배열의 첫번째값 두번째부터는 return 되어 오는 값을 받아 들인다.
    /*
    const result = students.reduce(function(prev, curr) {
        //console.log('------------');
        //console.log(prev);
        //console.log(curr);
        //return curr; 값의 전달 확인용
        //점수의 합을 구하므로 아래처럼 합을 해준다.
        return prev + curr.score;
    }, 0);
    */
    //arrow function expression
    const result = students.reduce((prev, curr) => prev+curr.score, 0);
    console.log(result/students.length);
}

// Q10. make a string containing all the scores
// result should be: '45, 80, 90, 66, 88'
{
    //점수에 대한 새로운 배열을 만든다.
    const result = students
        .map((student) => student.score) //학생들을 점수로 변환하고
        .filter((score) => score >= 50) //점수 50점 이상인 학생만 필터하고
        .join(); //조인을 해주면 된다.
    console.log(result);
}

// Bonus! do Q10 sorted in ascending order
// result should be: '45, 66, 80, 88, 90'
{
    const result = students
        .map((student) => student.score)
        .sort((a, b) => a - b ) //낮은 점수 먼저 부여주고 높은점수 부터 보고 싶다면 b-a로 수정하면된다.
        .join();
        console.log(result);
}

[ javascript ] 배열 입력, 추가, 삭제, 출력 등 배열의 활용 push, pop, shift, unshift, indexOf, splice, concat, includes, lastIndexOf, forEach, for of

웹지기 — 2021-02-14T02:14:53+09:00

'use strict';

배열(Array)

1. 선언(Declaration)

const arr1 = new Array();
const arr2 = [1,2];

2. Index position

const fruits = ['apple','banana'];
console.log(fruits);
console.log(fruits.length);
console.log(fruits[0]); //맨처음 배열은 0
console.log(fruits[1]);
console.log(fruits[fruits.length-1]); //맨마지막 배열은 배열의 길이 -1
console.clear();

3. Looping over an array

print all fruits
for(let i=0; i
   
    console.log(fruits[i]);
}
console.clear();

for of
for(let fruit of fruits) {
    console.log(fruit);
}
console.clear();

forEach

/*
 * 사용방법 
 * 배열.forEach(function(변수정의, 인덱스, 들어가있는 배열값) { 출력문});
fruits.forEach(function(fruit, index, array) {
    console.log(fruit, index, fruits);
});
*/

한줄로 간단하게

fruits.forEach((fruit)=>console.log(fruit));
console.clear();

4. Addtion, deletion, copy

맨마지막에 배열을 추가

push : add an item to the end

fruits.push('melon', 'watermelon');
console.log(` push : ${fruits}`);

맨마지막의 배열을 삭제

pop : remove an item from the end

fruits.pop();
console.log(` pop : ${fruits}`);

맨앞에 배열을 추가

unshift: add an item to the benigging

fruits.unshift('cherry', 'pear');
console.log(` unshift : ${fruits}`);

맨앞에 배열을 삭제

shift: remove an item from teh benigging

fruits.shift();
console.log(` shift : ${fruits}`);

shift, unshft는 pop과 push보다 느리다

pop과 push는 맨뒤의 공간을 활용해서 넣다 뺏다 하기때문에

배열의정렬이 움직이지 않아도 되기때문에 더 빠르다.

note!! shift, unshift are slower than pop, push

splice : remove an item by index position

fruits.splice(1,1); splice(시작하는 인덱스, 삭제 인덱스 개수);

삭제인덱스개수가 1이면 해당인덱스만, 2면 해당인덱스와 그다음 인덱스까지 삭제

splice(시작하는 인덱스); 만 적을경우 해당하는 인덱스를 포함해서 뒤로 모두 지워버린다.

fruits.push('pear');
console.log(fruits);
fruits.splice(1,1);
console.log(fruits);

삭제와 추가가 동시에 가능 splice(시작하는인덱스, 삭제 인덱스 개수, '추가할인덱스', '추가할인덱스')

fruits.splice(1, 1, 'tometo', 'banana');
console.log(fruits);

combine two arrays

첫번째 선언된 fruits 배열과 fruits2를 하나로 합치는 함수 :: concat

첫번째배열.concat(두번째배열)

const fruits2 = ['apple', 'banana'];
const newFruits = fruits.concat(fruits2);
console.log(newFruits);

5. Searching

find the index

값이 있을경우 index번호 없을 경우 -1

console.clear();
console.log(fruits);
console.log(fruits.indexOf('apple'));

find of includes

값이 있을경우 true, 없을 경우 false

console.log(fruits.includes('apple'));

lastIndeOf

중복이 되었거나 할 때 맨첫번째 나오는 값만을 출력한다.

이럴때 제일뒤에 위치한 중복배열을 불러올 때 사용한다.

fruits.push('apple');
console.clear();
console.log(fruits);
console.log(fruits.indexOf('apple'));
console.log(fruits.lastIndexOf('apple'));

[ javascript ] object 생성, 사용방법

웹지기 — 2021-02-14T00:01:29+09:00

'use strict';

객체(Objects)

//one of the JavaScript's data types.

//a collection of related data and/or functionality.

//Nearly all objects in JavaScript are instances of Objets.

//object = { key : value };

//오브젝트는 키와벨류의 집합체

//변수에 접근가능한 property 와 값의 집합

1. 변수에 넣은 변하지 않는 데이터와 속성(Literals and properties)

//const name = 'test';
//const age = 10;
//print(name, age);
function print(person) {
    console.log(person.name);
    console.log(person.age);
}

const test = {name:'test', age:14};
print(test);

//object 정의 2가지 방법
const obj1 = {}; //'object literal' syntax
const obj2 = new Object(); //'object constructor' syntax

//유지보수에 어려운 코딩방법
//test.hasJob = true; //이런식으로 object를 만들지 말자
//console.log(test.hasJob);
//이런식으로 바로 삭제도 가능하다.
//delete test.hasJob;
//console.log(test.hasJob);  //결과 -> undefined

2. 계산된 속성(Computed properties)

//배열의 형태로 적고 ''로 스트링타입으로 불러온다.
//동적으로 키의 값을 가져올 때 사용하기 유용
console.log(test.name);
console.log(test['name']);

test['hasJob'] = true;
console.log(test.hasJob);

function printValue(obj, key){
    //이런형태로 값이 변경되는 구문에서는 . 을 통해서 값을 가져오면 undefined가 출력
    console.log(obj.key); 
    //대신 computed properties를 사용하면 정상적 출력가능
    console.log(obj[key]);
}
printValue(test, 'name');
printValue(test, 'age');

3. 속성값 빠른 정의(Property value shorthand)

//일일이 적어서 넣어주었던 번거로움을 함수를 통해 쉽게 넣어 줄 수 있다.
const person1 = {name:'bob', age:2};
const person2 = {name:'steve', age:3};
const person3 = {name:'hahaha', age:13};

/*
이렇게 함수를 만들어서 사용하는 부분을 클래스인것처럼 작성을 하게 되면
알아서 클래스 처럼 받아들여서 사용을 할 수 있게 해준다.
const person4 = makePerson('kikiki', 23);
console.log(person4);
function makePerson(name, age) {
    return {
        //키와 벨류의 이름이 동일하면 이것을 생략할 수가 있다.
        //name : name,
        //age : age,
        //이런식으로 생략이 가능.
        name,
        age,
    };
}
*/

3번 에서 사용되는 함수의 변형이 4번

4. 생성자 기능(Constructor Function)

const person4 = new Person('kikiki', 23);
console.log(person4);
function Person(name, age){
    //this = {}; //이부분이 생략되어 있다고 보면 됩니다.
    this.name = name;
    this.age = age;
    //return this;
    //return 구문 역시 생략되어 자동으로 this를 return해준다
}

5. in키워드를 이용해서 키의 오브젝트 확인(in operator : property existence check(key in obj));

console.log('name' in test);
console.log('age' in test);
console.log('random' in test);
console.log(test.rendom);

6. for..in vs for..of

//for(key in obj);
console.clear();//console창 청소
console.log(test.name);
console.log(test.age);
for(const key in test) {
    console.log(key);
}

//for(value of iterable)
const array = [1,2,4,5];
/*
for(let i=0;i    console.log(array[i]);
}
이와같이 for구문으로 출력했던 것을
아래처럼 for of를 통해 간단히 출력가능
*/
for(const value of array) {
    console.log(value);
}

7. 객체복제(Fun cloning)
//객체에 객체를 복사한 후 복사한 객체의 값을 바꾸게 되면
//최초 넣어둔 객체의 값도 바뀌게 된다.
//Object.assign(dest, [obj1, obj2, obj3....])
const user = {name:'test', age:20};
const user2 = user;
user2.name = 'coder';
console.log(user);

old way
const user3 = {};
for(const key in user) {
    user3[key] = user[key];
}
console.clear();
console.log(user3);

Object를 이용한 복제
//첫번째 복사 방법
const user4 = {};
Object.assign(user4, user); 
console.log(user4);
//두번째 복사 방법
const user5 = Object.assign({}, user);
user5.name = 'aaaa';
console.log(user5);

another example
const fruit1 = {color:'red'};
const fruit2 = {color:'blue', size:'big'};
const mixed = Object.assign({}, fruit1, fruit2);
console.log(mixed.color);
console.log(mixed.size);

[ javascript ] 클래스 정의 및 사용

웹지기 — 2021-02-11T03:16:33+09:00

객체지향 프로그래밍(Object-oriendted programming)

class: template

object: instance of a class

JavaScript classes

- introduced in ES6

- syntactical sugar over prototype-based inheritance

js파일 상단에 선언(오류체크)

 'use strict';

1. 클래스선언(Class declarations)

class Person {
    //construtor
    constructor(name, age) {
        //fields
        this.name = name;
        this.age = age;
    }

    //methods
    speak() {
        console.log(`${this.name} : hello!`);
    }
}

const test = new Person('test', 20);
console.log(test.name);
console.log(test.age);
test.speak();

2. Getter and setters

class user {
    constructor(firstName, lastName, age) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }

    //getter에서 사용하는 변수를 들어오는 변수와 다르게 설정 age => _age
    //같게 설정할 경우 무한루프
    get age() {
        return this._age;
    }
    //setter에서 사용하는 변수를 들어오는 변수와 다르게 설정 age => _age
    //같게 설정할 경우 무한루프
    set age(value) {
        /*
        0이하의 값을 사용하지 못하게 설정
        if(value<0){
            throw Error('age can not be negative');
        }
        this._age = value;
        */
        this._age = value < 0 ? 0 : value;

    }
}
const user1 = new user('steve', 'jobs', -1);
console.log(user1.age);

3. Fields (public, private)

Too soon!

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes

privateField = 아직지원하지 않는 기능(undefined라고 뜸) - 바벨을 이용

class Experiment {
    publicField = 2;
    #privateField = 0;
}
const experiment = new Experiment();
console.log(experiment.publicField);
console.log(experiment.privateField);

4. 정적속성 매소드(Static properties and methods)

object에 상관없이 공통적으로 클래스에서 사용(메모리의 사용을 줄여준다.)

class Article {
    static publisher = 'Dream Coding';
    constructor(articleNumber) {
        this.articleNumber = articleNumber;
    }

    static printPublisher() {
        console.log(Article.publisher);
    }
}
const article1 = new Article(1);
const article2 = new Article(2);
//static publisher 을 사용하면 object에서 사용불가, 클래스에서 사용가능
//publisher(static없이) 을 지우면 object에서 사용사용가능, 클래스에서 사용불가
console.log(article1.publisher);
console.log(Article.publisher);
Article.printPublisher();

5. 상속(Inheritance)

a way for one class to extend another class.

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;
    }

    toString() {
        return console.log(` width : ${this.width}, height : ${this.height}, color : ${this.color}`);
    }
}

상속과 다양성 (상속을 위해서 extends를 사용해서 부모클래스를 불러온다.)

class Rectangle extends Shape {}
const rectangle = new Rectangle(20,20,'blue');
rectangle.draw();
console.log(rectangle.getArea());

class Triangle extends Shape {
    //오버라이딩
    draw() {
        //부모의 메소드와 오버라이딩 된 메소드를 모두 호출하고 싶다면 super.draw()를 사용
        super.draw();
        console.log('▲');
    }
    //오버라이딩
    getArea() {
        return (this.width * this.height)/2;
    }
}
const triangle = new Triangle(20,20,'red');
triangle.draw();
console.log(triangle.getArea());
console.log(triangle.toString());

6. 클래스 상속 검사(Class checking : instanceOf)

rectangle 가 Rectangle의 클래스를 통해서 만들어진 것인지 확인( true, false )

console.log(rectangle instanceof Rectangle);
console.log(triangle instanceof Rectangle);
console.log(triangle instanceof Triangle);
console.log(triangle instanceof Shape);
console.log(triangle instanceof Object);

[ javascript ] 함수의 또다른 기능

웹지기 — 2021-02-11T02:08:08+09:00

함수의 또다른 기능

함수는 다른 변수처럼 사용된다.

변수에 값으로 할당 할 수 있다.

다른 함수에 인수로 전달 가능

다른 함수에 의해 반환될 수 있다.

First-class function

functions are treated like any other variable

can be assigned as a value to variable

can be passed as an argument to other functions.

can be returned by another function

1. 함수 표현(Function expression)

함수선언은 정의된것보다 먼저 호출이 가능한 표현식(hoisted 기능) : 함수

함수선은을 먼저 되어있어야 함수 실행이 가능한 표현식 : 익명함수

a function declaration can be called earlier than it is defiend. (hoisted)

a function expression is created when the execution reaches it.

const print = function() { //익명함수(anonymous function) - 함수에 이름이 없는 것
    console.log('print');
};
print(); //함수처럼 출력
const printAgain = print; //함수를 변수처럼 할당
printAgain(); //변수에 할당 되었으므로 함수처럼 호출 가능( function()을 가르키게 되므로 )
const sumAgain = sum; //함수로 설정된 sum(a, b)를 변수처럼 다시 할당도 가능
console.log(sumAgain(1,3)); //함수를 바라보고 있으므로 함수처럼 호출 가능

2. 함수표현식 callback함수(Callback function using function expression)

function randomQuiz(answer, printYes, printNo) {
    if(answer === 'love you') {
        printYes();
    } else {
        printNo();
    }
}

익명함수(anonymous function)

const printYes = function() {
    console.log('yes!');
};

정의함수(named function)

디버깅의 스택추적에 사용

재귀호출을 할 때 사용

better debugging in debugger's stack traces

recursions

const printNo = function print() {
    console.log('no!');
    //print(); //재귀호출(현재는 기능이 없으므로 무한반복됨)
};
randomQuiz('wrong', printYes, printNo);
randomQuiz('love you', printYes, printNo);

Arrow funcion

always anonymous

/* 아래 구문으로 간결하게 할 수 있다.
const simplePrint = function() {
    console.log('simplePrint!');
};
*/
const simplePrint = () => console.log('simplePrint!');
simplePrint();
/* 아래 구문으로 간결하게 할 수 있다.
const add = function(a,b) {
    return a+b;
}
*/
const add = (a,b) => a+b;
console.log(add(10,12));

즉시함수 호출방식(IIFE: Immediately Invoked Function Expression)

(function hello() {
    console.log('IIEF');
})();

Fun quiz time

function calculate(command, a, b)

command : add, substract, divide, multiply, remainder

const calculate = (command, a, b) => {
    switch(command){
        case '+' :
            console.log(a+b);
        break;
        case '-' :
            console.log(a-b);
        break;
        case '*' :
            console.log(a*b);
        break;
        case '/' :
            console.log(a/b);
        break;
        case '%' :
            console.log(a%b);
        break;
    }
};
calculate('+', 15, 10);
calculate('-', 15, 10);
calculate('*', 15, 10);
calculate('/', 15, 10);
calculate('%', 15, 10);

[ javascript ] 함수 선언 , 사용법

웹지기 — 2021-02-11T01:55:16+09:00

함수(Function)

프로그램을 구성하는 빌딩블럭

서브프로그램이라고도 불리며 여러번 재사용이 가능

한가지의 작업이나 값을 계산할 때 사용

-fundamental building block in the program

-subprogram can be used multiple times

-performs a task or calculates a value

1. 함수 정의(Function declaration)

function 함수명(파라미터1, 파라미터2) {비지니스로직....리턴 값;}

하나의 함수는 한가지 일만 하도록 만든다.

함수 이름은 동사의 형태로 지정하는게 좋다.

createCardAndPoint처럼 두가지의 역할을 하는 함수라면

두개로 나눠서 createCard와 createPoint로 나누는게 좋다.

함수는 object 이므로 변수할당, 파라미터 전달, 함수로 리턴 모두 가능하다.

function name(param1, param2) { body.... return;}

one function === one thing

naming : doSomething, command, verb

e.g. createCardAndPoint -> createCard, createPoint

function is object in JS

function printHello(){
    console.log('hello');
}
printHello();

function log(message) {
    console.log(message);
}

log('Hello~');
log(1234);

2. 매개변수(Parameters)

사전 매개변수 : (메모리에)값으로 전달

객체 매개변수 : (메모리에)참조값으로 전달

premitive parameters: passed by value

object parameters: passed by reference

function changeName(obj){
    obj.name = 'coder';//전달되는 매개변수의 이름값을 coder로 변경
}
const test = {name:'test'};
changeName(test);
console.log(test);

3. 기본매개변수(Default parameters(added in ES6))

function showMessage(message, from='unknown'){
//기존에 from의 값이 없을 경우 에러가 발생해서
//if(from~~~~) 구문으로 오류를 방지했다. 
//하지만, ES6부터는 위처럼 from='unknown' 으로 아래의 구문을 대신할 수 있다.
//function showMessage(message, from){
//    if(from === undefined) {
//        from = 'unknown';
//    }
    console.log(`${message} by ${from}`);
}
showMessage('Hi!');

4. 정해지지않은 매개변수(Rest parameters (added in ES6));

function printAll(...args) {
    for(let i=0; i
        console.log(args[i]);
    }

for of 구문

for(const arg of args) {

console.log(arg);

}

foreach 구문

args.forEach((arg) => console.log(arg));

}

printAll('dream', 'coding', 'test');

5. 지역변수(지역범위(Local scope))

let globalMessage = 'global';

function printMessage() {

let message = 'hello'; //지역변수(local variable)

console.log(message);

console.log(globalMessage);

function printAnother() {

console.log(message);

let childMessage = 'hello';

}

//지역변수를 외부에서 출력을 요청하면 오류가 발생한다.

//console.log(childMessage);

//반환값이 없는 경우 return 생략가능

//return undefined;

}

//지역변수를 외부에서 출력을 요청하면 오류가 발생한다.

//(var 변수 선언시 poisting이 일어나 지역변수와 전역변수 모두 사용, 보안에 취약)

//console.log(message);

printMessage();

6. 값 반환(Return a value)

function sum(a, b) {

return a+b;

}

const result = sum(1,2);

console.log(`sum : ${sum(1,2)}`);

console.log(`sum : ${result}`);

7. Early return, early exit

if구문내에서만 처리가 될 때에는 else 일때 오류가 발생 할 수 있으므로

아래처럼 if처리를 하게 좋은 코드가 아니다.

bad code

function upgradeUser(user) {

if(user.point > 10) {

//업그레드시킬 구문(long upgrade logic.....)

}

}

이럴경우 반대의 구문으로 처리를 하고 return;으로 보내고

정상적일 때는 구문을 처리 할 수있게 if처리를 바꾼다.

good code

function upgradeUser(user) {

if(user.point <= 10) {

return;

}

//업그레드시킬 구문(long upgrade logic.....)

}

[ javascript ] 문자연산, 숫자연산, 증감연산, 대입연산, 비교연산, 삼항연산, if elseif else, switch, for, while, do while

웹지기 — 2021-02-10T23:07:50+09:00

문자연산, 숫자연산, 증감연산, 대입연산, 비교연산, 삼항연산, if elseif else, switch, for, while, do while

- 참고동영상 사이트 : https://www.youtube.com/c/드림코딩by엘리/search?query=javascript

1. 문자연산(String concatenation)

console.log('my' + ' cat');

console.log('1' + 2);

console.log(`String literals: 1+2 = ${1 + 2}`);

2. 숫자연산(Numeric operators)

console.log(1 + 1); //add

console.log(1 - 1); //substarct

console.log(1 / 1); //divide

console.log(1 * 1); //multiply

console.log(5 % 2); //remainder

console.log(2 ** 3); //exponentiation

3. 증감연산(Increment and decrement operators)

let counter = 2;

const perIncrement = ++counter;

//counter = counter+1;

//preIncrement = counter;

console.log(`preIncrement:${perIncrement}, counter: ${counter}`);

const postIncrement = counter++;

//postIncrement = counter;

//counter = counter+1;

console.log(`preIncrement:${postIncrement}, counter: ${counter}`);

const preDecrement = --counter;

console.log(`preDecrement : ${preDecrement}, counter : ${counter}`);

const postDecrement = counter--;

console.log(`postDecrement : ${postDecrement}, counter : ${counter}`);

4. 대입연산(Assignment oprators)

let x = 3;

let y = 6;

x += y; // x = x+y;

x == y;

x *= y;

x /= y;

5. 비교연산(Comparison operators)

console.log(10 < 6); // less than

console.log(10 <= 6); // less than or equal

console.log(10 > 6); //greater than

console.log(10 >= 6); //greater than of equal

6. Logical operators : || (or), && (and), ! (not)

//const value1 = false;

const value1 = true;

const value2 = 4 < 2; //false

//|| (or)

// 아래조건중 하나라도 true가 나오면 다른 문장과 상관없이 true를 반환

// 아래 코드에서 연산이 많은 함수나 조건은 뒤쪽에 나오게 해주는게 좋다.

// 심플한 조건을 먼저 불러서 부하를 막아주는게 효율적인 코드

console.log(`or : ${value1 || value2 || check()}`);

// && (and)

console.log(`and : ${value1 && value2 && check()}`);

// nullableObject && nullableObject.something

// nullableObject가 null 이면 false므로 뒷부분이 실행이 안되므로 다음의 코드로 사용가능

/*

if(nullableObject != null) {

nullableObject.somthing;

}

*/

function check() {

for (let i = 0; i < 10; i++) {

//wasting time

console.log('ㅡㅡ;;');

}

return true;

}

// !(not)

// 값을 반대로 바꿔준다.

console.log(!value1);

7. 비교연산(equality)

const stringFive = '5';

const numberFive = 5;

// == 비교연산 - 타입변경 비교(loose equality, with type conversion)

console.log(stringFive == numberFive);

console.log(stringFive != numberFive);

// === 비교연산 및 타입비교연산(strict equality, no type conversion)

console.log(stringFive === numberFive);

console.log(stringFive !== numberFive);

// object비교연산(object equality by reference)

const test1 = {name : 'test'};

const test2 = {name : 'test'};

const test3 = test1;

console.log(test1 == test2);

console.log(test1 === test2);

console.log(test1 === test3);

//연산 확인

console.log(" br \n");

console.log(0 == false); //true

console.log(0 === false); //false

console.log('' == false); //true

console.log('' === false); //false

console.log(null == undefined); //true

console.log(null === undefined); //false

8. if조건문(Conditional operatiors: if)

// if, else if, else

const name = 'test';

if(name === 'test'){

console.log("값이 같고 타입도 같습니다.");

} else if(name === 'coder'){

console.log('값이 다르거나 타입이 다릅니다.')

} else {

console.log('성립하는 조건이 없습니다.');

}

9. 삼항연산(Ternary operator: ?)

//비교구문?값1:값2(condition) ? value1 : value2);

console.log(name==='test'?'yes':'no');

10. 스위치문(Switch statement)

//다수의 구문을 비교(use for multiple if checks)

//열거되는 값들을 비교(use for enum-like value check)

//다중유효성 검사(use for multifle type checks in TS)

const browser = 'IE';

switch(browser) {

case 'IE':

console.log('아직도 이런걸 사용하나요?');

break;

case 'Chrome':

case 'Firefox':

console.log('좋아요 좋지요');

break;

default:

console.log('머지??');

break;

}

11. 반복문(Loops)

//while반복문 : 조건이 참일 동안 실행

//(while loop, while the condition is truthy, body code is executed)

let i=3;

while(i>0){

console.log(`while : ${i}`);

i--;

}

//do~ while반복문 : do구문은 무조건 한번은 실행되고 while구문의 조건이 거짓일 때까지 반복문 실행

//do while loop, body code is excuted first, then check the condition

do{

console.log(`do while : ${i}`);

i--

} while(i>0);

//for구문(for loop, for(begin; condition; step))

for(i=0; i<3; i++) {

console.log(`for : ${i}`);

}

//2씩 줄여가는 구문

for(let i=10; i>0; i-=2){

console.log(`inline variable for : ${i}`);

}

//2중for문(nestd loops)

for(let i=0; i<5; i++){

for(let j=0; j<5; j++) {

console.log(`i : ${i}, j: ${j}`);

}

}

//break, continue

for(let i=0; i<11; i++) {

if(i%2 !== 0) {

continue;

}

console.log(` i : ${i}`);

}

for(let i=0; i<11; i++){

console.log(`i : ${i}`);

if(i==8){

break;

}

}

※ false : 0, -0, null, '', false, undefined, let obj;

※ true : -1, 'hello', 'false', [], let obj = new Array(), let obj = [], let obj = {}

let num = 1;

if(num){

console.log('true!');

} else {

console.log('false!');

}

//아래 문장을 해석하면 num의 값이 true라면 출력해라로 해석이되며

//if문을 빼고 간단히 적을 수 가 있다.

num && console.log(` num : ${num}`);

let obj = {

name : 'test',

};

obj && console.log(`obj.name : ${obj.name}`);

[ javascript ] 자바스크립트 변수 선언( var, let, const 차이)

웹지기 — 2021-02-09T12:05:41+09:00

※ 자바스크립트 변수 선언

- 변수(Variables)는 변하는 데이터(값)를 저장할 수 있는 메모리 공간.

- 변수에 데이터 값은 한개만 저장되므로, 같은 변수를 두번 사용하게 되면 나중에 입력된 변수값으로 저장된다.

- 변수의 첫글자에 사용할 수 있는 문자들은 $, _ (언더바), 영문자 만 사용가능

- 변수 선언시 'use strict'; 선언을 통해 오류를 보여주고 방지하자.

변수선언( var = function-scoped )

var 변수명;

var 변수명 = 값;

변수에 저장 할 수있는 자료형

- 자료형( Data Type ) - typeof 변수 또는 데이터;

예)

- 문자형 ( String ); - var 변수명 = "사용할 문자나 숫자";

예)

var str = "문자나숫자";

- 숫자형 ( Number ); - var 변수명 = 숫자; 또는 Number("문자형숫자");

예)

var num = 1;

var num2 = Number("1");

- 논리형 ( Boolean ); - var 변수명 = true or false; 또는 Boolean(데이터);

예)

var s = true;

var s = false;

var a = 10 >= 100; //false;

var b = Boolean(0); //false

var n = Boolean('홍길동'); //true

var d = Boolean(null); //false

- 빈값 ( Undefined ); - var 변수명; 또는 var 변수명 = null;

var 로 변수 선언시 중복선언에 대한 문제가 있으므로 이를 보안하기 위해 es2015에서 let, const가 생겼다.

var 은 변수를 hoisting(선언부를 최상위로 끌어올려버리는 것)을 해서 사용하게 해주므로 오류를 발생하지 않게 바꿔버린다.

console.log(a); //오류발생하지 않음.

a = 1; // 오류발생하지 않음.

var a=1;

var a=2;

이러한 문제가 있음.

변수선언( let, const = block-scoped )

사용방법은 var 와 같다.

let은 재할당이 가능한 변수 선언이다.

let a = 1;

let a = 2; //Uncaught SyntaxError : Identifier 'a' has already been declared ( 중복 선언에 대한 오류가 발생 )

a = 2; 는 가능

const는 재할당이 불가능한 변수 선언이다.

const b = 1;

const b = 2; //Uncaught SyntaxError : Identifier 'b' has already been declared ( 중복 선언에 대한 오류가 발생 )

b = 2; //Uncaught SyntaxError : Identifier 'b' has already been declared ( 중복 선언에 대한 오류가 발생 )

- 연산을 할 때 연산하고 싶은 값이 정확히 무엇인지 알고 해야한다.

- 즉, 음수 양수 등의 값을 예상하고 문자와의 연산과 무한대의 연산을 피해야 한다.

const infinity = 1/0; //무한대의 값이 존재한다. //출력값 : Infinity

const negativeInfinity = -1/0; //역시 음수의 무한대 // 출력값 : -Infinity

const nAn = 'not a number' / 2; //출력값 : NaN

null 과 undefined 은 엄연히 다른 값들이다.

let nothing = null; //값이 null로 정의

let x; // 값이 정의 되지 않아 undefined;

특별한 식별자가 필요한 경우 Symbol()로 변수를 사용

const symbol1 = Symbol('id');

const symbol2 = Symbol('id');

특별한 식별자로 고유한 값을 가지므로 서로 다르다 그래서 false 가 된다.

console.log(symbol1 === symbol2); //false

이를 동일하게 해주고 싶다면 .for 를 사용해서 동일하게 만들어준다.

const gSymbol1 = Symbol.for('id');

const gSymbol2 = Symbol.for('id');

console.log(gSymbol1 === gSymbol2);

심볼을 출력할 때는 .description 을 이용해서 확인한다.

.description이 없을경우 오류가 발생한다.

console.log(`value : ${gSymbol1.description}, type : ${typeof gSymbol1}`);

※ 번외 console.log 출력시 ` 기호를 사용하면 ${ } 를 이용하여 변수를 적어주어 출력이 가능하다.

const test = {name:'tester', age:10}; //const로 변수를 선언했기 때문에 test라는 object는 변경이 불가능하다

하지만.

test.name = 20; //이런식으로의 접근 변경이 가능하다.

[ javascript ] 자바스크립트 코드 작성시 주의 사항

웹지기 — 2021-02-09T11:41:37+09:00

javascript 는 대문자와 소문자를 구분한다.

코드가 끝났으면 ; 을 통해서 라인이 끝났다고 표시를 해준다.

가독성을 위해 코드는 한줄씩 사용하는게 좋다.

문자형 데이터를 작성할 때는 " 와 ' 를 사용해서 한다.

중복될 때는 \를 사용해서 사용한다.

문자 사잉에 "와 " 겹치지 않게 사용해줘야 한다.

document.write("동해물과 " 백수산이 " 마르고 닳도록 "); //오류구문

document.write("동해물과 \" 백수산이 \" 마르고 닳도록 "); //정상구문

document.write("동해물과 ' 백수산이 ' 마르고 닳도록 "); //정상구문

괄호를 열고 닫는 것도 잘 확인해 주어야 한다. ( ) 또는 { }