자바스크립트 (13) 썸네일형 리스트형 [JS] 모던 자바스크립트 - 12. 생성자 함수 생성자 함수 - new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수 - 하나의 객체만을 생성하는 객체 리터럴 방식과 달리 생성자 함수는 동일한 프로퍼티 구조를 갖는 객체를 여러 개 생성 가능 - 일반 함수와 동일한 방법으로 함수를 정의하고 호출 시 new 연산자와 함께 호출하면 생성자 함수로 동작 - 생성자 함수는 일반적으로 파스칼 케이스로 명명 - new 연산자와 함께 호출하지 않으면 일반 함수로 동작 - 생성자 함수 내부의 this는 생성자 함수가 생성할 인스턴스를 가리킴 생성자 함수의 인스턴스 생성 과정 1. 인스턴스 생성과 this 바인딩 - 런타임 이전에 실행 - 암묵적으로 빈 객체 생성 → 완성되진 않았지만 생성자 함수의 인스턴스 - 인스턴스는 this에 바인딩 2. 인스턴스 초기화.. [JS] 모던 자바스크립트 - 11. 프로퍼티 어트리뷰트 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체 프로퍼티 어트리뷰트 - 프로퍼티의 상태를 나타내는 것 - 프로퍼티의 상태는 프로퍼티의 값(value), 값의 갱신 가능 여부(writable), 열거 가능 여부(enumerable), 재정의 가능 여부(configurable)을 말한다 - 자바스크립트 엔진이 프로퍼티를 생성할 때 프로퍼티 어트리뷰트를 기본값으로 자동 정의함 - 자바스크립트 엔진이 관리하는 내부슬롯이므로 직접 접근 불가능 프로퍼티 디스크립터 객체 - Object.getOwnPropertyDescriptor 메서드, Object.getOwnPropertyDescriptors 메서드로 간접적으로 프로퍼티 어트리뷰트를 확인 가능함 - 위 메서드는 프로퍼티 어트리뷰트 정보를 제공하는 프로퍼티 디스크립.. [JS] 모던 자바스크립트 - 10. var, let, const var - ES5까지 변수를 선언할 수 있는 유일한 방법이었음 - 중복 선언이 가능, 중복 선언 시 변수 값을 재할당하며, 초기화문이 없는 경우에는 무시된다 var x = 1; var y = 1; // 초기화문이 있는 선언문은 값 재할당. var x = 100; // 초기화문이 없는 선언문은 무시. var y; console.log(x); // 100; console.log(y); // 1; - 함수 코드 블록만을 지역 스코프로 인정, 함수 외부에서 var 키워드로 선언한 변수는 코드 블럭 내에 선언해도 모두 전역 변수 var x = 1; if(true){ // 여기서 선언한 변수는 함수 내부가 아니기 때문에 전역변수 var x = 10; } console.log(x); // 10 - 변수 호이스팅에 의.. [JS] 모던 자바스크립트 - 09. 전역 변수의 문제점 변수의 생명 주기 지역 변수 - 함수의 생명 주기와 일치 - 함수 내부의 변수 선언은 함수가 호출된 직후에 함수 몸체의 코드가 한 줄씩 순차적으로 실행되기 이전에 자바스크립트 엔진에 의해 먼저 실행 (호이스팅, 스코프 단위로 동작) 전역 변수 - 전역 객체의 생명 주기와 일치 - var 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티 - 브라우저 환경에서의 window 전역 객체는 웹페이지를 닫기 전까지 유효 전역 객체 : 코드가 실행되기 이전 단계에 자바스크립트 엔진에 의해 어떤 객체보다도 먼저 생성되는 특수한 객체. 브라우저에서는 window, Node.js에서는 global 객체를 의미. 표준 빌트인 객체(Object, String, Number, Function, Array...)와 환경에 따른.. [JS] 모던 자바스크립트 - 08. 스코프(전역 변수와 지역 변수, 스코프 체인, 렉시컬 스코프) 스코프 - 식별자가 유효한 범위 - 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙 - 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정 - 자바스크립트 엔진은 스코프를 통해 어떤 변수를 참조해야 할 것인지 결정 - 식별자 이름이 같아도 스코프가 다르다면 별개의 변수 - var로 선언된 변수는 같은 스코프 내에서 중복 선언 허용, 중복 선언 시 변수값 재할당 전역 변수 - 전역(코드의 가장 바깥 영역)에서 선언된 변수 - 어디서든지 참조할 수 있음 ※ 참고 - 전역 변수의 문제점 [JS] 자바스크립트 개념 - 09. 전역 변수의 문제점 변수의 생명 주기 지역 변수 - 함수의 생명 주기와 일치 - 함수 내부.. [JS] 모던 자바스크립트 - 07. 함수 함수 - 일련의 과정을 문(statement)로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것 - 함수 내부로 입력을 전달받는 변수는 매개변수(parameter), 입력을 인수(argument), 출력을 반환값(return value)이라 한다 - 함수는 객체타입의 값, 함수가 객체라는 사실은 다른 프로그래밍 언어와 구별되는 자바스크립트의 중요한 특징 - 함수는 일급객체, 값의 성질을 갖는 객체다 - 함수 이름은 함수 몸체 내에서만 참조할 수 있는 식별자 - 변수는 선언한다고 하지만, 함수는 정의한다고 한다 - 일반 객체는 호출할 수 없지만 함수는 호출 가능 함수 정의 함수 선언문 function add(x,y){ return x + y ; } - 함수 이름을 생략할 수 없다 - 표현식이 .. [JS] 모던 자바스크립트 - 06. 객체 리터럴 객체 - 자바스크립트는 프로토타입 기반 객체지향 언어로, 다양한 객체 생성방법을 지원(객체 리터럴, Object 생성자 함수, 생성자 함수, Object.create 메서드, 클래스(ES6)) - 원시 값을 제외한 나머지값은 모두 객체(함수, 배열, 정규 표현식 등) - 원시 값은 변경 불가능한 값(immutable value)이지만 객체는 변경 가능한 값(mutable value) - 함수는 일급객체이므로 값으로 취급할 수 있음 - 객체는 프로퍼티와 메서드로 구성된 집합체 - 인스턴스란 클래스에 의해 생성되어 메모리에 저장된 실체 - 객체 리터럴은 중괄호({...}) 내에 0개 이상의 프로퍼티를 정의 - 변수에 할당되는 시점에 객체 리터럴을 해석해 객체를 생성 - 객체 리터럴의 중괄호는 코드 블록을 의.. [JS] 모던 자바스크립트 - 05. 타입 변환과 단축 평가 타입 변환 - 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성. 기존 원시 값을 직접 변경 X 암묵적 타입 변환 - 개발자의 의도와는 상관 없이 자바스크립트 엔진에 의해 타입이 변환되는 것, 타입 강제 변환(type coercion)이라고도 함 - 자바스크립트 엔진은 표현식을 에러 없이 평가하기 위해 암묵적 타입 변환으로 새로운 타입의 값을 만들어 단 한 번만 사용 후 버림 1. 문자열 타입 변환 - 문자열 연결 연산자 사용 시 피연산자 중 문자열이 아닌 타입이 있을 경우, 문자열 타입으로 암묵적 타입 변한 - ES6에 도입된 템플릿 리터럴의 표현식 삽입은 표현식의 평가 결과를 문자열 타입으로 암묵적 타입 변환 2. 숫자 타입 변환 - 산술 연산자 사용 시 피연산자 중 숫자 타입이 아닌 경우,.. [JS] 모던 자바스크립트 - 04. 제어문 제어문은 조건에 따라 코드 블록을 실행하거나 반복 실행할 때 사용 블록문 - 0개 이상의 문을 중괄호로 묶은 것 - 코드 블록 또는 블록이라고 부름 - 자바스크립트는 블록문을 하나의 실행 단위로 취급 - 문의 끝에는 세미콜론을 붙이는 것이 일반적이지만, 블록문은 자체의 종결성을 갖기 때문에 세미콜론을 붙이지 않는다 조건문 - 평가 결과에 따라 코드 블록의 실행을 결정 if문 - 조건식은 불리언 값으로 평가되어야 함. 아닌 경우엔 불리언 값으로 강제 변환 - 코드 블록 내의 문이 하나라면 중괄호 생략 가능 var num = 2; var kind; if(num>0){ kind = '양수'; } if(num>0) kind = .. [JS] 모던 자바스크립트 - 03. 연산자 ※ 부수효과 : 피연산자의 값을 바꾸는 것. 산술 연산자 - 산술 연산이 불가능한 경우, NaN을 반환 - 산술 연산하여 숫자 값을 만듦 1. 이항 산술 연산자 - 2개의 피연산자를 산술 연산하여 숫자 값을 만든다 - + (덧셈), - (뺄셈), * (곱셈), / (나눗셈), % (나머지) - 부수 효과 X 2. 단항 산술 연산자 - 1개의 피연산자를 산술 연산하여 숫자 값을 만든다 - +,- 단항 연산자는 부수효과 X - 증가/감소(++,- - 연산자)는 부수효과 O - 증가/감소 연산자는 위치에 따라 의미가 달라짐 전위 증가/감소 연산자(prefix increment/decrement operator) : 피.. 이전 1 2 다음 목록 더보기
