yh-jeon Full stack

함수전개 연산자(Spread 연산자, ...)const a = [1,2,3]const b = [4,5,6]console.log(...a) 1,2,3 -> 대괄호가 없어짐!console.log(1,2,3) 1,2,3 -> 아래의 결과와 위의 결과가 동일함! 😎데이터 병합 메서드const c = a.concat(b) console.log(c); 1,2,3,4,5,6 이 병합되어 출력const d = [...a,...b] -> 1,2,3,4,5,6 으로 바뀌게 됨😎console.log(d) [1,2,3],[4,5,6] -> [1,2,3,4,5,6] 으로 배열이 출력됨{전개 연산자}const a = {x: 1, y: 2}const b = {y: 3, z: 4}const c = Object.assign({..

변수(변하는 수)와 상수(변하지 않는 수)let (변수) - 값을 변할 수 있음let age = 27; age는 변수 선언, 27은 변수의 값을 초기화 age = 30; //변수는 언제든 선언하여 값을 재할당할 수 있기에, 초기화 하지 않고 선언하여도 상관없습니다. let age; // undefined로 값이 초기화된 상태 age = 30; let age = 25; // 중복된 이름으로 사용 불가능! [오류]const (상수) - 초기화하고 값을 변화 시킬 수 없음const birth; // 상수는 초기화 없이 작성할 수 없음 [오류] 💡 [변수 명명 규칙(= 네이밍 규칙) ] $ , _ 제외한 기호는 사용 불가능 (위치 상관없음) ex) let $_name (가능) 변수의 이름은 숫자로 시작할 수 없..

폼 요소의 입력값 다루기사용자에게 값을 입력받는 대표적인 폼 요소로는 input 태그와 select 태그가 있습니다. 한 줄 입력 - input 태그의 type 속성값을 text, password, number, url, search, email 등으로 지정했을 때 표시되는 폼form name="frm">    input type="text" name="id">    input type="password" name="pw">  form> text와 password 요소에 사용자가 입력한 값을 가져오려면 해당 요소 노드에 value 속성을 사용합니다.document.frm.id.value;document.frm.pw.value; 다음 코드처럼 value 속성에 값을 할당하여 원하는 값을 자바스크립트로 입력..

.style. = ;객체는 { } 를 이용하여 생성이 가능하며 이러한 방식을 리터럴 방식으로 객체를 생성했다고 표현합니다.만약, { } 내부에 아무런 속성이 없으면 빈 객체라고 부릅니다. 대괄호 연산자로 접근하기 = [ ]console.log(person["name"]); 마침표 연산자const person = { name:"Hong Gildong"};console.log(person.name); 객체 속성 동적으로 추가 - 객체 속성에 값을 할당해 접근하면 해당 속성이 존재하는지 확인하고, 없는 속성이면 해당 키와 값으로 구성된 새로운 속성을 객체에 추가합니다.const person = {};person.name = { firstName:"GilDong", lastName:"Hong"}; pers..

함수에는 함수 선언문, 함수 표현식, 화살표 함수가 있습니다. 함수 선언문 - function 키워드로 함수를 정의하는 방법function 식별자(){}function gugudan() { for(let i = 1; i  이렇게 작성하고 나면, 아래와 같이 함수명 ();로 함수를 실행할 수 있습니다.gugudan(); 함수 표현식 - 변수에 할당하는 함수에 식별자가 있으면 네이밍 함수, 없으면 익명 함수로 구분합니다.const 변수명 = function(){}; // 익명 함수const 변수명 = function 식별자(){}; // 네이밍 함수const gugudan = function(){ for(let i=1; i  함수는 일관된 목적을 가진 코드 집합이라서 const 키워드로 작성하는 것을 권장..

블록문 - 1개 이상의 자바스크립트 코드를 중괄호로 묶은 것, 다른 말로 블록 또는 코드 블록이라고 합니다. 조건문if문 - 소괄호(()) 안의 조건식이 참으로 평가되면 중괄호 안의 코드를 실행하는 조건문if(조건식) { // 조건식이 참이면 실행} else문 - if문의 조건식이 거짓일 때 실행되는 블록문if(조건식) { // 조건식이 참이면 블록문 실행} else { // 조건식이 거짓이면 블록문 실행} 단, else문은 if문 없이 단독으로 사용이 불가능하며 하나의 if문에는 하나의 else문만 사용 가능합니다. else if문 - if문에 조건을 추가하고 싶을 때 사용, 개수에 제한이 없으며 단, else문과 마찬가지로 단독으로 사용할 수 없고, 항상 if문 다음에 사용하고 else문보다는 ..

[변수의 틀]var num = 10 + 20;var(키워드) num(식별자) =(연산자) 10 + 20(표현식) ;(세미콜론)  식별자 명명 규칙규칙불가능 예시식별자에 키워드 사용 불가var, let, const식별자에 공백 포함 불가my School, like food식별자의 첫 글자는 영문 소문자, _(언더스코어), $ 기호만 사용*name, #age, @email규칙좋은 예시나쁜 예시식별자는 영문으로만 작성name, age이름, 나이식별자는 의미 있는 단어로 작성name, age(이름과 나이 저장 시)a,b (이름과 나이 저장 시)식별자 표기법표기법설명예시카멜 표기법변수명과 함수명 작성 시 사용firstName, lastName언더스코어 표기법상수명 작성 시 사용FIRST_NAME, last_nam..

HTML 파일과 자바스크립트 연결하기 - 총 2가지(내부 스크립트 or 외부 스크립트) [내부 스크립트 방법]html 파일에서 script 태그의 콘텐츠 영역에 자바스크립트 코드를 작성하는 방법DOCTYPE html>html lang="ko">head>  meta charset="UTF-8">  meta http-equiv="X-UA-Compatible" content="IE=edge">  meta name="viewport" content="width=device-width, initial-scale=1.0">  title>내부 스크립트 방법title>head>body>  script>    document.write('내부 스크립트 방법');  script>body>html> document.writ..

// 매개변수 패턴// 기본값(Default value)function sum(a,b) {  return a + b}console.log(sum (1,2)) // 3console.log(sum(7)) // 7 + undefined = NaN function 함수의 매개변수로 sum함수를 설정하고 콘솔 창에 지정된 값을 대입하여 결과를 연산하여 반환합니다. 이때, 마지막 콘솔 창에 a의 데이터 값만 지정되고 b의 데이터 값은 지정되지 않아 undefined와 숫자 7을 더한 NaN이 출력되게 됩니다.# 기본값// 매개변수 패턴// 기본값(Default value)function sum(a,b = 1) {  return a + b}console.log(sum (1,2)) // 3console.log(sum(..

// 함수 선언문(Declaration)function hello ( ) {}// 함수 표현식(Expression)const hello = function () {}// 호이스팅(Hoisting) - 함수 선언부가 유효범위 최상단으로 끌어올려지는 현상 / 함수 선언문에서만 사용가능, 표현식 x # 함수 선언문// 호이스팅(Hoisting)hello();function hello() {  console.log("Hello~");} 함수가 선언이 아래쪽에 있지만 함수 선언을 할 때 작성한 선언문을 함수 선언문에 끌어올려져서 동작하는 것 hello()const world = function world() {  console.log('Hello~')} 이렇게 작성하게 될 경우 함수 표현식에서 기존 함수 명을 h..