JavaScript
[JavaScript] throw와 return의 차이
문득 다른사람의 코드를 보다가 에러처리하는 방법에 의구심이 생겼습니다. throw와 return 둘의 역할이 비슷한거 같은데 정확히 어떤 차이 때문에 구분해서 쓸까 궁금했습니다. 자료를 찾다보니 medium의 글이 있어서 참고하였습니다. const inner1 = () => { throw new Error('some error') } function main() { inner1() console.log('I am waiting') } main() 위는 throw로 에러처리를 한 경우입니다. 스레드가 멈추고 console이 실행되지 않습니다. 다음은 try catch를 추가하여 에러가 나와도 스레드를 계속 실행하도록하고 에러를 핸들링할 수 있게 했습니다. const inner1 = () => { throw..
[JavaScript] call, apply, bind
1. call 아래 코드를 실행시켜보면 this.name 에는 아무것도 나오지 않습니다. const mike = { name: "Mike" } const tom = { name: "Tom" } function showThisName() { console.log(this.name); } showThisName(); 이 때 call() 을 사용해서 this가 무엇인지 정의해줄 수 있습니다. showThisName.call(mike); showThisName에 call로 mike라는 객체를 받으면 this는 mike를 가리키게 됩니다. 따라서 this.name은 Mike가 출력되겠죠. call로 업데이트해 줄 객체를 지정해서 값을 바꿀 수도 있습니다. const mike = { name: "Mike" } co..
[JavaScript] JSON 개념 정리와 활용방법 및 유용한 사이트 공유 (10)
HTTP(Hypertext Transfer Protocol) 클라이언트는 서버에 request를 주고 서버는 클라이언트에 response를 줍니다. AJAX(Asynchronous Javascript And XML) 데이터를 주고받을 수 있는 기술, 대표적으로 XHR이라는 오브젝트가 있습니다. 최근에는 fetch() API가 나왔습니다. IE에서는 지원하지 않습니다. XML이란 html과 같은 마크업언어입니다. 서버와 데이터를 주고받을 때는 다양한 파일포맷을 전달 받을 수 있습니다. 요즘에 JSON을 많이 씁니다. fetch나 XMLHttpRequest를 사용해서 서버와 통신할 수 있습니다. XML은 파일의 사이즈가 커서 가독성이 좋지 않습니다. JSON(JavaScript Object Notation)..
[JavaScript] 자바스크립트 배열의 개념과 APIs 총정리 (8)
프로그래밍에서 비슷한 데이터들을 묶어서 보관하는 것을 자료구조 라고 합니다. 오브젝트와 자료구조의 차이는 오브젝트는 서로 연관된 특징과 행동들을 묶어 놓는 것을 말합니다. 비슷한 타입의 오브젝트들을 묶어놓는 것을 자료구조라고 합니다. 하지만 자바스크립트는 다른 타입의 오브젝트를 담을 수 있지만 역시 권장하지 않습니다. 1. Array declaration 배열은 다음처럼 정의할 수 있습니다. const arr1 = new Array(); const arr2 = [1, 2]; 2. Index position 배열은 다음과 같이 접근할 수 있습니다. const fruits = ['사과', '바나나']; console.log(fruits); // ['사과', '바나나'] console.log(fruits.le..
[JavaScript] 클래스와 오브젝트의 차이점, 객체지향 언어 클래스 정리 (6)
class 붕어빵을 만들 수 있는 틀, class로 찍어낸 것이 object입니다. es6 이전에는 class가 없었기 때문에 바로 object를 생성했습니다. 1. Class declaration 클래스를 다음과 같이 선언할 수 있습니다. class Person { // constructor constructor(name, age) { // fields this.name = name; this.age = age; } // methods speak() { console.log(`${this.name}: hello!`); } } Person이라는 클래스를 만들고 construtor 생성자를 이용해서 오브젝트를 만들 때 필요한 데이터를 전달합니다. 전달받은 데이터를 이 클래스에 존재하는 두가지 fields에..
[Javascript] ECMA Script6 export와 import 정리
Named Export // math.js export const plus = (a, b) => a + b; export const minus = (a, b) => a - b; export const divide = (a, b) => a / b; 위와 같이 각 함수를 export를 하면 import { plus } from "./math"; 이렇게 괄호로 감싸서 원하는 함수를 import 해올 수 있습니다. 여기서 주의할 점은 export한 파일의 함수이름과 import하는 폴더의 괄호안에 이름이 같아야 한다는 점입니다. 여기서 이름을 바꾸고자 한다면 다음과 같이 변경하고 사용할 수 있습니다. //main.js import { plus as add } from "./math"; add(2, 2); Def..
[JavaScript] 프로퍼티 키를 동적으로 생성하기
프로퍼티 키로 사용할 표현식을 대괄호로 묶어야 합니다. var obj = {}; var key = 'hello'; // ES5: 프로퍼티 키 동적 생성 obj[key] = 'world'; // ES6: 계산된 프로퍼티 이름 // var obj = { [key]: 'world' } console.log(obj); 프로퍼티에 접근하기 var person = { name: 'Lee' } // 마침표 표기법에 의한 프로퍼티 접근 console.log(person.name); // Lee // 대괄호 표기법에 의한 프로퍼티 접근 console.log(person['name']); // Lee 여기서 아래와 같은 실수를 하기 쉬운데 var person = { name: 'Lee' } console.log(perso..