참조에 의한 객체복사 객체와 원시타입의 근본적인 차이 중 하나는 객체는 '참조에 의해(by reference)' 저장되고 복사된다. 원시값(문자열, 숫자, 불린 값)은 '값 그대로' 저장·할당되고 복사된다. let message = 'Hello'; let cloneMessage = message; cloneMessage = 'CloneHello'; console.log(message, cloneMessage); // Hello CloneHello 객체가 할당된 변수를 복사하면 동일한 객체에 대한 참조 값이 하나 더 만들어진다. let user = { name: 'John'; } let admin = user; admin.name = ..

상수객체 const로 선언된 객체는 수정 될 수 있다. const user = { name: 'John' }; user.name = 'Pete'; console.log(user.name); // Pete const는 한 번이라도 값을 할당한 변수가 변경되는 걸 막는다. 변수 user는 객체 참조 값을 저장하고 있는데, const는 이 값이 변경되는걸 막는 것이지, 객체의 내용 (프로퍼티)을 변경하는 건 막지않는다. 계산된 프로퍼티 객체를 만들 때 객체 리터럴 안의 프로퍼티 키가 대괄호로 둘러싸여 있을 경우, 이를 계산된 프로퍼티 (computed propery) 라고 부른다. let fruit = prompt('어떤 과일을 구매하시겠습니까?', 'appl..

nullish 병합연산자 ?? 최근에 추가됨. 스펙에 추가된지 얼마안된 문법. 구식 브라우저는 폴리필이 필요하다. nullsh 병합연산자(nullish coalescing operator) ??를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 확정되어 있는 변수를 찾을 수 있다. a ?? b 의 평가 결과는 다음과 같다. a가 null도 아니고 undefined도 아니면 a 그 외의 경우 b nullish 병합 연산자 ??없이 x = a ?? b와 동일한 동작을 하는 코드를 작성하면 다음과 같다. x = (a !== null && a !== undefined) ? a : b; ??와 ||의 차이 ||는 첫 번째 truthy값을 반환. ??는 첫 번째 정의된(defined) 값을 반환. null과 un..

값을 반환하는데 사용. 지역변수의 값을 아는데 사용. 현재 진행중인 함수를 중지(escape). 1. 값을 반환하는데 사용 + 2. 지역변수의 값을 아는데 사용. [예제1] var test = function() { var x = 1; } test(); console.log(test()); // undefined 위의 함수는 실행되지 않는다. 내부 구문들을 실행(test())하였으나 반환할 값이 선언되지 않았다. x를 얻기 위해선 return을 사용하여 값을 반환해야 한다. var test = function() { var x = 1; return x; } var test2 = test(); console.log(test2); test() 함수를 실행할 경우 해당함수는 1을 반환한다. 반환값을 사용하기 ..

*parsing :: https://solog4something.tistory.com/13 (+)21.10.26 추가 파싱은 해당 언어의 문법검사기라고 할 수 있다. 네트워크로 받은 HTML과 CSS 파일을 토큰화 시키고 Parse Tree를 생성한다. 이 Parse Tree를 DOM 트리로 만들어 렌더하게 된다. 하지만 HTML을 화면에 보이기 위해 파싱하는 도중에 파싱을 멈추는 경우가 발생한다. 아래 스크립트를 보자. script 자바스크립트는 *parser blocking resource(파서 차단 리소스)이다. 기본 모드로 브라우저는 문서를 파싱해 읽다가 자바스크립트를 만나면 진행하고 있었던 파싱을 멈추고, 스크립트를 다운 > 파싱 > 실행 한 후 다시 HTML 문서를 파싱하게 된다. 스크립트는 ..

ES5까지 var 키워드로 선언된 변수는 아래와 같은 특징이 있다. 하지만 이는 다른 언어와는 다른 특징으로 주의를 기울이지 않으면 심각한 문제를 일으킨다. 함수 레벨 스코프(Function-level Scope) 함수의 코드 블록만 스코프 인정. 따라서 전역 함수 외부에서 생성한 변수는 모두 전역 변수이다. 이는 전역 변수를 남발할 가능성을 높인다. for 문의 변수 선언문에서 선언한 변수를 for 문의 코드 블록 외부에서 참조할 수 있다. var 키워드 생략 허용 암묵적 전역 변수를 남발할 가능성이 크다. 변수 중복 선언 허용 의도하지 않은 변수값의 변경이 일어나 혼란을 높일 수 있다. 변수 호이스팅 변수를 선언하기 이전에 참조할 수 있다. ES6는 이러한 var 키워드의 단점을 보완하기 위해 let..

자바스크립트를 공부하면서 항상 헷갈린 부분이다😰 이번엔 확실히 다지고 넘어가자 인자를 전달하는 방식에 따라 함수 호출 방법은 크게 두가지로 나뉜다. Call By value 와 Call By Reference 이다. 그러면 자바스크립트는 어떤 방식으로 함수를 호출할까? 바로 Call By Value이다. 흔히들 잘못 알고 있는 사실이 한가지 있다. 바로 함수의 매개변수가 원시타입(Primitive Type)인 경우에는 Call By value이고, 매개변수가 객체형태면 Call By Reference 로 동작한다는 것이다. 이는 완전히 잘못된 사실이다.(나도 이렇게 알고 있었다..) Call By Value argument로 value(값)이 넘어온다. 이때 넘어올 때는 "복사된 값"이 넘어온다. cal..

자바스크립트 삽입방식과 위치 1. 자바스크립트 삽입방식 자바스크립트를 실행하는 방법은 문서 안에 type="text/javascript" 부분은 HTML5에서는 생략 가능. 문서의 어느 곳이든 스크립트 배치에 제한을 두지 않는다. 1번 사용할 경우 :: 간단한 스크립트의 경우이거나 해당 문서에만 적용되는 코드들, 초기화 등에 자주 사용. 2번 사용할 경우 :: 반복사용되는 코드들을 파일별로 저장해두고 필요에 따라 사용. 이와 같은 방식이 코드의 가독성과 실행순서, 의존성들을 확인하기에 수월하기 때문에 추천되는 방식. 2. 자바스크립트 삽입 위치 브라우저는 HTML의 구조와 CSS 스타일을 렌더링하는 도중 자바스크립트를 만나게 되면 이에 대한 해석과 구현이 완료될 때까지 브라우저 렌더링을 멈추게 된다. 즉..