Hebom's Dev

자바스크립트에서 문자열 표시할때 쌍따옴표? 따옴표? 를 써야 하나 갸우뚱했습니다. 자바스크립트에서는 문자열을 쌍따옴표 (" ")나 따옴표(' ') 다 인정한다고 합니다. 다만, 코드에서 일관성을 유지하는게 중요하다고 하네요. 즉, 쌍따옴표로 문자열을 표현하면 모두 쌍따옴표로 표시해주는 게 좋습니다. 워낙 플러그인이 알아서 포맷을 맞춰주니 그럴일이 없겠지만, 통일해서 쓰도록 합시다! 추가로 문자열 안에 따옴표를 넣고 싶을때는 이렇게 하면 됩니다. let frenchfry = "I like 'cheeze fry'"; //결과값 : I like 'cheeze fry' //그 반대도 가능하다. let frenchfry = 'I like "cheeze fry"'; //결과값 : I like "cheeze fry"..

📌 화살표 함수는 왜 쓰는건가요? function이라는 키워드를 사용하지 않아 코드가 짧아지고 입출력 기능을 직관적으로 전달해주는 장점이 있습니다. ES6문법부터 등장했다고 합니다. 📌 화살표 함수를 사용한 예시를 살펴봅시다. //기존에 함수를 표현할때 const sum = function (x,y) { return x + y; } //화살표 함수를 사용했을때 const add = (x, y) => { return x + y; } 훨씬 간결해보이네요.! 📌 매개변수가 하나일때는 괄호를 제거할 수도 있습니다. 다만, 매개변수가 없을때, 매개변수가 여러 개 일때는 괄호를 제거할 수 없으니 유의합시다. const square = x => { return x * x; } 📌 화살표함수는 리턴값까지 뺄수도 있다고..

