[JavaScript] - 원시 값과 객체의 비교
·
Web/JavaScript
본 포스트는 '모던 자바스크립트 Deep Dive'를 읽고 정리한 내용입니다.원시 타입의 값, 즉 원시 값은 변경 불가능한 값이다. 이에 비해 객체(참조) 타입의 값, 즉 객체는 변경 가능한 값이다.원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장된다. 이에 비해 객체를 변수에 할당하면 변수(확보된 메모리 공간)에는 참조 값이 저장된다.원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달된다. 이를 값에 의한 전달(pass by value)이라 한다. 이에 비해 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달된다. 이를 참조에 의한 전달(pass by reference)이라 한다.11.1 원시 값11.1.1 변경 불가능한 값원시 ..
[JavaScript] - 객체 리터럴
·
Web/JavaScript
본 포스트는 모던 자바스크립트 Deep Dive 를 읽고 정리한 내용입니다.1. 객체란?자바스크립트에서 원시값을 제외한 나머지는 모두 객체(함수, 배열, 정규표현식 등)원시값 -> immutable객체 타입의 값 -> mutable객체0개 이상의 프로퍼티로 구성된 집합프로퍼티프로퍼티 = key + value객체의 상태를 나타내는 값(data)자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 value 가 될 수 있다.메서드프로퍼티의 value 가 함수인경우 -> method 라 부름프로퍼티를 참조하고 조작할 수 있는 동작(behavior)2. 객체 리터럴에 의한 객체 생성인스턴스클래스에 의해 생성되어 메모리에 저장된 실체클래스는 인스턴스를 생성하기위한 템플릿의 역할자바스크립트의 객체생성 방식객체 리터럴..
[React] 리액트<input> 태그의 값에 접근, 'Enter' 키 이벤트 enter key event javascript
·
Web/JavaScript
정답을 제출할 때, 엔터키를 눌러도, 제출 버튼을 눌러도 input 태그 안의 내용이 제출될 수 있도록 해야했다.1. input 태그의 값을 Hook으로 관리2. input이 입력될 때마다 State를 업데이트3. input tag의 onKeyDown 이벤트 핸들러를 설정하여 엔터키를 누를 시 값이 제출되도록 설정4. 제출 버튼에 onClick 이벤트 핸들러를 설정하여 값이 제출되도록 설정1. 'input' 태그의 값을 관리할 useState훅을 선언1. useState 훅을 사용하여 입력된 값을 관리할 State를 선언```javascriptimport { useState } from 'react';const ShortAnswer = () => { const [answer, setAnswer] = u..
[JS] 자바스크립트 속성 접근자 점 표기법(Dot Notation) vs 괄호 표기법(Bracket Notation)
·
Web/JavaScript
개요JavaScript에서 Object에 접근하는 방법은 Dot Notation(점 표기법) , Bracket Notation(대괄호 표기법) 두 가지가 존재함점 표기법(Dot Notation)객체 뒤에 마침표와 속성 이름을 지정하여 객체의 속성에 접근const person = {name :'John' ,age :25 ,address : {city :'New York' ,state :'NY' }};console .log(person.name) ;// 출력: Johnconsole .log(person.address .city) ; // 출력:NewYork장점가독성이 좋다, 객체 지향 프로그래밍에 익숙한 개발자에게는 더 쉽다.깔끔하고 간결한 구문을 제공, 코드 작성과 유지 관리가 더 쉽다.대괄호 표기법보..