language/javascript
유용한 10가지 배열 함수들
// 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 = '🍎, 🥝, 🍌, 🍒'; 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 result = array.reverse(); console.log..
→2021.11.26
language/javascript
배열 개념과 APIs
Object - 서로 연관된 특징과 행동들을 묶어놓는 것 자료구조 - 비슷한 type의 object들을 묶어놓는 것(dynamically typed language) - 다른 언어의 경우에는 동일한 type의 object만을 묶을 수 있다. 1. Declaration const arr1 = new Array(); const arr2 = [1, 2]; 2. Index position const fruits = ['🍎', '🍌']; console.log(fruits); // ['🍎', '🍌'] console.log(fruits.length); // 2 console.log(fruits[0]); // 🍎 console.log(fruits[1]); // 🍌 console.log(fruits[2]); // und..
→2021.11.25
language/javascript
Object
1. Literals and properties const obj1 = {}; // 'object literal' syntax const obj2 = new Object(); // 'object constructor' syntax function print(person) { console.log(person.name); console.log(person.age); } const ellie = { name: 'ellie', age: 4 }; print(ellie); // js는 object를 정의한 후에도 property 추가 가능 ellie.hasJob = true; console.log(ellie.hasJob); // true // property 삭제 또한 가능 delete ellie.hasJob; ..
→2021.11.25
language/javascript
클래스와 오브젝트의 차이점
class - 연관있는 data들을 한곳에 묶어놓는 컨테이너 - 속성(fields), 행동(methods) - data class: 관련있는 data(field)만 정의된 클래스 - 캡슐화: 클래스 내에서 내부적으로 보여지는 변수, 외부에서 보여지는 변수를 나눔 - 상속과 다형성 1. Class 붕어빵을 만들 수 있는 틀 template(틀)만 정의, 실제 data는 들어있지 않다. 한 번만 선언한다. 2. Object 클래스를 이용해서 실제 data를 넣어서 만드는 것 클래스를 이용해서 생성된 새로운 instance 여러 번 생성될 수 있다. 3. javascript의 class ES6에 도입되었다 기존의 prototype을 기반으로 문법만 추가되었다. (syntactical sugar) 4. Clas..
→2021.11.25
language/javascript
Function
1. Function - 재사용이 가능하다. - 한 가지의 task를 수행하거나 value를 계산하기 위해 사용된다. - object의 일종이다. 1-1. Function declaration function name(param1, param2) { body... return; } 2. Parameters premitive parameters: 메모리에 value가 그대로 저장, value가 전달 object parameters: 메모리에 reference가 저장, reference가 전달 3. Default parameters (added in ES6) function showMessage(message, from = 'unknown') { // from이 undefined일 때, default 값 명..
→2021.11.25
language/javascript
operator, if, for loop
1. String concatenation console.log('my' + 'cat'); // my cat console.log('1' + 2); // 12 console.log(`string literals: 1 + 2 = ${1 + 2}`); // string literals: 1 + 2 = 3 2. Numeric operators +, -, /, *, %, ** 3. Increment and decrement operators let counter = 2; const preIncrement = ++counter; // counter = counter + 1; // preIncrement = counter; const postIncrement = counter++; // postIncrement =..
→2021.11.25
language/javascript
data types, let vs var, hoisting
1. 변수(Variable) 변경될 수 있는 값 Mutable data type let (added in ES6) 키워드를 사용하여 선언 block scope({ })내: 지역 / block scope 외: 글로벌 rw(read/write) 1-1. var 더 이상 사용하지 말 것 값을 선언하기도 전에 사용할 수 있다. block scope가 없다. 1-2. hoisting 어디에 선언했냐에 따라 상관없이, 항상 선언을 제일 위로 끌어올려주는 것 move declaration from bottom to top var로 선언한 표현식이나 function 선언문 등을 실행 단계에서 해당 scope의 맨 위로 옮기는 것 변수가 함수 내에서 정의된 경우: 선언이 함수의 최상위로 hoist 변수가 함수 바깥에서 ..
→2021.11.25
language/javascript
async와 defer
1) user가 html 파일을 다운받았을 때 브라우저는 한줄씩 해석 후 DOM 요소로 변환(parsing) 2) parsing 중 1) 브라우저가 쭉 parsing후, 페이지의 준비가 완료되었을 때 를 만나서 fetching, executing ✅ 장단점: user가 기본적인 html의 컨텐츠를 빨리 확인할 수는 있지만, 사이트가 js에 의존적이라면 user가 의미있는 컨텐츠를 보기 위한 정상적인 페이지를 확인하기 전까지는 fetching, executing 하는 시간을 모두 기다려야 한다. 1) 브라우저가 html 다운 후 parsing 하다가, async만나서 병렬로 main.js 파일 fetching하면서 parsing 2) main.js 다운로드 완료되면, parsing 멈추고 executing..
→2021.11.25

• 이전
• 1
• 2
• 3
• 다음