개발자 연쨘

strict mode란? 🐰 아래 예제의 실행 결과는 무엇일지 생각해보자function foo() { x = 10;}foo();console.log(x); // ? foo 함수 내에서 선언하지 않은 x 변수에 값10을 할당했다.이때 x 변수를 찾아야 x에 값을 할당할 수 있기 때문에자바스크립트 엔진은 x 변수가어디에서 선언되었는지스코프 체인을 통해 검색하기 시작한다. 자바스크립트 엔진은 먼저 foo 함수의 스코프에서 x 변수의 선언을 검색한다.foo 함수의 스코프에는 x 변수의 선언이 없으므로 검색에 실패할것이고,자바스크립트 엔진은 x 변수를 검색하기 위해foo 함수 컨텍스트의 상위스코프(위 예제의 경우 전역 스코프)에서 x 변수의 선언을 검색한다.전역 스코프에도 x 변수의 선언이 존재하지 않기 때문..

일급 객체 🐰 다음과 같은 조건을 만족하는 객체를 일급 객체라 한다. 무명의 리털럴로 생성할 수 있다. 즉, 런타임에 생성 가능 변수나 자료구조(객체, 배열 등)에 저장할 수 있다. 함수의 매개변수에 전달할 수 있다. 함수의 반환값으로 사용할 수 있다. 자바스크립트의 함수는 다음 예제와 같이 위의 조건을 모두 만족하므로 일급 객체! // 1. 함수는 무명의 리터럴로 생성할 수 있다. // 2. 함수는 변수에 저장할 수 있다. // 런타임(할당 단계)에 함수 리터럴이 평가되어 함수 객체가 생성되고 변수에 할당된다. const increase = function (num) { return ++num; }; const decrease = function (num) { return --num; }; // 2. ..

Object 생성자 함수 🐰 new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다. 빈 객체를 생성한 이후 프로퍼티 또는 메서드를 추가하여 객체를 완성 할 수 있다. // 빈 객체의 생성 const person = new Object(); //const person = {}; //↑ 똑같음 // 프로퍼티 추가 person.name = 'Lee'; person.sayHello = function () { console.log('Hi! My name is ' + this.name); }; console.log(person); // {name: "Lee", sayHello: ƒ} person.sayHello(); // Hi! My name is Lee 생성자 함수란 new 연산..

내부 슬롯과 내부 메서드 🐰 프로퍼티 어트리뷰트를 이해하기 위해 먼저 내부 슬롯과 내부 메서드의 개념에 대해 알아보자! 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드이다. ECMAScript 사양에 등장하는 이중 대괄호 ([[...]])로 감싼 이름들이 내부 슬롯과 내부 메서드이다. 내부 슬롯과 내부 메서드는 ECAScript 사양에 정의된 대로 구현되어 자바스크립트 엔진에서 실제로 동작 하지만 개발자가 접근할 수 있도록 외부로 공개된 객체의 프로퍼티는 ❌! 즉, 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 내부 로직이므로 원칙적으로 자바스크립트는 내부 슬롯과 내부 메서드에 직접적으로 접근하거나 호출할 수 ..

var 키워드로 선언한 변수의 문제점 🐰 ES5까지 변수를 선언할 수 있는 유일한 방법은 var 키워드를 사용하는 것. var 키워드로 선언된 변수는 주의를 기울이지 않으면 심각한 문제를 발생시킬 수 있다. 변수 중복 선언 허용 var 키워드로 선언한 변수는 중복 선언이 가능 var x = 1; var y = 1; // var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용한다. // 초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작한다. var x = 100; // 초기화문이 없는 변수 선언문은 무시된다. var y; console.log(x); // 100 console.log(y); // 1 위 예제의 var 키워드로 선언한 x 변수와 y 변수는 ..

