ijooha 님의 블로그

연산자 활용하기         Falsy 활용하는 방법을 알아보기 전에, 연산자에서 가장 중요한 falsy를 먼저 알아보자.0'' (빈 문자열)nullundefinedNaNfalsy에는 위 다섯가지 종류가 있다.저 값을 칠 경우 거짓으로 나온다.  그럼 이제 네가지 연산자를 활용하는 법을 알아보겠다.       || or 이라는 의미의 연산자이다.평소 조건문에서 두가지 조건 중 하나를 충족할 때 로직을 진행하는 식으로 종종 사용했다. 하지만 더 나아가return result || 'no result'이런식으로도 사용할 수 있다!왼쪽 값이 거짓이면(없으면), 오른쪽 값을 내보내줘!         ?? 이건 처음보는 연산자였다.||와 사용법이 비슷하다.return result ?? 'no result'하지만..

this 알아보기         전역환경 this • Borwser(크롬)에서의 this는 window• Node에서의 this는 global         Method에서의 this • method는 항상 누군가 호출해 줘야 하기 때문에• this는 호출의 주체예를들어let obj = { methodA : function() { console.log(this); }, inner : { methodB : function() { console.log(this); } }};이런 객체가 있다고 했을 때, thisobj.methodA();obj 를 참조obj.inner.methodB()obj.inner 참조 화살표 함수의 경우, 상..

복사 알아보기         복사? 객체는 값 자체가 아니라 값의 주소를 통해 데이터를 전달한다.그래서 객체를 단순히 복사하면, 복사한 객체와 원본 객체가 같은 메모리 주소를 참조하게 되어,하나를 변경하면 두 객체가 모두 변경되는 오류가 발생한다.이를 방지하기 위해 깊은 복사(deep copy)와 얕은 복사(shallow copy)라는 개념이 존재한다.얕은 복사는 대상의 1단계 속성만 복사하는 반면,깊은 복사는 대상을 완전히 복사하여 중첩된 객체나 배열까지도 새로운 메모리 주소를 갖도록 복사한다        얕은 복사(shallow copy) • 1단계 속성만 복사const shallowCopy = function(target) { let result = {}; for (let prop in targ..

데이터타입(Data Type) 알아보기         원시 타입 01 숫자형(Number)정수와 소수를 모두 포함2^53-1보다 큰 수는 Bigint  02 문자형(String)"string"'string'`string`다 같지만 백틱(`)의 경우• 줄바꿈이 가능하다• ${}로 다른 변수 사용 가능  03 불리언(Boolean)조건을 표현하는 자료구조truefalse  04 Null널.. 이라고 읽는다..값이 없는 것 (빈 공간)undefined (공간 자체가 없음)          참조 타입 별도의 공간에 원본 데이터를 저장,변수에 데이터의 주소를 저장.주소가 메인이기 때문에let a = [1];let b = [1];a === b //false 같은 값이 들어있는 배열이어도 다른 배열, 혹은 객체이다...

변수 알아보기         변수(Variable 데이터를 저장하고 참조할 수 있는 이름과 주소를 가진 저장소변수 선언 (이 저장소 쓸게) //var a;할당 (이 저장소에 이거 담을게) //a = 1;  01 var**최대한 사용 지양하기**함수 스코프를 가지며, 재선언과 재할당이 가능하다.var x = 10;var x = 20; //재선언 가능x = 30; //재할당 가능TDZ (temporarily dead zone)let x; 이렇게 호이스팅 안되고 에러 뜸but var x; 는 그대로 undefined 로 뜸  02 let재선언 불가능재할당 가능let a = 0;let a = 2; //재선언 불가능a = 1; //재할당 가능  03 const재선언 불가능재할당 불가능const a = 0;con..

화살표 함수와  this, 그리고 호이스팅 알아보기         화살표 함수? function () {}() => {}위가 전통적 함수 표기법, 아래가 화살표 함수다.화살표 함수가 훨씬 간결해서 저것만 쓰면 안되나? 싶어서 찾아보니,동작 방식에서 차이가 있었다.  01 this 바인딩의 차이this 란, 함수나 메서드 내에서 객체를 참조하는 키워드다. (다음 목차에서 더 설명)function에서는 this가 동적으로 결정된다. 즉 아래와 같이 사용이 가능하다.const obj = { value: 10, example: function () { console.log(this.value); //this는 obj를 가리킴 -> 출력: 10 },};하지만 화살표 함수에서는 상위 컨텍스트의 this를 상..

html, css, javascript 연결하기         HTML → CSS html에서 써준 코드를 css에서 꾸며주기 위해 필요한 선택자*모든 태그를 선택tag #id .class li ali 안에 있는 ali + ali 바로 뒤에 오는 a (같은 계층)li > a한 계층 아래 ainput [type=""]속성 선택li.class같은 요소의 클라스들:hover :active :checkedinput[type="radio"]:checked:nth-of-type(n)n번째 요소에 적용(반복):last-child :nth-child :nth-last-child ::first-letter ::first-line ::selection드래그 했을 때         HTML → JavaScript 다음..

'탭이동' classList 기능 연습         실습 목표 시작화면 : 기본 페이지로 시작탭 클릭 : '팀 소개' 혹은 '멤버 소개' 탭 클릭 시 해당 콘텐츠만 보이게 하기기능 : 해당 탭과 관련있는 콘텐츠만 노출, 외는 다 숨기기 자바스크립트는 처음 써봐서 선택자를 사용하는 것부터 살짝 시행착오가 있었지만, 재밌었다!코딩테스트 하면서 썼던 함수들 실제로 응용해봐서 더 좋았음         완성된 코딩 //변수const start = document.querySelector("#start-page");const content1 = document.querySelector("#team-page");const content2 = document.querySelector("#member-page");co..

문자형(String) 알아보기문자형이 뭔지 모르는 사람 클릭🙋         Index 문자형에 들어가는 모든 character에는  순서가 있다. 그걸 인덱스(index)라고 한다.순서는 0부터 시작한다."hello"라는 string(문자형)이 있다고 했을 때, 파란 숫자가 순서다.불러오는 방법은 > 변수이름[불러오고싶은 순서]"hello"[0] //"h"         속성(Property) .length;example.lengthString(문자형)의 길이를 알려준다.** 인덱스는 0부터 시작하기 때문에, 마지막 글자는 항상 .length -1 이다.example.length //5이 경우 마지막 글자인 'o'의 인덱스는 '4'이지만 string의 길이는 '5'임         규칙(Methods..

내장 객체(Math.methods) 알아보기         종류 Math.PI파이값 반환 Math.ceil(n)올림Math.ceil(3.000001) //4Math.floor내림Math.floor(3.999) //3Math.random()0 아래로 랜덤👇👇아래 추가설명 참고Math.abs(n)정수로 반환 Math.pow(i,n)i의 n승Math.pow(2,5) //32 Math.random()0 아래로 랜덤 숫자 반환Math.floor() 사용하여 활용Math.floor(Math.random() * 5)Math.random() * 랜덤 돌리고싶은 수 + 시작하는 수Math.floor(Math.random() * 5 + 1);//1-5사이의 랜덤 수  이 외에도 정말 많은 Math 메소드들이 있는 것 ..