FrontEnd/Javascript

[JS] 옵셔널 체이닝(Optional chaining) 연산자 - 객체에 안전하게 접근하기

✅ 옵셔널 체이닝 연산자 (?.) 에 대해 정리해보자! 1. 형식 객체 ?. 키 2. 의미 왼쪽 객체가 null, undefined가 아닌 경우에만, 객체.키 값을 참조한다.(왼쪽 객체가 null, undefined이면 undefiend를 반환한다) 3. 활용 객체의 프로퍼티를 참조할 때, null 체크를 편하게 할 수 있다.(여러번 중첩 사용 가능) 4. 예시코드 const obj_1 = null; console.log(obj_1.name); // error 발생 console.log(obj_1?.name); // undefined const obj_2 = { name: 'juda', family : { father: '아빠', mother: '엄마' } } console.log(obj_2?.name)..

[JS] 단축평가 ( 논리합 연산자 ||, 논리곱 연산자&& )

- 단축 평가란? 논리합 연산자인 || 와 논리곱 연산자인 && 는 왼쪽부터 오른쪽으로 평가를 진행한다. 평가결과가 나오면 끝까지 진행하지 않고 결과를 반환하는 것을 단축평가라 한다. 피연산자를 그대로 반환 (타입 변환하지 않음) 하는 것이 특징! 1. 논리합( || ) 연산자 단축평가 둘중 하나만 true 이면 true로 평가되므로 왼쪽 피연산자가 true이면 바로 왼쪽 피연산자를 그대로 반환한다. 문자열의 경우 빈 문자열이 아닌 경우는 모두 true로 평가된다 "something" || false; // "something" "something" || true; // "something" 왼쪽 피연산자가 false 인 경우 오른쪽 피연산자를 그대로 반환한다. false || "something"; /..

[JS] 자바스크립트의 숫자 타입

https://judahhh.tistory.com/21 [JS] 모던 자바스크립트 Deep Dive 6장 - 데이터 타입 6장 - 데이터 타입 자바스크립트의 모든 값은 데이터 타입을 갖는다. 자바스크립트(ES6)는 7개의 데이터 타입을 제공한다. 구분 데이터 타입 설명 원시 타입 숫자 타입 숫자, 정수, 실수 구분 없이 judahhh.tistory.com 내가 정리한 이 글을 보고 내가 정리했지만 그 와중에 몰랐던 것을 발견하여 정리해보려고 한다 숫자 타입에 대해 정확히 알지 못하고 정리한 것 같아 부끄럽다!@!!! 자바스크립트의 데이터 타입 중 숫자 타입에 대해서 알아보자 자바스크립트의 숫자 타입 자바스크립트는 독특하게도 숫자 타입이 하나 밖에 없다. int, long, float, double과 같은..

[JS] var, let, const 와 호이스팅(Hoisting)

변수 선언 방식은 var, let, const 3가지가 있는데 var 로 선언이 가능했는데 왜 const 와 let 이 나오고 var은 이제 더 이상 권장하지 않는 것일까? var 키워드로 선언한 변수의 문제점 1) var키워드로 선언한 변수는 중복 선언이 가능하다. var x=1; var y=1; //var키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용 //초기화 문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var키워드가 없는 것처럼 동작 var x=100; var y;//초기화문이 없으므로 이 변수 선언문은 무시됨 console.log(x);//100 console.log(y);//1 이 예제의 var 키워드로 선언한 x변수와 y변수는 중복 선언되었다. 이처럼 var 키워드로 선언한..

[JS] 모던 자바스크립트 Deep Dive 7장 - 연산자

연산자란? 연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행하여 하나의 값을 만든다. 이때 연산의 대상을 피연산자라고 한다. 피연산자, 그리고 피연산자와 연산자의 조합으로 이루어진 연산자 표현식은 값으로 평가될 수 있는 표현식이다. 7. 1 산술 연산자 산술 연산자는 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만든다. 산술 연산이 불가능한 경우, NaN을 반환한다. 7.1.1 이항 산술 연산자 연산자 의미 부수 효과 + 덧셈 x - 뺄셈 x * 곱셈 x / 나눗셈 x % 나머지 x 7.1.2 단항 산술 연산자 연산자 의미 부수효과 ++ 증가 o -- 감소 o + 효과 없음 x - 양수를 음수로, 음수를 양수로 반전한 값 반환 x 7.1.3 문..

[JS] 모던 자바스크립트 Deep Dive 6장 - 데이터 타입

6장 - 데이터 타입 자바스크립트의 모든 값은 데이터 타입을 갖는다. 자바스크립트(ES6)는 7개의 데이터 타입을 제공한다. 구분 데이터 타입 설명 원시 타입 숫자 타입 숫자, 정수, 실수 구분 없이 하나의 숫자 타입만 존재 문자열 타입 문자열 불리언 타입 논리적 참과 거짓 undefined 타입 var 로 선언된 변수에 암묵적으로 할당된 값 null 타입 값이 없다는 것을 의도적으로 명시할 때 사용하는 값 symbol 타입 ES6에서 추가된 7번째 타입 객체 타입 객체, 함수, 배열 등 6.1 숫자 타입 자바스크립트는 독특하게 하나의 숫자 타입만 존재한다. ECMAScript 사양에 따르면 숫자 타입의 값은 배정밀도 64비트 부동소수점 형식을 따른다. 즉, 모든 수를 실수로 처리하며 정수만 표현하기 위..

[JS] 모던 자바스크립트 Deep Dive 5장 - 표현식과 문

5.1 값 값은 표현식이 평가되어 생성된 결과를 말한다. 평가란, 식을 해석해서 값을 생성하거나 참조하는 것을 의미한다. 모든 값은 데이터 타입을 가지며, 메모리에 2진수, 즉 비트의 나열로 저장된다. 메모리에 저장된 값은 데이터 타입에 따라 다르게 해석될 수 있다. 5.2 리터럴 리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법을 말한다. 자바스크립트 엔진은 코드가 실행되는 시점은 런타임에 리터럴을 평가해 값을 생성한다. 즉, 리터럴은 값을 생성하기 위해 미리 약속한 표기법이라고 할 수 있다. 5.3 표현식 표현식은 값으로 평가될 수 있는 문이다. 즉, 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조한다. 표현식은 리터럴, 식별자(변수, 함수 등의 이름), ..

[JS] 모던 자바스크립트 Deep Dive 4장 - 변수

4.1 변수란 무엇인가? 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름 (값의 위치를 가리키는 상징적인 이름 ) 프로그래밍 언어는 기억하고 싶은 값을 메모리에 저장하고 저장된 값을 읽어 들여 재사용하기 위해 변수라는 메커니즘을 제공 변수는 프로그래밍 언어의 컴파일러 또는 인터프리터에 의해 값이 저장된 메모리 공간의 주소로 치환되어 실행됨 변수를 통해 개발자가 직접 메모리 주소를 통해 값을 저장하고 참조할 필요 없이 변수를 통해 안전하게 값에 접근 가능 변수 이름을 통해 참조를 요청하면 자바스크립트 엔진은 변수 이름과 매핑된 메모리 주소를 통해 메모리 공간에 접근해서 저장된 값을 반환 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름을 변수 이름,..