전체 글
DOM (Document Object Model)
DOM (Document Object Model) 이해하기 DOM은 프로그래머 관점에서 바라본 HTML이다. HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 모델이다. JavaScript를 사용할 수 있으면 DOM으로 HTML을 조작할 수 있다 는 말이다. 쉽게 얘기하자면, JavaScript를 이용해서 엘리먼트의 속성값을 얻어내거나 변경하는 방법이라고 이해하면 된다. 하지만 DOM을 JavaScript라고 이해하면 안된다. 단지 JavaScript를 통해 접근하는 것 뿐이다. 이 DOM을 만들기 위해 뛰어난 웹 개발자들이 모여서 HTML을 철저히 분석했다. 분석한 내용으로 HTML의 아주 작은 부분까지 접근할 수 있는 구조(Model / Str..
객체의 얕은 복사와 깊은 복사
객체의 얕은 복사 (Shallow Clone) Object.assign() 첫번째 인자로 들어온 객체에 두번째 인자로 들어온 객체의 프로퍼티들을 복사해서 넣는다. const obj = { a: 1, b: 2 }; const target = { c: 3 }; const copiedObj = Object.assign(target, obj); console.log(copiedObj); //{c: 3, a: 1, b: 2} Spread Operator const original = { a: 1, b: 2, c: { d: 3, }, }; const copied = { ...original }; original.a = 1000; original.c.d = 3000; console.log(copied.a); // 1..
Hoisting
Hoisting 호이스팅에는 한가지 오해가 있다. 호이스팅을 변수 및 함수 선언이 물리적으로 작성한 코드의 상단으로 옮겨지는 것으로 알고 있을 수도 있지만, 실제로는 그렇지 않다. 변수 및 함수 선언은 컴파일 단계에서 메모리에 저장되지만, 코드에서 입력한 위치와 정확히 일차한 곳에 있다. catName("Chloe"); function catName(name) { console.log("My cat's name is " + name); } 함수를 작성하기 전에 호출하였지만 함수가 정상 작동하는 것을 확인할 수 있다. var x = 1; // x 초기화 console.log(x + " " + y); // '1 undefined' var y = 2; // 아래 코드는 위 코드와 같은 방..
Spread와 Rest 문법
Spread 문법 주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때 사용한다. function sum(x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; sum(...numbers); // 6 Rest 문법 파라미터를 배열의 형태로 받아서 사용할 수 있다. 파라미터 개수가 가변적일 때 유용하다. 함수의 매개변수로 사용할 때에만 Rest 문법을 사용한다고 할 수 있다. function sum(...theArgs) { return theArgs.reduce((previous, current) => { return previous + current; }); } sum(1, 2, 3); // 6 sum(1, 2, 3, 4); // 1..
Closure가 어렵다면 내 탓이 아니라 JS 탓이다!
Closure 클로저는 함수와 함수가 선언된 어휘적(lexical) 환경의 조합을 말한다. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다. 자바스크립트는 함수가 호출되는 환경과 별개로, 기존에 선언되어 있던 어휘적 환경을 기준으로 변수를 조회하려고 한다. "외부함수의 변수에 접근할 수 있는 내부함수" 를 클로저 함수로 부르는 이유도 그렇다. Closure 함수의 특징 함수를 리턴하는 함수 const adder = function (x) { return function (y) { return x + y; }; }; 리턴하는 함수에 의해 스코프가 구분됨 ※ 클로저의 핵심 : 스코프를 이용해서 변수의 접근 범위를 닫음(closure) → 외부 함수의 변수에 내부 함수가 접근..
let / const / var 그리고 scope
scope 각 상수나 변수 등의 요소들이 허용된 영역, 범위를 scope라 한다. 특정 함수나 클래스의 블럭 안에 선언되지 않은 전역 변수들은 전역 스코프에 속한다. const / let const : 선언할 때 바로 값을 넣어줘야 하고, 이후 값을 바꿀 수 없는 상수. let : 선언과 값 정의를 따로 할 수 있고 값도 변경할 수 있다. 하지만 선언을 다시 하지는 못한다. ES6, ECMA 2015 버전부터 생긴 구문들이다. (그 전에는 var만 사용했다.) 선언하기 이전에 사용하려 하면 Reference Error가 발생한다. const와 let도 hoisting은 되지만 선언되어서 초기화되기 전에는 Temporal Dead Zone(TDZ)이라는 영역에 속하게 되어, 이 때 변수를 호출하면 오류가 ..
JavaScript의 탄생 배경
태초의 웹 브라우저 1993년, Mosaic Web Browser 출시 Mosaic Web Browser 팀을 이끌던 Marc Andressen은 Netscape 회사를 설립 이후 기존보다 UI 요소가 더해진 Nescape Navigator 출시 → HTML, CSS로 정적인 웹 페이지를 만들 수 있게 되었음 Marc Andressen은 동적인 웹 페이지를 만들기 위해 Script 언어를 만들기로 함 Marc Andressen은 Brendan Eich를 영입 → 새로운 Script 언어를 만들되 Scheme Script 언어의 컨셉을 유지하면서 문법은 Java와 유사하게, 그리고 이를 10일 안에 만들도록 계획했음 1994년 9월, 내부적으로 Mocha라고 불렀던 이름이 LiveScript로 바뀌어서 출..
Process, Thread, Multi-Thread
※ 본문은 코드스테이츠에서 제공해준 학습자료를 공부하고 정리한 내용임을 알립니다. Process, Thread, Multi-Thread Process 운영체제에서는 실행 중인 하나의 애플리케이션을 프로세스라고 부른다. 사용자가 애플리케이션을 실행하면 운영체제로부터 실행에 필요한 메모리를 할당받아 애플리케이션의 코드를 실행하는데, 이것을 프로세스라고 부른다. 하나의 애플리케이션을 두 번 이상 실행해서 다중 프로세스를 만들기도 한다. Thread 쓰레드는 사전적 의미로 한 가닥의 실이라는 뜻이다. 한 가지 작업을 실행하기 위해 순차적으로 실행한 코드를 실처럼 이어놓았다고 해서 유래된 이름이다. 하나의 쓰레드는 하나의 코드의 실행 흐름이기 때문에 한 프로세스 내에 쓰레드가 두 개라면 두 개의 코드 실행 흐름이..
Stream
※ 본문은 코드스테이츠에서 제공해준 학습자료를 공부하고 정리한 내용임을 알립니다. Stream 자바 8부터 추가된 컬렉션의 저장 요소를 하나씩 참조해서 람다식으로 처리할 수 있도록 해주는 반복자이다. 반복자 Stream ※ Stream 이전의 Iterator 반복자 코드 List list = Arrays.asList("김코딩", "이자바", "김인기"); Iterator iterator = list.iterator(); while(iterator.hasNext()){ String name = iterator.next(); System.out.println(name); } ※ Stream으로 변경한 코드 List list = Arrays.asList("김코딩", "이자바", "김인기"); Stream st..