분류 전체보기99

• 

  [Javascript ES6] 기초 문법 13. synchronous, asynchronous synchronous, asynchronous 자바스크립트는 동기적으로 실행되는 언어이다. 동기적이라는 것은 쉽게 '순차적으로' 실행된다는 뜻이다. 만일 아래와 같은 코드가 있다면, console.log(1) console.log(2) console.log(3) 순서대로 1 2 3 이라는 로그가 출력된다. 그러나 자바스크립트를 실행하는 웹브라우저는 비동기적으로 작동한다. 쉽게 말해 '오래 걸리는 작업은 제쳐두고, 빨리 걸리는 것부터 실행한다' 는 뜻이다. 이 [오래 걸리는 작업] 에는 setTimeout, addEventListener, ajax 함수 등이 있는데, 웹브라우저의 비동기적 특성 때문에 읽는 시점과 실행되는 시점에 차이가 있다. 아래의 코드를 실행한다고 가정해보자. console.log(1).. JavaScript/JavaScript 기초 2022. 12. 21.

• [Javascript ES6] 기초 문법 13. Import, Export Import, Export import, export를 통해 다른 js 파일에 작성한 내용을 가져오거나 내보낼 수 있다. import 변수작명 from '경로' export default 내보낼내용 export default는 한번만 사용할 수 있지만, export는 여러번 사용할 수 있다. 따라서 여러개를 export 할 때 export를 사용한다. export만 하였을 경우에는, export와 import의 이름을 동일하게 사용해야 한다. export 한개로 여러개를 내보내고자 할 때는 중괄호를 사용해 주어야 한다. export {a,b} import {a,b} 또는, 변수 왼쪽에 export를 써도 된다. //export 옆에 있는 내용이 모두 export된다. export let name='cha.. JavaScript/JavaScript 기초 2022. 12. 21.

• 

  [Javascript ES6] 기초 문법 12. Destructuring Destructuring array Destructuring은 여러개의 변수에 한번에 값을 저장할 때 사용한다. a,b,c 세개의 변수에 각각 2,3,4라는 값을 한번에 집어넣고 싶다면, 양옆을 배열 형태로 맞추어 값을 넣어주면 된다. 값을 전달받지 못했을 때 사용할 default 값도 = 등호를 사용하여 만들어 줄 수 있다. Object 객체에도 같은 방식을 통해 값을 할당해 줄 수 있다. = 등호를 중심으로, 양 옆의 모양과 변수명을 맞추어주면 된다. name에는 'chali'가, age 에는 24가 들어가게 된다. 마찬가지로 default값을 줄 수도 있다. 변수를 오브젝트 객체에 할당할 때, 만일 key이름과 value의 이름이 똑같다면 아래와 같은 방법으로 사용할 수 있다. 하단의 두 코드는 같.. JavaScript/JavaScript 기초 2022. 12. 20.

• 

  [Javascript ES6] 기초 문법 10. get, set Get, Set get과 set 키워드를 이용하여 데이터를 꺼내 사용하고, 변경하는 함수를 만들 수 있다. get은 데이터를 꺼내서 사용하는 함수에 사용하며, 반드시 return문이 있어야 하고, 파라미터를 가질 수 없다. 그러나 set은 데이터를 변경하는 함수에 사용되며, 1개의 파라미터를 가질 수 있다. 만들어진 get과 set 함수는 오브젝트이름.get함수이름 및 오브젝트이름.set함수이름 = '넣을값' 으로 사용할 수 있다. class에도 동일하게 사용할 수 있다. JavaScript/JavaScript 기초 2022. 12. 20.

• 

  [Javascript ES6] 기초 문법 9-2. <JS의 상속> - prototype 을 class로 만들기 Class 자바와 같은 객체 지향 언어처럼, class 키워드를 사용하여 부모-자식간의 상속을 만들어 줄 수 있다. class 부모이름 { constructor() { } } 의 형식으로 사용하며, 오직 constructor() { 이곳에 작성한 내용들만 } 자식에게 상속된다. 자식은 new 키워드를 사용하여 부모를 호출해 상속받는다. 이 때 전달된 파라미터는 constructor(파라미터) 의 '파라미터'에서 전달받아 사용할 수 있다. 또한 자식의 프로토타입을 알아내기 위해 자식.__proto__ 와 같은 역할을 수행하는, Object.getPrototypeOf(자식) 을 사용할 수도 있다. extends 를 통해 기존에 만든 class를, 다른 class에 상속해 줄 수 있다. class 자식 ext.. JavaScript/JavaScript 기초 2022. 12. 20.

