👌 DOM을 그릴 때, 최초 HTML을 파싱한다. 이후 script를 만나면 script를 다운로드하게 된다. script다운, 실행이 완료된 후, 다시 HTML을 파싱한다. script의 위치와 속성(asnc, defer)에 따라, 다운로드 + 실행의 순서가 바뀌게 된다.
const obj = {}; // 'Object literal' syntax
sont obj2 = new Object(); // 'object constructor' syntax
print(name, age);
function print(name, age) {
console.log(person.name);
console.log(person.age);
}
const ellie = {
name : 'ellie', age : 4 };
}
print(ellie);
//자바스크립트는 동적 타입 업어임에 따라, 하단에 추가적으로 프로퍼티를 추가할 수 있음. (유지보수가 어려움)
ellie.hasJob = true;
delete ellie.hasJob; // 삭제 가능
console.log(ellie.name); // 코딩하는 순간 값을 받아오고 싶을떄, 쓰는 경우
console.log(ellie['name']); // 실시간으로 원하는 값을 받아오고 싶을때 사용
// 예);
function printValue(obj, key) {
console.log(obj[key]);
}
print(ellie, 'name');
print(ellie, 'age');
const person1 = { name : 'bob', age : 2 }
const person2 = { name : 'steve', age : 3 }
const person3 = { name : 'dave', age : 4 }
const person4 = new Person('ellie', 30);
// 오브젝트를 필요할때 일일이 만들게 될 때, 반복해서 작성해야 할때 간단하게 작성하는 방법.
// Constructor Function(생성자 함수)
function Person(name, age) {
// this = {};
this.name;
this.age;
}
// in operator 함수안에 키가 있는지 없는지 확인하는 것.
console.log('name' in ellie);
// for in [vs] for of
// for (key in obj)
for (key in ellie) {
console.log(key);
}
// for (value of iterable)
const array = [1, 2, 4, 5];
for (value of array) {
console.log(value); // 1, 2, 4, 5;
}
// Cloning
const user = {name : 'ellie', age : '20'};
const user2 = user; // name : 'ellie';
user2.namer = 'coder';
console.log(user) // name : coder;
// 오브젝트 복사 방법
// old way
const user3 = {};
for (key in user) {
user3[key] = user[key];
}
console.log(user3);
// recent way
Object.assign();
//메소드는 열거할 수 있는 하나 이상의 출처 객체로부터 대상 객체로 속성을 복사할 때 사용합니다. 대상 객체를 반환합니다.
const user4 = Object.assign({}, user);
console.log(user4);
배열(Array)
const arr1 = new Array();
const arr2 = [1, 2];
arr2[0] // 1;
arr2[1] // 2;
//Index Position
arr2.length // 2;
// Lopping over an array
// 1. for
for (let i = 0; i < arr2.length; i++) {
console.log(arr2[i]);
}
// 2. for of
for (let item of arr2) {
console.log(item);
}
// 3. forEach
arr2.forEach(function (value, idx, array) {
console.log(value);
console.log(idx);
console.log(array);
});
// 4. Addtion, deletion, copy
// push : add an item
arr2.push('test'); // [1, 2, 'test'];
// pop :remove an item
arr2.pop(); // [1,2]
👌 shift, unshift가 pop과 push보다 느림. - 길이가 길면 길수록 shift, unshift는 느림. - 중간에 데이터를 넣는 것은 index를 이용하기 때문에, 빠름.
const fruits2 = ['apple', 'banana'];
fruits2.splice(1, 1);
// combine
var a = [1,2];
var b = [3,4];
var c = a.concat(b); // [1,2,3,4]
// 5. Searching
console.log(fruits.indexOf(''); // array in item search -- index return or -1 return
console.log(fruits.includes(''); // array in item search - true or false return
console.log(fruits.lastIndexOf('');
JSON - Javascript Object Notation
HTTP : Hypertext transfer protocol
AJAX를 이용해서 데이터를 받아올 수 있음
Asynchronous Javascript and XML
XHR : XMLHttpRequest Object : 브라우저 API제공하는 오브젝트
👌 fetch() API : ie에서는 지원하지 않음.
서버와 데이터를 주고받을때에는 XML뿐만 아니라, 다른 것들도 주고 받을 수 있음.
JSON : key와 value로 이루어져 있음.
Object를 JSON으로 어떻게 변경할지에 대해서 공부
JSON을 Object로 어떻게 변환할지에 대해서 공부
//JSON
//JavaScript Object Notation
//1. Object to JSON
let json = JSON.stringingfy(true);
console.log(json) // true
const rabbit = {
name : 'tori',
color : 'white',
size : null,
birthDate : new Date(),
jump : () => {
console.log(`${name} can jump!`);
},
};
// ECMA6의 symbol은 JSON에 포함되지 않음.
json = JSON.stringfy(rabbit, (key, value) => {
console.log(`key : ${key}, value : ${value}`);
return key === 'name' ? 'ellie' : value;
});
// JSON.stringfy 세밀하게 제어할때 콜백 함수를 사용함
console.log(json)
;
//2. JSON to Object
json = JSON.stringify(rabbit);
const obj = JSON.parse(json);
obj.jump(); // uncaught typeError - 메서드를 json으로 변경후, 다시 object로 변경함에 따라 method가 사라져서 오류가 발생함.
rabbit.birthDate.getDate() // 29
obj.birthDate.getDate()
// uncaught typeError - stringfy를 하게 됨에 따라, Date객체가 반환한 string값을 저장함에 따라 getDate라는 메서드가 존재하지 않음.
// 그래서, 값을 새로 얻고 싶다면, 콜백 함수를 이용해서 값을 변경해야 함.
const obj = JSON.parse(json, (key, value) => {
console.log(`key : ${key}, value : ${value}`);
return key === 'birthDate' ? new Date(value) : value;
});