JavaScript/DeepDive

[JavaScript] let, const 키워드와 블록 레벨 스코프

JavaScript Deep Dive 3주차 스터디 1. var 키워드 변수의 문제점 es5까지 자바스크립트의 변수선언은 var 키워드만 존재했고, 이는 다양한 문제점을 가지고 있어 이를 개선한 let, const 키워드가 es6부터 등장했다. 변수 중복 선언 허용 var 키워드로 선언한 변수는 중복선언이 가능하다. var x = 1; var x = 100; console.log(x); // 100 var 키워드로 선언한 변수는 중복 선언하면, 초기화문의 유무에 따라 다르게 동작하는데 초기화문이 존재하는 경우 var키워드가 중복되지 않은 것처럼 동작하고 초기화문이 없는 변수 선언문은 무시된다. 함수 레벨 스코프 var 키워드는 오로지 함수의 코드 블록만을 지역 스코프로 인정한다. 따라서 외부에서 var ..

[JavaScript] 스코프

스코프란? 모든 식별자(변수 이름, 함수 이름, 클래스 이름등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조 할 수 있는 유효 범위가 결정되고, 이를 스코프라고 한다. 스코프의 종류 스코프는 지역 스코프와 전역 스코프로 나뉘는데, 지역이란 함수 몸체 내부를 말한다. 전역스코프를 가지는 전역 변수는 어디서든지 참조 할 수 있다. 지역 스코프의 경우 자신의 지역 스코프와 하위 지역 스코프에서 유효하다. 스코프 체인 함수는 중첩되어 계층적인 구조를 가질 수 있고 이에 따라 스코프가 계층적으로 연결된 것을 스코프 체인이라고 한다. 변수를 참조할 때 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하며 선언된 변수를 검색한다. 스코프 체인..

[JavaScript] 객체 리터럴

객체란? 자바스크립트에서 원시값을 제외한 모든 값이 객체이다. 원시값은 변경이 불가한(immutable value) 값이지만 객체는 변경 가능한(mutable value)이다. 객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키(key)와 값(value)로 구성되어있다. 객체 리터럴은 {...} 중괄호 내에 0개 이상의 프로퍼티를 정의한 것이다. 프로퍼티 프로퍼티는 키와 값으로 ( key : value) 형태로 이루어지는데 키는 식별자 네이밍 규칙을 따르지 않을 경우 반드시 따옴표를 사용해야 한다. 객체의 프로퍼티의 키값이 중복 선언되면, 나중에 선언된 것으로 먼저 선언한 프로퍼티를 덮어쓴다. 프로퍼티의 값에는 함수도 올 수 있는데 객체의 프로퍼티에 선언된 함수를 자바스크립트에서 메서드라고 부..

[JavaScript] 타입변환과 단축평가

이 글은 자바스크립트를 저 나름대로 공부하고 작성하는 글로 잘못된 내용이 존재할 수 있습니다. 잘못된 내용을 발견하면 언제든 지적 부탁드립니다. 타입 변환이란? 자바스크립트의 모든 값은 타입이 존재한다. 이를 다른 타입으로 변경하는 것을 타입변환이라고 한다. 타입변환은 명시적 타입변환과 암묵적 타입변환 두 가지로 나뉘는데 명시적 타입변환은 개발자가 의도적으로 타입 변환을 진행하는 것이고, 묵시적 타입변환은 자바스크립트 엔진에 의해 자동적으로 변환되는 것이다. 문자열 타입으로 변환 문자열이 아닌 값을 문자열 타입으로 변경하는 방법 또한 명시적인 방법과 암묵적인 방법으로 나뉜다. 암묵적 변환으로는 템플릿 리터럴에 표현식을 삽입하는 것이 존재한다. `1 + 2 = ${1 + 2}` // -> "1 + 2 = ..

[JavaScript] 원시타입과 객체타입의 차이

이 글은 자바스크립트를 저 나름대로 공부하고 작성하는 글로 잘못된 내용이 존재할 수 있습니다. 잘못된 내용을 발견하면 언제든 지적 부탁드립니다. 원시 타입(Primitive Type) vs 객체 타입(Object Type) 자바스크립트의 데이터 타입은 크게 원시 타입과 객체 타입으로 나눌 수 있다. 원시 타입의 경우 숫자형, 문자열 등등 다양한 타입이 존재하고 객체타입의 경우 단순히 객체 타입이라고 한다. 이를 나누는 근본적인 차이는 어떤게 있을까? 단순히 객체타입의 경우 프로퍼티를 가지고 이는 Key : Value 형태고 원시타입은 값이라고 말할 것이다. 이 또한 맞는 말이지만 가장 큰 차이는 변수를 통해 해당 타입을 호출했을 때 처리가 되는 방식이라고 생각한다. 원시 타입의 경우 변수에 할당을 하게 ..

[JavaScript] 제어문

이 글은 자바스크립트를 저 나름대로 공부하고 작성하는 글로 잘못된 내용이 존재할 수 있습니다. 잘못된 내용을 발견하면 언제든 지적 부탁드립니다. 제어문 (control flow statement) 조건에 따라 코드를 실행하거나 실행하지 않을 때 사용하는것으로 조건문과 반복문을 실행할 때 사용된다. 기본적으로 제어문은 조건식에 오는 표현식을 불리언 타입으로 평가하여 truthy 할 경우 실행하고 falsy 할 경우 실행하지 않는다. 또한 자바스크립트의 제어문은 if ~else if ~ else 와 switch문 for, while 문등 기본적으로 C계열 언어와 동일한 문법으로 제어문을 작성한다. 하지만 차이점도 존재하는데 이는 switch문이다. switch문에는 C계열 언어들은 기본적으로 정수형 타입으로..

[JavaScript] 표현식과 연산자

이 글은 자바스크립트를 저 나름대로 공부하고 작성하는 글로 잘못된 내용이 존재할 수 있습니다. 잘못된 내용을 발견하면 언제든 지적 부탁드립니다. 무언가를 공부할 때 용어를 정확히 이해 하고 있는 것이 좋다. 용어를 정확히 이해 하고 있어야 다른 이와 함께 일이 하거나 할때 상호 오해의 소지가 없고, 또한 어떤 의미인지 스스로 정확히 인지하여 조금 더 깊은 이해를 할 수 있다. 값(value) 값이란 리터럴, 표현식등이 평가되어 생성된 결과이다. 리터럴(literal) 리터럴이란 문자또는 기호로 사용해 값을 생성하는 것으로 숫자 1, 2, 3 문자 'Hello World'등 이 자체로 값을 나타낸다. 문(statement) 문이란 프로그램을 구성하는 기본단위이자 최소 실행단위이다. 표현식(expressio..

[JavaScript] 데이터 타입

이 글은 자바스크립트를 저 나름대로 공부하고 작성하는 글로 잘못된 내용이 존재할 수 있습니다. 잘못된 내용을 발견하면 언제든 지적 부탁드립니다. 데이터 타입 컴퓨터는 근본적으로 0과 1로 이루어진 데이터를 처리한다. 하지만 실제로 모니터에 출력되어 우리의 눈에 보이는 것은 0과 1이 아닌 문자, 숫자, 그림, 사진 등 다양한 모습으로 변환되어 나타난다. 적절한 모습 형태로 컴퓨터가 데이터를 해석하기 위해 필요한 것이 데이터 타입이다. 자바스크립트에는 데이터 타입을 원시타입과 객체타입으로 나눌 수 있는데, 원시 타입으로는 숫자(number), 문자열(string), 불리언(boolean), undefined 타입, null 타입, 심벌(Symbol) 6가지로 나뉘고 이 외의 모든 것은 객체타입으로 처리된다..

[JavaScript] 변수

이 글은 자바스크립트를 저 나름대로 공부하고 작성하는 글로 잘못된 내용이 존재할 수 있습니다. 잘못된 내용을 발견하면 언제든 지적 부탁드립니다. 변수(Variable) 변수란 값을 저장하기 위한 메모리공간 또는 그 이름을 일컫는 말이다. 변수에 해당하는 메모리 공간에 값을 저장하는 것을 할당(대입)이라 하고 저장한 값을 읽는 것을 참조라고 한다. 또한 변수에 값을 최초로 할당하는 것을 초기화라고 한다. JavaScript에서의 변수 자바스크립트는 대표적인 동적타이핑 언어로 변수를 선언할 때 정적타이핑 언어와 달리 타입(c, c++, java에서 int, float, char...등)을 선언하지 않고 변수에 값을 할당하면 자동적인 해당 타입으로 설정된다. 또한 자바스크립트에서는 키워드를 통해 변수를 선언하..