• 

  [Javascript ES6] 기초 문법 9-1. <JS의 상속> - prototype 을 Object.create()로 만들기 Object.create() Object.create()를 통해 프로토타입을 만들 수 있다. 변수를 선언해 준 다음, Object.create()에 파라미터로 프로토타입이 될 원형을 넣어주면 된다. 아래에서는 Object.create(mother)를 통해 프로토타입을 설정해 주었다. 이를 상속이라고 하는데, 상속받은 개체를 다른 개체에게 다시 상속해 줄 수도 있다. JavaScript/JavaScript 기초 2022. 12. 20.

• 

  [Javascript ES6] 기초 문법 <JS의 상속> 9. prototype prototype prototype은 유전자, 즉 '원형'을 뜻한다. prototype은 constructor 함수에 생성된다. 따라서 obj를 복제하기 위해 만든 constructor 함수 속 프로토타입에 변수를 만들어 값을 할당해줄 수 있다. prototype은 js가 해당 객체에 기본적으로 제공해주는 함수 등을 가지고 있다. (toLocalString, toString..등) 만일 부모의 prototype를 검사해보고 싶으면 __proto__를 사용한다. __proto__를 이용해, 프로토타입을 강제로 등록해줄 수 있다. JavaScript/JavaScript 기초 2022. 12. 20.

• 

  [Javascript ES6] 기초 문법 8. constructor constructor constructor를 사용하면 비슷한 object를 쉽게 찍어낼 수 있다. function과 this 키워드를 사용하고, new 키워드로 생성한다. 함수를 만들어 this.변수이름 = 값 을 하고 new로 변수에 할당하면, '변수이름:값' 이라는 새로운 오브젝트를 생성해준다. JavaScript/JavaScript 기초 2022. 12. 20.

• 

  [Javascript ES6] 기초 문법 7. default default 파라미터값을 전달해주지 않았을 경우 사용할 기본값을 설정해 줄 수 있다. b = a * 2 식의 다른 파라미터와의 연산도 가능하다. 또한 함수를 입력할 수도 있다. 아래 코드에서는 b값을 전달하지 않았을 경우 defaultFunction()함수가 실행되게 되고, return문을 통해 파라미터 b에 100이라는 값이 전달된다. 따라서 최종 결과는 101이 된다. function defaultFunction() { console.log('defaultFunction') return 100 } function plus(a,b=defaultFunction()){ console.log('a+b: ',a+b) } plus(1) arguments arguments는 모든 파라미터를 배열 형태로 저장하고.. JavaScript/JavaScript 기초 2022. 12. 20.

• [Javascript ES6] 기초 문법 6. Spread Operator apply, call apply는 함수를 옮겨와서 실행해준다. call 또한 같은 역할을 하는데 ,apply는 배열을 파라미터로 넣어줄 수 있다. JavaScript/JavaScript 기초 2022. 12. 20.

• 

  [Javascript ES6] 기초 문법 5. Spread Operator Spread Operator 배열이나 문자열, 오브젝트 앞에 ... 을 붙여, 배열의 괄호를 제거해 줄 수 있다. 주로 배열을 합치거나 복사할 때 사용한다. 중괄호, 대괄호, 소괄호 안에서만 사용할 수 있는 것이 큰 특징이다. 오브젝트에 사용할 경우, 만일 값의 중복이 일어나면 '나중에 정해진 값이 저장' 된다. 함수의 파라미터 인자로 배열을 넣고 싶을 때도 사용할 수 있다. JavaScript/JavaScript 기초 2022. 12. 20.

• 

  [Javascript ES6] 기초 문법 4. Template Literals, Tagged Literals Template Literals, Backtick 백틱기호 ` 를 이용한 문자 표현법을 Template Literals이라고 한다. 문자 중간에 변수의 값을 넣고싶은 경우, ${변수} 를 삽입해주면 된다. let 변수 = '이름' let 문자 = `문자 중간에 ${변수} 와 같이 변수를 넣을 수 있습니다.` Tagged Literals 1. ${ } 양 옆의 문자들을 배열화 해 준다. 2. 첫번째 파라미터는 문자들을, 두 번째 파라미터부터는 중간에 삽입된 변수를 뜻한다. 만일 변수가 여러개 사용되었을 경우 변수 파라미터를 여러개 넣어주어야 한다. 이를 이용해 문자열을 편하게 다룰 수 있다. JavaScript/JavaScript 기초 2022. 12. 20.