허도경, limewhale

자바스크립트 ES5에서는 새로운 기능이 추가되고 기존 기능 중 일부가 변경되었습니다. 기존 기능을 변경하였기 때문에 하위 호환성 문제가 발생하게 되는데 이러한 문제를 대비해서 변경사항 대부분은 ES5의 기본 모드에선 활성화되지 않도록 적용하였습니다. 대신 use strict라는 특별한 지시자를 사용해 엄격 모드(strict mode)를 활성화했을 때만 이 변경사항이 활성화되게 해 놓았습니다. 💡 strict 모드란? ECMAScript 5에서 처음으로 소개된 strict 모드는 자바스크립트 코드에 더욱 엄격한 오류 검사를 적용해 줍니다. 엄격 모드는 전체 스크립트 또는 부분 함수에 적용 가능합니다. 함수에 적용할 경우에는 "use strict"는 스크립트 최상단이 아닌 함수 본문 맨 앞에 사용하면 됩니다..

💡 Prototype vs Class 클래스(Class)라는 것을 한 번쯤은 들어보셨을 겁니다. Java, Python, Ruby등 객체지향언어에서 빠질 수 없는 개념이죠. 그런데 중요한 점은 자바스크립트도 객체지향언어라는 것입니다. 이게 왜 중요하냐고요? 자바스크립트에는 클래스라는 개념이 없거든요. 대신 프로토타입(Prototype)이라는 것이 존재합니다. 자바스크립트가 프로토타입 기반 언어라고 불리는 이유이죠. 그렇다면 prototype이란 무엇인가? 사전 검색을 해보면 한국어로는 원형정도로 번역되는 prototype은 말 그대로 객체의 원형이라고 할 수 있습니다. 자바스크립트에서 함수는 객체입니다. 그러므로 생성자로 사용될 함수도 객체입니다. 객체는 프로퍼티를 가질 수 있는데 prototype이라는..

📖 이벤트 루프란 무엇인가요? 콜스텍(Call Stack)에서 이벤트가 순차적으로 진행되면 이어서 콜백큐(Callback Queue)에서 하나씩 동작을 Loop 시키는 것을 말합니다. 자바스크립트는 싱글 스레드 기반의 언어이고, 자바스크립트 엔진은 하나의 호출 스택만을 사용합니다. 이는 요청이 동기적으로 처리되어, 한 번에 한 가지 일만 처리할 수 있음을 의미합니다. 그러나 자바스크립트가 사용되는 환경을 생각해보면 우리는 많은 작업이 동시에 처리되고 있음을 알 수 있습니다. 예를 들면 브라우저에서 특정 이벤트를 발생시키고 동시에 여러 데이터를 호출해오는 경우가 발생하죠. 이런 환경이 가능하게 하는 것은 네트워크 요청과 같은 동작이 비동기적으로 이루어지기 때문입니다. 💡 이벤트 루프가 왜 필요할까? 자바스..

자바스크립트에서의 실행 컨텍스트는 굉장히 중요한 개념입니다. 실행컨텍스트를 이해하게 되면 Javascript의 동작 원리를 이해할 수 있게 됩니다. 자바스크립트의 동작원리를 이해하게 되면 코드가 에러를 발생하게 되더라도 좀 더 쉽게 예측이 가능해지게 됩니다. 이는 코드를 작성하거나 수정할 때 굉장한 차이점을 가지게 됩니다. 해당 내용이 조금은 어렵게 느껴질 수 있고 광범위하게 느껴질 수도 있지만 천천히 글을 따라서 읽다 보면 충분히 이해할 수 있도록 정리해보겠습니다. 📖 실행 컨텍스트란? 실행 컨텍스트란 코드가 실행되기 위해 필요한 환경 정보들을 모아 놓은 객체입니다. 실행 컨택스트의 동작은, 동일한 환경에 있는 코드들을 실행할 때 필요한 환경정보를 모아 컨텍스트를 구성하고, 이를 콜 스택에 쌓아놓은 뒤..

'자바스크립트는 유연한 언어다.' 라는 말을 들어보셨을 거라 생각합니다. 이는 자바스크립트의 언어적 특성 때문인데 지금은 많은 사람들이 자바스크립트의 단점으로 지적하는 부분 중 하나의 특성입니다. (그래서 최근에는 타입스크립트가 주목을 받고 있습니다.) 그럼 왜 자바스크립트가 유연한 언어이냐? 그것은 자바스크립트가 자체적으로 일반적인 언어에선는 에러가 발생되어야 하는 부분에서 에러를 발생시키지 않고 데이터 타입을 변환시키기 때문입니다. 그렇기에 우리는 자바스크립트가 어떤 방식으로 데이터의 형 변환을 하는지 이해하면 많은 도움이 됩니다. 자바스크립트의 형 변환은 크게 두가지 입니다. 자바스크립트 엔진이 필요에 따라 ‘암시적변환’ 을 혹은 개발자의 의도에 따라 ‘명시적변환’ 을 실행하는데 형변환을 시행하는데..

