'분류 전체보기' 카테고리의 글 목록 (2 Page)

자바스크립트의 함수는 객체일까?

카테고리 없음 2023. 2. 18. 16:51

Function에 대한 mdn 문서를 보면 다음과 같이 나와있다. In JavaScript, functions are first-class objects, because they can be passed to other functions, returned from functions, and assigned to variables and properties. They can also have properties and methods just like any other object. What distinguishes them from other objects is that functions can be called. "함수는 일급 객체다"라는 내용이며, 다음 조건을 만족하는 것을 일급객체라고 하는 것을 알 ..

표현식과 문, 그리고 React의 JSX

카테고리 없음 2023. 2. 18. 12:38

1. 표현식(Expression) 표현식이란 값으로 평가될 수 있는 문(statement)이다. 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조한다. 예를 들어, 다음과 같은 문들은 모두 표현식이다. 100; 50 + 50; // 리터럴 & 연산자로 이루어져 있는데 평가되어 값 100을 생성하므로 표현식 score; // 변수 식별자를 참조하면 변수 값으로 평가된다. // 식별자 참조는 값을 생성하지는 않지만 값으로 평가되므로 표현식이다. // 리터럴 표현식 // 자바스크립트 엔진에 의해 평가되어 값을 생성하므로 그 자체로 표현식 10 'Hello' // 식별자 표현식(선언이 이미 존재한다고 가정) // 식별자 참조는 값을 생성하지는 않지만 참조하고 있는 값으로 평가되므로 표현식 sum pers..

자바스크립트 배열은 사실 객체다!

카테고리 없음 2023. 2. 13. 20:05

typeof 배열 === 객체? typeof 를 통해 배열의 타입을 콘솔에 찍어보면 object라고 나온다. 자바스크립트에 배열이라는 타입은 따로 존재하지 않는다. 배열은 사실은 객체 타입이다. 그렇지만 일반 객체와는 구별되는 특징이 있다. 구분 객체 배열 구조 프로퍼티 키, 프로퍼티 값 인덱스와 요소 값의 참조 프로퍼티 키 인덱스 값의 순서 X O length 프로퍼티 X O 가장 명확한 차이점은 "값의 순서"와 "length 프로퍼티"가 있다는 것이다. 그렇기 때문에 다음과 같은 장점을 지닌다. 그렇기 때문에 처음/마지막/특정 위치부터 순차적으로 요소에 접근할 수가 있다. 두 가지 종류의 배열 배열에는 두 가지 종류가 있다. 밀집 배열(dense array) 자료구조에서 일반적으로 말하는, 배열의 ..

자바스크립트에 7번째 원시형 타입이 있다던데(Symbol)

카테고리 없음 2023. 2. 13. 04:09

TLDR; 심볼은 ES6에서 도입된 7번째 데이터 타입으로 변경 불가능한 원시 타입의 값이다. 심볼은 다른 값과 중복되지 않는 유일무이한 값으로, 이름 충돌이 없는 유일한 프로퍼티 키를 만들기 위해심볼은 ES6에서 도입된 7번째 데이터 타입으로 변경 불가능한 원시 타입의 값이다. 심볼은 다른 값과 중복되지 않는 유일무이한 값으로, 이름 충돌이 없는 유일한 프로퍼티 키를 만들기 위해 사용된다. 심볼 사용법 Symbol 생성 Symbol 함수를 호출하여 생성 ( )괄호 안의 문자열은 디버깅 용도로만 사용되는 심벌값에 대한 설명임 아무리 같은 이름으로 많이 만들어도 절대 같은게 만들어지지 않음(심벌은 유일무이한 값) const mySymbol = Symbol(); // Symbol 함수 호출하면 된다. con..

자바스크립트 이터러블과 제너레이터

카테고리 없음 2023. 2. 13. 00:14

