JS (Java Script) 80

프로토타입 ( prototype ) 과 __proto__ 차이 명확하다 // 상속 구현하기

prototype 이건 함수에만 생성되며, 상속(inheritance) 기능 구현하는 문법중 하나이다. 생성자 함수(constructor function) 을 이용해서 object를 만들면, prototype 이 자동으로 생긴다. 자바스크립트의 객체는 숨김 속성을 가진다. 이 숨김 프로퍼티(속성) 에서 다른 객체를 참조하는 경우 참조 대상을 '프로토타입(prototype)'이라 부른다. 쉽게 말하면 부모의 유전자 역할을 해주는 일종의 비밀 공간 같은거!! 참고 https://ko.javascript.info/prototype-inheritance 프로토타입 상속 ko.javascript.info 그럼 이 prototype이 어떻게 사용될 수 있을까? 부모의 속성들을 상속받을 수 있다. 혹은 반대로 이미 ..

JS (Java Script) 2023.09.07

constructor function 생성자 함수

생성자 함수(constructor function) 비슷한 오브젝트를 찍어내고 싶을때 사용한다. 재사용할 수 있는 객체 생성 코드를 구현하는 것 생성자 함수(constructor function)와 일반 함수에 기술적인 차이는 없지만, 생성자 함수는 아래 두 관례를 따른다. 함수 이름의 첫 글자는 대문자로 시작한다. 일반 함수랑 다르다는 걸 알기 위해. 반드시 'new' 연산자를 붙여 실행한다. function Student(e){ this.name = e, this.age = 15, this.sayHi = function(){ console.log('안녕하세요 ' + this.name + ' 입니다.') } } let 학생1 = new Student('kim'); let 학생2 = new Student..

JS (Java Script) 2023.09.07

데이터 타입에 따른 복사 _ Primitive / Reference data type

데이터를 복사할 때에, a = b; 이렇게만 하면 복사가 완벽히 일어날 것 같지만 모든 데이터가 그렇게 동작하지 않는다. 데이터의 종류에 따른 복사를 알아보장. Primitive data type 값이 변수에 그대로 저장된다. 그래서 복사가 완벽하게 일어난다. var 이름1 = '김'; var 이름2 = 이름1; 이름1 = '박'; console.log(이름1, 이름2) // '박', '김' 출력됨. Reference data type 자료를 변수에 직접 저장하는게 아니라, 자료가 어디에 있는지를 알려주는 레퍼런스를 변수에 저장한다. array, obj가 바로 Reference data type 이다. var 이름1 = {name : '김'} // 참조값이 저장됨. var 이름2 = 이름1 //이말은 {..

JS (Java Script) 2023.09.07

나머지 파라미터 (Rest 파라미터) / spread operator 과 구분

Rest 파라미터 파라미터 자리에 오는 모든 파라미터를 [] 에 보관해 줘서 여분의 파라미터 들을 보관하기에 용이하다. 함수 내부에서 쓰이는 arguments와 유사하지만, arguments는 파라미터 전부를 배열 같은거에 담고, 임시 파라미터는 조작 불가. Rest 파라미터 (즉, 나머지 파라미터) 는 파라미터 + 그리고 나머지 파라미터 의 느낌이다. 임시 파라미터 조작 가능 함수의 파라미터 자리에 ...파라미터명 이렇게 적으면 rest 파라미터이다. (ES6 문법). 아주 유연하다. 주의점은 파라미터의 자리 마지막에 사용해야 한다. 파라미터 자리에서 rest 파라미터가 먼저 나오고 뒤에 다른 일반 파라미터가 나오면 오류남. 하나의 함수 안에 파라미터 자리에서 2개의 rest파라미터 를 사용할 수 없다..

JS (Java Script) 2023.09.06

arguments 에 대해서.. (함수의 파라미터 모두를 한꺼번에 다루고 싶을 때)

