반응형 DEV/Javascript10 [자바스크립트]객체 생략 표기법 객체 기술 방법으로써 사용 빈도가 높은 쇼트핸드(생략 표현)가 있다. '객체의 속성명'과 '설정한 변수명'이 같으면 생략 가능하다. const name = "개발하는 고양이" const age = 6; const user = { name : name, age : age, } console.log(user); //결과 : {name: 개발하는 고양이, age: 6} const name = "개발하는 고양이"; const age = 6; const user = { name, age } console.log(user); //결과: {name : "개발하는 고양이", age: 6} 참고: 모던 자바스크립트로 배우는 리액트 입문 2023. 6. 8. [자바스크립트]스프레드 구분 ... (깊은 복사, 얕은 복사) 스프레드 구문은 ... 과 같이 점 세개를 연결해서 사용한다. 배열에 이용함으로써 내부 요소를 순차적으로 전개할 수 있다. 일반적인 함수 사용 방법 스프레드 구문 사용 방법 스프레드 구문은 요소를 모으는 데도 활용할 수 있다. 요소 모으기 요소 복사와 결합(깊은 복사) 얕은 복사는 주소의 참조값(주소값)을 복사하고, 깊은 복사는 객체의 실제 값만 복사한다. 새로운 배열 생성 두 개의 배열 결합 여러 객체 결합 여기서 객체의 속성이 같으면 어떻게 되는지 테스트 해보았다. 덮어씌어지는 걸 확인 할 수 있다. 등호를 사용해서 복사하면 안 되는 이유(얕은 복사) 등호를 이용하여 복사하면 배열이나 객체 등 '오브젝트 타입'이라 불리는 변수는 참조값 역시 상속되기 때문에 예상치 못 한 동작을 일으킬 수 있다. 즉,.. 2023. 6. 7. [자바스크립트]=를 이용하여 디폴트값 주기 인수의 디폴트값 메시지를 출력하는 함수 실행 시 인수가 전달되지 않은 경우 디폴트값 설정 디폴트값이기 때문에 값이 전달되면 전달된 값을 우선으로 한다. 객체 분할 대입의 디폴트 값 존재하지 않는 속성을 출력 분할 대입 시의 디폴트값을 설정 조상님로또-번호추천, 분석 - Google Play 앱 조상님 로또 앱을 이용하여, 무료로 로또 당첨 확률을 높일 수 있습니다. play.google.com 뽀모도로 타이머(Pomodoro Timer) - Google Play 앱 뽀모도로(Pomodoro)공부법은 단시간 집중력 향상을 위한 자기주도 학습법입니다. play.google.com 참고 : 모던 자바스크립트로 배우는 리액트 입문 2023. 6. 6. [자바스크립트]객체, 배열 분할대입 분할 대입은 객체나 배열로부터 값을 추출하기 위한 방법이다. 분할 대입을 사용하지 않고 처리 객체 속성 수가 많아지거나 객체 변수명이 길어지면 매번 '변수명.속성'으로 입력하기 매우 번거롭다. 이럴 때 분할 대입을 이용한다. 분할 대입 이용 {}를 변수 선언부에 이용하면 객체 안에서 일치하는 속성을 추출할 수 있다. 존재하지 않는 속성명은 지정할 수 없다. 이름만 일치한다면 일부만 추출하는 것도 가능하고 순서가 달라도 상관없다. //일부만 추출 const {age} = myProfile; //순서를 바꾸어 추출 const { age, name } = myProfile; 만약, 추출한 속성에 별칭을 붙이고 싶을 때는 : 을 사용하면 된다. 배열 분할 대입 객체와 마찬가지로 배열도 분할 대입을 이용할 수 있.. 2023. 6. 6. [자바스크립트]백틱을 이용한 템플릿 문자열 템플릿 문자열은 문자열 안에서 변수를 전개하기 위한 새로운 표기법이다. 문자열을 결합할 때마다 +를 입력해야 하기 때문에 읽기 힘들고 작성하는 것도 귀찮다는 문제가 있었다. ES6 이후부터는 백틱(역따옴표 또는 백쿼트라고도 한다)을 이용하여 편리하게 입력할 수 있게 되었다. 조상님LOTTO - Google Play 앱 무료로 로또 당첨 확률을 높일 수 있습니다. play.google.com 뽀모도로 타이머(Pomodoro Timer) - Google Play 앱 뽀모도로(Pomodoro)공부법은 단시간 집중력 향상을 위한 자기주도 학습법입니다. play.google.com 2023. 6. 6. [자바스크립트]const, let을 이용한 변수 선언 기존의 자바스크립트에서는 var를 이용하여 변수를 선언했었다. 그러나 var로 변수를 선언하는 것은 몇 가지 문제점이 있다. 1. 변수를 덮어 쓸 수 있다. 2. 다시 선언(재선언)할 수 있다. 위 테스트를 보면 알 수 있듯이 한 번 정의한 변수에 다른 값을 대입할 수 있다. 물론 덮어써야 되는 경우도 있지만, 덮어 쓰고 싶지 않을 때도 있을 수 있으므로 무조건 덮어 쓰는 것은 좋지 않다. 또한 완전히 같은 변수명을 여러 위치에서 변수로 정의할 수 있다. 프로그램 실행 순서에 따라 어느 변수가 사용되는지 해석하기 어려우므로 재선언은 기본적으로 안 되는 편이 좋다. 그래서 ES2015(ES6)에서 새로운 변수 선언 방법으로 const와 let이 추가되었다. let을 이용한 변수 선언 1. let은 재선언을.. 2023. 6. 6. javascript promise 사용법 참고: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise Promise - JavaScript | MDN Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다. developer.mozilla.org Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타낸다. 즉, 미래의 어떤 시점에 결과를 제공하겠다는 약속(프로미스)을 반환한다. Promise는 기존에 javascript에서 많이 볼 수 있었던 콜백 지옥을 극복하기 위해 ECMA Script 6 스펙에서부터 지원되는 객체이다. Promise 상태 - 대기(pending) : 이행.. 2023. 1. 13. javascript filter 사용법 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter Array.prototype.filter() - JavaScript | MDN filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다. developer.mozilla.org filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다. const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present']; //words 배열을 각각 꺼내와서 word에 할당 => word length가 6.. 2023. 1. 11. javascript map 사용법 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map Array.prototype.map() - JavaScript | MDN map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다. developer.mozilla.org map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다. const arr = [1, 2, 4, 8, 16]; const maps = arr.map(x => x * 2); console.log(maps); 기존 for문 const nameArr = ["원빈","박보검".. 2023. 1. 11. 이전 1 2 다음 반응형
