본문 바로가기

Language

함수 선언문과 함수 표현 식의 차이 그리고 호이스팅 1. 함수 선언문 함수 선언 Keyword로 시작해서 함수를 선언하는 문장. //함수 선언문 function hello () {} function 함수이름 (인수 넣는 자리) {동작 로직} 형태로 적힌다. 2. 함수 표현식 변수에 익명함수나 기명 함수를 대입하는 형태의 표현식이다. // 표현식 1. 기명함수를 변수에 대입 const world = function hello () {} // 표현식 2. 익명함수를 변수에 대입 const world2 = function () {} const world3 = () => {} 표현식 1인 기명함수를 변수에 대입할 시 원래 함수의 이름으로 더 이상 호출하여 쓰지 못한다. 무조건 대입한 변수 이름으로만 호출하여 쓸 수 있다. hello(); // error -> 엥.. 더보기
HTML에서 JavaScript 쓰기 1. HTML 내부에 JavaScript를 쓰는 것 (CSS 인라인 형식과 유사) html 내에서 script란 태그를 쓰면 그 태그 안 쪽에 자바 스크립트 코드를 쓸 수 있다. 2. 외부 파일로부터 JavaScript 코드 가져오기 사이에 외부 파일의 JS 코드 전체가 들어가는 것과 동일하다. 만약 이렇게 쓴다면? 해당 경우, 사이에 쓰인 코드 내용은 무시된다. 왜냐하면 scr에 적힌 내용이 안으로 들어가는 것이기 때문이다. 더보기
While, do while 1. while break 할 수 있게 만들어주지 않으면 무한 루프가 돌 수 있다. 따라서 ( ) 안이든 { } 안이든 증감과 조건문을 달아줘야 한다. 2. do while while 조건에 처음 부터 안 맞아서 명령 실행 부가 아예 실행이 안될 수 있다. 이것을 막고자 쓰는 do while 문은 처음 한번은 문장이 실행되도록 해준다. do {} while ()은 먼저 명령어 부분을 한 번 실행하고, 루프에 진입한다. 0은 대표적인 falsey 값이라 참이 안된다. 이 문장을 맨 처음 한번은 실행하고 싶다면, 이렇게 하면 문장을 한 번 실행하고 루프에 진입한다. 더보기
For 반복문, For of, For in 1. For 반복문 // 선언부 ; 조건부; 증감연산부; // 조건에 맞는지 확인 -> loop 돌릴려는 명령 실행 -> 증감 연산 -> 조건에 맞는지 확인 (반복) for (let i = 0; i < 10; i++) { console.log(i); } (1) break loop를 돌다가 break를 만나면 그 자리에서 탈출 i가 9가 되는 순간 탈출. (2) Continue continue를 만나면, 해당 키워드 밑의 코드들은 실행하지 않고 다시 loop로 돌아감. if 조건 만족해서 continue 만나면 밑의 문장들 실행하지 않고, 바로 loop문으로 넘어감. if 조건 만족 못해서 지나갈 경우 , 그대로 console.log 찍힘. 2. For of 반복문 (배열에서 쓰임) java에서의 for .. 더보기
If와 Switch 문 1. if 2. switch 문 (1) 형태 let comment = ""; age = 14; switch (age) { case 14: comment = "중학교 1학년"; break; case 15: comment = "중학교 2학년"; break; case 16: comment = "중학교 3학년"; break; case 17: comment = "고등학교 1학년"; break; case 18: comment = "고등학교 2학년"; break; case 17: comment = "고등학교 3학년"; break; default: comment = "성인이거나 초등학생입니다."; } console.log(comment); 인수로 받은 값을 case 에 적혀있는 값들과 차례대로 비교한다. 그 중 일치하.. 더보기
선택적 체이닝(Optional Chaining) **완전 잘 보고 배운 곳 ** 옵셔널 체이닝 '?.' (javascript.info) 옵셔널 체이닝 '?.' ko.javascript.info 1. Optional Chaining 이 생긴 이유 (1) 생긴 이유 객체 안의 멤버의 값을 얻기 위해 점 표기법으로 접근했는데, 그 멤버가 존재하지 않는 순간이 있다. 이 경우 원래라면 에러가 난다. const User {} console.log(user.adderess); // syntax error 이와 같이 우리가 객체 안의 특정 멤버에 접근하려고 하지만, 그 멤버가 있는지 없는지 모르는 경우에 Error를 피하기 위해 OptionalChaing이 만들어진 것이다. (2) Optional Chaining 없었을 땐 어떻게 이 문제를 해결했나요? && 이 .. 더보기
구조 분해 할당 1. 구조 분해 할당이란? 만약 우리가 배열에서 원소를 일일히 빼서 변수에 집어 넣는다면, 다음과 같은 과정을 거쳐야 할 것이다. const arr = [1,2,3] const a = arr[0] const b = arr[1] const c = arr[2] JS에서는 위 과정을 간단하게 한 줄의 코드로 적을 수 있는 방법이 있다. 이를 구조 분해 할당이라고 한다. 배열이나 객체의 원소들을 찢어서 변수 하나 하나에 넣어주는 방식을 말한다. 2. 배열에서의 구조 분해 (1) 기본형 // 배열 선언 const arr = [1,2,3] // 구조 분해 할당 이용: 변수 a, b, c에 각각 1, 2, 3이 차례로 들어간다. const [a,b,c] = arr console.log(a,b,c) // 1 2 3이 .. 더보기
전개 연산자 1. 정의 (1) 형태 const a = [1,2,3] console.log(a) // [1,2,3] console.log(...a) // 1,2,3 const b = {a:'apple', b: 'banana', c: 'car'} const c = {d:'digest', e: 'earth', f: 'fool\'s day'} const r = {...b,...c} console.log(r) // {a:'apple', b: 'banana', c: 'car', d:'digest', e: 'earth', f: 'fool\'s day'} (2) 정의 배열이나 객체의 원소들을 차례대로 전개하는 연산자이다. 배열의 대괄호나, 객체의 중괄호를 벗긴다. ** console.log() 에 여러 개의 data를 찍는 법 ,.. 더보기