본문 바로가기

JS40

JS hoisting 호이스팅 함수 선언과 변수 선언은 코드를 실행할 때 해당 선언 스코프 최상단으로 끌어올려집니다. 이런 현상을 호이스팅이라고 합니다. 알고가야하는 내용 함수에는 두 가지 리터럴 형태가 존재한다. 1. 함수 선언 함수 선언은 function 키워드 뒤로 함수 의 이름을 적어서 사용합니다. function test() { return "test" } 2. 함수 표현식 함수 표현식은 function 키워드 뒤로 이름을 적지 않고 사용합니다. 이름이 없기 때문에 익명 함수라고 부르기도 합니다. var testValue = function() { return "testValue" } 변수 관련내용 선언한 변수의 값 까지 끌어올려지지는 않고 선언만 끌어올려짐 console.log(testValue); //undefi.. 2023. 3. 13.
JS 클래스 클래스 이전의 생성자를 이용 한 타입 생성과 클래스는 정확히 그 결과가 일치한다. 기존의 자바스크립트의 타입 생성 방법을 다른 언어와 비슷하도록 보기 쉽게 문법을 개선한 것이 자바스크립트 클래스이다. 익플에서 적용 안됨 ※ 내부적인 동작은 동일하지만 더 보기 좋고 편리하게 개선된 문법을 슈가 신텍스(Syntactic sugar)라고 한다 기본 모양새 생성자 부분 constructor 함수 안에서 생성하고 속성을 바로 선언 function 키워드없이 메서드 이름으로 바로 생성 class User { constructor(name) { this.name = name; } sayName() { console.log(this); console.log(this.name); } } var me = new User(.. 2023. 3. 13.
JS 프로토타입 상속 & subtype, supertype 효율적인 객체 설계 재사용성과 효율적인 관리를 위한 객체 설계가 필요하다. 알고가야 하는 내용 자바스크립트에서는 상속받는 타입을 하위 타입(subtype), 상속하는 타입을 상위 타입(supertype) 이라고 부릅니다 생성자 함수에서의 this 는 그 생성자 함수의 인스턴스를 의미한다 1. 생성자 훔치기 call 이나 apply 를 이용하여 인스턴스를 인수로 전달하고 프로퍼티를 상속받는 방법을 생성자 훔치기라고 합니다 // 기본 소시지 레시피 function Sausage(el1, el2) { this.inside1 = el1; this.inside2 = el2; } function FireSausage(el1, el2, el3) { Sausage.call(this, el1, el2); this.ins.. 2023. 3. 13.
JS 프로토타입 프로토타입 prototype 자바스크립트에서 생성자는 prototype 프로퍼티를 통해 타입의 특징을 정의합니다. (ex : 붕어빵 틀) 효율적인 생성자 정의 인스턴스를 생성할 때마다 같은 내용의 별개의 함수가 계속 만들어진다면 효율적이지 못한 과정이라 볼 수 있다. 기본적인 모양새 각 인스턴스마다 같은 내용의 별개의 메서드가 계속 만들어진다 function Food(name) { this.name = name; this.smell = function () { console.log(this.name + " 냄새가 난다"); } } 향상된 버전 공통된 메서드를 정의해 사용 // 공통된 smell 메서드를 정의해 사용 function smell() { console.log(this.name + " 냄새가 난.. 2023. 3. 13.
JS 생성자 생성자 생성자란 앞에 new 연산자가 붙은 함수를 의미하며 동일한 프로퍼티와 메소드를 가진 다수의 인스턴스를 만들 수 있습니다. new Object(), new Array() 등등 자바스크립트의 내부적으로 존재하는 내장 생성자 및 직접 새로운 타입을 만들 수도 있습니다. function MyOwn() { } var myObj = new MyOwn(); console.log(myObj instanceof MyOwn); // true console.log(myObj.constructor === MyOwn); // true new 연산자의 역활 new 연산자가 붙으면 함수의 this 는 인스턴스를 참조하게 되며, new 연산자가 자동으로 인스턴스를 반환하기 때문에 함수안에 return 연산자도 필요 없어지게 .. 2023. 3. 13.
JS closure 함수 closure 내부 함수가 살아있는 상태에서 외부 함수가 파괴 되면 외부 함수의 변수들에 대한 접근 권한은 내부 함수만 가지게 되고 이렇게 폐쇄된 공간에 대한 접근 권한을 가진 함수가 closure 입니다. var person = (function () { var age = 15; return { name: "wade", getAge: function () { console.log(age); return age; }, setAge: function (val) { age = val; console.log(age); } } })(); person.getAge(); // 15 person.setAge(20); // 20 person.age = 30; // 적용 되지 않음 person.getAge(); // 1.. 2023. 3. 13.
JS this 개념 및 활용 this가 존재하는 이유 함수를 호출하는 객체를 의미하며 다른 객체에서도 사용성을 늘릴 수 있다. 기본적인 사용 예 function menuGlobal() { console.log("오늘 저녁은 " + this.name); } var myDiner = { name: "김치찌개", menu: menuGlobal } myDiner.menu(); // "오늘 저녁은 김치찌개" var yourDiner = { name: "된장찌개", menu: menuGlobal } yourDiner.menu(); // "오늘 저녁은 된장찌개" this 제어 call() 사용 call 메서드는 this 의 값을 바꿀 수도 있고, 함수를 실행할 때 사용할 인수도 전달할 수 있습니다. function menuGlobal(item).. 2023. 3. 3.
JS 타입 이해 원시 타입 있는 그대로 저장되는 데이터를 표현합니다 원시값을 변수에 할당하면 값이 복사되어 들어갑니다. 즉, 원시값이 할당된 변수들은 모두 자기 자신만의 고유한 값을 가지게 됩니다 불리언 : true, false 숫자 : 1, 2, 3 … 문자열 : “Hello World” null undefined ※ typeof : 원시값의 종류를 알 수 있게 해주는 매서드이고 null 은 특이하게 object 명시됨 참조 타입 참조 타입은 변수에 값을 직접 저장하지 않습니다.변수에 저장되는 것은 메모리 안에서 객체의 위치를 가리키는 “포인터” 입니다. 무엇이 저장되느냐, 이것이 원시 타입과 참조 타입의 가장 큰 차이입니다. ※ 원시 타입 빼고 전부 참조 타입으로 봐도 무방 객체 : { } 배열 : [ ] 함수 : .. 2023. 3. 3.
JavaScript 내장 객체 Map Map Map 객체는 키-값 쌍과 키의 원래 삽입 순서를 기억합니다. 모든 값(객체 및 원시 값 모두)은 키 또는 값으로 사용될 수 있습니다. Map 객체는 키-값 쌍인 집합입니다. 한 Map에서의 키는 오직 단 하나만 존재 합니다. Map 객체는 키-값 쌍으로 반복이 가능하고 반복은 삽입한 순서대로 발생합니다. Map vs Object Object 는 Map과 유사합니다. 둘 다 값을 가리키는 키를 설정하고, 해당 값을 받아오며, 키를 삭제하며, 키에 무언가가 저장되었는지 여부를 알 수 있습니다. 그러나 경우에 따라서는 아래와 같이 Map이 선호되는 중요한 차이점이 존재한다 1. 보안 Object : 공격자 객체의 프로토타입을 재정의 가능 Map : 사용자가 제공하는 키와 값에 대해서 안전하게 사용할 .. 2023. 2. 17.
JS 내장객체 Array 메서드 정리 항상 안외우고 검색하는 짓을 그만 할 때가 되었다. 조금은 외우자 js 내장객체 Array 메서드 기본적인 기능 // 이거 배열임 ? Array.isArray() // 정수 값을 받아, 배열에서 해당 값에 해당하는 인덱스의 요소를 반환 // 대괄호 표기법 보다 좋은점 맨뒤 요소 반환시 편함 array.at(-1) Array.prototype.at(index) // 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환 없으면 undefined // .findLast 뒤에서부터 Array.prototype.find(fn(element, index, array)) // 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스 반환 // .findLastIndex 뒤에서부터 Array.prototype.. 2023. 2. 16.
JavaScript Set Set Set 객체는 자료형에 관계 없이 원시 값과 객체 참조 모두 유일한 값을 저장할 수 있습니다. Set 객체는 값 콜렉션으로, 삽입 순서대로 요소를 순회할 수 있습니다. 하나의 Set 내 값은 한 번만 나타날 수 있습니다. 즉, 어떤 값은 그 Set 콜렉션 내에서 유일합니다. NaN과 undefined도 Set에 저장할 수 있습니다. 원래 NaN !== NaN이지만, Set에서 NaN은 NaN과 같은 것으로 간주됩니다. 생성자 Set() Set([1, 3, '1', { a:0, b:1, c:2}]) 관련 속성 // 값들의 수량 리턴 .size 관련 메서드 // val 값을 추가한 set 객체 리턴 .add(val) // val 값을 삭제 하고 삭제성곡 여부를 boolean 으로 리턴함.. 2023. 2. 14.
유사 배열 객체와 반복 작업 가끔 반본적인 객체형태의 데이터를 반복 작업해야 한다면 골머리가 아프다 배열형태라면 쉽게 처리하기 쉽지만 객체형태라면 쉽게 처리가 힘들기에 되도록 배열형태로 값을 주고받곤 했다. 그러던 와중 유사 배열 객체와 이 객체를 반복작업을 할 수 있는 메서드를 알게되었고 유사 배열 객체 (array-like object) 라는 한정적인 객체의 형태(?) 만 가능한 작업으로 보이나 알아두면 좋을 듯 하여 정리하게 됨 쓰게될지는 모르겠음 가장 큰 특징으로 lengh 속성이 따로 가지고 있다는 것과 키값이 순서가 눈에 띈다 그것을 제외하면 객체와 다름 없어 보인다. 실제로 [[Prototype]]: Object 특별하게 다른놈은 아닌듯 하다. // 유사 배열 객체 모양 const arr_like = {0: 'I.. 2022. 8. 26.

티스토리툴바