본문 바로가기

🌌 | WEB DEV/Vanilla JS44

JS_기본 문법 (34)_ prototype (특징 및 constructor와의 차이) JS의 prototype에 대해서 알아보자. 0. 상속(inheritance) 객체지향의 개념 중 하나인 상속은 간단히 표현하면 부모 객체의 속성을 자식 객체가 물려받는 것을 말한다. JS에서 이것을 구현하기 위한 방법이 몇가지 있는데 첫번째는 저번시간에 다루었던 constructor 문법이다. 2023.08.08 - [🌌 | WEB DEV/Vanilla JS] - JS_기본 문법 (33)_ constructor 문법 그리고 두번째 방법이 prototype이다. 1. prototype 모든 생성자 함수들은 prototype을 내장하고 있다. function Student(name, code){ this.name = name; this.code = code; } console.log(Student.prot.. 2023. 8. 11.

JS_기본 문법 (33)_ constructor 문법 JS의 Object를 생성하는 constructor 문법에 대해서 알아보자. 0. Object의 복사 문제 Object는 Reference 데이터 타입이다. 따라서 복사를 할때 아래와 같이 단순하게 진행해서는 안된다. 잘못된 객체 복사 예시 let obj1 = {name: "Kassid"}; let obj2 = obj1; 이렇게 복사를 하게 된다면 값 자체의 복사가 아닌 레퍼런스를 복사하는 것이기 때문에 안전한 복사라고 할 수 없다. 1. constructor 문법 constructor는 위의 object를 생성기계라고 할 수 있다. 이를 이용해 위의 복사문제를 해결할 수 있다. 이를 이용해서 비슷한 객체를 손쉽게 양산해낼 수 있다. 사용법 function 생산기계명(){ this.속성 = ...; .... 2023. 8. 8.

JS_기본 문법 (31)_ 함수 파라미터 (default, arguments) JS 함수의 파라미터 중 default와 argument에 대해서 알아보자. 1. default 파라미터 default 파라미터 즉, 기본값은 파라미터에 값이 전달되지 않았을 경우 초기값을 지정해주는 것이다. 단순 값 뿐만 아닌 다양한 것들을 지정해줄 수 있다. 예시 1. 단순값 function print(a = 1){ console.log(a); } print(); -------- 1 예시 2. 연산 function print(a, b = a*2){ console.log(a + b); } print(1); print(1, 1); -------- 3 2 예시 3. 함수 let square = (i)=>{return i**2}; function print(a, b = square(a)){ console.l.. 2023. 8. 7.

JS_기본 문법 (30)_ Spread Operator JS의 Sperad Operator에 대해서 알아보자. 0. Spread Operator Spread Operator는 점이 3개(...)인 연산자이다. 이 연산자를 이용해서 여러 곳에 활용을 할 수 있다. 먼저 예시를 통해서 연산자의 기능에 대해서 알아보면 예시 let a = [1, 2, 3]; let b = "Hello"; console.log(...a); console.log(...b); 이처럼 array 혹은 문자열 같은 것들을 하나씩 분해해준다. 활용 1. Array 병합 & 복사 첫번째 활용은 array를 합치거나 복사하는 것이다. 1) 병합 let a = [1, 2]; let b = [3, 4]; let c = [...a, ...b]; console.log(c); c = [...b, ...a.. 2023. 8. 6.

JS_기본 문법 (29)_ Tagged Literals ES6부터는 Tagged Literals 라는 기능을 제공한다. 이에 대해서 알아보자. 1. Tagged Literals Tagged Literals는 문자 해체분석 기능을 함수로 만드는 것을 이야기한다. 이는 template literals를 기반으로 구현할 수 있다. 예시 let val = "Korea"; function func(strings, values){ console.log(strings); console.log(values); } func`Welcome to ${val}!` 위의 예시를 보면 func라는 함수에 백틱( ` )으로 감싸진 문자열을 붙인 것을 볼 수 있다. 이것이 바로 tagged literals 함수를 호출하는 방법이다. tagged literals 함수를 살펴보면 2개의 파.. 2023. 8. 5.

JS_문법 (개인)_ 변수 총정리 JS에서 변수를 만들 때 3가지 방법이 존재한다. 이들은 선언, 할당, 범위의 측면에서 서로 다른 특징을 가진다! var let const 선언 할당 범위 var 재선언 O 재할당 O 함수 scope let 재선언 X 재할당 O 블록 scope const 재선언 X 재할당 X (객체 내부는 상관없음 ) 블록 scope - 만약 변경 불가능한 객체를 만들고 싶다면? 객체는 어떠한 방법으로 선언하여도 내부 요소에 대한 수정은 가능하다. 이를 방지하고 싶은 경우에는 아래의 방법을 이용한다. Object.freeze( 수정불가하게 하고싶은 객체명 ); 예시 const a = { name : "Kassid"}; Object.freeze(a); a.name = "Hello"; console.log(a); 변수와 호.. 2023. 8. 4.

JS_기본 문법 (28)_ Arrow function JS의 Arrow function에 대해서 알아보자. 1. Arrow Function 이란? 화살표 함수는 아래와 같이 사용한다. let a = ()=> { ... } a(); 기존의 function( ){ ... } 과 다르게 =>(화살표)를 이용하여 함수를 만든다. 2. Arrow Function의 장점 화살표 함수를 사용하는 이유는 무엇일까? 먼저 함수를 어떠한 경우에 만들어서 사용하는지 살펴보면 1. 코드들을 기능으로 묶고 싶을 때 / 2. 입출력 기능을 만들 때 사용한다. 1) 입출력 기능을 잘 표현하는 문법이다. arrow function은 함수의 기능 중 입출력 기능을 잘 표현해주는 장점이 있다. let func = (x, y) => { return x + y } // x, y를 넣으면 두 .. 2023. 8. 2.

JS_기본 문법 (27)_ this 키워드 JS의 this 키워드에 대해서 알아보자. (4가지) 0. this 키워드의 의미 this 키워드는 다양한 의미를 가지고 있다. 그 의미는 사용하는 위치에 따라 달라진다. (사실 아닐수도..?) 1-1. global에서 사용 & 일반(전역) 함수에서 사용 -> window 먼저 가장 상위 위치에서 this 키워드를 콘솔에서 확인해보면 아래와 같다. window라는 객체를 반환한다. +) window란? - 모든 전역변수, 함수, DOM을 관리하는 전역객체! - 예를들어 전역변수를 생성하면 window 안에 생성되는 것이다. 1-2. strict mode일때 일반 함수 안에서 사용 -> undefined 'use strict' 'use strict'라는 키워드를 최상단에 추가하면 strict 모드로 작성할.. 2023. 8. 1.

JS_기본 문법 (26)_ 접근자 프로퍼티와 private필드 JS의 객체 프로퍼티 중 접근자 프로퍼티에 대해서 알아보자! 1. 접근자 프로퍼티 접근자 프로퍼티는 스스로 값을 갖지 않고 다른 프로퍼티의 값을 읽거나(get) 저장할 때(set) 사용한다. 다른 언어에서도 찾아볼 수 있고 getter함수, setter함수라고 부르기도 한다! getter - 반드시 값을 반환해야 한다. - 특정 프로퍼티를 원하는 방식으로 가공하여 내보낼 때 사용한다. setter - 특정 프로퍼티에 값이 저장되는 방식을 조작하거나 제약사항을 적용할 때 사용한다. - 하나의 인자를 받는다. 사용방법 방법 1) 객체 리터럴 방식 예시 1) 물체의 길이 단위 (인치와 센티미터) const obj1 = { inch : 1, get cm() { return this.inch * 2.54; }, .. 2023. 4. 10.

이전 1 2 3 4 5 다음

티스토리툴바