[TIL][JavaScript] JS 기본, ES06 | 데이터 타입

첫번째 포스트: 자바스크립트는 무슨 언어인가요?

자바스크립트를 중심으로, 면접 대비용 포스트 시리즈 두번째:

JS 기본 요소와 데이터 타입, 그리고 ES 6

---

 

변수 선언, 초기화, 할당의 차이점에 대해 설명해주세요.

변수 선언은 변수의 이름을 정하고 메모리 공간을 할당받는 과정입니다. 변수 초기화 이전의 단계이며, var, let, const 키워드를 활용하여 변수를 선언할 수 있습니다. 

변수 초기화는 선언 이후 값을 부여하는 과정을 말합니다. 초기화와 선언은 동시에 이뤄질 수 있습니다. 초기화되지 않은 변수는 javascript 의 경우 기본적으로 undefined로 초기화됩니다.

변수 할당은 변수에 값을 지정하는 행위를 말합니다.(초기화도 할당의 일부입니다) 함수 선언시 사용되는 키워드 중 var과 let은 변수에 이미 값이 있어도 재할당을 가능하게 합니다. 

 

구조분해할당(Destructuring assignment)에 대해 설명해줴요.

배열array나 객체object의 속성을 해제하여 그 값을 개별 변수에 담을 수 있게 하는 javascript의 표현식입니다. 왼쪽에 할당받을 변수를, 오른쪽에 언패킹할 값을 정의합니다. 

 

패턴으로는 바인딩 패턴과 할당 패턴이 있습니다. 바인딩 패턴은 선언 키워드(var, let, const)로 시작하며 개별 프로퍼티를 변수에 바인딩하거나 추가로 분해해야합니다. 할당 패턴은 키워드로 시작하지 않습니다.

 

ref

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

에드 훅? https://jake-seo-dev.tistory.com/473

사용사례(상세): https://www.freecodecamp.org/news/array-and-object-destructuring-in-javascript/

 

ES6에서 새로 생긴 기능들에 대해 아는대로 말씀해주세요.

ECMAScript 2015, ES6에서 javascript 언어에 많은 기능이 추가되어 개발의 편의성과 유연성을 높였습니다. 

let, const 선언 키워드

let : 블록 유효 범위( block-scoped) 지역 변수 선언시 사용합니다. 

const: let과 유사하나 한번 할당된 값을 재할당 할 수 없습니다.(상수)

화살표 함수 (Arrow Functions)

=> 를 통해 간결하게 표현할 수 있습니다. (function 키워드/return 키워드, 중괄호 불필요)

 

* 단일 표현식으로 구성될 때 중괄호를 사용하지 않아도 되며, return 키워드를 사용할 필요가 없습니다.(암시적 반환)

일반 함수와의 차이점

일반 함수에서 this는 함수가 호출된 컨텍스트에 따라 다르게 바인딩됩니다. 호출되는 시점의 컨텍스트에 따라 this가 달라집니다. 그러나 화살표 함수는 선언된 시점의 this 컨텍스트를 유지하고 변경되지 않습니다. 따라서 명시적으로 this 바인딩을 제어할 때 유용하게 사용할 수 있습니다. (콜벡 함수/클로저에서 유용)

class 추가

클래스 기반의 객체지향프로그래밍을 도입했습니다. 생성자, 상속, 부모 클래스 메소드 호출 등을 사용할 수 있습니다. 

탬플릿 리터럴

백틱을 사용하여 문자열을 정의하고 편리하게 관리할 수 있습니다.

구조분해할당

배열이나 객체 속성을 해제하여 그 값을 개별 변수에 쉽게 할당할 수 있습니다.

모듈

import와 export문을 통해 모듈화 할 수 있게 되었습니다.

promise

비동기 연산의 최종 완료 혹은 실패를 나타내는 프로미스로 비동기 프로그래밍이 단순화되었습니다. 

for - of loop

반복 객체를 쉽게 반복할 수 있게 되었습니다.

spread  연산자와 rest 파라미터

배열/객체 속성을 쉽게 분산시킬 수 있게 되었으며, 전달된 인자를 배열로 조합할 수 있게 되었습니다. 

Symbol 도입

Symbol 은 생성자가 symbol 원시 값을 반환하는 내장 객체입니다

 

ref

https://www.w3schools.com/js/js_es6.asp

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol

 

함수 선언형(Function Declarations)과 함수 표현식(Function Expressions)의 차이에 대해 설명해주세요.

(추가 필요)

내용

ref

1

2

3

---

데이터 타입에 대해 설명해주세요.

자바스크립트는 객체 또는 원시Primitive value 두 가지 자료형만 존재합니다. 문자열, 숫자, undefined, null, bool, symbol(ES6도입)이 원시타입이며, 이 값들은 불변합니다. 한번 값을 넣으면 수정할 수 없으며, 값 자체로 저장됩니다. 반면에 객체 타입은 참조 형태로 변수에 저장되어 값을 수정할 수 있습니다. 예를 들어, number 형태인 10은 10과 ===로 비교할 때 true를 반환하나, 객체인 []은 []와 비교하면 참조값이 달라 false를 반환합니다. 

 

null 및 undefined를 제외한, 모든 원시 타입에는 원시 값으로 작업하는 데 유용한 메서드를 제공하는 해당 객체 래퍼 타입이 있습니다. 원시 값에서 속성에 접근하면, JavaScript는 값을 해당 래퍼 객체로 자동으로 감싸는 대신 객체의 속성에 접근합니다. 그러나 null 또는 undefined에서 속성에 접근하면, TypeError 예외가 발생합니다.

 

ref

https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures

 

불변성을 유지하려면 어떻게 해야하나요? (불변 객체)

원시값이 아닌 객체는 불변하지 않은 변경 가능한 값입니다. 객체 내부의 값을 변경할 때 객체를 참조하고 있는 다른 값도 함께 변경됩니다. 왜냐하면 객체는 곧바로 값을 저장하는 것이 아닌, 주소상 어떤 값을 참조하고 있기 때문입니다. 

 

(추가 필요)

자바스크립트에서의 데이터 형변환에 대해 설명해주세요.

자바스크립트는 동적 언어이므로 런타임 시 데이터 타입을 변경할 수 있습니다. 따라서 예기치 않은 버그를 방지하기 위해 알고 있어야 합니다. 유형으로는 명시적 형변환과 암시적 형변환 두 가지의 유형이 있습니다. 명시적 형변환의 경우 Number(value)등의 내장 함수를 활용할 수 있습니다. 암시적 형변환의 경우 덧셈 연산자를 활용하여 숫자를 문자열로 변환하거나 문자열 연결이 가능합니다. 논리 연산자는 bool으로 형변환합니다. 동등(==) 연산자는 타입이 다를 경우 비교 가능한 공통 타입으로 변환하여 비교합니다. 

ref

https://ko.javascript.info/type-conversions

 

undefined, null, undeclared를 비교해주세요.

내용

ref

1

2

3

 

 

다음 포스팅 내용: 자바스크립트와 비동기 관련

자바스크립트에서 비동기 로직이 어떻게 동작하는지 설명해주세요.

콜 스택과 힙에 대해 설명해주세요.