본문 바로가기

Front-End/JavaScript

 (10)
구조분해할당(Destructuring) {...rest} 비구조화할당이라고도 불린다. 구조분해 할당 정의"구조화된 배열을 파괴해 1개 이상의 변수에 할당하는 방법" 두가지를 주로 쓰게 될 것이다.1. 받은 값의 이름 그대로 현재 컴포넌트의 변수로 저장2. [...rest],{...rest}   예를 들어 유저정보를 api로 받는다고 하자.근데 값이 뭐가 들어오는지 , 서버에서 딱히 정의가 되지 않았다면?타입명시를 제대로 못할 때 쓰는 팁이다.  1. 받은 이름 그대로 변수저장하기1. 객체const obj = {name : Alice , age : 30 ,email: 'alice@example.com'}//이게 구조분해할당const{name, age , email} = objconsole.log(name) //Aliceconsole.log(age) //30con..
class , 생성자 함수 , 프로토타입 메서드 사실 class는 두개 담은 바구니다.생성자 함수 = 변수만드는 함수(constructor) +프로토타입 메서드 = 만든 변수 가지고 할 함수(protoype method)  생성자함수 : 자바스크립트에서 객체를 만들고 초기화하는 특별한 함수다.생성자함수는 일종의 템플릿으로 , 여러개의 유사한 객체를 쉽게 만들 수 있게 해준다.즉 , "변수집합을 만드는 함수"인 것이다. 생성자 함수 사용법 1 1.대문자로 시작하는 이름 (파스칼케이스)생성자 함수의 이름은 보통 대문자로 시작한다. 2.this 키워드 사용생성자 함수 안에서 'this'라는 키워드는 개로 생성된 객체를 가르킨다. 3.new 키워드와 함께 사용생성자 함수는 'new'키워드와 함께 호출되어야 한다.'new' 키워드를 사용하면 새로운 객체가 생성..
Closer 클로저 : 실행 컨텍스트가 정상적으로 제거(종료)되지 못하는 현상 function outerFunc() { let count = 0; return function innerFunc() { count++; console.log(count); };}const counter = outerFunc();counter();counter();counter();counter();결과 :1,2,3,4  실행할 때마다 1씩 증가한다.원래 자신의 차례가 끝나면 , 콜스택에서 본인은 제거되어야 한다.근데 innerFunc 시점으로 보면, "outerFunc이 자신의 값을 참조하네?"내 값 참조 안하면 버그가 되는데? => 그럼 나 못사라지는데? => 값이 메모리에 남아야겠다.이 현상이 "closer"가 된다...
깊은 복사,얕은 복사 이 개념은 객체를 복사할 때 사용되는 개념이다. 얕은복사(Shallow Copy)객체의 최상위 레벨만 복사하고, 중첩된 객체는 복사하지 않고 참조를 공유합니다.즉,복사된 객체 내부의 중첩된 객체들은 원본 객체와 동일한 참조를 가진다. 깊은 복사(Deep Copy)객체와 그 객체에 포함된 모든 중첩된 객체들까지 재귀적으로 복사한다.즉, 복사된 객체는 원본과 다른 메모리 주소를 갖게 된다. 원본이 변할 때얕은 복사 : 값이 원본과 같이 변함깊은 복사 : 원본과 다른 주소값을 갖고 있기에 변하지 않음. let a = [1, 2, 3];//이렇게 변수를 냅다 갖다놔버리면 값을 공유함. (얕은 복사)let b = a;let c = [...a];//이렇게 스프레드 연산자로 배열을 없앴다가 다시 놓아주면,//메모리주..
함수 함수를 생성하는 방법 중에 익히 쓰는 방법이 두가지가 있다.함수 선언식 , 표현식이다. 함수 선언식은 fuction 함수이름 (){} 이런 형태를 갖는다.function add() {} 함수 표현식은 변수를 선언하고 , 값으로 함수를 넣는 것이다.const add = function () {}; 기명함수 : 함수 선언 시 함수 이름을 명시하는 것보통 함수 선언식에서 많이 사용된다.기명함수 : const add = function add(){}function add() {}  익명함수 : 함수이름을 생략하고 선언하는 것보통 함수 표현식에서 많이 사용된다.익명함수 : const add = function () {}; 매개변수(parameter) : 함수 파라미터 구멍에 들어가는 변수다.(소괄호 안에)func..
자료형 , 연산자 자료형,연산자에 대해 배웠다.기본 자료형문자열(String), 숫자(Number), 불린(Boolean), 배열(Array), 객체(Object), 함수(Function), 널(Null), 미정의(Undefined)  참조 자료형배열 객체 함수num = 10e121000000000변수에 지수표기법으로 할당하더라도 , 지수를 10진수를 변환한 10진수의 값으로 본다.     특수자료형(undefined , null)undefinedex) const tvChannel = undefined;nullex) const movieChannel = null;​  undefined는 개발자가 다루지 않고 자바스크립트 엔진이 다루는 값이다.undefined는 값을 할당하고 let numconsole.log(num)원래 ..
조건문 , 반복문 정리 조건문이란, 프로그래머가 명시한 자료형 조건이 참인지 거짓인지에 따라 잘라지는 계산이나 상황을 수행하는 프로그래밍 문법이다. if문if문은 else,eles if문으로 세분화 된다. if문if는 만약~라면으로 해석하면 이해하기 쉽다.소괄호는 논리형 데이터가 참일 경우 블록 {}안의 코드를 실행한다. if문이 한줄이면 , 중괄호를 생략할 수 있다. 표현값에 논리에 따라서 사용하고 싶을 때 쓰는 게 if문이다.function testScore() { score = 59; if (score >= 90) { return "A"; } else if (score >= 80) { return "B"; } else if (score >= 70) { return "C"; } else if (score >= 60) { r..
빌트인 생성자 Date(JS) Date는 자바스크립트에서 내장된 객체이며 , 메소드 또는 함수가 아니라 객체생성자(Constructor)다. 객체 생성자는 객체를 생성할 떄 사용되며 , 해당 객체의 인스턴스를 만들어 낸다. 이 객체를 사용하여 날짜와 시간을 다를 수 있다. date는 월만 0부터 시작함. 그래서 5로 쓰면 6월임 이건 한번 하면 끝남. 이건 정해놓은 시간마다 반복실행함.

티스토리툴바