TLDR; 이터러블 프로토콜을 준수한 객체를 이터러블이라고 한다. 이터러블은 Symbol.iterator메서드를 가지고 있으며, 메서드 실행시 next함수를 가지고 있는 이터레이터를 반환하는데, next함수 실행시 value와 done을 프로퍼티로 가지고 있는 이터레이터 리절트객체를 반환한다. 이터러블은 for...of문, spread문법, 디스트럭쳐링 할당 등이 가능하다. 유사배열객체와 이터러블을 구분할 필요가 있는데, 유사배열객체는 인덱스와 length를 가지고 있어서 인덱스로 접근가능하고, for 문이 사용가능한 객체이다. 이터러블은 이터레이터 프로토콜을 준수한 객체이다. 따라서 유사배열객체가 반드시 이터러블은 아니다. 유사배열과 이터러블을 배열로 만들어 활용할 수 있는데, Array.from()을..

자바스크립트의 Getter / Setter

카테고리 없음 2023. 2. 11. 06:29

TLDR; 자바스크립트의 Getter / Setter는 접근자 프로퍼티로, 프로퍼티의 값을 통제하거나 변경사항에 유연하게 대처하기 위해 사용된다. 데이터 프로퍼티와 다르게 [[Value]]프로퍼티 어트리뷰트를 가지고 있지 않아, setter와 getter로 정의한 접근자 프로퍼티는 읽고 쓸 순 있지만 콘솔로 확인했을 때에는 실제로는 존재하지 않는 가상의 프로퍼티이다. 데이터 프로퍼티 vs 접근자 프로퍼티 자바스크립트의 프로퍼티는 데이터 프로퍼티와 접근자 프로퍼티로 구분할 수 있다. 구분 설명 데이터 프로퍼티(data property) 키-값으로 구성된 일반적인 프로퍼티, 지금까지 내가 알던 눈에 보이는 그 프로퍼티 접근자 프로퍼티(accessor property) 자체적으로는 값을 갖지 않고([[Valu..

얕은 복사, 리액트에서 자주 사용하고 있다고?

카테고리 없음 2023. 2. 10. 19:47

TLDR; 리액트에서는 성능을 위해 얕은 비교를 통해 state의 변경을 감지한다. 기본형 데이터는 기존 값 변경시 값 자체가 변경되어 리액트가 정상적으로 비교를 수행하여 값을 업데이트 할 수 있지만, 참조형 데이터의 경우에는 기존 값의 데이터를 변경한다고 하여도, 참조값은 동일하기에 리액트가 state 변경을 감지할 수 없다. 따라서 참조형 데이터는 Spread Operator 혹은 Object.assign을 이용하여 얕은 복사를 수행함으로서 참조값을 변경시켜줘야 하는데, 중첩 객체의 경우 중첩된 값은 참조값이 끊어지지 않고 사본 변경시 원본을 같이 변경하는 것이기 때문에, 별개의 객체로 보고 마찬가지로 새로운 참조값을 갖도록 중첩된 객체 내부에서 한번 더 얕은 복사를 실시해 줘야 한다. 이 외에도 리..

얕은 복사와 깊은 복사

카테고리 없음 2023. 2. 10. 02:14

TLDR; 얕은 복사는 참조값을 복사하는 것이며, 깊은 복사는 내부의 값을 복사하여 새로운 객체를 만드는 것을 의미한다. 얕은 복사는 참조값 복사이기에 복사본 변경 시 원본이 변경되지만, 깊은 복사는 아예 새로운 객체이기 때문에 복사본 변경에도 원본은 훼손되지 않는다. 객체를 프로퍼티 값으로 갖는 객체의 경우 얕은 복사는 한 단계까지만 복사하는 것을 말하고 깊은 복사는 객체에 중첩되어 있는 객체까지 모두 복사하는 것을 의미한다. 얕은 복사와 깊은 복사로 생성된 객체는 원본과는 다른 객체다. 얕은 복사를 위해서는 Spread Operator 또는 Object.assign을 사용할 수 있으며, 깊은 복사를 하려면 재귀함수를 이용하거나 JSON 변환을 사용하면 된다. 불변값인 기본형 vs 가변값인 참조형 기본..

ABOUT ME

🌊 Minju DevLog 🌊 Minju DevLog

티스토리툴바