분류 전체보기
-
모던 자바스크립트 Deep Dive - let, const 키워드와 블록 레벨 스코프JavaScript 2021. 9. 16. 19:01
keyword : [ var , let , const , 변수 중복 선언 , 함수 레벨 스코프 , 블록 레벨 스코프 , 호이스팅 , 선언 단계 , 초기화 단계 ] ES5까지 변수 선언 방법은 var 키워드 사용이였다. Var [ 변수 중복 선언 허용 ] var x = 1; var y = 1; ... var x = 100; console.log(x); // 100 var 키워드로 선언한 변수는 초기화문 유무에 따라 다르게 동작한다. var x = 10; var x ; (초기화문이 존재하지 않음 => 무시) console.log(x); // 10; [ 함수 레벨 스코프 ] var 키워드로 생성한 변수는 함수 코드 블록만 지역 스코프로 인정한다. 즉, 함수 외부에서 var 키워드로 선언한 변수는 전역 변수가 ..
-
모던 자바스크립트 Deep Dive - 전역 변수의 문제점JavaScript 2021. 9. 16. 19:01
keyword = [ 호이스팅 , 전역 변수 , 메모리 리소스 , 네임스페이스 , 모듈 패턴 ] 전역 변수의 무분별한 사용은 위험하다. => 전역 변수의 생명주기는 애플리케이션의 생명주기와 동일하다. => 전역 변수는 메모리 공간을 점유하게 되기 때문에 위험하다. 함수 내부에서 선언한 변수는 함수가 호출된 직후에 함수 몸체의 코드가 한 줄씩 순차적으로 실행되기 이전에 자바스크립트 엔진에 의해 먼저 실행된다. 결국 호이스팅은 스코프 단위로 동작한다. 전역 변수의 문제점 [ 암묵적 결합 ] 모든 코드가 전역 변수를 참조하고 변경할 수 있는 암묵적 결합을 허용한다. 코드의 가독성이 나빠진다. 의도치 않게 상태가 변경될 수 있는 위험이 존재 한다. [ 긴 생명 주기 ] 생명 주기가 길면 메모리 리소스를 오랜 기..
-
모던 자바스크립트 Deep Dive - 스코프JavaScript 2021. 9. 16. 19:00
keyword = [ 스코프 , 스코프 체인 , 렉시컬 스코프 ] 스코프 : 식별자가 선언된 위치에 의해 다른 코드가 식별자를 참조할 수 있는 유효 범위 let x = 'global'; function foo(){ let x = 'local'; console.log(x); // 'local' } foo(); console.log(x); // 'global' x 변수는 foo 함수 내부와 foo 함수 외부에 존재한다. 자바스크립트 엔진은 스코프를 통해 이름이 같은 두 개의 변수 중 어떤 변수를 참조할지 결정한다. 이것을 식별자 결정 이라 한다. 즉, 스코프는 식별자를 검색할 때 사용하는 규칙 이다. 위 코드를 보면 코드의 가장 바깥 영역에 선언된 x 변수는 어디서든 참조할 수 있다. 하지만, foo 함수 ..
-
모던 자바스크립트 Deep Dive - 함수JavaScript 2021. 9. 16. 19:00
keyword : [ 함수 , 식별자 , 함수 선언문, 함수 표현식 , 순수함수 , 부수 효과, 함수형 프로그래밍 ] 함수 : 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의 한 객체 함수 정의 // 함수 선언문 function add( x , y ){ return x + y ; } // 함수 리터럴 let f = function add( x , y ){ return x + y ; }; // Function 생성자 함수 let add = new Function('x','y','return x + y'); // 화살표 함수 let add = ( x , y ) => x + y ; 함수 선언문 함수 선언문은 표현식이 아닌 문이다. function ( x , y ){ return x..
-
모던 자바스크립트 Deep Dive - 원시 값과 객체의 비교JavaScript 2021. 9. 16. 19:00
원시 타입 = 변경 불가능 객체 타입 = 변경 가능 원시 타입 숫자 문자열 불리언 null undefined 심벌 객체 타입 객체 타입 원시 값을 변수에 할당하면 변수를 선언할 때 확보한 메모리 공간에는 실제 값이 저장 된다. 참조 값을 변수에 할당하면 변수를 선언할 때 확보한 메모리 공간에는 참조 값이 저장 된다. 원시 값 복사 = 값에 의한 전달 참조 값 복사 = 참조에 의한 전달 원시 값 원시 타입의 값은 변경 불가능 하다. 왜 ? 변수 값이 변경될 때 발생하는 로직을 생각해보면 변수에 새로운 값을 재 할당 하기 위해서는 기존 확보한 메모리 공간에 존재하는 값을 바꾸는게 아니라, 새로운 메모리 공간을 확보한 후 그 공간에 새로운 값을 저장하고 변수는 그 메모리 주소를 나타내는 것 뿐이다. 따라서, ..
-
모던 자바스크립트 Deep Dive - 객체 리터럴JavaScript 2021. 9. 16. 19:00
keyword = [ 객체 , 프로퍼티 , 메서드 , 객체 리터럴 ] 자바스크립트를 구성하는 거의 '모든 것'은 객체 이다. 따라서, 자바스크립트는 객체 기반의 프로그래밍 언어이다. 객체 타입은 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조 이다. 객체는 0개 이상의 프로퍼티로 구성된 집합이다. 프로퍼티는 키와 값으로 구성 된다. let person = { // 키 : 값 name : 'Kim', age : 25, } 객체 리터럴에 의한 객체 생성 객체 생성 방법 중 가장 일반적이고 간단한 방법 => 중괄호 내부에 0개 이상의 프로퍼티를 정의한다. let person = { name : 'Kim', sayHello : function(){ console.log(`Hello! My name i..
-
모던 자바스크립트 Deep Dive - 타입 변환과 단축 평가JavaScript 2021. 9. 16. 19:00
keyword : [ 타입 변환, 암묵적 타입 변환 , 명시적 타입 변환 , 옵셔널 체이닝 , null 병합 연산자 , 단축 평가] 타입 변환 개발자 의도적 타입 변환 = 명시적 타입 변환 = 타입 캐스팅 elt x = 10; let str = x.toString(); console.log(typeof str , str); // string 10 console.log(typeof x , x); // number 10 개발자 의도와 상관 없는 타입 변환 = 암묵적 타입 변환 = 타입 강제 변환 let x = 10; let str = x + ''; console.log(typeof str , str) // string 10 console.log(typeof x , x) // number 10 타입 변환은 기..
-
모던 자바스크립트 Deep Dive - 삼항 조건 연산자JavaScript 2021. 9. 16. 18:58
일반 조건문 let result; if(score >= 60){ result = 'pass' }else{ result = 'fail' } 조건식 ? 조건식이 true일 때 반환할 값 : 조건식리 false일 때 반환할 값 let result = scole >= 60 ? 'pass' : 'fail' ; 삼항 조건 연산자 표현식과 if문과의 차이점 [ 1 ] 삼항 조건 연산자는 값처럼 사용할 수 있다. let x = 10; // 불가능 let result = if( x % 2 ) { result = '홀수'} else { result = '짝수' }; // 가능 let result = x % 2 ? '홀수' : '짝수' ; [ 2 ] 삼항 조건 연산자는 조건에 따라 수행해야 할 문이 하나이어야 한다. let..