Javascript (130) 썸네일형 리스트형 [Javascript] Class, Class Extends class 특징 파일을 로드할 때마다가 아닌 한 번만 읽고자 할 때 보통 환경 변수 파일에서 많이 사용함 많은 요청이 와도 클래스는 단 한 번만 생성될 수 있다 클래스 생성 예시 class Robot { //생성자, 파라미터로 초기값을 받음 constructor(name) { this.name = name } speak() { console.log(`${this.name}`); } } const r = new Robot('My name is Mr.Robot'); r.speak(); class extend (클래스 확장) extend 사용하여 클래스를 확장 super() 키워드를 통해 상위 클래스의 생성자를 호출할 수 있다. class Ai extends Robot { constructor(name) { .. [Javascript] Arrow Function(화살표 함수) Arrow Funcrtion의 특징 자바에서의 람다와 유사한 문법 es6문법 중 가장 많이 쓰이는 문법으로 코드의 가독성을 높여줌 this에 대해서 다른 범위 스코프를 가지고 있어 기존의 함수에서의 this의 불편함을 근본적 해결 return 키워드 생략 가능 일반 함수 문법 function add(var1, var2) { return var1 + var2; } 화살표 함수 문법 //리턴 키워드 생략 가능 const addArrowFunction = (var1, var2) => var1 + var2 console.log(addArrowFunction(1, 2)); 기존 함수에서의 this 사용 일반함수의 경우 this로 받게 된다면 해당하는 범위가 prototype의 this가 아닌 function 내부.. [Javascript] 즉시 실행 함수 표현(IIFE) IIFE란 정의 되자마자 즉시 실행되는 자바스크립트 함수를 말한다. 선언 형식은 괄호 안에 익명함수를 작성한다. 이렇게 선언한 함수는 전역 스코프에 불필요한 변수를 추가하여 오염하는 것을 방지할 수 있고 다른 변수들이 접근하는 것을 막을 수 있다. 선언부 자바스크립트 엔진은 맨 마지막의 ()를 통해 해당 함수를 즉시 해석하여 실행한다. 예시 소스(외부에서 내부의 변수에 접근하지 못해 에러 발생) (function () { // 외부로부터 접근이 불가능한 변수 var lang = 'js'; })(); // 오류발생 ReferenceError: lang is not defined // 내부의 lang을 외부에서 접근할 수 없기 때문에 // console.log(lang); 즉시 실행 함수를 변수에 할당하면 .. [Javascript] String 문자 검사 (startsWith, includes, endsWith) startsWith, includes, endsWith는 String 문자 검사를 할 때 대표적으로 사용되는 세 가지이다. startsWith - 가장 첫 번째로 시작하는 문자를 검사 includes - 해당 문자열을 포함하는지 검사 endsWith - 마지막으로 끝나는 문자 검사 예시 소스 'use strict' let string = 'node.js 올인원 패키지'; // 가장 첫 시작 문자 검사 let isStartWith = string.startsWith('n'); // 해당 문자열을 포함하는지 let isIncludes = string.includes('올인원'); // 마지막 끝나는 문자 검사 let isEndWith = string.endsWith('지'); const checkIfCont.. [Javascript] Template String 기존의 javascript에서는 문자열을 결합할 때 + 기호 등을 사용하여 연결했다. es6부터는 template string을 통해 한 문자열 내에서 변수와 상수 기존의 데이터를 통합해서 표현할 수 있다. 기존에 let str = 'node.js'; 라는 변수를 선언하고 여기에 문자를 결합하기 위해서는 아래와 같은 방식으로 문자열을 연결했다. str += '올인원 패키지'; + '기존 방법' template String을 사용하면 아래와 같이 작성할 수 있다. 예시 소스 'use strict' const details = '자세한 내용' let str = 'node.js'; str += ` 올인원 패키지 ${details}` console.log(str) const int = 1; let str2 = .. [Javascript] some 이전 포스트에 every와 같이 보는 것이 좋습니다. every는 모든 조건을 만족해야 true를 반환하지만 some은 한 가지 이상의 요소를 만족하면 true를 반환합니다. developing-move.tistory.com/129 [Javascript] Every every는 ES6부터 지원하는 문법으로 특정 배열이 어떤 조건에 대해서 모두 만족하는 지를 체크한다. every는 다양한 용도로 활용이 가능한데 백엔드 뿐만 아니라 프론트엔드에서도 페이지 랜더링을 developing-move.tistory.com 예시 소스 'use strict' const arr = [1, 0, -1, -2]; const res = arr.some(key => key < 0); console.log(res); arr 안에 .. [Javascript] Set 자료 구조 Set 의 특징 중복되지 않고 한 개의 데이터만을 수집하고 싶을 때 사용 Set은 중복되지 않는 자료 구조이며, add를 이용하여 데이터를 입력한다. 자료구조에 데이터가 중복으로 들어와도 한 번만 입력이 된다. Has라는 메소드를 사용하여 해당 자료 안에 특정 값이 존재하는 지 확인할 수 있다. 예시 소스 'use strict' // set의 자료 구조로 test를 생성 const test = new Set(); // 중복된 데이터 입력 test.add(1); test.add(1); test.add(2); test.add(2); test.add(3); // set의 입력된 구조 확인 // test에 있는 자료들을 하나하나 검색 for(const item of test) { // 데이터가 중복되지 않고 나.. [Javascript] Object.assign, spread 먼저 Assign은 할당이라는 뜻으로 object에 할당하는 것이다. 새로운 객체를 생성하기도 하고 두 개의 객체를 합쳐 통합하기도 한다. 예시 소스 'use strict' const obj = { title : 'node.js 올인원 패키지' } const newObj = { name : '패스트 캠퍼스' } // 하나로 합치기 // Object는 글로벌 메소드이기 때문에 바로 호출 없이 사용 가능 // 새로운 객체를 통합해서 사용 const ret = Object.assign({}, obj, newObj); console.log(ret); Spread 또한 기존의 객체에 새로운 객체를 합치는 역할을 한다. Spread만의 특징은 객체 뿐만 아니라 배열에서도 활용이 가능하다. 'use strict' c.. 이전 1 ··· 9 10 11 12 13 14 15 ··· 17 다음
