코린이

함수2 함수scope 함수의 중괄호 안의 코드는 지역 scope 함수 밖은 전역 scope 블록scope (let, const 키워드에 한해) 블록문 안 지역 scope 블록문 밖 전역 scope 함수도 호이스팅(선언문을 최상위로 끌어올림)이 적용됨 → 함수 선언문은 정상 실행, 함수 표현식은 X 즉시 실행 함수 : 한번 실행되고 메모리에서 사라짐 (전역 스코프의 오염 최소화) (() => { console.log('init'); })(); (function init() { console.log('init'); })();과 같은 형태도 가능

Javascript 함수 1. 함수 선언문 (대표적) fucntion 식별자(매개변수1, 매개변수2, 매개변수3) { //코드 } 식별자(인수1, 인수2, 인수3); 로 실행 ※ 식별자(인수1)로도 실행은 가능하지만 매개변수2, 매개변수3이 undefied취급 2. 함수 표현식 const gugudanExpress = function(){ //코드 } → 익명 함수 + function gugudanExpress()형태로 작성시 → 네이밍 함수 (권장) 변수이름(); 로 실행 ※ 주의 : 함수 네이밍 이름으로 실행하는 것이 아님 (변수 이름으로만 호출 가능) 3. 화살표 함수 () => { //코드 } const gugudanArrowFunc = () => { // 코드 }; 변수이름(); 로 실행 + 매..

for...in 루프 for(let variable in obj) { // 실행할 코드; } ex. 배열 출력 for(let index in arr) { console.log(arr[index]); } 객체 출력 for(let key in obj){ console.log(obj[key]); } 배열을 순회할 때는 배열의 프로토타입 체인에 존재하는 속성도 열거할 수 있으므로 for...of 루프를 사용하는 것이 더 안전

연산자 산술 연산자 이항 산술 연산자 +, -, *, /, %, **(거듭제곱) 단항 산술 연산자 ++, -- 단항 부호 연산자 - 대입(할당) 연산자 = 복합 대입 연산자 +=, -=, **= 비교 연산자 , ==, != 서로다른 자료형을 비교할 때 형변환 후 비교됨 일치 연산자 엄격하게 비교 연산 수행(자료형 까지 비교) → ===, !== (일치 연산자) 논리연산자 &&, ||, ! 삼항연산자 ? :

변수와 상수, 자료형 변수 var num = 10; (실무사용 X → 식별자가 중복될 수 있음) (호이스팅 가능) ※ 호이스팅 : 선언부와 할당을 나누어서, 선언부를 최상위로 끌어올리는 행위 let num = 10; (식별자가 중복될 수 없음) (호이스팅 불가) 상수 const num = 10; (재할당 불가, 선언과 동시에 할당 필요) 자료형 1. 문자열 let str = "Hello"; let str2 = 'hello'; ※ 주의 : '나 "를 문자열에 포함할경우 ", '를 사용하여 구분 해결방법1. 둘다 사용하는 경우에는 덧셈 기호를 활용 (분리) 해결방법2. 이스케이프 문자 활용 → \'\' 해결방법3. 템플릿 문자열 사용 → ` ` 사용 (단, 지원해주는 컴파일러 내에서만 작동됨) 장점 cons..

javascript 코드 작성 방법 1. 내부 스크립트 방법 2. 외부 스크립트 script태그는 태그가 끝나기 바로 직전에 사용해 주어야 함. 내부, 외부 방법 동시사용하는 실수하지 않도록 유의하기 이외 (단순 실행) 3. 콘솔창 이용 4. 확장프로그램 사용 - code runner (웹 브라우저 관련 내용은 출력 불가능)

미디어 쿼리 : 미디어 유형이나 장치의 특성에 따라 스타일을 다르게 적용할 수 있게 하는 기능 주로 반응형 웹 디자인에서 사용되며 화면크기, 해상도, 디바이스 종류 등에 따라 스타일을 동적으로 조절하는 데 활용 뷰포트(Viewport) : 웹페이지가 보여지는 화면 영역 디바이스에 맞춰서 최적화 content 속성값 속성값 설명 width 뷰포트의 너비를 설정. 보통 device-width로 설정함 height 뷰포트의 높이를 설정. 잘 사용하지 않음 initial-scale 뷰포트의 초기 배율을 설정. 1이 default, 1보다 작으면 축소 값, 1보다 크면 확대 값으로 설정 minimum-scale 뷰포트의 최소 축소 비율을 설정. 0.25가 default maximum-scale 뷰포트의 최대 확대..

그리드 레이아웃으로 2차원 레이아웃 설계하기 display: grid; grid-template-rows: 100px 200px; → 두개의 행, 각각의 높이 100px, 200px grid-template-colums: 1fr 2fr; → 두개의 열, 첫번째 열은 1fr, 두번째 열은 2fr (1:2) fr : 비율 1fr 1fr은 repeat(2, 1fr);과 같은 방식으로도 표기 가능 최소수치를 정해주고싶으면 minmax(100px, 1fr) minmax(100px, 1fr);과 같은 방식으로도 가능 = repeat(2, minmax(100px, 1fr)) row-gap: 10px; → 행 사이의 갭 column-gap: 10px; → 열 사이의 갭 align-items: stretch; → 세로 ..