코딩일상

padStart와 padEnd 함수는 ES8(ES2017)에 새롭게 추가된 기능이다. pad는 좌우에 특정한 문자열로 채우는 기능이다. padStart 'abc'.padStart(10); // " abc" 'abc'.padStart(10, "foo"); // "foofoofabc" 'abc'.padStart(6,"123465"); // "123abc" 'abc'.padStart(8, "0"); // "00000abc" 'abc'.padStart(1); // "abc" padEnd 'abc'.padEnd(10); // "abc " 'abc'.padEnd(10, "foo"); // "abcfoofoof" 'abc'.padEnd(6, "123456"); // "abc123" 'abc'.padEnd(1); //..

오늘 한 것 들과 공부한 것들 스코프, 함수 스코프, 블록 스코프, 스코프 체인 호이 스팅, TDZ 자바스크립트 객체와 불변성 자바스크립트 기본형 데이터와 참조형 데이터 알고리즘 문제 10문제 해결 오늘의 회고 오늘은 알고리즘 문제를 10문제 가량 풀고 코드를 해석하고 난 후 주어진 과제 였던 자바스크립트가 가진 특성들에 대해 공부하며 포스팅들을 하였다. 기존에 자바스크립트를 쓰면서 그냥 무작정 사용했던 기능들이 각각의 이유들로 작동이 된다는 사실이 신기하면서도 그 과정에서의 대단함도 느낄 수 있었다. 더불어 이 자바스크립트의 언어의 깊이가 어디까지일지도 궁금하며, 정말 배워도 배워도 끝이 없을 거 같다는 생각도 들었다. 하지만, 이제 시작한 만큼 두려워 하기보다는 이 환경에 익숙해지자는 마음으로 꾸준히..

데이터의 종류 및 차이점 기본(원시)형 객체가 아닌 데이터 유형을 말한다. 기본형 데이터는 값을 그대로 할당한다. 메모리상에 고정된 크기로 저장되며 원시 데이터 값 자체를 보관하므로, 불변적이다. 기본적으로 같은 데이터는 하나의 메모리를 사용한다.(재사용) Number String Boolean null undefined Symbol(ES6때 추가) 참조형 참조 타입은 변수에 할당할때 값이 아닌 데이터의 주소를 저장한다. 배열(Array) 함수(Function) 정규표현식(RegExp) Map(ES6때 추가) Set(ES6때 추가) WeakMap(ES6때 추가) WeakSet(ES6때 추가) 이러한 차이가 생기는 이유는 메모리 할당 방식 때문이다 자세한사항은 아래 첨부 레퍼런스를 확인바랍니다. 레퍼런스 ..

들어가기전 보면 좋은글 기본형 데이터와 참조형 데이터 JavaScript 객체와 불변성이란? Immutability(변경불가성)는 객체가 생성된 이후 그 상태를 변경할 수 없는 디자인 패턴을 의미한다. Immutability은 함수형 프로그래밍의 핵심 원리이다. 불변 객체를 사용하면 복제나 비교를 위한 조작을 단순화 할 수 있고 성능 개선에도 도움이 된다. 하지만 객체가 변경 가능한 데이터를 많이 가지고 있는 경우 오히려 부적절한 경우가 있다. ES6에서는 불변 데이터 패턴(immutable data pattern)을 쉽게 구현할 수 있는 새로운 기능이 추가되었다. 불변한 값 vs 변경 가능한 값 아래 Javascript의 원시 타입(primitive data type)은 변경 불가능한 값(immutab..

들어가기 앞서 보면 좋은 글 스코프란? 클로저, 변수의 은닉화? 호이스팅이란?? Hoisting은 ”끌어올리다”라는 뜻을 가지고 있습니다. JavaSciprt에서의 Hoisting은 선언되지 않은 함수, 변수(var로 선언된), import구문을 상단으로 끌어올려 사용할 수 있게 하는 방식을 의미합니다. 호이스팅 스코프 내부 어디서든 변수선언은 최상위에 선언된것처럼 행동 호이스팅 예시 1) 변수 console.log(name) // ReferenceError: variable is not defined name이라는 변수를 선언해주지 않았기 때문에 위의 코드는 당연히 참조에러를 발생시킵니다. 위의 코드는 undefined가 출력됩니다. 자바스크립트 엔진은 내부적으로 위의 코드를 다음과 같이 해석합니다. ..

