본문 바로가기
반응형

JavaScript49

TIL 1030 .concat() vs .push() / setTimeout() concat() 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새로운 배열을 리턴 기존 배열은 변경되지 않는다 (immutable) push() 기존 배열에 마지막 요소를 추가하고, 배열은 새로운 길이 를 갖게되고 요소가 추가된 기존 배열의 새로운길이_를 리턴 _기존 배열에 새로운 요소를 추가하므로 기존 배열은 요소가 추가된 상태로 변경된다 setTimeout() setTimeout 메서드는 WindowTimers 객체의 메서드다. 첫번째 인자로 콜백함수를 전달하고, 두번째 인자로 지연시간을 전달해서 사용한다. 아래는 내가 과제를 진행하면서 사용하고 이해한 예시 step() { setTimeout(this.step.bind(this), this.timeBetweenSteps); //setTimeout.. 2020. 11. 1.
Object(인스턴스) 생성하는 4가지 방법 / Prototype 이란 Object(인스턴스)를 생성하는 방법 1.Functional var Car = function(){ var instance = {}; instance.position = 0; instance.move = function(){ this.position++; } return instance; }; //생성시에 인자를 전달해서 position의 초기값을 할당하는 방법. var Car = function(position){ var instance = {}; instance.position = position; instance.move = function(){ this.position++; } return instance; }; var car1 = Car(); var car2 = Car(); car1.move(.. 2020. 10. 28.
OOP (Object Oriented Programming) & Inheritance Patterns 프로그래밍 방식은 이분법적으로 나눌 수 있는게 아니다. "지향"이라는 단어를 사용한 만큼에 있어 어떤 방식에서 무엇을 좀더 중요시하며 프로그래밍을 할 뿐, 두 방식은 서로를 배제하지 않는다. 두 방식들이 공존하는 부분도 있다는 점 유의하자. 절차 지향 언어 프로그램을 하나의 절차로 묶어 기능들(함수)을 순서대로 실행함으로써 개발자가 의도한 대로 작업을 처리하는 방식. ex) C, COBOL, Fortran, Perl HTML 등 객체 지향 언어 "클래스"라고 불리는 데이터 모델들의 청사진(블루 프린트)를 사용해서 프로그래밍 하는 방식. 프로그램(프로젝트)의 모든 요소(속성, 메서드)는 객체를 이용해서 형성된다. ex) Java, C++, C#, Python, PHP, JavaScript, Ruby, Ob.. 2020. 10. 28.
IssueHandling) for..in vs for..of 배열을 for..in을 사용해서 순회하려다 계속해서 에러 핸들링에 실패해서 원인을 찾던 도중 발견했다. for..in 반복문을 사용할 때는 iterable한 객체의 모든 속성이 순회되기 때문에 단순히 배열의 요소만 순회되는 것이 아니다. ES6에 추가된 for..of 는 [ Symbol.iterator ] 속성을 갖는 컬렉션을 위한 것이다. forEach 함수는 익명함수를 사용해야 하므로 this 키워드를 사용할 때는 사용하지 않거나, 화살표 함수를 사용할 필요가 있다. 2020. 10. 26.
IssueHandling) 객체 접근시 주의점 obj[key] vs obj.key key가 변수이고 안에 obj의 어떤 키값이 들어있다고 할 때 obj[key]는 obj 의 key변수안의 값을 키로한 obj안의 밸류를 의미하고 obj.key 는 obj의 'key' 라는 키값의 밸류를 의미한다. 즉, obj.key === obj[ 'key' ] //true 키 값을 정확히 알고, 그 키값이 string 일 때만 .key를 사용할 수 있다. obj[key]는 다양하게 대괄호 안에 값을 넣을 수 있다. string 타입 변수를 넣어도 되고, number 타입 변수를 넣어도 되고, ''로 감싼 문자열을 넣어도 되고, ''로 감싸지 않은 문자열을 넣어도 된다. 만약 string 변수처럼 문자열 타입의 데이터가 들어있는 변수를 대괄호 안에 넣고 사용하게 되면, 변수 안의 문자열이 key가 되어 .. 2020. 10. 26.
npm package.json NPM NPM은 Node Package Manager로 필요한 모듈을 다운로드할 수 있는, 모듈들이 모여있는 모듈 스토어다. 앞으로 필요한 모듈은 대부분 NPM에서 다운로드해서 사용한다. node 모듈을 사용하는 프로젝트에서 npm이라는 키워드는 하나의 명령어처럼 사용된다. npm start처럼, 프로젝트를 실행시킬 때 npm 키워드를 사용하기도 한다. package.json 프로젝트에 대해 필요한 모듈이 무엇인지 알려주는 역할을 하는 것이 바로 *_package.json *_이다. package.json에는 이 프로그램을 실행시키기 위해 필요한 모듈들이 무엇인지, 프로그램을 실행시키는 방법, 프로그램을 테스트하는 방법 등이 명시되어 있다. 프로그램을 실행시키기 위해 필요한 실제 모듈은 node_modu.. 2020. 10. 25.
this call() apply() bind() this 패턴바인딩되는 객체 (브라우저)바인딩되는 객체 (node.js)Globalwindow (strict mode - undefined)module.exportsFunction 호출window (strict mode - undefined)global 화살표함수의 this const foo = () => { return this } foo() === module.exports //true 메서드 안에서 this를 호출하면 global이 바인딩되는 것이 맞지만, 화살표 함수 내에서 this를 호출하면 메서드 내부에서 호출한 것이 아닌 해당 함수가 선언된 위치를 기준으로 this 가 바인딩 되게 된다. (*좋은 설명 있으면 추가할 것.) call() call은 항상 함수를 "실행"한다. 첫 번째 인자가 항.. 2020. 10. 20.
shorthand syntax / 객체분해 / rest spread syntax 예시 const name = 'gildong' const age = 19 const human = { name, age, level: 'Junior' } console.log(human) // { name: 'gildong', age: 19, level: 'Junior' } 객체에 변수 명을 key로 변수 값을 value로 할당할 수 있다. 객체분해 cosnt student = {name: 'gildong', major: 'computerScience'} const { name } = student { name } === { name: 'gildong' } //true 객체의 특정 키값만 따로 임의의 객체에 저장할 수 있다. rest / spread syntax 이용 const student = { name:.. 2020. 10. 20.
구조 분해 할당 (Destructing Assignment) 2020. 10. 20.
반응형

티스토리툴바