개발자 퉁이리

strict mode 자바스크립트 언어의 문법을 좀 더 엄격히 적용하여, 오류를 발생시킬 가능성이 높거나 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시킨다. strict mode 적용 전역의 선두 또는 함수 몸체의 선두에 'use strict'; 를 추가한다. 1️⃣ 'use strict'; // 전역의 선두에 추가 function foo() { x = 10; // ReferenceError: x is not defined } foo(); 전역의 선두에 추가하면 스크립트 전체에 적용된다. 2️⃣ function foo() { x = 10; // 에러를 발생시키지 않는다. 'use strict'; } foo(); 코드의 선두에 위치시키지 않을 시 제대로 동작하..

프로토타입 프로토타입이란 간단히 말해 상속을 구현하는 방식이다. 모든 객체에는 하나의 프로토타입이 존재하며, 이는 모두 생성자 함수와 연결되어 있다. 프로토타입에 대해 부가설명을 하자면 자바스크립트에서 프로토타입 개념은 프로토타입 객체와 프로토타입 링크를 통틀어 말하고 객체 간 상속을 구현하기 위해 사용된다. ❓ 상속이란 무엇일까? 상속은 객체지향 프로그래밍의 핵심 개념으로, 어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 상속받아 그대로 사용할 수 있는 것을 말한다. 💨 상속을 사용하는 이유 - 상속을 사용하면 기존에 있던 코드를 그대로 사용할 수 있기에 코드의 중복을 피할 수 있다. - 그렇다는 뜻은 상속을 사용하면 코드의 양이 현저히 줄어든다. 자바스크립트는 프로토타입을 기반으로 상속을 구현한다 프..

일급 객체 무명의 리터럴로 생성할 수 있다. 변수나 자료구조에 저장할 수 있다. 함수의 매개변수에 전달할 수 있다. 함수의 반환 값으로 사용할 수 있다. 위 4개의 조건을 모두 만족하면 일급 객체라 한다. // 함수는 무명의 리터럴로 생성할 수 있다. //변수에 저장 가능 const increase = function (num) { return ++num; } const decrease = function (num) { return --num; } // 함수는 객체에 저장 가능 const predicates = { increase, decrease }; // 함수의 매개변수로 전달 가능 // 함수의 반환값으로 사용 가능 function makeCounter(predicate) { let num = 0; ..

생성자 함수 객체 리터럴에 의한 생성 방식은 직관적이고 간편하다. 하지만 단 하나만의 객체만을 생성해 여러 개를 생성해야 할 경우에는 비효율적이다. 그렇지만 생성자 함수에 의한 객체 생성 방식은 프로퍼티 구조가 동일한 객체 여러 개를 간편하게 생성할 수 있다. 🔍 객체 리터럴에 의한 객체 생성 const circle1 = { radius: 5, getDiameter() { return 2 * this.radius; } }; console.log(circle1.getDiameter()); // 10 const circle2 = { radius: 10, getDiameter() { return 2 * this.radius; } }; console.log(circle2.getDiameter()); // 20 ..

프로퍼티 어트리뷰트 자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의한다. 프로퍼티 데이터 프로퍼티 키와 값으로 구성된 일반적인 프로퍼티 접근자 프로퍼티 자체적으로는 값을 갖지 않고 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 호출되는 접근자 함수로 구성된 프로퍼티 *프로토타입 : 어떤 객체의 상위(부모) 객체의 역할을 하는 객체 🎈 프로퍼티 정의 프로퍼티의 어트리뷰트를 명시적으로 정의하거나, 재정의하는 것을 의미한다. 🎈 객체 변경 방지 객체는 변경 가능한 값이다. 자바스크립트는 객체의 변경을 방지하는 다양한 메서드를 제공한다. 🔔객체 확장 금지🔔 확장이 금지된 객체는 프로퍼티 추가가 금지된다. 🔔객체 밀봉🔔 밀봉된 객체는 읽기와 쓰기만 가..

