ES6 당신을 더 나은 프로그래머로 만들어 줄 수 있는 8가지 자바스크립트 트릭 자바스크립트 코드를 최적화하는 방법에는 여러가지가 있습니다. 기사에선 작업시 자주 사용하는 8가지 javascript tricks을 요약해서 알려드립니다. 이런 방식은 고전적인 최적화 방식이고 우리는 'MAP'을 사용해 음식명을 저장할 수 있습니다. 이제 만약 당신이 그룹 1에 있는 음식을 주문한다고 가정해봅시다. 어떻게 찾을 수 있을까요. 여기 데이터가 있습니다. 명백하게 filter와 m... JavaScriptES6ES6 (Javascript) ES6의 주요 특징 정리 let을 사용하면 선언한 변수는 블록안에서만 유효하게 된다. const 역시 마찬가지로 블록스코프를 따른다 .const 와 let의 차이점은 const 는 상수로 값을 할당한다는 점이다. 따라서 값을 변경시키려고 하면 에러를 발생시킨다 . 하지만 이는 정확한 표현이 아니다 const와 바인딩 된 값은 상수가 되지만 할당된 값은 변경이 가능하다. 화살표 함수 ( Arrow Function) E... JavaScriptES6ES6 이제는 모던 자바스크립트를 알아야지 - 정의, let, const 이는 모던 자바 스크립트 인지 아닌지를 구분 할 수 있는 척도가 된다. 그래서 모던 자바 스크립트는 뭔데 모던 자바 스크립트는 모든 모던 브라우저에서 지원하는 자바 스크립트 코드 라고 정의할 수 있다. 앞서 말한 정의를 토대로 '모던 자바 스크립트' 의 정의는 시대마다 달라진다. 작성일 기준으로 모던 자바 스크립트의 기준은 이렇게 정의할 수 있을 것이다. 모던 자바 스크립트는 ES6(ECMA... constJavaScriptletES6ECMA모던 자바스크립트ECMA [Javascript] Tagged Template Strings 이전에 이라는 형태로 문자열에 변수를 삽입하는 방법을 배웠었습니다. 오늘 다룰 문법은 템플릿 문자을 발전시킨 Tagged Template Strings(Literals)에 대해서 알아보도록 하겠습니다. Tagged Template Strings는 함수형태로 이용할 수 있는 템플릿 문자열입니다. 이때, 템플릿 문자열에서 변수와 문자를 구분지을 수 있다는 특징이 있습니다. 이전에 템플릿 문자열을... 템플릿 문자열자바스크립트JavaScript문자열ES6tagged template stringsES6 [javascript] for, for in, for of 결과 상위의 추가된 값에 대해서도 출력이 된다. 결과 결과 string에서도 사용가능하다. 결과... JavaScriptES6ES6 [면접대비 예상꼬리질문] var, let, const의 차이점 var, let, const의 차이점에 대해서 설명해주세요. ES6 이전 변수 선언문 var에는 치명적인 문제가 있었는데, 바로 중복 변수 선언이다. 중복 변수 선언이란? 동일한 변수명을 재 선언할 수 있게 하는 것인데, 이 문제를 해결하기 위해서 ES6에는 let과 const가 도입됐다. 중복 변수 선언이 뭐가 문제죠? 위와 같은 예에서는 큰 문제가 아니지만, 프로젝트의 규모가 커지면 개발... letES6constvarJavaScriptES6 [면접대비 예상꼬리질문] Template Literal이란? 모든 질문들은 실제 질문 받은 것이 아닌 저의 뇌피셜로 만든 질문입니다. Literal이란 선언과 동시에 값을 적용해 생성하는 방식입니다. 그렇다면 Template Literal은 무엇인가요? Template Literal은 ES6에서 적용된 문법으로 백틱과 ${}(딸러중괄호)을 통하여 간편하게 변수를 문자열 안에 삽입할 수 있는 방식입니다. Template Literal 방식 제외하고는 어... tagged Template LiteralES6template literalJavaScriptES6 [면접대비 예상꼬리질문] Default Parameters(기본 매개 변수)와 배열 및 객체 비구조화, Import & Export란? 모든 질문들은 실제 질문 받은 것이 아닌 저의 뇌피셜로 만든 질문입니다. JavaScript는 기본 매개 변수를 선언할 수 있나요? 네. ES6에서 제공한 문법으로 기본 매개 변수를 선언할 수 있습니다. 기본 매개 변수를 선언할 때 주의해야 할 점은 무엇이 있죠? 다른 언어에서는 디폴트 파라미터의 값을 오른쪽 파라미터부터 순서대로 채워야 하지만 JavaScript는 순서 상관없이 선언할 수 ... ES6Default parametersdestructingJavaScriptDefault parameters [면접대비 예상꼬리질문] Promise에 대해서 알고있나요? 비동기 처리가 뭔가요? 자바스크립트에서는 어떤 비동기 처리 방식이 있나요? async/await 어떤 경우에 비동기 처리를 해야할까요? CallBack 함수가 있는 상태인데 Promise와 async/await는 왜 생겼을까요? • Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태 • Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태 ... ES6promiseJavaScriptES6 비구조화 할당(destructing assignment) ES6의 비구조화 할당문법을 사용해, 내부값을 바로 추출하는 방법. props 값을 조회 할 때마다, props.[변수].. 이런식으로 키워드를 앞에 붙여주는 방식보다 편리하게 값조회가 가능함. 함수의 파라미터가 객체라면 그 값을 비구조화해서 사용. 구조 분해 문법 이라고도 함. 함수의 파라미터 부분에서도 사용가능. > props에서 직접 추출 > 비구조화 할당방식... ReactjsPropsES6ES6 [TIL] JS: ES6 ES6에서는 var 키워드는 사용하지 않는다. 기본적으로 const를 사용하고 재할당이 필요한 경우 let을 사용한다. let 키워드 사용 시 스코프는 최대한 좁게 만든다. 일반적인 문자열과 달리 여러 줄에 걸쳐 문자열을 작성할 수 있고, 공백이 있는 그대로 적용된다. 연산자를 사용하지 않아도 새로운 문자열을 삽입할 수 있다. ex) ${1+1}의 경우 문자'2'로 변환된다. 1. 기본 문법... PoiemawebES6jsES6 #19. arrow function, template literals, string method ES5 함수와 ES6 화살표 함수를 비교하면서 알아보겠습니다. 사용 예시 ES6에서는 function을 쓰지 않고 => arrow를 쓰며 변수를 선언하는 것을 알 수 있습니다. ES6의 장점 중 하나가 template literal입니다. back tick (` `)으로 string을 감쌀 수 있고 그 안에 변수를 넣어서 표현할 수 있습니다. const hi =`안녕하세요. 저는 ${name... ES6ES6 Variable Types Global Variable 전역변수로서 선언할 때부터 Runtime이 종료될 때까지 메모리를 차지한다. Local Variable Var Hoisting 어디에 variable을 선언했는지에 상관없이 항상 맨 위로 끌어올려준다. 코드 상으로 variable을 선언하기도 전에 데이터를 할당할 수 있는 상황이 발생한다.(메모리 관리X) hoisting 때문에 block scope가 작동하지 않... JavaScriptES6ES6 JS - let과 const 하지만 let의 경우에는 Block Scope를 가지기 때문에 그럴 필요가 없다. const는 constant variable의 약자이며 상수 변수라는 의미를 가진 말그대로 상수이기 때문에 재할당이 불가능하다. 상수 변수인 const에 참조 타입의 데이터를 할당하면 const의 내부 property는 상수가 아니다. 다시말해 내부 property는 변경이 가능하다. OBJ가 할당된 주소값은 ... TILJavaScriptES6ES6
당신을 더 나은 프로그래머로 만들어 줄 수 있는 8가지 자바스크립트 트릭 자바스크립트 코드를 최적화하는 방법에는 여러가지가 있습니다. 기사에선 작업시 자주 사용하는 8가지 javascript tricks을 요약해서 알려드립니다. 이런 방식은 고전적인 최적화 방식이고 우리는 'MAP'을 사용해 음식명을 저장할 수 있습니다. 이제 만약 당신이 그룹 1에 있는 음식을 주문한다고 가정해봅시다. 어떻게 찾을 수 있을까요. 여기 데이터가 있습니다. 명백하게 filter와 m... JavaScriptES6ES6 (Javascript) ES6의 주요 특징 정리 let을 사용하면 선언한 변수는 블록안에서만 유효하게 된다. const 역시 마찬가지로 블록스코프를 따른다 .const 와 let의 차이점은 const 는 상수로 값을 할당한다는 점이다. 따라서 값을 변경시키려고 하면 에러를 발생시킨다 . 하지만 이는 정확한 표현이 아니다 const와 바인딩 된 값은 상수가 되지만 할당된 값은 변경이 가능하다. 화살표 함수 ( Arrow Function) E... JavaScriptES6ES6 이제는 모던 자바스크립트를 알아야지 - 정의, let, const 이는 모던 자바 스크립트 인지 아닌지를 구분 할 수 있는 척도가 된다. 그래서 모던 자바 스크립트는 뭔데 모던 자바 스크립트는 모든 모던 브라우저에서 지원하는 자바 스크립트 코드 라고 정의할 수 있다. 앞서 말한 정의를 토대로 '모던 자바 스크립트' 의 정의는 시대마다 달라진다. 작성일 기준으로 모던 자바 스크립트의 기준은 이렇게 정의할 수 있을 것이다. 모던 자바 스크립트는 ES6(ECMA... constJavaScriptletES6ECMA모던 자바스크립트ECMA [Javascript] Tagged Template Strings 이전에 이라는 형태로 문자열에 변수를 삽입하는 방법을 배웠었습니다. 오늘 다룰 문법은 템플릿 문자을 발전시킨 Tagged Template Strings(Literals)에 대해서 알아보도록 하겠습니다. Tagged Template Strings는 함수형태로 이용할 수 있는 템플릿 문자열입니다. 이때, 템플릿 문자열에서 변수와 문자를 구분지을 수 있다는 특징이 있습니다. 이전에 템플릿 문자열을... 템플릿 문자열자바스크립트JavaScript문자열ES6tagged template stringsES6 [javascript] for, for in, for of 결과 상위의 추가된 값에 대해서도 출력이 된다. 결과 결과 string에서도 사용가능하다. 결과... JavaScriptES6ES6 [면접대비 예상꼬리질문] var, let, const의 차이점 var, let, const의 차이점에 대해서 설명해주세요. ES6 이전 변수 선언문 var에는 치명적인 문제가 있었는데, 바로 중복 변수 선언이다. 중복 변수 선언이란? 동일한 변수명을 재 선언할 수 있게 하는 것인데, 이 문제를 해결하기 위해서 ES6에는 let과 const가 도입됐다. 중복 변수 선언이 뭐가 문제죠? 위와 같은 예에서는 큰 문제가 아니지만, 프로젝트의 규모가 커지면 개발... letES6constvarJavaScriptES6 [면접대비 예상꼬리질문] Template Literal이란? 모든 질문들은 실제 질문 받은 것이 아닌 저의 뇌피셜로 만든 질문입니다. Literal이란 선언과 동시에 값을 적용해 생성하는 방식입니다. 그렇다면 Template Literal은 무엇인가요? Template Literal은 ES6에서 적용된 문법으로 백틱과 ${}(딸러중괄호)을 통하여 간편하게 변수를 문자열 안에 삽입할 수 있는 방식입니다. Template Literal 방식 제외하고는 어... tagged Template LiteralES6template literalJavaScriptES6 [면접대비 예상꼬리질문] Default Parameters(기본 매개 변수)와 배열 및 객체 비구조화, Import & Export란? 모든 질문들은 실제 질문 받은 것이 아닌 저의 뇌피셜로 만든 질문입니다. JavaScript는 기본 매개 변수를 선언할 수 있나요? 네. ES6에서 제공한 문법으로 기본 매개 변수를 선언할 수 있습니다. 기본 매개 변수를 선언할 때 주의해야 할 점은 무엇이 있죠? 다른 언어에서는 디폴트 파라미터의 값을 오른쪽 파라미터부터 순서대로 채워야 하지만 JavaScript는 순서 상관없이 선언할 수 ... ES6Default parametersdestructingJavaScriptDefault parameters [면접대비 예상꼬리질문] Promise에 대해서 알고있나요? 비동기 처리가 뭔가요? 자바스크립트에서는 어떤 비동기 처리 방식이 있나요? async/await 어떤 경우에 비동기 처리를 해야할까요? CallBack 함수가 있는 상태인데 Promise와 async/await는 왜 생겼을까요? • Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태 • Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태 ... ES6promiseJavaScriptES6 비구조화 할당(destructing assignment) ES6의 비구조화 할당문법을 사용해, 내부값을 바로 추출하는 방법. props 값을 조회 할 때마다, props.[변수].. 이런식으로 키워드를 앞에 붙여주는 방식보다 편리하게 값조회가 가능함. 함수의 파라미터가 객체라면 그 값을 비구조화해서 사용. 구조 분해 문법 이라고도 함. 함수의 파라미터 부분에서도 사용가능. > props에서 직접 추출 > 비구조화 할당방식... ReactjsPropsES6ES6 [TIL] JS: ES6 ES6에서는 var 키워드는 사용하지 않는다. 기본적으로 const를 사용하고 재할당이 필요한 경우 let을 사용한다. let 키워드 사용 시 스코프는 최대한 좁게 만든다. 일반적인 문자열과 달리 여러 줄에 걸쳐 문자열을 작성할 수 있고, 공백이 있는 그대로 적용된다. 연산자를 사용하지 않아도 새로운 문자열을 삽입할 수 있다. ex) ${1+1}의 경우 문자'2'로 변환된다. 1. 기본 문법... PoiemawebES6jsES6 #19. arrow function, template literals, string method ES5 함수와 ES6 화살표 함수를 비교하면서 알아보겠습니다. 사용 예시 ES6에서는 function을 쓰지 않고 => arrow를 쓰며 변수를 선언하는 것을 알 수 있습니다. ES6의 장점 중 하나가 template literal입니다. back tick (` `)으로 string을 감쌀 수 있고 그 안에 변수를 넣어서 표현할 수 있습니다. const hi =`안녕하세요. 저는 ${name... ES6ES6 Variable Types Global Variable 전역변수로서 선언할 때부터 Runtime이 종료될 때까지 메모리를 차지한다. Local Variable Var Hoisting 어디에 variable을 선언했는지에 상관없이 항상 맨 위로 끌어올려준다. 코드 상으로 variable을 선언하기도 전에 데이터를 할당할 수 있는 상황이 발생한다.(메모리 관리X) hoisting 때문에 block scope가 작동하지 않... JavaScriptES6ES6 JS - let과 const 하지만 let의 경우에는 Block Scope를 가지기 때문에 그럴 필요가 없다. const는 constant variable의 약자이며 상수 변수라는 의미를 가진 말그대로 상수이기 때문에 재할당이 불가능하다. 상수 변수인 const에 참조 타입의 데이터를 할당하면 const의 내부 property는 상수가 아니다. 다시말해 내부 property는 변경이 가능하다. OBJ가 할당된 주소값은 ... TILJavaScriptES6ES6