함수의 arguments 함수의 파라미터 모두를 한꺼번에 다루고 싶을 경우에 사용. 함수의 파라미터 모두를 array 같은 변수에 담아줌. (이터러블 객체) function 함수(a, b, c) { console.log(arguments) //Arguments(3) [4, 2, 7, callee: ƒ, Symbol(Symbol.iterator): ƒ] for (let i = 0; i < arguments.length; i++) { console.log(arguments[i]); //4 //2 //7 } } 함수(4, 2, 7); 결과는 배열은 아니지만 배열처럼 []에 파라미터 들을 담아서 출력한다. 단점 __ 해당 함수의 임시 파라미터를 추가하고자 했을때, 기존에 있던 파라미터만 가지고 구현한 기능을 수..

JS (Java Script) 2023.09.06

함수의 default 파라미터 (자바스크립트 no 엄격)

함수의 default 파라미터 파라미터로 값이 주어지지 않을 경우를 가정하여 값을 미리 넣어주는것 일단. 자바스크립트는 다른 엄격한 언어들과 다르게, 만약 파라미터가 2개 들어가는 함수인데 1개만 써도 에러가 안난다. plus(1) // 1 출력됨. 그렇지만 만약 파라미터로 값이 주어지지 않을 경우를 가정하여 값을 미리 넣어주기도 하는데 그걸 우리는 함수의 default 파라미터 라고 한다. 함수의 default 파라미터 값에 연산자를 이용해 수식을 넣을 수 도 있다. function plus(a, b = a * 2) { console.log(a + b); } plus(1) // 3 출력됨. 함수의 default 파라미터 로 함수를 넣을 수도 있다. function 뀨() { return 10; } fu..

JS (Java Script) 2023.09.06

apply() 와 call() / apply() 이용해서 함수의 파라미터에 배열 넣기.

apply() 함수 어떤 함수를 또다른 object에서 사용하고 싶을때 쓴다. var person = { 인사 : function(){ console.log(this.name + '안녕') } } var person2 ={ name : '모아나' } person.인사 함수를 또다른 object에서 사용하고 싶을때 가져오고 싶은 함수.apply(적용하려 하는 또다른 object, 파라미터(생략가능) ) person.인사.apply(person2); //모아나안녕 person.인사(); //undefined안녕 .apply 이용해서 함수의 파라미터 자리에 배열 넣기 function plus(a,b,c){ console.log(a+b+c); }; let aarray = [22, 44, 66]; plus.app..

JS (Java Script) 2023.09.06

이러터블 객체와 유사배열 (iterable) (array-like)

?? 이터러블 객체??? iterable, 이터러블, 반복 가능한 배열, 문자열이 가장 광범위 하게 쓰이는 내장 이터러블 . 이터러블 이라는 개념을 사용하면 어떤 객체에든 for..of 반복문을 적용할 수 있음. 객체를 이터러블 객체로 만들려면 (for..of) 가 동작하도록 하려면, Symbol.iterator를 사용해서 이터러블 객체로 만들 수 있다. 유사배열(array - like)과 구별하자. ??? 유사배열 (array-like) ???? 인덱스 , length 이 있어 배열처럼 보임. 유사배열은 배열이 아니며, 이터러블 객체가 아니다. 또한 이터러블 객체는 유사배열이 아니다. 문자열은 유사배열 이면서 이터러블 객체인 대표적인 친구임. 아래 예시의 객체는 유사 배열 객체이긴 하지만 이터러블 객체..

JS (Java Script) 2023.09.06

spread operator (깊은복사, 함수의 파라미터로 배열 넣기)

spread operator ... 이렇게 쓰는데, 안에있는거 펼쳐서 늘어놓아 주는 친구다. spread syntax. 즉 전개문법 이라고도 함. 배열, 혹은 이터러블 객체(for...of 반복문 적용이 가능한)에 사용 가능하다. for..of 와 같은 방식으로 내부에서 iterator(반복자)를 사용해 요소를 수집한다. 문자열에 spread operator 사용하는 경우 array 처럼 인덱싱을 해서 요소 하나하나를 가져올 수 있다. 배열에 spread operator 사용하는 경우. 대괄호를 제거하고 요소들을 다 나열해준다. 배열을 합치거나 깊은 복사를 할 수 있다. 배열 합치기 let a = [1,2,3]; let b = [4,5]; let c = [...a, ...b] // (5) [1, 2, 3..

JS (Java Script) 2023.09.06

템플릿리터럴 / tagged literal / backtick(backquote)

템플릿 리터럴 문자열을 백틱 `` 으로 표현하는 거. (backtick = backquote) 같은말. ES6에서 바뀌면서 생김. 기능 : 1. 엔터키를 사용해도 문자열이 깨지지 않는다. 기능 : 2. 중간에 변수 넣기가 좋다. ${변수명} 백틱 안에서만 가능. + 기호를 사용할 필요 없음 기능 : 3. append 템플릿 하거나 할때 유용. 기능 : 4. tagged literal. 함수를 실행시킬 때 소괄호가 아니라 문자를 이용해서 함수를 실행시킬 수 있다. 함수(안녕) 이걸 함수`안녕` 이렇게. 4번 기능은 좀 생소하니 자세히 살펴보자. 4. tagged literal 단어의 순서를 변경하거나, 단어를 제거하거나, ${변수} 위치를 옮기거나, 중괄호를 기준으로 `문자`를 해체 분석 할 수 있다. v..

JS (Java Script) 2023.09.05