스코프란?? 자바스크립트를 공부할 때 스코프(Scope)란 단어를 많이 접할 수 있는데요. 이 스코프란 무엇인지에 대해 알아보겠습니다. Scope를 우리말로 번역하면 ‘범위’라는 뜻을 가지고 있습니다. 즉, 스코프(Scope)란 ‘변수에 접근할 수 있는 범위’라고 할 수 있는데요. 자바스크립트에선 스코프는 2가지 타입이 있습니다. global(전역) local(지역) 전역 스코프(Global Scope)는 말 그대로 전역에 선언되어있어 어느 곳에서든지 해당 변수에 접근할 수 있다는 의미 지역 스코프(Local Scope)는 해당 지역에서만 접근할 수 있어 지역을 벗어난 곳에선 접근할 수 없다는 의미 자바스크립트에서 함수를 선언하면 함수를 선언할 때마다 새로운 스코프를 생성하게 됩니다. 그러므로 함수 몸체..

클로저 클로저란 함수와, 함수의 변수가 해석되는 스코프를 아울러 말한다. 클로저를 이해하기 위해서는 lexical scoping 규칙을 알고 있어야 한다. lexical scoping(어휘적 유효범위)이란, 함수가 정의된 시점의 스코프 체인을 사용하여 함수가 실행된다는 뜻이다. 여기서 함수가 호출된 시점이 아니라 정의된 시점이라는 것이 중요하다. function sandwichMaker() { var ingredient = "peanut butter"; function make(filling) { return ingredient + " and " + filling; } return make; } var f = sandwichMaker(); f("cream"); // "peanut butter and cr..

문제 let b = 1; function hi () { const a = 1; let b = 100; b++; console.log(a,b);//1번 } //console.log(a);//4번 console.log(b);//2번 hi(); console.log(b);//3번 1)콘솔에 찍힐 b 값을 예상 2)어디에서 선언된 “b”가 몇번째 라인에서 호출한 console.log에 찍혔는지 3)왜 그런지 설명해보세요. 2)주석(4번)을 풀어보고 오류가 난다면 왜 오류가 나는 지 설명하고 오류를 수정해보세요. 콘솔에 찍힐 b 의 값 1번: 1 101 2번: 1 3번: 1 1번 콘솔의 경우 위 그림과 같이 function 함수 안에 있는 변수를 기준으로 const a =1; let b =100; 에서 정의 된 ..

아스키 코드?? 컴퓨터는 모든 데이터를 0,1로 인식한다. 그렇기에 컴퓨터가 문자나 기타 다른 특정한 값들을 이해하기위해서는 규칙이 필요하다. 그때 필요한 규칙을 아스키 코드라고 한다. 아래표는 아스키코드를 표로 정리 한 것이다. charCodeAt() & String.fromCharCode() javascript에서는 해당 문자열의 유니코드를 반환하거나 유니코드로 해당 문자열을 반환할 수 있다. 그 기능을 하는 메소드 이와같다. str.charCodeAt() String.fromCharCode() 사용방법은 아래의 코드 예시를 보면 될 것 같다. let s = "abzABZ"; console.log(s.charCodeAt(0));//97 console.log(s.charCodeAt(1));//98 co..

JavaScript의 자료형 자료형 자바스크립트에서 값은 항상 문자열이나 숫자형 같은 특정한 자료형에 속해있다. 자바스크립트에는 크게 8가지의 기본 자료형이 있다. 숫자형 bigint 문자형 불린형 null undefined 객체형 심볼형 추가정보들 undefined와 null의 차이 ==,===의 차이 자바스크립트의 변수는 자료형에 관계없이 모든 데이터 일수 있다. 어떤 순간에는 문자열일수도 있고, 다른 순간에는 숫자가 될 수도 있다. // no error let message = "hello"; //문자열 message = 123456;//숫자열 위 코드와 같이 자료의 타입은 있지만 변수에 저장되는 값이 언제든 바뀔수 있는 언어를 동적타입언어라고한다. 그리고 자바스크립트가 동적타입언어라고 불리는 이유..