JavaScript/JS 기초 (15) 썸네일형 리스트형 Javascript 클래스 Javascript 클래스 ES6부터 도입된 클래스는 기존 프로토타입 기반 객체지향 프로그래밍을 좀 더 클래스 기반 객체지향 프로그래밍 언어와 흡사하게 객체를 생성할 수 있도록 메커니즘을 제공해주는 것이다. 클래스 // 클래스 선언문 class Person {} // 익명 클래스 표현식 const Person = class {}; // 기명 클래스 표현식 const Person = class MyClass {}; 클래스를 표현식으로 정의할 수 있다는 건 클래스가 일급 객체라는 것이다. 무명의 리터럴 생성할 수 있음 변수나 자료구조(객체, 배열 등)에 저장 가능 함수의 매개변수로 전달 함수의 반환 값 사용 클래스 호이스팅 클래스는 함수로 평가된다. class Person{} console.log(typeo.. Javascript this와 apply, call, bind 메서드 Javascript this와 apply, call, bind 메서드 this -상태를 나타내는 프로퍼티, 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조 => 객체 -메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 변경하는데 사용되기도 함 -메서드가 자신이 속한 객체의 프로퍼티를 참조하려면, 자신이 속한 객체를 가리키는 식별자를 참조 할수 있어야 한다. const circle = { radius: 5; getDiameter(){ return 2 * circle.radius; } }; console.log(circle.getDiameter)); // 10 여기서 getDiameter는 Circle 객체의 radius(프로퍼티)를 변경한다. 자기 자신이 속한 객체를 참조하는 방식이.. 함수와 일급객체 함수와 일급 객체 일급 객체 -무명의 리터럴로 생성할 수 있다. 즉 런타임에 생성이 가능하다. -변수나 자료구조(객체, 배열)에 저장할 수 있다. -함수의 매개변수에 전달할 수 있다. -함수의 반환값으로 사용할 수 있다. 해당 조건을 만족하는 객체를 일급 객체라고 부른다. 자바스크립트에서 사용하는 함수는 위의 모든 조건을 만족하에 일급 객체라고 할 수 있다. // 1. 무명의 리터럴로 생성 // 2. 변수에 저장 가능 // 런타임에 함수 리터럴이 평가되어 객체 생성, 변수에 할당 const increase = function(num) { return ++num; }; const decrease = function(num) { return --num; }; // 2. 객체에 저장 const predicat.. JavaScript 원시 타입과 객체 타입, 원시 값과 객체 원시 타입과 객체 타입, 원시 값과 객체 자바스크립트는 7가지 데이터 타입을 제공한다. 데이터 타입은 숫자, 문자열, 불리언, null, undefined, 심벌, 객체 타입이 있다. 이걸 크게 분류하면 원시 타입과 객체 타입으로 나눌 수 있다. 이렇게 나누는 이유는 많이 다르기 때문이겠지? -원시 타입의 값은 변경 불가능한 값immutable value인데 객체 타입은 변경 가능한 값이다.mutable value -원시 값을 변수에 할당하면 변수에는 실제 값이 저장된다. 이는 메모리에 실제 값이 저장된다는 의미이다. 하지만 객체는 변수에 값을 할당하면 변수에 참조 값이 저장된다. 이는 메모리에 참조 값이 저장된다는 말이다. -원시 값을 갖고 있는 변수를 다른 변수에 할당하면 원본의 값이 복사되어서 전달.. JavaScript 변수의 생명 주기, 전역 변수의 문제점 변수의 생명 주기 변수는 생성되고 소멸 되는 생명 주기life cycle가 있다. 변수는 자신이 선언된 위치에서 생성되고 소멸한다. 전역 변수의 생명 주기는 애플리케이션의 생명 주기와 같다. 하지만 함수 내부에서 선언된 지역 변수는 함수가 호출될 때 생성, 종료 될 때 소멸한다. 지역 변수의 생명 주기 function foo() { // 변수 x 생성 var x = 'local'; // 변수 x에 local값 할당 console.log(x); // local return x; // 변수 x 소멸 } foo(); console.log(x); // ReferenceError: x is not defined 지역 변수 x는 foo가 호출되기 이전에는 생성되지 않는다 변수 선언문은 function.. JavaScript 객체 타입(Object) 객체 타입(Object) 객체란 뭘까? -객체는 0개 이상의 프로퍼티로 구성된 집합이다. -여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입이라고 할 수 있다. var person = { name: 'Lee', age: 20 } 위의 코드에서 name: 'Lee'와 age: 20을 각각 프로퍼티라고 볼 수 있으며 name과 age를 프로퍼티 키, 'Lee'와 20을 프로퍼티 값으로 볼 수 있다. 자바스크립트는 객체 기반의 프로그래밍 언어이다. 자바스크립트에서 원시 값(숫자 타입, 문자열 타입, 불리언 타입, undefined 타입, null 타입, symbol 타입)을 제외한 나머지 값은 모두 객체라고 본다. 원시 타입은 변경 불가능 한 값immu.. JavaScript 옵셔널 체이닝 연산자와 null 병합 연산자 옵셔널 체이닝 연산자와 null 병합 연산자 단축 평가와 관련하여 ES11(ECMAScript2020)에서 추가 된 연산자가 있다. 단축 연산을 좀 더 꼼꼼하게 사용할 수 있도록 해준다. 만약 실제 코드에 쓴다면 무척이나 유용하긴 할 듯. 실제로 써본적도 없고, 사실 있는 줄도 몰랐다;; 다른 사람이 짠 코드를 이해해야 하는 경우가 생길 수도 있으니 학습해둔다. 손에 익게 자주 써봐야겠지만 아직까지 이 코드로 다른 개발자와 얼마나 잘 소통될진 확신할 수 없다(...) 옵셔널 체이닝 연산자 옵셔널 체이닝 연산자 연산자 ?.로 사용한다. ?.는 좌항의 피연산자가 null 또는 undefined인 경우, undefined를 반환하고 그렇지 않으면 우항의 프로퍼티를 참조한다. 어렵지 않다. 예시를 보자. let.. JavaScript 단축 평가 단축 평가 단축평가란, 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것이다. let a = 4; let b = 2; if( a > 3 || b > 5 || c > 5 || d > 2 || ...) { console.log('hi'); }다음과 같은 조건식이 있다고 해보자. 논리합(||)은 둘 중 하나만 맞으면 true를 반환한다. 자바스크립트 엔진은 조건을 먼저 본다. 먼저 (a > 3) 봤더니 true를 반환하고 조건이 성립된다. 그러면 뒤에 나오는 (b > 5)가 true이든 false이든 log를 찍는다. 그렇기에 자바스크립트 엔진은 뒤의 조건을 true인지 false인지 아예 검증해보지도 않는다. 검증 과정이 단축되었다. 논리 연산자를 사용한 단축 평가 논리곱(&&, and.. 이전 1 2 다음
