Front-End/JavaScript 23

[You Don't Know JS] #06 자바스크립트의 강제변환(1) (자동 타입변환 / Type Conversion)

/* 이 글은 카일 심슨의 You Don't Know JS를 읽으며 배운 것들을 개인적으로 정리하고 기록하기 위한 글입니다. */ 자바스크립트의 강제변환이 유용한 기능인지, 언어 설계상 결함인지는 처음부터 큰 논란거리였다. 여기서는 강제변환의 좋고 나쁨을 충분히 이해하고 자신의 프로그램에 적절한지 스스로 현명하게 판단할 수 있는 역량을 갖추어 보겠다. 어떤 값을 다른 타입의 값으로 바꾸는 과정이 명시적이면 '타입 캐스팅(Type Casting)', 값이 사용되는 규칙에 따라 암시적이면 '강제변환(Coercion)'이라고 한다. 자바스크립트에서는 대부분 모든 유형의 타입변환을 강제변환으로 뭉뚱그려 일컫는 경향이 있어 '암시적 강제변환(Explicit Coercion)'과 '명시적 강제변환(Implicit ..

[You Don't Know JS] #05 자바스크립트 네이티브(내장 함수)

/* 이 글은 카일 심슨의 You Don't Know JS를 읽으며 배운 것들을 개인적으로 정리하고 기록하기 위한 글입니다. */ 다음은 가장 많이 쓰는 네이티브들이다. String() Number() Boolean() Array() Object() Function() RegExp() Date() Error() Symbol() - ES6에서 추가됨 네이티브는 사실 내장 함수다. 네이티브는 생성자처럼 사용할 수 있지만 실제로 생성되는 결과물은 예상과 다르게 자신이 감싼 원시 값의 타입이 아닌 object의 하위 타입에 가깝다. var a = new String("abc"); typeof a;// "object" 예를 들어 new String("abc")은 "abc"를 감싸는 문자열 래퍼를 생성하며 원시 값..

[You Don't Know JS] #04 자바스크립트의 값(value) vs 레퍼런스(reference)

/* 이 글은 카일 심슨의 You Don't Know JS를 읽으며 배운 것들을 개인적으로 정리하고 기록하기 위한 글입니다. */ 들어가기 전에.. 포인터(Pointer) : Null 허용, 참조 대상에 대해 주소값을 할당 레퍼런스(Reference) : Null 허용 X, 참조 대상을 그대로 할당 즉, 포인터와 레퍼런스는 어떠한 대상을 가리킨다는 점에서는 같지만 포인터는 주소값, 레퍼런스는 값 그 자체를 할당한다는 점에서 다르다. (레퍼런스는 마치 일반변수처럼 접근이 가능하다.) 자바스크립트에서의 레퍼런스는 다른 언어의 레퍼런스/포인터와는 전혀 다른 개념으로, 또 다른 변수/레퍼런스가 아닌 오직 자신의 값만을 가리킨다. 다른 언어에서 값은 사용하는 구문에 따라 값 복사 또는 레퍼런스 복사의 형태로 할당..

[You Don't Know JS] #03 자바스크립트의 숫자

/* 이 글은 카일 심슨의 You Don't Know JS를 읽으며 배운 것들을 개인적으로 정리하고 기록하기 위한 글입니다. */ 자바스크립트의 숫자 타입은 number 뿐이다. 정수, 부동 소숫점 숫자를 아우른다. 즉 자바스크립트에서 42.0은 '정수' 42와 같다. 숫자는 10진수가 디폴트이다. 아주 크거나 작은 숫자는 지수형(Exponent Form)으로 표시한다. (toExponential() 메서드로 표현할 수 있다.) var a = 5E10; a;// 50000000000 a.toExponential();// "5e+10" 문자열로 반환 (참고 : e는 10^n을 의미한다. E10은 10^10이다.) 숫자 값은 Number 객체 래퍼로 박싱할 수 있기 때문에 Number.prototype 메서..

[You Don't Know JS] #02 자바스크립트의 배열

/* 이 글은 카일 심슨의 You Don't Know JS를 읽으며 배운 것들을 개인적으로 정리하고 기록하기 위한 글입니다. */ 자바스크립트의 배열은 어떤 타입의 값이라도 담을 수 있는 그릇이다. 배열 크기는 미리 정하지 않고 선언할 수 있다. 배열을 사용할 때는 빈 슬롯이 있는 '구멍 난(sparse)' 배열을 조심해야 한다. var a = []; a[0] = 1; // 'a[1]' 슬롯을 건너뛰었다! a[2] = [3]; a[1];// undefined a.length;// 3 위와 같은 경우 실행은 되지만 문제가 생길 수 있다. a[1] 슬롯 값은 undefined가 될 것 같지만 명시적으로 a[1] = undefined 한 것과 똑같지는 않다. 또 앞전에서 배열은 객체의 하위타입이라고 했다. 따..

[You Don't Know JS] #01 자바스크립트의 타입

/* 이 글은 카일 심슨의 You Don't Know JS를 읽으며 배운 것들을 개인적으로 정리하고 기록하기 위한 글입니다. */ 자바스크립트에는 다음과 같은 7가지의 내장 타입이 있다. null undefined boolean number string object symbol (ES6부터 추가되었다.) 여기서 object를 제외한 타입들을 원시타입(Primitives)라고 한다. 값의 타입은 typeof 연산자로 알 수 있다. 그런데 놀라운 점은 typeof 반환 값은 항상 7가지 내장 타입과 1:1로 정확히 매칭되지는 않는다는 것이다. undefined, boolean, number, string, object는 자신의 명칭과 동일한 문자열을 반환한다. (symbol은 여기서 다루지 않겠다.) 자신의..

[모각코 수료 후기] 한 입 웹개발 (JS) 5월 과정

⭐ 온라인 코딩 스터디 - 코뮤니티 모각코 후기 ⭐ ✅ 별명 : koh1018 ✅ 참여한 과정 이름 : 한 입 웹개발 (JS) ✅ 기수 : 5월 과정 👉 모각코에 참여하게 된 계기 학기중에 할 만한 활동 및 프로그램을 알아보다가 어느날 인스타에서 하는 코뮤니티 홍보스토리를 봤어요! 이전에 앱을 만들면서 웹도 배워서 하나의 작은 플랫폼 서비스를 만들어보고 싶다는 생각을 했는데 웹을 배울 정말 좋은 기회가 될 것같아서 바로 지원하게 되었습니다! 👉 모각코로 인한 변화 가장 큰 변화라고 한다면 웹을 아예 모르던 제가 웹으로 초보 수준의 챗봇을 만들 수 있게 되었다는 것 같습니다! 아무래도 눈에 보이는 성장이라는게 가장 의미있는 변화가 아닐까 싶어요.. 처음에는 15일 동안 진행한다고 해서 배우기에 너무 짧은 ..

[코뮤니티] 15일차 - 한 입 웹개발(JS)

✅ 오늘의 문제 풀이 인증 📣 과제에 대한 답안 코드는 를 이용해 작성해주세요. (캡쳐만 있을 경우 코드리뷰 불가) 📣 문제를 푼 과정에서 생겼던 오류, 알게된 점이 있다면 함께 정리해주세요 😁 새로 말을 배울 수 있도록 해봤습니다!! Day15.html 냐옹~ 시키기 불 켜줘 Day15.css /*Snow Keyframes*/ @keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} } @-moz-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0p..

[코뮤니티] 14일차 - 한 입 웹개발(JS)

✅ 오늘의 문제 풀이 인증 📣 과제에 대한 답안 코드는 를 이용해 작성해주세요. (캡쳐만 있을 경우 코드리뷰 불가) 📣 문제를 푼 과정에서 생겼던 오류, 알게된 점이 있다면 함께 정리해주세요 😁 typewriter CDN을 가져와서 고양이가 못알아 듣는 말을 했을 때 위에 알림이 뜨도록 만들어봤습니다! Day14.html 냐옹~ 시키기 불 켜줘 Day14.css /*Snow Keyframes*/ @keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} } @-moz-keyframes snow { 0% {backgro..

반응형