var로 선언한 변수의 문제점 변수 중복 선언 허용 함수 레벨 스코프 변수 호이스팅 📙 변수 중복 선언 허용 var x = 1; var y = 1; var x = 100; var y; // 초기화 없는 변수 무시 console.log(x); // 100 console.log(y); // 1 동일한 이름의 변수가 이미 선언되어 있는 것을 모르고 값을 할당했다면 의도치 않게 값이 변경되는 부작용이 발생한다. 📙 함수 레벨 스코프 var x = 1; if(true) { var x = 10; // 전역 변수 } console.log(x); // 10 함수 레벨 스코프는 전역 변수를 남발할 가능성을 높인다. 이로 인해 의도치 않게 전역 변수가 중복 선언되는 경우가 발생할 수 있다. 📙 변수 호이스팅 console..

변수의 생명 주기 변수는 생물과 유사하게 생성되고 소멸되는 생명 주기(life cycle)가 있다. *생명 주기가 필요한 이유 생명 주기가 없다면 메모리 공간을 영원히 점유한다. 지역 변수의 생명 주기 지역 변수의 생명 주기는 함수의 생명 주기와 일치한다. function foo() { var x = 'local'; console.log(x); // local return x; } foo(); console.log(x); // ReferenceError: x is not defined 함수 foo()가 종료했기 때문에 위 코드는 애러가 뜬다. 함수의 종료와 동시에 지역 변수 x의 삶도 마감하기 때문이다. *호이스팅은 스코프를 단위로 동작한다 전역 변수의 생명 주기 전역 변수의 생명 주기는 애플리케이션의 ..

스코프 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위를 말한다. 스코프 = 식별자가 유효한 범위 스코프가 필요한 이유 스코프라는 개념이 없다면 같은 이름을 갖는 변수는 충돌을 일으키므로 프로그램 전체에서 하나밖에 사용할 수 없다. var x = 'global'; function foo() { var x = 'local'; console.log(x); } foo();//local console.log(x);//global 같은 var x임에도 서로 다른 결과를 도출한다. ☞ 스코프 개념에 의해 발생한 일 스코프 종류 자신이 선언된 위치에 따라 스코프가 결정된다. 전역 스코프 : 전역에서 선언된 변수 지역 스코프 : 지역에서 선언된 변수 스코프 체인 함수는 중첩이 가능하고 ..

원시 값과 객체의 비교 원시 값은 변경 불가능한 값 객체 타입의 값은 변경 가능한 값 원시 값을 변수에 할당하면 변수에는 실제 값 저장 객체를 변수에 할당하면 변수에는 참조 값 저장 원시 값을 다른 변수에 할당 -> 값에 의한 전달 객체를 다른 변수에 할당 -> 참조에 의한 전달 원시 값 변경 불가능한 값 원시 값은 변경 불가능한 값이다. 한번 생성된 원시 값은 읽기만 가능하고 변경 불가하다. 위 코드를 보면 새로운 메모리 공간을 확보한다. 원시 값을 할당한 변수에 새로운 원시 값을 재할당하면 메모리 공간에 저장되어 있는 재할당 이전의 원시 값을 변경하는 것이 아니라 새로운 메모리 공간을 확보하고 재할당한 원시 값을 저장한 후, 변수는 새롭게 재할당한 원시 값을 가리킨다. 이러한 특성을 불변성이라고 한다..

암묵적 타입 변환 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동으로 변환 var x = 10; // 암묵적 타입 변환 var str = x + ''; console.log(typeof str, str); // string 10 자바스크립트 엔진에 의해 암묵적으로 일어나기 때문에 코드에 타입 변환 의지가 드러나지 않는다. ∴ 타입 변환에 대해 예측 가능해야 한다. 명시적 타입 변환 개발자의 의도에 의해 타입을 바꾸는 방법이다. 표준 빌트인 생성자 함수(String, Number, Boolean)를 new 연산자 없이 호출 빌트인 메서드 사용 암묵적 타입 변환 사용 표준 빌트인 생성자 함수(String, Number, Boolean)를 new 연산자 없이..