티스토리

analogcoding

검색하기

블로그 홈

analogcoding

analogcoding.tistory.com/m

contact E-mail : wjsdbtjs131313@gmail.com Insta : gucci0419

구독자: 5

방명록 방문하기

주요 글 목록

OOP , prototype OOP OOP 란 ? OOP의 기본 컨셉은 프로그램 내에서 표현하고자 하는 실 세계(real world)의 일들을 객체를 사용해서 모델링 하고, 객체를 사용하지 않으면 불가능 혹은 무지 어려웠을 일들을 쉽게 처리하는 방법을 제공한다는 것입니다. -MDN- 생성자함수 란 ? 이 함수는 함수가 가질 것 같은 모든 특징을 가지고 있지만, 아무것도 리턴하지 않고 객체를 만들지도 않습니다. 생성자 함수는 단순히 프로퍼티와 메소드를 정의합니다. 또 이를 정의할 때 this 키워드가 사용합니다. 이것은 객체 인스턴스가 생성될 때마다, 객체의 프로퍼티가 생성자 함수 호출에서 전달된 인자 값과 같다는 것을 의미합니다. new 연산자를 붙여서 호출하면, 해당 함수는 생성자 함수로 동작합니다. 함수가 일반적인 함수 인지 객.. 공감수 0 댓글수 0 2019. 11. 19.
Null Undefined Null & undefined 두 타입은 모두 자바스크립트에서 '값이 없음' 을 의미하지만 차이가 있습니다. 요약해서 설명하자면 null 과 undefined 는 차이는 등록, 저장 여부입니다. null 은 값이지만 의미없는 특별한 값이 등록되어 있는 것이고, undefined 는 등록이 되어있지 않기 때문에 초기화도 정의되지 않은 것입니다. undefined 는 미리 선언된 전역 변수(global property)이며, null 은 선언,등록을 하는 키워드입니다. undefined 는 변수를 선언만 하더라도 할당되지만 null 은 변수를 선언한 후에 null 로 값을 할당합니다. undefined 는 기본적으로 값이 할당되지 않은 변수로 정의되지 않은 것, 존재하지 않는 것들의 값입니다. undefin.. 공감수 0 댓글수 0 2019. 11. 8.
자바스크립트 copy (객체 복사) kinds of copy ? 자바스크립트에서 복사는 깊은 복사(deep copy) 와 얕은 복사(shallow copy) 가 존재합니다. String , Boolean , Number 등 원시 타입(primitive type) 을 가지는 데이터는 복사가 일어날 때 새로운 메모리 공간을 확보해 생성하게 되어 메모리에 독립적인 값을 저장합니다. object (객체, 배열, 함수) 와 같은 참조 타입(reference type) 을 가지는 데이터는 변수에 저장하게 되면 메모리 절약을 위해 포인터만 새로 할당합니다. 즉 실제 값을 저장하는 것이 아니고 객체를 메모리 어딘가에 객체의 위치 값을 저장합니다. Copy example Deep Copy let A = 1; let B = A; // 깊은 복사가 일어나며 .. 공감수 0 댓글수 0 2019. 9. 19.
자바스크립트 this What is This ? 자바스크립트에서 this 는 execution context 의 구성요소 중 하나로 모든 함수 scope 내에서 자동으로 설정되는 특수한 식별자이며 현재 실행 문맥을 나타냅니다. ( 실행문맥 이란 호출자가 누구인지를 의미합니다. ) execution context 이란 ? Execution Context 실행 컨텍스트는 추상적인 개념 . 실행 컨텍스트는 실행 가능한 코드가 실행되기 위해 필요한 환경입니다. (실행 컨텍스트)는 scope, hoisting, this, function, closure 등의 동작 원리를 담고 있습니다. 어떤 함수가 호출되면 execution context가 만들어집니다. 변수 : 전역변수, 지역변수, 매개변수, 객체의 프로퍼티 함수 선언 변수의 유효.. 공감수 0 댓글수 0 2019. 9. 8.
자바스크립트 클로져 ( Closure ) What is Closure ? 외부함수의 맥락(context) , 변수에 접근할 수 있는 내부함수 이며 scope chain으로 표현되기도 합니다. 보통 함수를 return 하여 사용하고 return 하는 내부함수를 closure 함수라고 부릅니다. 또한 함수 선언 시 생성되는 유효 범위를 의미하기도 합니다. Closure가 가지는 세 가지 scope chain Closure 자신에 대한 접근. (Closure function 내에 정의된 변수) 외부함수의 변수에 대한 접근 전역 변수에 대한 접근 Why use Closure ? Closure 는 어떤 데이터(어휘적 환경)와 그 데이터를 조작하는 함수를 연결하는 데 있어서 유용합니다. ( 객체지향 프로그래밍의 정보 은닉과 모듈화 같은 이점 들을 얻을 수.. 공감수 0 댓글수 0 2019. 8. 31.
javascript main keyword 부족한 정의 등 간단하게 정리 요약 자바스크립트 이벤트루프 기반의 싱글스레드 언어, 하나의 호출 스택을 사용해서 어느 하나의 함수가 실행되면 이 함수가 끝날 때 까지 다른 task 를 실행할 수 없다. 비동기 (event loof) 이 때 비동기영역 eventQueue 에 담긴 비동기함수들은 스택이 모두 비워지고 대기열에 들어온 순서대로 수행된다. 비동기 처리 Promise & async await 콜백이 중첩되는 경우가 따라서 발생하였고, 이를 해결할 방안으로 등장한 것이 Promise 패턴이다. Promise 패턴을 사용하면 비동기 작업들을 순차적으로 진행하거나, 병렬로 진행하는 등의 컨트롤이 보다 수월해진다. 또한 예외처리에 대한 구조가 존재하기 때문에 오류 처리 등에 대해 보다 가시적으로 관리할 .. 공감수 0 댓글수 0 2019. 8. 14.
function default parameters 인자의 기본 값을 주는 예시 예시로 주어진 함수의 경우 인자가 하나만 주어지면 NaN 이 리턴된다. 인자가 없으면 1 이라는 조건을 주거나 이런식으로 주는 방법이 있다. 공감수 0 댓글수 0 2019. 5. 14.
Destructuring Destructuring은 구조화된 배열 또는 객체를 비구조화하여 개별적인 변수에 할당하는 것이다. 배열 또는 객체 리터럴에서 필요한 값만을 추출하여 변수에 할당하거나 반환할 때 유용하다. 배열의 각 요소를 배열로부터 추출하여 변수 리스트에 할당한다. 이때 추출/할당 기준은 배열의 인덱스. 활용예시 공감수 0 댓글수 0 2019. 5. 14.
arrow function 의 this context 일반적인 함수의 경우 this 가 참조하는 값을 binding 해줘야한다. arrow function 을 사용하지 않을 때 this === window 가 true 이다. this.pruntData() 는 이미 myObj 를 바라보고 있어서 window가 아니기 때문에 bind로 this를 묶어줘야 한다. 그렇지만 arrow function을 사용할 경우 binding을 따로 해주지 않아도 바로 연결된다. 그렇지만 this 가 window 를 바라보는 것은 아니다. bind 를 생략한 상태에서도 context 를 유지하기 때문에 'where is this' 가 출력된다. 공감수 0 댓글수 0 2019. 5. 14.
arrow function 예시 let arr = [1,2,3,4].map(function(v){ return v * 2; }); ES5 let arr2 = [1,2,3,4].map( (v)=>{ return v * 2; }) ES6 let arr2 = [1,2,3,4].map( (v) =>( v * 2)) 축약 기존 function 보다 짧게 , 가독성 있게 사용할 수 있다. ES6 이전 setTimeOut(function(){ console.log('hello') },1000) ES6 arrow function setTimeOut( ()=>{ console.log('arrow'); },1000) 공감수 0 댓글수 0 2019. 5. 14.
Object property 객체의 키와 값이 같을 경우 ES5에서 프로퍼티 키를 동적으로 생성하려면 객체 외부에서 obj[key] 를 사용해야 했지만 ES6에서는 객체 내부에서도 프로퍼티 키를 동적으로 생성할 수 있다. 공감수 0 댓글수 0 2019. 5. 13.
spread operator / rest parameter 펼침 연산자의 예시 배열의 요소로 카피한 요소를 그대로 펼쳐서 그 자리에 넣을 수도 있다. spread operator 사용 이점의 예시 배열의 각 요소들을 하나씩 함수의 인자로 써야하는 예시일 때 apply 를 사용해서 하나 씩 받았다면 spread operator 를 사용해서 배열을 복사하지 않고 바로 펼쳐서 인자로 사용할 수 있다. rest 파라미터 rest 파라미터(Rest Parameter)는 Spread 연산자(...)를 사용하여 파라미터를 정의한 것을 의미한다. rest 파라미터를 사용하면 요소를 함수 내부에서 배열로 전달받을 수 있다. rest 파라미터는 마지막에만 쓸 수 있다. 공감수 0 댓글수 0 2019. 5. 13.
Arrow function 화살표 함수(Arrow function)는 function 키워드 대신 => 를 사용하여 보다 간략한 방법으로 함수를 선언할 수 있다. 하지만 모든 경우 화살표 함수를 사용할 수 있는 것은 아니다. 화살표 함수의 기본 문법은 아래와 같다. 함수 선언식 예시 function fnName() { } 함수 표현식 예시 var fnName = function() { } 화살표 함수는 익명 함수로만 사용할 수 있다. 따라서 화살표 함수를 호출하기 위해서는 함수 표현식을 사용한다. 함수가 매개변수를 받는 경우에 따른 화살표 함수식 () => { ... } // 매개변수가 없을 때. x => { ... } // 매개변수가 한 개일 때는 소괄호 생략 가능. (x, y) => { ... } // 매개변수가 여러 개일 때.. 공감수 0 댓글수 0 2019. 5. 11.
Template literals ES6 에서 새로 도입된 문자열 표기법으로 백틱(`)을 사용한다. (여담으로 맥북에서 한/영 자판을 쓰고 있는데 백틱이 키보드에 없어서 한 참 찾았다. 분명 사용한 기억이 있는데.. 해답은 한글자판모드일 때 ₩가 영어자판모드일 때 `이다.) 일반적인 문자열에서 줄바꿈은 허용되지 않으며 공백을 위해선 \ 를 사용했지만 ES6 템플릿 리터럴은 일반적인 문자열과 달리 여러줄에 걸쳐 문자열을 작성할 수 있다. 공백이 그대로 적용된다. 또한 문자열 내에서 따옴표를 사용할 때 역시 \ 를 사용해야했지만 `를 사용하면 그럴 필요가 없다. 또한 템플릿 리터럴은 문자열과 변수 간의 + 연산자를 사용하지 않고 다른 간단한 방법으로 새로운 문자열을 삽입할 수 있다. 이를 문자열 인터폴레이션(string interpolati.. 공감수 0 댓글수 0 2019. 5. 11.
recursion 예제연습 5 json 형태의 TREE_DATA 에서 객체와 배열로 구성된 안에서, 인자로 넘기는 특정 id값을 가지고 있는 객체를 찾아 리턴. 이 때 객체는 children이라는 키 값에 자식 노드를 가질 수 있으며, recursion을 통해서 부모 뿐만이 아닌, 자식 노드 중에서도 id값을 가진 객체가 있는지를 찾아서 리턴. json 구조의 TREE_DATA var TREE_DATA = { "items": [ { "id": "1", "name": "johnny" }, { "id": "2", "name": "ingi", "children": [ { "id": "3", "name": "johnson" }, { "id": "4", "name": "katy" }, { "id": "5", "name": "steve", "c.. 공감수 0 댓글수 0 2019. 5. 10.
ES6 : let , const ES6 이전 변수 선언은 var 키워드 뿐이었지만 var 키워드에는 몇 가지 문제점이 있었다. var 의 문제점. 1. 함수 레벨 스코프를 가지므로 전역 함수 외부에서 생성 될 경우 모두 전역 변수여서 전역변수가 너무 많아진다. 2. 생략이 허용되므로 암묵적 전역변수가 생길 수 있다. 3. 변수의 중복 선언이 허용된다. 이러한 문제들과 더 편리한? 코딩을 위해 새로 도입 된 let 과 const . let 1. 재할당이 자유롭다. 2. var 와 다르게 블록 레벨 스코프를 가진다. 모든 코드 블록 {} 안에서 선언된 변수는 코드 블록 내에서만 유효하고 블록 외부에서 참조할 수 없다. 즉 내부 선언 지역 변수이다. let foo = 123; // 전역 변수 { let foo = 456; // 지역 변수 l.. 공감수 0 댓글수 0 2019. 5. 10.
recursion 예제연습4 var getElementsByClassName = function(className){ // 먼저 인자로 받는 className과 동일한 이름에 class이름을 가진 것을 찾아서 // 그 class이름과 동일한 class를 가진 것들을 빈 배열에 담아보자. var result = []; // 빈배열 생성 function check(elements){ // elements는 class이름을 확인할 장소 ex) div , span 등등 if ( elements.classList){ // 그 장소에 class를 가진 게 존재한다면 if (elements.classList.contains(className)){ // 그 클래스에 인자로 받는 className이 있으면 result.push(elements); .. 공감수 0 댓글수 0 2019. 5. 7.
algorithm 연습10 문제. input 으로 숫자와 문장이 섞인 문자열이 들어오면 섞인 숫자의 합을 글자수로 나눈 값을 리턴. 소수일 경우 반올림/내림해서 리턴. Ex) input : "Hello6 9World 2, Nic8e D7ay!" => output : ((6 + 9 + 2 + 8 + 7 = 32) / 17 letters) = 2 해결방안. 1. input 을 배열로 나누고 각 요소가 숫자인지 알파벳인지 판단. 2. 판단을 위한 알파벳으로 이루어진 소문자 배열을 생성. 3. input 을 소문자로 통일. 4. 각 인덱스에서 숫자 타입이 있다면 변수에 모두 더 함. 5. 문자의 경우 빈 배열에 넣어주고 그 length 를 파악. input 을 소문자로 바꾼 뒤 배열로 변환 , 알파벳 문자열 배열 생성 , 문자열을 담을 .. 공감수 0 댓글수 0 2019. 5. 6.
algorithm 연습9 문제. input 으로 주어진 문자열의 각 단어들을 키로 , 단어의 사용 횟수를 값으로 가친 객체로 리턴하고 빈 문자열이 오면 빈 객체를 리턴. Ex) input : 'ask a bunch get a bunch' => output : {ask: 1, a: 2, bunch: 2, get: 1} 해결방안. 1-1. input 문자열을 분리해서 빈 객체의 key 값으로 정함. 1-2. key 의 값은 1. 1-3. 이미 key 가 존재 할 경우 값 ++ 2-1. reduce 메소드의 초기값으로 빈 객체를 줌. 2-2. 객체=acc 안에 curr이 있다면 값++ 2-3. 없다면 값을 1 로 지정. 첫 번째 솔루션. 빈 객체를 생성. 빈 문자열이 들어오면 빈 객체를 리턴하고 문자열을 공백 기준으로 나눔. unct.. 공감수 0 댓글수 0 2019. 5. 5.
algorithm 연습8 문제. sumDigits 함수는 input으로 숫자를 받고 받은 숫자의 각 자릿수의 합을 리턴하고 음수를 받는 경우 맨 앞 자릿수는 음수로 계산해서 리턴. Ex) input : 1148 => output : 14 (1+1+4+8) input : -316 => output : 4 (-3+1+6) 해결방안. 1. input 숫자를 양수, 음수에 따라 조건을 나눔. 2. 각 자릿수에 접근하기 위해 문자열로 변경. 3. 한 자릿수 양수,음수의 경우 바로 input을 리턴. 4. 양수의 경우 각 자릿수의 값을 변수 sum에 반복적으로 더해서 누적 값을 리턴. 5. 음수의 경우 맨 앞 자릿수에 -1을 곱해 변수로 설정, 그 수에 나머지 값들을 반복적으로 더해서 누적 값을 리턴. input의 각 자릿수의 접근을 위해.. 공감수 0 댓글수 0 2019. 5. 4.
recursion 예제연습3 재귀적으로 해결해보기. 함수를 인자로 받고 클로져 함수의 인자로 숫자n을 받아서 함수를 n번 만큼 실행하는 함수 리턴. 1. 함수를 인자로 받는 부모함수를 생성하고 함수가 실행되면 인자로 받은 함수를 실행. 2. 내부함수를 두고 인자로 n을 받고 n번만큼 재귀로 다시 부모함수를 실행. function recursion(fn) { // 함수를 인자로 받는 부모함수 생성 fn(); // 인자로 받는 함수 실행 return function inner(n){ // 숫자n을 내부함수를 리턴 num-- // n번만큼 실행을 위한 조건을 부여 if(n > 0){ return recur(fn)(n) // 내부함수가 다시 부모함수를 호출, n의 값은 --되어 0이되면 종료 } } } 결과확인 공감수 0 댓글수 0 2019. 5. 4.
recursion 예제연습2 재귀적으로 해결해보기. 반복할 문자열 string과 그 문자열을 몇 번 반복하는지를 나타내는 숫자 n을 매개변수로 받는 함수 repeatString을 재귀적으로 작성. Ex) input : ('dog' , 3 ) => output : 'dogdogdog' input : ('dog' , 0 ) => output : '' 해결방안. 1. input 으로 받는 n 이 0 일 경우 빈문자열을 리턴. 2. n > 0 일 경우 string + n-1번만큼 재귀함수 실행. 공감수 0 댓글수 0 2019. 5. 2.
recursion 예제 연습 재귀적으로 해결해보기. sumDigits 함수는 input으로 숫자를 받고 받은 숫자의 각 자릿수의 합을 리턴한다. 음수를 받는 경우 맨 앞 자릿수는 음수로 계산한다. Ex) input : 1148 => output : 14 (1+1+4+8) input : -316 => output : 4 (-3+1+6) 해결방안. 1. input 숫자를 양수, 음수에 따라 조건을 나눔. 2. 각 자릿수에 접근하기 위해 문자열로 변경. 3. 한 자릿수 양수,음수의 경우 바로 input을 리턴. 4. 양수의 경우 각 자릿수의 값을 reduce를 사용해 누적 값을 리턴. 5. 음수의 경우 - 제거 후 다른 요소에서 첫요소를 뺀 값을 다시 재귀적으로 실행. ㄴ 또 음수가 나올 경우 한 자릿수가 된다면 1. 으로 , 양수가 나.. 공감수 0 댓글수 0 2019. 5. 2.
Recursion 정의 + 예제 재귀함수란 ? 함수는 함수 안에서 자기 자신을 다시 호출하는 것. 재귀함수를 사용하는 이유 1. 알고리즘 자체가 재귀적으로 표현할 때 가독성이 좋다. 2. 변수 사용을 줄여 준다. 재귀함수의 단점 메모리를 많이 차지하며 성능이 반복문에 비해 느리다. 재귀함수의 사용예제 Factorial 1부터 정수 n까지의 정수를 모두 곱하는 것. 반복문을 사용한 factorial function factorial(number) { let result = 1; for (var i = number; i >= 1 ; --i ){ result *= i; } return result; } // factorial(5) 의 경우 i는 1,2,3,4,5 이므로 1*2*3*4*5 = 120. 재귀함수를 사용한 factorial fun.. 공감수 0 댓글수 0 2019. 4. 29.
algorithm 연습7 문제. 인자로 받는 배열의 요소가 이 전 요소들의 총합보다 큰 수로만 이루어져있으면 true , 아니면 false 를 리턴. Ex) input : [1,3,6,15,32,70] => output : true input : [1,2,4,5,7,12,15] => output : false 해결방안. 1. 배열의 요소와 그 앞전 요소의 총합을 비교. 2. for문과 sum을 사용. 3. Boolean 값 리턴. sum 이라는 누적값을 받을 변수를 설정하고 정해진 요소 전까지의 누적값과 그 다음 요소의 값을 비교해서 Boolean 값으로 리턴한다. function arrSum(arr){ let sum = 0; for(let i = 0 ; i < arr.length; i++){ sum += arr[i] if(su.. 공감수 0 댓글수 0 2019. 4. 28.
algorithm 연습6 문제. 인자로 받는 숫자의 각 자릿수를 반복적으로 곱해서 한자리수로 만들 때까지의 곱한 수를 리턴. Ex) 39 => 3. ㄴ 한자리 수가 될 때까지 반복 곱셈 : 3 * 9 = 27 => 2 * 7 = 14 => 1 * 4 = 4 . 총 3번 곱셈. 해결방안. 1-1. input num을 문자열로 바꾼 뒤 나눠서 각 자릿수를 곱할 수 있게 만듬. 1-2. 한자리수가 될 때까지 곱하는 조건을 while문으로 주고 곱할 때마다 카운트해서 카운트를 리턴. 2-1. 값이 0인 카운트를 전역변수로 생성. 2-2. input 숫자 num의 자릿수가 한 자리수라면 그대로 카운트를 리턴. 2-3. 아니라면 카운트++ 2-4. input num을 문자열로 바꾼 뒤 나눠서 각 자릿수를 곱한 값을 인자로 재귀함수로 만들어.. 공감수 0 댓글수 0 2019. 4. 28.
call & apply & bind function protoype methods call,apply 는 그냥 함수가 실행되도록 "도와"주는 것이고 bind 는 "새로운" 함수를 "만들어" 준다. 함수를 호출하는 2가지 방법 call,apply는 함수를 실행시킨다(=호출해 실행한다). 사용하는 이유는 call,apply메서드의 첫번째 인수 때문이다. call,apply는 첫번째 인수 없이도 에러 없이 작동한다. 인수가 없을 경우, 자동적으로 전역객체를 가리키게 된다. function.prototype.call call은 함수를 빌려오거나 프로퍼티를 가져올 수 있다. case-1. 함수를 빌려오는 경우 case-2. 프로퍼티를 빌려오는 경우 case-3. Array.prototype.slice.call/apply.(obj/arguments).. 공감수 0 댓글수 0 2019. 4. 27.
algorithm 연습5 문제. 인자로 받는 문자열이 각기 다 다른 알파벳으로 이루어져있다면 true , 중복된 알파벳이 있으면 false를 리턴. Ex) input : "Dermatoglyphics" => output : true input : "aba" / "moOse" => output : false 해결방안. 1. input 값의 대소문자 상관없이 구분. 2. 각 글자들을 비교해서 중복된 글자가 있는지 확인. 3. Boolean 값 리턴. 첫 번째 솔루션. underscore 에 uniq함수를 활용해서 해결한 솔루션. input값을 대소문자 구분없이 만들고 배열로 나눠준다. 하나 씩 값을 넣어서 비교를 위한 빈 배열을 생성한다. var isIsogram = function(str) { str = str.toLowerCas.. 공감수 0 댓글수 0 2019. 4. 27.
algorithm 연습4 문제. 인자로 받는 문자열의 첫 글자들을 대문자로 변경한 뒤 리턴. Ex) input : "hello world" => output : "Hello World" input : "javascript is sexy" => output : "Javascript Is Sexy" 해결방안 1. 공백으로 구분된 단어를 배열로 나눔. 2. 첫 글자만 toUpperCase()를 사용해서 대문자로 변경. 3. 다시 문자열로 합친 뒤 리턴. split(' ') 메소드를 써서 공백으로 구분 된 단어 요소로 나누어준다. var letterCapitalize = function(str) { str = str.split(' '); map() 함수를 이용해서 elements의 0번째 요소를 대문자로 변경하고 남은 elements에.. 공감수 0 댓글수 0 2019. 4. 27.
Execution context 와 This Execution Context (실행 컨텍스트)는 scope, hoisting, this, function, closure 등의 동작원리를 담고 있다. 어떤 함수가 호출되면 execution context가 만들어진다. 정의 : 실행컨텍스트는 추상적인 개념 . 실행 컨텍스트는 실행 가능한 코드가 실행되기 위해 필요한 환경 변수 : 전역변수, 지역변수, 매개변수, 객체의 프로퍼티 함수 선언 변수의 유효범위(Scope) this this 자바스크립트에서 함수가 호출될 때, 함수 호출 방식에 따라 this 에 바인딩되는 객체가 달라진다. 정의 : 모든 함수 scope 내에서 자동으로 설정되는 특수한 식별자. execution context의 구성요소 중 하나로 , 함수가 실행되는 동안 이용할 수 있다. Bi.. 공감수 0 댓글수 0 2019. 4. 26.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.