Chapter 07 자바스크립트 7. 오브젝트 넌 뭐니? | 프론트엔드 개발자 입문편 (JavaScript ES6) Object란? one of the JavaScript data types. a collection of related data and/or functionallity Nearly all objects in JavaScript are instance of Object Object = { key : value }; Literals and Properties 변수는 하나당 값 하나만 담을 수 있게 되어있다. 그래서 예를 들어 변수를 사용하려고 하면 하나하나씩 일일이 다 불러와야 한다. 객체를 생성하게 되면 더 이상 하나하나씩 써주는 번거로움이 아니라 객체 하나만 불러와서 필요한 부분만 사용하면..

Chapter 06 자바스크립트 6. 클래스와 오브젝트의 차이점(class vs object), 객체지향 언어 클래스 정리 | 프론트엔드 개발자 입문편 (JavaScript ES6) 클래스란? 조금 더 연관있는 데이터들을 한군데 묶어놓는 컨테이너 같은 존재이다. 위와 같이 class에는 name & age와 같은 property(field)도 들어있고, speak()와 같은 function(method)도 들어있다. 이렇게 관련있는 변수들이나 함수들을 묶어놓은 녀석들을 Class라고 한다. 클래스 내에서도 내부적으로 보이는 변수와 밖에서 보일 수 있는 변수들을 나누어서 이런것들을 인캡슐레이션 또는 캡슐화라고도 한다. 또한 클래스를 이용해 상속과 다양성이 일어날 수 있다. 이러한 모든 것들을 가능케 하는 ..

Chapter 05 자바스크립트 5. Arrow Function은 무엇인가? 함수의 선언과 표현 | 프론트엔드 개발자 입문편(JavaScript ES6) 우리가 매일매일 사용하는 프로그램들은 여러가지 기능들을 갖고 있으며 각각 저마다의 고유 기능을 가지고 있습니다. 이렇게 각각의 고유 기능을 수행하는 함수(function)들이 있는데 자바스크립트와 같이 절차적인 언어에서는 함수가 프로그램에서 굉장히 중요한 역할을 하게 됩니다. 그래서 때로는 sub-program이라고 불리기도 한다. 어떤 언어에서든지 function은 input(parameter)들을 받아서 output(reuturn)을 반환하는 것이 목적이다. 그렇기 때문에 function은 input을 잘 받아서 output을 반환하고 함수의 이름을..

Chapter 04 자바스크립트 4. 코딩의 기본 operator, if, for loop 코드리뷰 팁 | 프론트엔드 개발자 입문편 (JavaScript ES6) String concatenation console.log('my' + 'cat'); console.log('1' + 2); console.log(`string literals: 1 + 2 = ${1 + 2}`); Numeric operators console.log(1 + 1); // add console.log(1 - 1); // substract console.log(1 / 1); // divide console.log(1 * 1); // multiply console.log(1 % 1); // remainder console.log(1 ..

Chapter 03 자바스크립트 3. 데이터타입, data types, let vs var, hoisting | 프론트엔드 개발자 입문편 (JavaScript ES5+) Variable(변수) 변경될 수 있는 값을 변수라고 한다. let(added in ES6 / read & write) let name = 'ellie'; console.log(name); name = 'hello'; console.log(name); result -> ellie hello 우리가 let이라는 키워드를 통해 name을 정의하게 되면 메모리의 한 공간을 가리킬 수 있는 포인터가 생기게 된다 따라서 메모리 어딘가에 있는 한 공간에 name값을 ellie로 저장할 수 있게 된다. 또한 name이라는 공간에 다른 값을 넣어서 저..

Chapter 02 자바스크립트 2. 콘솔에 출력, script async 와 defer의 차이점 및 앞으로 자바스크립트 공부 방향 html 파일에 js파일을 import하는 가장 효율적인 방법 먼저, head에 script를 추가하는 방법이다. 브라우저가 파일을 읽을 때 html css를 한줄한줄씩 읽으면서 DOM요소로 변환/분석하게 된다. 그런데 이렇게 html을 parsing하는 과정에서 head에 추가된 script를 만나면서 parsing하던 과정을 멈추게되고 script를 fetching(다운)받아서 executing(실행)한 후에 나머지 html을 parsing하게 된다는 것이다. 이렇게 script를 추가하게 되면 생기는 단점은 script파일이 엄청 커지게 되면 그만큼 읽는데 시간이 걸리..