🐰 스코프란? 🐰 스코프는 자바스크립트를 포함한 모든 프로그래밍 언어의 기본적이며 중요한 개념이다. 특히 자바스크립트의 스코프는 다른 언어의 스코프와 구별되는 특징이 있어서 주의가 필요하다. 그리고 var키워드로 선언한 변수와 let또는 const 키워드로 선언한 변수의 스코프도 다르게 동작한다. 즉, 스코프는 변수 그리고 함수와 깊은 관련이 있다는뜻! 함수의 매개변수는 함수 몸체 내부에서만 참조할 수 있고 함수 몸체 외부에서는 참조할 수 없다. 이것은 매개변수를 참조할 수 있는 유효범위, 즉 매개변수의 스코프가 함수 몸체 내부로 한정되기 때문이다!! function add(x, y) { // 매개변수는 함수 몸체 내부에서만 참조할 수 있다. // 즉, 매개변수의 스코프(유효범위)는 함수 몸체 내부다. ..

🐰 함수란? 🐰-발표 프로그래밍 언어의 함수는 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다. 프로그래밍 언어의 함수는 입력을 받아서 출력을 내보낸다. 매개변수 👉🏻 함수 내부로 입력을 전달받는 변수 인수 👉🏻 입력 출력 👉🏻 반환값 함수는 값이며, 여러 개 존재할 수 있으므로 특정 함수를 구별하기 위해 식별자인 함수 이름을 사용할 수 있다. 함수는 함수 정의를 통해 생성한다. 자바스크립트의 함수는 함수 선언문, 함수 표현식, Function 생성자 함수로 함수를 정의 할 수 있다. 아래는 함수 선언문을 통해 함수를 정의한 예다. // 함수 정의 function add(x, y) { return x + y; } 함수 정의만으로 함수가 실행되는건 ❌ ! 미리 정의된 ..

🐰 원시 값과 객체의 비교 🐰 자바스크립트는 크게 원시 타입과 객체 타입으로 구분할 수 있다. 원시 타입의 값, 즉 원시 값은 변경 불가능한 값이다. 이에 비해 객체(참조) 타입의 값, 즉 객체는 변경 가능한 값이다. 원시 값을 변수에 할당하면 변수에는 실제 값이 저장된다. 이에 비해 객체를 변수에 할당하면 변수에는 참조 값이 저장된다. 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달. (= 값에의한 전달) 이에 비해 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달 (= 참조에 의한 전달) 🐰 원시 값 🐰 변경 불가능한 값 원시 값은 변경 불가능한 값이다. 즉, 한번 생성된 원시 값은 읽기 전용 값으로서 변경 ❌ 여기서 변경 불가능하다는것은 변수가..

🐰 객체란? 🐰 자바스크립트는 객체 기반의 프로그래밍 언어이며, 자바스크립트를 구성하는 거의 "모든 것"이 객체다. 원시 값을 제외한 나머지 값(함수, 배열, 정구 표현식 등)은 모두 객체다. 원시 타입은 단 하나의 값만 나타내지만 객체 타입은 다양한 타입의 값 (원시 값 또는 다른 객체)을 하나의 단위로 구성한 복합적인 자료구조다. 또한 원시 타입의 값, 즉 원시 값은 변경 불가능 한 값이지만 객체 타입의 값, 즉 객체는 변경 가능한 값이다. let person ={ name : 'Lee', //프로퍼티 age : 20 //프로퍼티 }; //여기서 name과 age는 프토퍼티 키 //'Lee'와 20은 프로퍼티 값이라고 부른다. 자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있다. 자..

🐰 타입 변환 🐰 자바스크립트의 모든 값은 타입이 있다. 개발자가 의도적으로 값의 타입을 변환 -> 명시적 타입 변환 (타입 캐스팅) let x = 10; // 명시적 타입 변환 // 숫자를 문자열로 타입 캐스팅한다. let str = x.toString(); //toString메서드 사용해서 문자로 타입 변환 console.log(typeof str, str); // string 10 // x 변수의 값이 변경된 것은 아니다. console.log(typeof x, x); // number 10 명시적 타입 변환 : 타입을 변경하겠다는 개발자의 의지가 코드에 명백히 드러남. 개발자 의도와 상관없이 자바스크립트 엔진에 의해 타입 변환 -> 암묵적 타입변환 (타입 강제 변환) let x = 10; // 암..