요즘은 벌레잡기 게임 클론 코딩을 하고 있다. 변수에 중괄호({ })가 나와서 찾아본 것을 공부해보자! 말이 딱딱하고 어렵다! 구조 분해할당(Destructuring)은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 표현식이다. 여기서 객체 구조 분해할당(Object Destructuring) 은 객체의 값을 변수에 담을 수 있다. 객체에서 여러개를 접근할때 하나씩 꺼내기가 귀찮으니까 중괄호를 사용해서 한꺼번에 접근한다. 이 표현식은 ES6버전에 새로 추가된 기능이라고 한다. 예시를 살펴보자! const user = { email: "harvey@mail.com", password: "dIkNGkdoPH", firstName: "Harvey", lastName: "Milk", ..

currentTarget : 이벤트를 등록해 놓은 요소를 반환한다. Target : 이벤트가 발생한 요소를 반환한다. 말이 어려우니 다음과 같이 예시를 들어보자. 사과 바나나 const myDiv = document.getElementById('mydiv'); myDiv.addEventListener('click',(e)=>{ console.log('currentTarget : ',e.currentTarget.tagName) console.log('target : ',e.target.tagName) }); 결과값은 다음과 같다. currentTarget는 이벤트를 등록해 놓은 요소이기 때문에 listener를 붙여놓은 div가 출력된다. target은 이벤트가 발생한 요소를 반환하기 때문에 다음과 같다...

들어가기에 앞서 forEach를 알기전까지는 배열의 요소를 순서대로 실행하는 코드를 짤때 for반복문으로 사용하곤 했다. //반복문 사용 const items = ["item1", "item2", "item3"]; for (let i = 0; i < items.length; i++) { console.log(items[i]); } //결과 item1 item2 item3 이걸 좀 더 간소화하게 만들수가 있었는데?! forEach 배열의 요소 각각에 대해 주어진 함수를 실행한다. 다만, 요즘은 자주 사용하지 않는다고 한다. 최근에 나온 for of 가 각광받고 있는데, 함수를 넣을 필요도 없어서 코드를 더 짧게 짤수 있다. 위에서 언급한 for반복문을 다음과 같이 forEach를 사용해서 표현할 수 있다...

textContext, innerHtml, innerText는 이름도 비슷하고 자주 헷갈리는 면이 있어서 정리를 해보자! 이 세 녀석은 비슷하게 자바 스크립트로 텍스트를 꺼내거나 추가할 수 있는 속성들이다. 약간씩 차이가 있는데 다음과 같다. textContext 이 녀석은 노드에 포함된 숨겨진 텍스트 문자열을 가져오거나 추가할 수도 있다. 이 녀석이 호환이 제일 잘되고 빠른 장점이 있다고 하고 의도한대로 가공할 수 있는 장점이 있다. 형식 element.textContent = "내용" 예시 Dom practice Let's practice! innerText 화면에 보이는 내용들을 읽어올때 유용하다고 한다. 하지만 내부에 특별한 스타일 적용이 없을때는 적합하지 않다. 형식 element.innerTe..

함수란? 하나의 기능을 가진 코드를 여기저기 만들어놓으면 지저분해지고 유지보수가힘들다. 그래서 한군데에 정의해놓고 여기저기서 재활용하려고 만들어졌다고 한다. 여기서 잠깐! 함수는 기능을 정의하고 꼭 호출을 해야 한다! 함수 선언 방식 * function : 난 함수야! 라고 선언한다. * 함수 이름을 넣는다. * 괄호안에 매개변수를 추가할 수 있다. 매개변수가 여러 개면 쉼표(,)로 구분해준다. 예시 1) 기본형 function singSong() { //1. 선언한다. console.log("DO"); console.log("RE"); console.log("MI"); } singSong(); //2. 호출한다. 2) 매개변수 사용 function greet(person){ console.log(`Hi..

📝 함수공부중이다. 문자열의 첫문자를 대문자로 바꾸는 함수를 짜보다가 다시 찾아보게 된 녀석(toUpperCase(), substring()들이다. toUpperCase() 문자열을 대문자로 바꿔주는 메서드이다. 형식 str.toUpperCase() 반대로 toLowerCase()도 있다. 이 메소드는 문자열을 소문자로 변환한다. substring() 문자열에서 자르고 싶은 구간을 지정해서 그 문자열을 반환해준다. 형식 substring(시작위치 , 종료위치) 특징 * 종료 위치의 -1까지 문자열을 자른다. * 종료위치를 지정하지 않으면 끝까지 자른다. * 시작위치 > 종료위치 인 경우, 두 값이 바뀐 듯 작동된다. (아래 3번째 예시를 참고바람) let str = '중요한건꺾이지않는마음'; let re..

자바스크립트는 배우면서 엄격하다는 느낌이 덜했다.(소시적에 c언어를 조금 배웠더랬다) 그래서 이래도 되나 싶을정도였는데, 아니나 다를까 보완하기 위해서 노력한 이들이 있었으니 바로 타입스크립트!!! 타입스크립트 (Typescript) 타입스크립트는 마이크로소프트(MS)에서 개발하여 2012년10월에 첫 출시되었다고 한다. 오픈소스 프로그래밍 언어로 어떤 브라우저나 호스트, 운영체제에서도 동작한다. 타입스크립트는 자바스크립트의 상위 집합으로서 ECMA의 최신 표준을 지원한다 . 타입스크립트는 정적 타입 언어이기 떄문에 컴파일 시간이 조금 걸리지만, 안정성이 보장됩니다. 반면에 자바스크립트는 동적 타입 언어이기 때문에 런타임 속도는 빠르지만 타입 안정성이 보장되지 않습니다. 자바스크립트와 타입스크립트의 차이..

여기 저기서 "ES6부터 ~" 라는 말을 많이 들어서 무엇인가 찾아보았다. ES6란? 먼저 ES는 ECMAScript 의 약자다. 6은 6번째 ES라고 보면 된다. ECMAScript란? 위키백과에 다음과 같이 정리되어 있다. ECMAScript 는 Ecma 인터내셔널의 ECMA-262 기술 규격에 정의된 표준화된 스크립트 프로그래밍 언어입니다. 자바스크립트를 표준화하기 위해서 만들어졌다. (ECMA은 European Computer Manufacturers Association 약자) JSMAScript의 역사 판 출판일 이름 이전판과의 차이점 1 1997년 6월 초판 2 1998년 6월 ISO/IEC 16262 국제 표준과 완전히 동일한 규격을 적용하기 위한 변경. 3 1999년 12월 강력한 정규 ..

오늘부터 유데미로 복습하기로 했다! 불끈! 🎯NaN이란? Not a Number의 약자. 즉 숫자가 아니다! 라는 뜻이다. 그런데, 숫자가 아니라고 하면서 자바스크립트에서 보면 신기하게 '숫자'라고 한다. 이게 무슨 뜻이냐면 아래를 보자! typeof 연산자를 적용해보았다. 크롬브라우저에서 F12키를 눌러서 콘솔창에 아래를 입력해보면 다음과 같이 나온다. typeof 1 //위와 같이 입력하면 결과값은 'number'라고 나온다. typeof NaN //위와 같이 입력하면 결과값 역시 'number'라고 나온다. 이렇게 나오는 이유는 자바스크립트에서는 숫자타입 or 숫자패밀리로 간주한다. (이게 무슨소리? 자바스크립트는 그렇다고 이해해야 할 것 같다) 하여간 기억해야할 것은 NaN을 반환하는 연산에는 다..

🚩typeof란? 피연산자의 자료형을 나타내는 문자열을 반환하는 연산자이다. 형식 typeof 피연산자 예시 console.log(typeof 7); // expected output: "number" console.log(typeof 'BTS'); // expected output: "string" console.log(typeof true); // expected output: "boolean" console.log(typeof undeclaredVariable); // expected output: "undefined"