DH의 개발 공부로그

원시 값과 참조 값 알아보기 자바스크립트에는 원시 값과 참조 값 두가지의 값이 있습니다. 원시 값과 참조 값에 대해서 알고 싶으신 분들은 [JavaScript] 자바스크립트 원시 값과 참조 값!을 확인해주시면 되겠습니다. 원시 값과 참조 값의 복사 원시 값을 복사할 때에 그 값은 또 다른 독립적인 메모리 공간에 할당하고 있기 때문에, 원시 값을 복사 한 후 그 값 수정을 하여도 기존 원시값을 저장한 변수에는 영향을 끼치지 않습니다. 하지만 참조 값은 원시 값과는 다르게 변수가 객체의 주소를 가리키는 값이기 때문에 복사를 하면 복사된 값(주소)이 같은 값을 가리키고 있어서 수정시에는 서로에게 영향을 줄 수 밖에 없는 것 입니다. 한마디로 하나의 주소를 참조해서 원본과 복사한 변수에서 가르키고 있다는 것 입..

FormData FormData는 form필드와 그 값을 쉽게 보내고 생성할 수 있도록 도와주는 객체입니다. 이름을 보고 유추하셨듯이 FormData 객체는 HTML 폼 데이터를 나타냅니다. 생성자는 다음과 같습니다. let formData = new FormData(폼); FormData 메서드 1. formData.append() append 메서드는 두가지 방식의 버전이 있습니다. 매개변수를 2가지를 가지고 있는 버전과 3가지를 갖는 버전이 있습니다. 하나하나 알아보자면 다음과 같습니다. 매개변수가 2개인 버전 formData.append(name, value) // name과 value를 가진 폼 필드를 추가 매개변수가 3개인 버전 formData.append(name, blob, fileName..

자바스크립트에서 배열을 다루다보면 자주 사용하게 되는 메서드 중에 이름이 상당히 비슷한 slice()와 splice()가 있습니다. 두 메서드는 언뜻 보기에 비슷한 기능을 하고 이름도 비슷해서 헷갈리는 경우가 많은데, 두 메서드에는 큰 차이점이 있습니다. 1. slice() slice() 메서드는 어떤 배열의 시작점 부터 끝 까지(끝 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 여기서 중요한 점은 slice()는 원본 배열은 바뀌지 않는 새로운 배열을 반환한다는 점입니다. 구문 arr.slice([begin [, end]]) begin 0을 시작으로 하는 추출 시작점에 대한 인덱스를 의미합니다. 만약 undefined인 경우에는 0번 인덱스부터 slice 합니다. 음수는 배열의 끝에서부..

원시 값? 참조 값? 자바스크립트의 변수에는 크게 두가지 타입을 저장을 할 수 있으며, 이 두가지 타입에는 원시타입의 값과 참조타입의 값으로 나누어져 있습니다. 원시 값(Primitive values) 원시값, 원시 데이터 타입은 객체가 아닌 데이터 타입을 뜻합니다. 그렇다면 객체가 아닌 데이터가 무엇을 의미하냐면, 변수에 저장된 실제값에 직접적으로 접근할 수 있는 단순한 데이터라는 뜻입니다. 그리고 또한 하나의 값에 대한 정의가 절대 변하지 않는 불변성을 갖고 있습니다. 원시 값의 종류 String (문자) Number (숫자) Boolean (참,거짓) Null Undefined Biglnt Symbol // 예시 let a = 100; let b = 문자; 원시값의 불변성? 원시값의 특징이라고 할 ..

if문 중첩을 줄이는 이유 if문을 이용해 조건을 만들다가 조건에 또 다른 조건이 필요하다고 판단하여, if문 안에 if를 넣고 또 else문 안에 if~else 안의 if 등등... 좋지 않은 코드를 짜게 되고, 그리하여 가독성이 안좋아지며 실행 순서를 이해하는것도 힘들어지게 되는 경우가 있습니다. 이런 경우에는 if문의 중첩들을 제거해서 가독성도 올리고 실행 순서를 한눈에 이해하기 쉽게 만들어 주어야 합니다. if문 중첩 제거 방법 그렇다면 if문의 중첩을 줄일 수 있는 방법은 무엇있까요? 바로 다음과 같습니다. 1. 공통된 절차를 각 분기점 내부에 넣는다 2. 분기점에서 짧은 절차부터 실행하게끔 if문을 작성한다. 3. 짧은 절차가 끝나면 return(함수 내부의 경우)이나 break(반복문 내부의..

Math Math는 수학에서 사용하는 상수와 함수를 위한 속성과 메서드를 가진 내장 객체입니다. 즉, Math는 함수 객체가 아닙니다. 따라서 Math 객체는 정적(static) 프로퍼티와 메소드만을 제공합니다. 다양한 프로퍼티와 메서드가 있지만 이번에는 최근에 코딩테스트 문제를 풀면서 자주 사용하고 다시 찾아봤던 메서드들을 정리해보겠습니다. 📌 .floor() .floor()는 주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 반환하는 메서드인데, 더욱 쉽게 이해하자면 인수의 소수점 이하를 내림한 정수를 반환하는 것입니다. 양수일 때는 소수점 이하를 떼어 버린 다음 정수를 반환하며, 음수일 때는 소수점 이하를 떼어 버린 다음 -1을 한 정수를 반환하는 것 입니다. 구문 Math.floor(x) //..

객체의 길이(length) 자바스크립트에서 배열(Array) 또는 문자(String)를 사용하는 경우에는 length 속성을 이용하여 쉽게 길이를 구할 수 있습니다. 하지만 객체에서는 length를 사용하면 undefind를 반환을 하게 됩니다. 객체의 길이 구하는 법 그렇다면 객체의 길이를 구하고 싶을 때 할 수 있는 방법을 무엇일까요? 기본적으로 Object의 메서드를 이용하는 방법과 반복문을 이용하는 방법이 있습니다. 그 중에서 오늘은 Object의 메서드를 이용한 객체의 길이를 구하는 방법을 알아보겠습니다. 방법1. Object.keys() Object.keys()는 주어진 객체의 key들로 이루어진 배열을 반환하는 메서드 입니다. 따라서 Object.keys()를 이용하여 key들이 담겨진 배열..

요소의 위치 찾기! 이번에 알아 볼 메서드는 바로 문자열 또는 배열, 즉 String 타입과 Array타입에서 특정 문자의 위치(index)를 찾아주는 함수입니다. indexOf() indexOf()는 문자열 또는 배열에서 지정된 요소를 앞에서부터 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환합니다. String.prototype.indexOf() 구문 str.indexOf(searchValue[, fromIndex]) 매개변수 searchValue 찾으려는 문자열 fromIndex 문자열을 찾기 시작하는 위치, 인덱스 값. 기본값은 0이며 length보다 높은 숫자면 -1 반환 예시 const str = 'hello world' // length: 11 consol..