본문 바로가기

javascript8

구조 분해 할당(Destructuring assignment) 구조 분해 할당(Destructuring assignment)은 배열이나 객체의 속성을 분해하여 그 값을 변수에 담을 수 있도록 하는 표현식이다. 객체의 경우중괄호 안에 변수명을 넣고 분해할 객체를 지정해 주면 된다. const {name, age}는 객체의 키 값이기 때문에 {age, name} 이렇게 순서를 변경하여도 결과는 같다.객체는 순서가 중요하지 않다!const person = {name : 'jiji', age: 11};const {name, age} = person;console.log(name) //jijiconsole.log(age) //11  만약 변수명을 키의 이름과 다르게 변경하고 싶다면 아래와 같이 키 값 : 새로운 변수명 과 같이 작성해 주면 된다.const person = {.. 2024. 7. 4.
sort sort란배열의 값을 정렬해주는 메소드이다.const arr = ['c', 'q', 'b', 'a']const sortArr = arr.sort()console.log(sortArr) // (4) ['a', 'b', 'c', 'q']위의 코드를 보면 c q b a 에서 a b c q 로 정렬된 것을 볼 수 있다. 이 때, 주의할 점은 숫자를 정렬하는 경우이다.만약 아래와 같은 배열이 있을 때, 우리는 숫자가 오름차순으로 정렬될 것이라고 생각할 수 있다.const numArr2 = [4, 100, 6, 3, 1] ---> 예상 : 1, 3, 4, 6, 100 하지만 코드를 실행하면 아래와 같이 예상과 다른 결과가 나오는 것을 확인할 수 있다.const numArr2 = [4, 100, 6, 3, 1]num.. 2024. 7. 1.
모듈 module 모듈이란? 코드를 재사용 가능한 단위로 만드는 방법이다. 규모가 큰 프로젝트에서 효과적으로 관리할 수 있다. 특징 html 파싱 중 만나게 되면 html 파싱이 끝난 후 script를 다운로드 한다.(defer 와 같은 점이다) 모듈은 엄격모드로 실행된다. 모듈의 최상위 this 는 undefined 이다. 모듈은 type에 module 을 추가하여 사용한다. 모듈 스코프 모듈은 선언하게 되면 자바스크립트 파일을 각각의 모듈로 보며, 각각의 스코프를 가진다. 예를들어 type module 인 파일 2개가 있다고 가정할 때 아래와 같이 module1 에 있는 배열을 module2 에서 출력하려고 하면 에러가 나는 것을 볼 수 있다. [module1.js] let arr = [1,2,3,4,5] [modul.. 2024. 1. 8.
Set 자료구조 Set 란? 배열과 다르게 순서 없이 저장하며, 고유한 값들의 집합을 다루는 자료구조 이므로 중복을 허용하지 않는다. 순서가 없기 때문에 index로 값에 접근할 수 없다. new Set() 생성 Set는 클래스이기 때문에 new 키워드를 사용하여 생성한다. 4를 두 개 넣었는데 한 개만 추가된 걸 볼 수 있다. const set1 = new Set([1,2,3,4,4]); //Set(4) {1, 2, 3, 4} add() 추가 add() 메서드를 사용하여 추가한다. set1.add(9); //Set(5) {1, 2, 3, 4, 9} set1.add('가나다'); //Set(6) {1, 2, 3, 4, 9, '가나다'} delete() 삭제 삭제를 성공하면 true, 실패하면 false를 반환한다. se.. 2024. 1. 4.
배열 메소드 - slice(), includes(), find(), indexOf() arr.slice(n,m) : n 부터 m 까지 반환 m 은 포함하지 않는다. slice에 n,m 을 넣지 않을 경우 그대로 복사된다. let arr = [1,2,3,4,5]; console.log(arr.slice(1,4)); //[2,3,4] let arr2 = arr.slice(); console.log(arr2); //[1,2,3,4,5] 그대로 복사됨. arr.includes() : 포함하는지 확인 인덱스가 필요없고 포함하는지만 확인하려면 includes() 를 사용한다. let arr = [1,2,3]; console.log(arr.includes(2)); //true console.log(arr.includes(5)); //false arr.find(fn) : 조건에 만족하는 첫 번째 요소를.. 2024. 1. 3.
호이스팅 호이스팅이란 자바스크립트 엔진이 코드를 실행하기 전에 모든 선언에 대해서 수집하는데, 이때 변수, 함수 등의 선언을 선언된 위치에서 제일 최상단의 위치로 올려서 실행하는 것처럼 하는 것을 말한다. 예를 들어 아래와 같은 코드가 있다고 할 때, showText3('안녕'); function showText3(text){ console.log(text); } console.log(num33); var num33 = 332; 위 코드는 이렇게 실행된다. //호이스팅 적용된 코드 function showText3(text){ console.log(text); } var num33; showText3('안녕'); console.log(num33); //undefined num33 = 332; 선언이 호출보다 위에.. 2024. 1. 2.
spread operator 전개 구문 spread operator 는 es6 문법 중 하나이다. '...변수명' 의 형태로 사용한다. 나머지 매개변수 (rest parameter) 와 생김새는 비슷하지만 사용할 수 있는 위치에 대한 제약이 다르다. 나머지 매개변수는 꼭 맨 뒤에 위치해야 하지만 전개 구문은 어느곳에 있어도 상관이 없다. {...user, 3, ...color} 이런식도 가능하다. 객체 활용 객체에 사용하면 객체를 쉽게 복사할 수 있다. let user = { name : 'jin', age : 33 } let user2 = {...user}; console.log(user2); let newUser = { name : 'jin', age : 33, favorite : { color : 'red', animal : 'dog' .. 2023. 12. 29.
getElementsByClassName 과 querySelector textarea 의 value 에 값을 넣을 때 대상이 되는 요소를 가져오는데 getElementsByClassName 로는 안되고, querySelector 로 가져올 때 정상작동이 되어 차이점을 알아보려고 한다. getElementsByClassName 동일한 class를 갖고 있는 모든 요소 목록의 HTMLCollection 을 반환 console.log(parent.getElementsByClassName('comments-area')); 결과 HTMLCollection 이란? 요소의 문서 내 순서대로 정렬된 일반 컬렉션을 나타내며 리스트에서 선택할 때 필요한 메서드와 속성을 제공합니다(배열과 유사한 모습) 문서가 바뀔 때 실시간으로 업데이트 된다. querySelector 단 하나의 요소만 반환.. 2023. 12. 27.