한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
let a = "";
if (a) {
console.log('true');
} else {
console.log('false');
}
// false
const getName = (person) => {
return person.name;
}
let person = { name: 'dongwoo'};
console.log(getName(person)) // dongwoo
let person;
console.log(getName(person)) // error!
const getName = (person) => {
if (!person) {
return 'not object'
}
return person.name;
}
let person;
console.log(getName(person)) // not object
let a = -3;
a >= 0 ? console.log('양수') : console.log('음수');
let a = [];
const arrayStatus = a.length === 0 ? "empty" : "not empty";
console.log(arrayStatus); // empty
// 중첩 삼항연산자
let score = 40;
score >= 90
? console.log('A+')
: score >= 50
? console.log('B+')
: console.log('F')
const getName = (person) => {
const name = person && person.name; // false 또는 person.name
return name || 'not object'
};
let person;
console.log(getName(person)); // not object
let person = {name : 'dongwoo'}
console.log(getName(person)); // dongwoo
let arr = [1, 2, 3]
let [one, two, three] = arr
console.log(one, two, three) // 1 2 3
let [one, two, three] = [1, 2, 3]
console.log(one, two, three) // 1 2 3
let [one, two, three, four="-1"] = [1, 2, 3]
console.log(one, two, three, four) // 1 2 3 -1
// 스왑
let a = 10;
let b = 20;
[a, b] = [b, a];
console.log(a, b); // 20, 10
// 객체
let object = { one:1, two:2, three:3 };
let { one, two, three } = object;
console.log(one, two, three); // 1 2 3
let object = { one:1, two:2, three:3, name:'dongwoo'};
let { name: myName, one, two, three } = object;
console.log(one, two, three, myName); // 1 2 3 dongwoo
const cookie = {
base: 'cookie',
madeIn: 'korea'
}
const chocochipCookie = {
...cookie,
toping: 'chocochip'
}
console.log(chocochipCookie)
// {base: "cookie", madeIn: "korea", toping: "chocochip"}
const arr1 = [1, 2, 3]
const arr2 = [5, 6]
const all_arr = [...arr1, 4, ...arr2]
console.log(all_arr) // [1, 2, 3, 4, 5, 6]
function taskA () {
console.log('A complete')
}
taskA();
console.log('code end')
// A comlete
// code end
function taskA () {
setTimeout(()=>{
console.log('A complete')
}, 2000);
}
taskA();
console.log('code end')
// code end
// A complete
function isPositive(number) {
const excutor = (resolve, reject) => {
setTimeout(() => {
if (typeof number === "number") {
resolve(number >= 0 ? "양수" : "음수");
} else {
reject("not number");
}
}, 2000);
};
const asyncTask = new Promise(excutor)
return asyncTask;
}
const res = isPositive(101); // Promise 객체 생성
res.then((res) => {
console.log('success :', res)
}).catch((err)=>{
console.log('fail :', err)
}) // success : 양수
async function helloAsync() {
return 'hello Async';
}
helloAsync().then((res)=>{
console.log(res);
}) // hello Async
function delay (ms) {
return new Promise((resolve) => {
setTimeout(resolve, ms)
});
}
// await 미사용
async function helloAsync() {
return delay(3000).then(()=>{
return 'hello Async';
});
}
helloAsync().then((res)=>{
console.log(res);
})
// await 사용
async function helloasync() {
await delay(3000);
return 'hello async';
}
async function main() {
const res = await helloasync();
console.log(res);
}
async function getData() {
let rawResponse = await fetch("https://jsonplaceholder.typicode.com/posts");
let jsonResponse = await rawResponse.json();
console.log(jsonResponse);
}
getData(); // 100 object ...