분류 전체보기 (6) 썸네일형 리스트형 [JavaScript] This...This...This!! 다른 언어에선 쉬울 수 있으나, JavaScript에서의 this란 정말 정말 난해하다. this의 본 의미는 "자기를 참조하는 변수" 이다. 생성자 함수를 예로 들어보면, 생성자 함수를 정의하는 시점에서는 아직 인스턴스를 생성하기 전이기 때문에 자신이 속한 객체나 생성할 인스턴스를 가리키는 식별자가 필요하다. 이를 위해서 존재하는 것이 this이다. 즉, this는 자신이 속한 객체나 자신이 생성할 인스턴스의 프로퍼티 혹은 메서드를 참조할 수 있다. 그렇다면 this는 어떤식으로 동작할까? 기본적으로 JavaScript의 this는 함수 호출 방식에 의해서 동적으로 결정된다. 식별자와 값을 연결하는 과정을 binding이라고 하는 데, JavaScript에서는 크게 4가지 방식이 존재한다. const .. [JavaScript] 프로토타입 체인 자바스크립트는 프로토타입 기반 객체 지향 언어이다. 자바스크립트의 모든 객체는 자신의 부모 역할을 하는 객체와 연결이 되어 있는데, 이러한 부모 객체를 프로토타입 객체(이하 프로토타입)라고 부른다. const student = { name: 'Lee', score: 90 }; // student에는 hasOwnProperty 메소드가 없지만 아래 구문은 동작한다. console.log(student.hasOwnProperty('name')); // true console.dir(student); /** _proto__: constructor: ƒ Object() hasOwnProperty: ƒ hasOwnProperty() isPrototypeOf: ƒ isPrototypeOf() propertyIsEn.. [JavaScript] 객체의 변경을 방지하는 방법 자바스크립트에서 객체는 변경 가능한 값이므로 재할당없이 직접적으로 변경이 가능하다. 이를 방지하기 위한 많은 방법이 있는데, 불변성을 확립해주는 라이브러리를 사용한다던지, Object 메서드를 이용하여 객체를 복사하여 변경하는 방법, 그리고 객체의 변경을 애초에 방지하는 방법이 있다. 오늘은 얉은 복사를 통해 객체의 변경을 방지하는 방법을 알아보고자 한다. 1. Object.preventExtensions() - 객체의 확장을 금지하는 메서드. const animals = { name: "Lion", age: 12 }; console.log(Object.isExtensible(animals)); // 확장이 가능한 지 묻는 Object 메서드 Object.preventExtensions(animals);.. [JavaScript] JavaScript에서의 스코프 Scope는 모든 프로그래밍 언어에서 기본이 되는 아주 중요한 개념이다. JavaScript에서는 다양한 스코프 개념이 있고 다른 언어와 차별되는 스코프 특징이 있기 때문에 주의가 필요하다. function add(x, y) { console.log(x, y); // 1 return x + y; }; add(5, 5); console.log(x, y); // 2 위의 코드를 보면 어떤 결과가 예상되는가? 1번의 경우에는 5, 5가 나오겠지만 2번의 경우에는 참조 에러가 발생한다. 함수의 매개변수의 경우에는 함수 몸체 내부에서만 참조가 가능하다. 그렇기 때문에 함수 블록 바깥에서 매개변수를 참조하게 되면 참조 에러가 발생한다. 변수의 경우 변수는 자신이 선언된 위치에 의해서 스코프가 결정된다. 사실 모든 .. [JavaScript] '?' 옵셔널 체이닝은 무엇일까? * 구식 브라우저에는 폴리필이 필요합니다. Optional Chaining은 ES2020에서 등장한 새로운 연산자로서 '?.'의 형태로 사용하며 체인으로 이루어진 각 참조가 유효한지 명시적으로 검증하지 않고 연결된 객체 체인 내에 깊숙히 위치한 속성 값을 읽을 수 있는 연산자이다. 체이닝 연산자와 비슷하게 동작하지만, 만약의 참조가 null 혹은 undefined여도 에러식을 뱉지 않고 undefined값을 리턴한다. 함수 호출시에도 마찬가지로 값이 없다면 undefined를 리턴한다. Optional chaining을 사용하므로써 문법의 가독성이 올라가고 한결 간결한 표현식으로 작성할 수 있게 된다. 속성값이 존재한다는 확실한 보증이 없을 경우 그 객체를 탐색하는 데 도움을 준다. const anima.. [JavaScript] 변수란 무엇일까? 1. 메모리 컴퓨터는 똑똑해 보이지만 한편으로는 바보같기 때문에 사람이 쉽게 인식하는 표현을 컴퓨터는 바로 이해할 수 없다. 10 + 20 사람은 이 표현식을 10에 20을 더하니깐 결과는 30이겠구나라고 생각할 수 있지만, 컴퓨터는 저 표현식에 대한 해석이 필요하다. 10과 20이 무엇인지도 알아야 하고 +기호가 무엇을 의미하는 지도 나타내어야 한다. 그래서 컴퓨터는 CPU를 사용하여 이를 연산하고 메모리를 활용하여 이를 기억한다. 컴퓨터는 모든 데이터를 2진수로 저장하기 때문에 메모리에 저장되는 모든 데이터는 2진수로 저장된다. 하지만 이 연산된 결과값을 가져오기 위해서는 주소값이 필요한데 코드가 실행될 때마다 주소값이 변경된다. 따라서 주소에 직접 접근하는 방법은 옳은 방법이 아니다. 따라서 프로그.. 이전 1 다음
