1회차 면접 스터디 후, 배운 것을 설명하는 것이 쉽지 않은 일이라는 것을 깨달았다. 그동안 자바스크립트로 웹 서비스 개발 프로젝트도 진행하며 나름 잘 다룰 수 있다고 생각했지만 최근 들어 자바스크립트 이론 및 문법 공부를 다시 하면서 자바스크립트가 어떻게 동작하는 지에 대한 지식은 많이 모자랐고 배울 것이 아직도 많다는 것을 느끼게 되었다.
2회차 부터는 일주일의 시간이 주어지니, 범위를 넓혀 2개 주제에서 5개로 하였다.
데이터 타입
- 데이터 타입의 종류는 어떤 것들이 있나?
자바스크립트의 데이터 타입에는 크게 원시 타입과 객체 타입 (레퍼런스 타입)이 있다.
원시 타입
- 숫자 타입 : 자바스크립트에서는 정수 타입과 실수 타입으로 구분되어 있지 않은 number 타입이 존재한다. 숫자타입은 기본적으로 실수 타입이다.
- 문자열 타입: 여러 문자로 이루어진 문자열의 타입이다. 홀따옴표, 쌍따옴표, 백틱으로 표현할 수 있다.
- 불리언 타입: 논리형 타입으로 true(참) false(거짓)이 있다.
- undefined 타입: 아무 값도 할당되지 않은 변수, 선언만 된 변수에 암묵적으로 할당되는 값이며 말 그대로 타입이 정의 되지 않은 값이다.
- null 타입: 값이 없다는 것을 의도적으로 명시할 때 사용하는 값인 null의 타입이다.
- symbol 타입: ES6에서 추가된 새로운 타입으로 원시 타입이다.
객체 타입
기본적으로 위의 원시 타입을 제외한 객체, 함수, 배열은 객체 타입을 갖는다. 자바스크립트에서 함수, 배열은 객체이다.
심벌 타입이란?
심벌 타입은 변경이 불가능한 원시타입이다. 다른 값과 중복되지 않은 유일무의한 값으로 주로 이름이 충돌할 위험이 없는 객체의 유일한 프로퍼티 키를 만들기 위해 활용된다.
데이터 타입이 필요한 이유?
-
값을 저장할 때 확보해야 하는 메모리 공간의 크기를 결정하기 위해서
데이터는 메모리에 저장되고 이를 참조해서 사용할 수 있어야 함. 컴퓨터에 주어진 메모리는 한정적이며 특정 데ㅣ터를 저장하려면 메모리의 공간이 얼마나 필요한 지 파악하는 것이 중요하기 때문이다
메모리의 공간에 값을 저장할 때에는 2진수의 형태로 저장되는 데, 데이터 타입은 얼마만큼의 데이터 공간을 확보해야 하는 지 명시해주는 역할을 하는 것이다. -
값을 참조할 때 한번에 읽어 들여야 할 메모리 공간의 크기를 결정해야 하기 위해
변수를 선언 & 초기화 하면서 메모리 공간에 저장이 되면, 해당 변수에 접근할 때 그 값이 저장된 메모리 공간을 찾아간다. 이때 값을 참조한다고 하는데, 참조하기 위해서는 한번에 읽어들여야 할 메모리의 크기를 알아야 함.
각 타입 마다 저장되는 비트 단위가 정해져 있으므로, 각 타입에 맞는 단위가 아니라면 값을 제대로 얻을 수 없다. -
메모리에서 읽어 들인 2진수를 어떻게 해석할 지 결정하기 위해서 이다.
메모리 상에 값은 2진수 형태로 저장된다. 때문에 0과 1로 이루어진 이진수 값을 어떻게 해석하느냐에 따라 값이 달리질 수 있다. 이를 해석하는 방법으로 데이터 타입이 사용된다.
정적 타이핑이란?
C 나 java와 같은 언어에서는 데이터 타입을 명시적으로 지정한다. 이를 정적 타이핑이라고 하며 변수를 선언함과 동시에 타입이 지정된다. 정적 타입 언어의 타입은 이후 변경할 수 없고, 타입에 맞는 값만을 담을 수 있다. 정적으로 타입을 지정한 값에 대한 타입 체크는 컴파일 시점에서 수행된다. 타입이 값과 일치 하지 않다면 에러를 발생시키고 실행을 막는다. 메모리 상의 이진수의 값을 잘못 해석하거나, 메모리 공간의 잘못된 접근, 틀린 크기의 메모리 공간 할당 등의 문제를 막기 위해서 이다.
동적 타이핑이란?
자바스크립트는 정적 타입 언어와 달리, 변수를 선언할 때 타입이 지정되지 않는다. 자바스크립트의 변수는 선언이 아닌 할당되는 값에 따라 타입이 결정된다. 그리고 어떠한 값이 재할당되는 지에 따라 타입은 언제든지 동적으로 변할 수 있다. 이러한 자바스크립트의 타입 지정 특징을 동적 타이핑이라고 하며 이러한 타입 지정 메커니즘을 가진 언어를 동적 타입 언어라고한다. (자바스크립트, 파이썬, php가 이에 해당)
타입변환과 단축 평가
명시적 타입 변환이란?
자바스크립트의 모든 값은 타입이 있고, 값의 타입은 개발자의 의도에 따라 다른 타입으로 재지정 될 수 있다. 이렇게 개발자의 의도에 따라 값의 타입을 변환하는 것을 명시적 타입 변환 혹은 타입 캐스팅이라고 한다.
명시적 타입 변환 함수의 예?
문자열이 아닌 값 => 문자열 타입을 변환
1. String 생성자 함수에 값을 인자로 전달하고 new 연산자 없이 호출
2. Object.prototype.toString 메서드를 사용
3. 문자열 연결 연산자 즉 문자가 아닌 타입의 값과 문자열 타입의 값을 더하기 연산 하는 것
숫자 타입이 아닌 값을 숫자타입으로 변환
1. Number 생성자 함수에 값을 인자로 전달하고 new 연산자 없이 호출
2. parseInt, parseFloat 함수를 사용하는 방법
3. + 단항 산술 연산자를 사용
4. * 산술 연산자를 사용
불리언 타입이 아닌 값을 불리언 타입으로 변환
1. Boolean 생성자 함수를 new 연산자 없이 호출
2. ! 부정 논리 연산자를 두번 사용하는 방법
암묵적 타입 변환이란?
개발자의 의도와 달리 표현식을 평가하는 도중 자바스크립트에 의해 값에 따라 암묵적으로 타입이 자동 변환되는 것이며, 암묵적 타입 변환 혹은 강제 타입 변환이라고도 불린다.
truthy 혹은 falsy 한 값은 무엇인가?
자바스크립트 엔진은 불리언 타입이 아닌 값을 truthy한 값 falsy한 값으로 구분한다.제어문의 조건식과 같이 불리언 값으로 평가되어야 할 문맥에서 truthy 값은 true로 falsy 값은 false로 암묵적 타입 변환됨
배열
자바스크립트의 배열은 자료구조의 배열과 같나?
자료구조에서의 배열은 동일한 크기의 메모리 공간이 틈없이 연속적으로 나열된 자료구조, 배열의 요소는 하나의 데이터 타입으로 통일되어 있으며, 서로 연속적으로 인접해있음 (밀집 배열)
자바스크립트의 배열은 이와 달리, 배열요소를 위한 각각의 메모리 공간은 동일한 크기를 갖지 않으며 연속적으로 이어져 있지 않음 (다른 타입의 값으로 구성될 수 있고, 중간에 값이 없을 수 있음)
이와 같이 배열의 요소가 연속적으로 이어져 있지 않는 배열을 희소(sparse array)라고 함
따라서 자바스크립트이의 배열은 자료구조의 배열과 달리 배열의 동작과 유사하게 동작하는 객체이다
배열 메서드의 종류
배열의 메서드는 두가지 종류로 나뉜다.
- 원본 배열을 변경하는 메서드
- 원본 배열을 변경하지 않고 새로운 배열을 생성하여 반환하는 메서드
주로 ES5 부터 도입된 메열 메서드는 원본 배열을 변경하지 않고, 이전에 도입된 메서드는 배열을 직접 변경
원본 배열을 직접 변경하는 메서드는 메서드 몸체 외부의 상태를 변경하는 등 사이드 이펙트가 발생하기 때문에 사용할 떄 주의가 필요하며, 사이드 이펙트를 피하기 위해 가급적 원본 배열을 변경하지 않는 것이 좋다.
Array.isArray()
Array.prototype.push -> 원본 배열을 변경
Array.prototype.pop -> 원본 배열을 변경
Array.prototype.unshift -> 원본 배열을 변경한다
Array.prototype.concat
Array.prototype.splice -> 원본 배열 변경
Array.prototype.slice
Array.prototype.join -> 원본 배열을 변경
Array.prototype.reverse -> 원본 배열을 변경
Array.prototype.fill -> 원본 배열을 변경
Array.prototype.includes
고차 함수란?
고차함수는 함수를 인자로 전달 받거나 함수를 반환하는 함수
자바스크립트의 함수는 일급 객체로, 값처럼 인수로 전달할 수 있고 반환될 수 있음
고차 함수는 외부의 상태 변경이나 가변 데이터를 피하고 불변성을 지향하는 함수 프로그래밍에 기반을 두고 있음
- 함수형 프로그래밍은 순수 함수와 보조 함수의 조합을 통해 로직 내에 존재하는 조건문과 반복문을 제거 => 복잡성을 해결하고 변수의 사용을 억제하여 상태 변경을 피하려는 프로그래밍 패러다임.
함수형 프로그래밍은 순수함수 (입력으로 들어온 동일한 값에는 항상 같은 아웃풋을 반환)을 통해 부수효과를 최대한 억제하고 오류를 피하고 프로그래밍의 안정성을 꾀한다.
대부분의 고차함수들을 매개변수로 콜백 함수를 받아 사용되어 원본 배열을 바탕으로 새로운 결과를 창조하는 데 사용
고차 함수 기반 배열 메서드
Array.prototype.sort
Array.prototype.forEach
Array.prototype.map
Array.prototype.filter
Array.prototype.reduce
Array.prototype.some
Array.prototype.every
Array.prototype.find
forEach 메서드와 map 메서드의 차이점
- forEach 메서드는 호출한 배열의 각 요소에 대해 매개변수로 전달한 콜백 함수내에 정의된 로직을 실행한다.
- map 메서드는 호출한 배열의 각 요소에 대해 매개변수로 전달한 콜백 함수 내에 정의 된 로직을 실행하여 새로운 배열을 생성한다.
forEach는 반환값이 없고 map은 새로이 생성된 배열을 반환.
map 메서드를 호출한 배열과 새로 생성된 배열은 1대1로 매핑됨
forEach와 map 메서드의 콜백함수는 호출한 배열의 각 요소값, 각 인덱스, this를 순차적으로 받는다.
