관성을 이기는 데이터

자바스크립트의 높은 자유도는 협업을 하거나 에러를 수정할 때 불편함으로 다가온다. 따라서 고의적으로 명시적 코드를 작성해줄 필요가 있다. 처음 입문하더라도 명시적인 코드와 관련해 대표적인 3가지 유형을 알고 넘어가면 좋다. '가변 인자', '클래스' 그리고 '배열 순회'에 대해 알아보자. 1. 가변 인자 자바스크립트의 함수는 인자를 적게 받거나 다른 타입으로 받더라도 오류가 발생하지 않는다. 매개변수를 지정하지 않고 변할 수 있는 인자, 즉 가변 인자를 받을 수 있도록 되어 있기 때문이다. function sum() { let res = 0; for (let i = 0; i < arguments.length; i++) { res += arguments[i]; // 선언하지 않은 arguments를 사용하..

생활코딩 이고잉님 강의(JavaScript Immutability) 수강 중 정리한 내용입니다. 자바스크립트의 높은 자유도로 인해 의도적으로 수정을 제한하는 문법이 생겨났는데, const와 freeze다. const는 변하지 않는 값. 상수를 지정하는 키워드로 let과 반대되는 개념이다. (const와 let이 등장하지 않았던 시절의 var와 비교해볼 수도 있다.) const 키워드를 통해 한번 값이 지정되면 그 값은 변할 수 없다. 값이 특정 메모리에 위치한다는 것을 생각했을 때 const로 지정된 '이름(name)' 을 변경할 수 없다는 의미다. const가 나오기 이전 ES5에서 객체의 자유도에 제한을 주기 위한 메소드 freeze()가 등장했는데, const과 자주 비교되는 메소드다. const가..

생활코딩 이고잉님 강의(JavaScript Immutability) 수강 중 정리한 내용입니다. 배열 객체는 내장된 push 메소드를 통해 배열에 원소를 추가하고, 추가한 원소를 반환할 수 있다. 그런데 만약 여러 변수에 특정 배열을 똑같이 담고 그 특정 배열에 push를 통해 원소를 추가한다면 원소가 추가된 새로운 배열이 모든 변수에 공유된다. 자바스크립트에서는 변수가 객체를 담으면 실제로는 객체의 위치를 가리키고 있는 것이기 때문에 이러한 값이 저장된 변수가 복사되었을 때 객체 자체가 복사되는 것이 아닌 하나의 위치에 있는 원본(유일한) 객체를 가리키는 위치가 복사된다. 그래서 push를 통해 원본(유일한) 객체에 원소를 추가한다면 공유된 여러 변수가 모두 변화된 값을 가진다. 만약 이러한 특징을 이..

Object는 Object instance를 생성하는 '생성자(constructor)'입니다. Function은 Function instance를 생성하는 '생성자(constructor)'입니다. 이 문장의 뜻을 살펴보자. 인스턴스(instance)는 '객체'로 봐도 무방하다. 생성자가 객체를 만들 때, 그 시점의 객체를 인스턴스라고 하기 때문이다. 결국 맥락의 차이이기 때문에 특별히 다른 것으로 '억지로' 생각하지 않아도 된다. 그렇다면 생성자는 무엇일까? 생성자는 인스턴스를 만드는 객체 혹은 함수를 말하는데, 함수 인스턴스를 생성하는 생성자를 'Function' 객체 인스턴스를 생성하는 생성자를 'Object'라고 한다. 우리는 자바스크립트에서 함수가 객체라는 것을 알고 있다. 그렇다면 두 생성자 F..

페이스북 '프론트엔드개발그룹' 에서 피드백받은 내용을 추가하였습니다.(표시 /*) 자바스크립트는 프로토타입(Prototype) 기반 언어다. 자바, 파이썬처럼 객체지향이라는 점에서 맥락을 같이하지만 클래스 기반이 아닌 프로토타입 기반이기 때문에 '상속' 개념이 없다. /* 자바스크립트에도 상속이 있다고 합니다. class-based oop에서와 다른 방식의, 다른 형태의 상속으로, ES 명세에 있는 다음 구절이 이를 잘 설명해주고 있습니다. "In a class-based object-oriented language, in general, state is carried by instances, methods are carried by classes, and inheritance is only of str..

DOM(Document Object Model) DOM은 브라우저가 제공하는 객체(BOM-Browser Object Model) 중 하나로 BOM의 가장 상위 객체인 Window의 하위 객체라고 볼 수 있다. 넓은 의미로 DOM은 웹브라우저가 HTML 문서를 인식하는 방식을 말하며 객체 참조를 통해 이루어진다. DOM이 제공하는 기능은 C(create), R(read), U(update), D(delete) 4가지다. DOM을 사용해보자. javaScript로 Html을 조작하기 위해 DOM을 사용해서 접근할 수 있다. let elmts = document.getElementsByTagName('div'); 이렇게 getElements라는 복수 형태를 사용하면 변수 elements는 배열 형태로 div를..

ES5까지 자바스크립트에서 변수를 참조할 수 있는 유효 범위의 단위는 함수였다. 예를 들어 코드에 함수가 하나 존재한다면 함수 밖의 변수는 Global Scope, 함수 안의 변수는 Local Scope 내에서만 호출할 수 있다. 변수를 선언할 수 있는 유일한 방법은 var를 키워드를 사용하는 것인데, var는 변수의 중복과 키워드 생략을 허용한다는 점에서 의도하지 않은 결과를 나타낼 수 있다. 그리고 유효범위, 즉 스코프의 단위가 함수라는 점에서 함수 내의 for문 또는 if문에서만 필요한 변수가 함수 전역에 머물러 있기 때문에 변수 사용이 끝난 시점에도 불필요한 메모리를 낭비하게 된다. 변수를 선언할 때 'var' 키워드를 사용한다면 이때의 변수는 항상 포함된 함수 scope 혹은 Global Sco..

객체란 객체는 데이터를 표현하는 도구이면서 현실의 구체적 대상을 추상적으로 묘사하기 위해 사용된다. 코드는 언제나 현실의 추상화 작업을 거치게 되는데, 추상화란 보여주고자 하는 핵심적인 요소 이외의 것들은 모두 은폐하는 것을 말한다. 복잡한 현실세계를 모두 코드로 표현할 수 없을뿐더러 표현했다 하더라도 그것을 읽는 것은 불가능하다. 따라서 추상화가 필요하며 이때 가장 핵심적인 것들을 객체에 담아 보여준다. 객체의 구성 1. Property 앞에서 객체를 데이터를 표현하는 도구라고 했다. 이는 property라는 형태를 가지고 있기 때문이다. property란, 객체를 통해 접근할 수 있는 key와 그런 key가 가지는 대응하는 값 value가 서로 쌍을 이루는 형태를 말하며 이를 통해 데이터를 불러와 사..

우아한형제들 김민태님의 '자바스크립트 부트캠프(패스트캠퍼스)' 수강 중, 허가를 받고 정리한 내용입니다. 1. 코드 중간중간에 데이터를 넣지 마라. 코드는 읽는 시간이 작성하는 시간보다 훨씬 길다. 따라서 읽고 이해하기 쉽게 데이터는 데이터대로 따로 배치하는 것이 좋다. 그래서 간단한 수식 하나라도 변수를 통해, 네이밍을 해주는 것이 중요하다. 처음 코딩에 입문할 때 변수를 따로 선언해주는 것이 더 복잡하게 느껴지고 코드의 길이도 길어지는 것 같아 의식의 흐름대로 작성하는 경우가 많은데, 그렇게 되면 추후에 수정하거나 변경할 일이 생기면 알아보기도 어려울뿐더러 수정은 더더욱 어렵다. 그러니 변수 선언과 적절한 네이밍은 습관처럼 연습하자. 2. if, switch문을 남발하지 말자. 코드에 대한 정확한 이..

자바스크립트의 문법은 크게 '식'과 '문'으로 나뉜다. 식(expression)은 곧 값을 의미하며 문(statement)은 식을 이루는 방식을 지시, 제어한다. 예를 들어 if(조건문)나 while(반복문)과 같은 문법이 '문'이라면 1+1, 2>1, [a,b,c], function(x,y) 등은 '식'이다. 단, 값의 이동은 '문'이다. var a = 1과 같은 대입 연산을 말한다. 여기서 또 하나의 특징은 값이라고 정의된 모든 데이터는 변수에 넣을 수 있다는 것이다. 이러한 특징 때문에 함수와 배열 역시 특정 변수에 담을 수 있다. 그리고 함수는 '식'이기 때문에 항상 '값'을 반환하는데 이때 우리는 'return'을 사용해서 함수를 통해 호출하고자 하는 값을 지정해줄 수 있다. 반대로 if, wh..