🐊 원시형과 자료형 자바스크립트에서 원시 자료형이 아닌 모든 것은 참조 자료형이다.(Array, Object, function) const number = 3; const arr = ['a', 'b', 'c', 'd']; 변수 number에는 3이라는 원시 자료형 '값'이 할당되고, arr에는 참조 자료형의 '주소'가 할당된다. 참조 자료형은 실제 데이터가 저장된 주소를 가리킨다. 즉, 참조(reference)가 된다. 원시 자료형은 immutable하지만 참조 자료형은 그렇지 않다. 그렇기 때문에 '주소'를 할당할 수 밖에 없다. 배열에 요소를 추가 및 삭제하고, 객체에 속성을 추가 및 삭제할 수 있다. 이것은 참조 자료형이 immutable하지 않다는 것을 보여준다. (언제든지 데이터가 늘어나고 줄어..
🐊 spread & rest 🟢 spread 문법(Spread Syntax, ...) Spread 문법은 주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때 사용한다. (Spreed 문법의 대상은 이터러블이어야 한다. - 일반 객체는 이터러블이 아니기 때문에 Spread문법의 대상이 될 수 없다.) console.log(...['a', 'b', 'c']); // a, b, c console.log('I am inevitable'); // I am inevitable console.log(...{a:1, b:2}); // TypeError: Found non-callable @@iterator Spread문법(...)을 사용하면 배열을 인수로 함수에 전달하여 분해된 배열의 요소를 ..
“A closure is the combination of a function and the lexical environment within which that function was declared.” 클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이다. “ 함수와 레시컬 환경의 조합이다. ” 함수가 생성될 당시의 외부 변수를 기억하고 생성 이후에도 계속 접근이 가능한데, 이러한 함수를 클로저(closure)라고 부른다. 즉, 반환된 내부함수가 자신이 선언됐을 때의 환경(Lexical environment)인 스코프를 기억하여 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수를 말한다. 이를 조금 더 간단히..
🤔 스코프 자바스크립트에서 스코프는 참조 대상 식별자(identifier, 변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 구분하여 식별할 수 있는 유일한 이름)를 찾아내기 위한 규칙이다. 자바스크립트에서는 이 규칙대로 식별자를 찾는다. 우리가 변수를 선언하고 값을 할당하면, 변수는 전역 또는 코드 블럭이나 함수 내에 선언된다. (이때, 선언된 변수는 코드 블록이나 함수에서 중첩될 수 있다.) 식별자는 자신이 어디에서 선언됐는지에 따라 자신이 유효한 범위를 갖는다.(변수의 유효범위) 변수를 선언하면 변수에 접근할 수 있는 범위가 존재하게 되는데, 이 범위를 스코프(Scope)라고 부른다. ✏️ 스코프의 구분 자바스크립트에서 스코프는 2가지로 나눌 수 있다. 전역 스코프(Global Scope) : 코..
Javascript에서는 7가지 데이터 타입(number, string, boolean, null, undefined, symbol, object type)이 있다. 이 데이터 타입은 크게 원시 타입(primitive type)과 객체(참조)타입(object / reference type)으로 구분할 수 있다. ✏️ 원시 자료형 원시 자료형은 모두 '하나'의 정보, 즉 데이터를 담고 있다. 원시 자료형의 보관함인 변수에는 하나의 원시 자료형만 담을 수 있다. 이 특징은 참조 자료형이 보관되는 특별한 보관함과는 구분된다. 원시타입 데이터는 각 변수간에 원시타입 데이터를 복사할 경우, 데이터 값이 복사되기 때문에 기존의 데이터에 영향을 주지 않는다. 참조 자료형(배열, 객체)는 어떻게 코드를 작성하느냐에 따..
배열은 1개의 변수에 여러 개의 값을 순차적으로 저장할 때 사용한다.(배열은 순서에 대한 정보를 가지고 있는 참조형 데이터) 배열은 순서가 있는 요소들의 집합이다. 즉 여러개의 항목이 들어있는 리스트의 개념과 비슷하다. 자바스크립트의 배열은 Array 생성자로 생성된 Array 타입의 객체이다. "배열은 순서가 있는 값을 말한다." 📚 배열의 생성 📙 배열의 기터럴 배열은 0개 이상의 값(요소; element)을 쉽표(comma)로 구분하여 대괄호(square bracket; [])로 묶어서 만든다. . 이때 첫번째 값은 인덱스 '0'으로 읽을 수 있고 존재하지 않은 요소에 접근하면 'undefined'를 반환한다. ✏️ 순서는 인덱스라고 부르며, 1이 아닌 0부터 번호를 매김 ✏️ 값은 요소(eleme..
✏️ display 주어진 값에 따라 모든 직계 자식(inline or block 등)에 대해 flex context를 적용시킴 .example{ display: flex; /* or inline-flex; */ } ✏️ order Flex 요소의 순서를 지정해준다. 기본적으로 flox 항목은 소스 순서대로 배치된다. 하지만 order 속성은 flex container에 나타나는 순서를 제어한다. ✏️ justify-content Flex 요소들을 주축(가로선)을 따라 정렬시킨다. flex-start(기본값) : item을 flex 방향의 시작 부분을 향해 배치된다. flex-end : item이 flex 방향의 끝 부분을 향해 배치된다. start : item이 시작 방향을 향해 writing-mode..
박스의 종류는 줄 바꿈이 되는 박스와 줄 바꿈이 없이 옆으로 붙는 박스로 구분할 수 있다. 줄 바꿈이 되는 박스는 block 박스, 줄 바꿈이 일어나지 않고 크기 지정을 할 수 없는 박스는 inline 박스이라고 부른다. 그리고 이 두 가지 박스 종류의 특징이 섞인, 줄 바꿈이 일어나지 않는 동시에 block 박스의 특징을 가지는 inline-block 박스도 있다. 🤔 block - block 특성을 가지는 요소의 특징 항상 새로운 라인에서 시작한다. 화면 크기 전체의 가로폭을 차지한다.(width:100%) width, height, margin, padding 프로퍼티 지정이 가능하다. block 레벨 요소 내에 inline 레벨 요소를 포함할 수 있다. - block 레벨 요소 예 div h1 ~..
CSS는 웹 사이트 사용자가 HTML 문서에 작성된 콘텐츠를 잘 이해할 수 있도록 돕는 역하을 한다. 개발자는 이 CSS로 웹 애플리케이션에 접근 할 수 있는 사용자 인터페이스(user interface)부터 만들게 된다. 사용자 인터페이스(UI; user interface) 인터페이스는 컴퓨터와 교류하기 위한 연결고리이다. 버튼도 없고, 마우스도 없던 시대의 개발자는 자신이 만든 애플리케이션과 소통하기 위해서 CLI를 사용했다. 키보드로 작성한 비밀 암호같은 코드를 적어서 엔터를 눌러야만 애플리케이션을 작동시킬 수 있었다. 우리가 지금처럼 키보드와 마우스를 사용해서 컴퓨터를 사용하는 것은 잘 만들어진 인터페이스 덕분이다. 이렇게 컴퓨터에 무지한 일반 사용자가 쉽게 사용할 수 있는 인터페이스에는 앞에 "..
반복문은 주어진 조건식의 평가 결과가 참인 경우 코드 블럭을 실행한 후 조건식을 다시 검사하여 여전히 참인경우 코드 블록을 다시 실행하게 되는데, 이 조건식이 거짓일 때까지 반복된다. let sum = 1; sum = sum +2; sum = sum +3; sum = sum +4; "sum과 숫자(n)의 합"을 "sum에 대입"하자 ➜ sum = sum +n; 숫자(n)는 2부터 시작한다. ➜ let n = 2; 숫자(n)가 4가 될때까지 반복한다. ➜ n