1. Object.assign() 열거할 수 있는 하나 이상의 출처 객체로부터 대상 객체로 속성을 복사할 때 사용합니다. 대상 객체를 반환합니다. 방법 : Object.assign(target,... sources) target 합쳐지는 추가 객체의 속성을 받을 객체 또는 유일한 인자일 경우 jQuery 네임스페이스로 확장될 객체 ...sources 타겟 오브젝트에 병합 리턴값으로 타겟 오브젝트를 반환 const obj = {a:1}; const copy = Object.assign( {}, obj ); console.log(copy); // {a: 1} const obj1 = {a:1}; const obj2 = {b:2}; const obj3 = {c:3}; const newObj = Object.as..

자바스크립트를 공부하게 되면 한 번쯤은 들어보게 되는 단어가 '클로저'입니다. 하지만 막상 클로저를 설명하려고 하면 어렴풋이 개념은 알고 있어도 쉽게 설명을 하지 못하는 경우가 많습니다. 👍 클로저란? 클로저에 대해 MDN은 아래와 같이 정의하고 있습니다. “A closure is the combination of a function and the lexical environment within which that function was declared.” 클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이다. MDN에 정의되어 있는 말을 보아도 문맥이 어려워서 선뜻 이해가 되지 않습니다. 위 정의에서 중요한 키워드는 “함수가 선언됐을 때의 렉시컬 환경(..

Math 객체 와 Date 객체를 알아보았습니다. 이번에는 String 객체를 알아볼께요. 글자를 자르거나 필요한 글자를 탐색, 원하는 글자만 가져오거나 문자열의 결합등 (이 놀라운 모든 구성이 초특가! 3만9천9백원 ) 문자열로 할 수 있는 모든것을 할 수 있습니다. document.write(str.length); // 공백도 문자열로 인식, 결과 : 14 document.write(str.toLowerCase()); // 영문자를 소문자로 바꿔 변환. [결과 : jquery study !] document.write(str.toUpperCase()); // 영문자를 대문자로 바꿔 변환. [결과 : JQUERY STUDY !] document.write(str.indexOf("y")); // 처음인덱..

특정 값을 확인할 때 우리는 3가지 항목을 사용하게 됩니다. console.log alert confirm 3가지 항목은 비슷한 성격을 가지면서도 다릅니다. 콘솔은 개발자 도구에서만 값이 확인이 가능하기에 데이터 값을 테스트할 때 주로 사용하게 되고 alert은 사용자에게 값을 팝업창으로 안내해주고 역할로서만 기능이 끝이 납니다. 컨펌(confirm)은 안내(질문)문에 대한 대답을 유저가 선택을 할 수 있게 구성되어 있습니다. 위의 화면처럼 [확인] 버튼을 클릭하면 true값을 반환하고 [취소]를 누르면 false값을 반환하게 되는데 우리는 이를 이용하여 다양하게 이벤트를 처리할 수 있습니다. onclick 이벤트를 사용하여 개별적으로 값을 처리할 경우 function에 자신의 this값을 값이 넘겨주어..

데이터(Data)의 값을 잘라서 다시 자신이 원하는 값만 다시 추출하는 방법은 생각보다 많이 사용됩니다. 데이터의 가공에도 필요하고 전달받은 값 중 특정값만 필요한 경우에도 사용하게 되죠. 문자열을 자르는 방법을 이해하고 정리한다면 분명 코드를 사용함에 도움이 될 거라 생각합니다. 문자열을 자르는 가장 일반적인 방법은 자바스크립트의 [substr] 를 이용하는 방법입니다. [substr]를 사용하여 잘라낼 문자열 위치의 가장 앞쪽 시작 값은 1이 아닌 0부터 시작합니다.(전에도 한번 말씀드렸지만 컴퓨터는 0부터 인식합니다.) 즉, 0,1,2.. 순서로 시작한다는 말인데 'apple' 이라는 단어를 예로 들면 a가 0, p가 1이 되는 것이에요. 1. 문자열을 앞에서 순차적으로 자르는 방법 기본 방식은 '..