본문 바로가기

FE/JavaScript18

[JavaScript] 구조분해할당 구조분해할당 # 구조분해할당 객체의 속성 또는 배열의 값을 풀어서 별개의 변수로 쓸 수 있게 해주는 자바스크립트의 표현식이다. 객체와 배열에서 사용할 수 있다. 1. 객체 구조분해할당 객체의 속성을 변수로 사용하기 위해서는 다음과 같이 코드를 적어야 한다. const user = { id: 123, name: "kim", age: 20, }; const id = user.id; const name = user.name; const age = user.age; console.log(id, name, age); // 123 "kim" 20 구조분해할당을 이용하면 간단해진다. const user = { id: 123, name: "kim", age: 20, }; const { id, name, age } = .. 2022. 10. 26.
[JavaScript] scope와 var, let, const scope와 var, const, let 1. 스코프(scope) : 유효범위 변수가 선언되고 나면 그 변수를 사용할 수 있는 범위가 정해져있다. 예를 들어, 함수 내부에서 선언된 변수는 함수 내부에서만 사용할 수 있고 가장 바깥에서 실행된 변수는 어디서든 사용할 수 있다. 이렇게 변수를 참조할 수 있는 유효한 범위를 스코프라고 한다. 1.1 전역 스코프 const text = "hello"; console.log(text); // hello 코드의 가장 바깥, 즉 전역에서 선언한 변수는 어디서든 참조할 수 있다. 1.2 함수 스코프 const text = "hello"; function add(){ const a = 0; const b = 1; return a + b; }; console.log(a);.. 2022. 10. 25.
[JavaScript] callback 함수 callback 함수 # 일급 객체 자바스크립트에서 변수의 값이 될 수 있는 것을 일급 객체라고 한다. const num = 1; // 숫자 1은 일급 객체이다. const plus = function (x, y) { return x + y; }; // 함수 plus는 일급 객체이다. 숫자는 변수의 값이 될 수 있으므로 숫자는 일급 객체이다. 함수는 변수의 값이 될 수 있으므로 함수는 일급 객체이다. 자바스크립트는 함수를 일급 객체로 지원하는 언어이다. # callback 함수 함수는 일급 객체이다. 즉, 함수는 변수의 값이 될 수 있다. 함수는 변수를 입력값으로 받는다. 즉, 함수는 또 다른 함수의 입력값이 될 수 있다. A함수가 B함수의 입력값으로 사용되었다면, A함수는 callback 함수로 동작한.. 2022. 10. 24.
[JavaScript] 데이터 타입과 타입 변환 데이터 타입과 타입 변환 # 데이터 타입 구분 데이터 타입 설명 원시 타입 숫자 숫자 문자열 문자열 boolean true / false undefined 변수가 선언되었을 때 암묵적으로 할당되는 값 null 값이 없다는 것을 의도적으로 명시할 때 사용하는 값 symbol ES6에서 추가된 타입 객체 타입 객체, 함수, 배열 등 1. 숫자 자바스크립트에는 하나의 숫자 타입만 존재한다. 모든 수를 실수로 처리한다. console.log(1 === 1.0); // true 1과 1.0은 같은 숫자로 처리한다. 정수로 표시되는 숫자라도 사실은 실수로 처리하기 때문이다. console.log(10 / 0); // Infinity console.log(- 10 / 0); // -Infinity console.lo.. 2022. 10. 23.
[JavaScript] 함수 선언문과 함수 표현식 함수 선언문과 함수 표현식 함수는 두 가지 방식으로 정의할 수 있다. 1. 함수 선언문 function add(x, y){ return x + y; } 2. 함수 표현식 const add = function(x, y){ return x + y; } ES6의 화살표 함수도 이에 해당한다. const minus = (x, y) => { return x - y; } 함수 선언문과 함수 표현식의 차이는 무엇일까? 함수 생성 시점이 다르다. 함수 선언문은 런타임 이전에 먼저 실행되어 함수 객체로 초기화되어 함수 선언문 이전에 함수를 참조할 수 있다. 즉, 함수 호이스팅이 발생한다. 하지만 const로 실행된 함수 표현식은 함수 호이스팅이 아닌 변수 호이스팅이 발생한다. 따라서 undefined 값으로 초기화되고,.. 2022. 10. 23.
[JavaScript] 변수 선언과 호이스팅 변수 선언과 변수 호이스팅 # 변수 선언 변수 선언이란? 변수를 생성하는 것이다. 메모리 공간을 확보하고, 변수의 이름과와 메모리 공간의 주소를 연결하여 값을 저장할 수 있게 준비해주는 것을 의미한다. let name; name이라는 변수를 선언했다. 그렇다면 메모리는 값을 저장하기 위한 공간을 확보하고, 그 공간을 name이라는 변수가 사용하도록 해줄 것이다. 단, 아직 아무런 값이 할당되지 않았다. 그럼 메모리 공간이 비어있는 것일까? 그렇지 않다. 값을 할당하지 않았다면 메모리 공간은 자바스크립트의 엔진에 의해 undefined라는 값이 할당된다. 즉, 변수 선언의 과정은 다음과 같다. 1. 선언 : 변수의 이름을 선언해서 자바스크립트 엔진에 변수의 존재를 알린다. 2. 초기화 : 변수에 값을 저장.. 2022. 10. 12.