본문 바로가기

자바스크립트10

[Deep Dive] var, let, const의 차이 / hoisting(호이스팅)에 대해 오늘 목표 : var, let, const의 차이 / hoisting(호이스팅) 모던 자바스크립트 Deep Dive 책을 이용해 변수들과 호이스팅에 대해 공부한 내용을 정리해 보았다. 1. var의 등장 배경 / 문제점 1) 중복 선언 - 같은 이름의 변수를 중복해서 선언해도 정상적으로 동작한다. 또 재할당이 아니라 이전의 변수가 덮어쓰여진다. 규모가 큰 프로젝트에서 변수명이 중복될 경우에도 Error가 발생하지 않는다. 이는 누군가 실수로 변수를 중복 선언하여 의도치 않은 결과를 초래할 수 있다. 2) var 호이스팅 - var변수의 선언문이 스코프 내의 최상단으로 끌어올려진 것처럼 동작하여 변수를 정의하기 전에 사용해도 에러가 발생하지 않는다. 3) 함수 레벨 스코프 - var 키워드로 정의된 변수는.. 2023. 7. 11.
[항해99] 온보딩 스터디 - 2주차 1일 TIL 🦄 온보딩 스터디 2주차 1일 TIL ✨03/13 : 목표 : 알고리즘 1일차, 2일차, 3일차 풀이 📒알고리즘 풀이 1. 제곱수 판별하기 어떤 자연수를 제곱했을 때 나오는 정수를 제곱수라고 합니다. 정수 n이 매개변수로 주어질 때, n이 제곱수라면 1을 아니라면 2를 return하도록 solution 함수를 완성해주세요. 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr Math.sqrt(n) = > n의 제곱근을 반환한다. Number.isInteger(a) = > 정수인지 확인하여 true false를 반환한다. 문제 접근) 1. n의 제곱근을 구하여 .. 2023. 3. 13.
[JavaScript] 깊은 복사(Shllow copy), 얕은 복사(Deep copy) 🙌 깊은복사, 얕은 복사 얕은 복사는 객체의 참조값(주소 값)을 복사하고, 깊은 복사는 객체의 실제 값을 복사한다. 1. Primitive 타입 : 깊은 복사 : 원시값은 값을 복사 할 때 복사된 값을 다른 메모리에 할당 하기 때문에 원래의 값과 복사된 값이 서로에게 영향을 미치지 않는다 let a = 2; let b = a; console.log(b); //2 b = 5; console.log(a); //2 console.log(b); //5 => primitive타입은 서로 영향을 미치지 않는다. 2. Object 타입 : 얕은 복사 : 참조값은 변수가 객체의 주소를 가리키는 값이기 때문에 참조값(주소)를 복사하여 같은 값을 가리킨다. 따라서 한쪽의 값을 변경 할 경우, 같은 참조값이기 때문에 양쪽 .. 2023. 2. 23.
[Deep Dive] 프로그래밍과 자바스크립트의 기본 개념 모던 자바스크립트 Deep Dive 요약 빨리 가는 유일한 방법은 제대로 가는 것이다. - 로버트 C. 마틴(Robert C. Martin), “클린 코드”의 저자 프로그래밍이란 무엇인가 (1) 프로그래밍 0과 1밖에 알지 못하는 기계가 실행할 수 있는 정도로 정확하고 상세하게 요구사항을 설명하는 작업이다. 해결 과제를 컴퓨터의 관점으로 사고(Computational thinking)해야 한다. 이에는 논리적, 수학적 사고가 필요하게 되며 해결 과제를 작은 단위로 분해하고 패턴화하여 추출하며 프로그래밍 내에서 사용될 모든 개념은 평가 가능하도록 정의되어야 한다. (2) 프로그래밍 언어 명령을 수행할 주체는 컴퓨터이다. 따라서 인간이 이해할 수 있는 자연어가 아니라 컴퓨터가 이해할 수 있는 언어, 즉 기계.. 2023. 2. 20.
자바스크립트(javaScript)_리팩토링(Refactoring)단계 정리 [⚙️Refactoring ] - 모듈화(module), 즉 리팩토링(Refactoring)과정을 단계별로 정리해 보았다. - 리팩토링의 장점 : 코드의 의미를 파악하기 쉽고 코드의 관리가 용이하며 가독성과 재사용성 등등을 개선시킬 수 있다. Refactoring 과정 1. 🛠️모듈화(Export, Import) : 파일을 작은 단위로 나누어 생성하고 모듈화 하고 객체지향적으로 코딩한다. Export, Import하여 외부로 노출시키고 가져와서 활용한다. 모듈화의 장점 : 하나의 파일에 많은 코드를 작성하면 코드의 의미 파악, 관리, 재사용성이 떨어진다. 각각의 기능별로 파일을 분리하여 모듈화시키면 코드를 효율적으로 관리할 수 있으며 재사용성도 높아진다. ex) HTML에서 큰 섹션 단위인 game과 p.. 2022. 6. 8.
드림코딩_자바스크립트_쇼핑몰 미니게임 클론코딩 [ 쇼핑몰 미니게임 클론코딩 ] 1. HTML / CSS 정적인 페이지 완성시키기 ellie와 내 코드를 비교한 결과 및 보완해야 할 점 - 일정한 수치값을 변수로 사용하여(통일성 있게) 재사용 한다. - 각각의 태그별 class를 거의 대부분에 사용하여 css를 적용시킨다. - 가로 세로정렬 모두 flex를 사용해 더 간편하게 정렬하였다. - 쇼핑 리스트 ul>li 하나를 먼저 구현해 놓고 추후 JS에서 동적으로 변경하였다. - section.class 사용하여 섹션을 구분한다. (div_con사용x) - div_con 감싸지 않고 바로 tag 사용(ex, 바로 ul>li사용, 간단한 프로젝트라 그런 것 같다.) 2. data폴더 안에 data.json 파일 생성하여 data 보관하기 JS에서 배열을 .. 2022. 4. 2.