Frontend/JavaScript (18) 썸네일형 리스트형 [JS] 10. 기초 문법: 객체 자바스크립트에서 객체란 비 원시 자료형 중 하나로 키/이름과 값으로 구성된 프로퍼티(property)의 정렬되지 않은 집합을 의미합니다. [생성 방법] ① new 키워드 let 객체명 = new Object(); ② 객체 리터럴 방식 (더 많이 사용) let 객체명 = { (객체)프로퍼티 }; * 객체 프로퍼티(property): 객체 내부의 속성 ↳ 콜론( : )을 이용해 key: value 형식으로 작성합니다. let a = { key1: "value1", //멤버 key2: 123, key3: true, key4: undefined, key5: [1, 2], key6: function () {} //메서드 }; console.log(a); * 멤버와 메서드: 객체를 다루는 방법이라는 뜻에서 객체 안.. [JS] 9. 기초 문법: 콜백 함수 개념 콜백 함수: 다른 함수의 매개 변수로 넘겨준 함수. 콜백함수를 일단 넘겨받고, 때가 되면 나중에 호출(called back)한다. 콜백 함수를 이용하면 여러가지 유연한 동작들을 할 수 있는 함수를 만들 수 있습니다. [예시 코드] /* 기분에 따라 다른 동작을 하는 함수 */ function checkMood(mood, goodCallback, badCallback) { if (mood == "good") { goodCallback(); } else { badCallback(); } } function cry() { console.log("엉엉 웁니다."); } function sing() { console.log("즐겁게 노래를 부릅니다."); } function dance() { console.log.. [JS] 8. 기초 문법: 함수 표현식 & 화살표 함수 (+호이스팅) 1) 함수 표현식 함수도 하나의 값이기 때문에 변수나 상수에 대입하여 사용할 수 있습니다. 함수 표현식: 무명 함수를 변수나 상수에 대입하여 사용하는 방식 let 변수명 = function() {함수의 기능}; 함수를 값으로 취급하는 함수 표현식에서는 함수의 이름을 별도로 명시하지 않아도 됩니다. 그 대신에 함수를 담고 있는 변수/상수의 이름을 함수의 이름인 것처럼 사용합니다. //함수 표현식 let hello = function () { return "안녕하세요 여러분~!"; }; //함수 선언식 function helloFunct() { return "안녕하세요 여러분~!"; } const helloText = hello(); console.log(helloText); //'안녕하세요 여러분~!' 출.. [JS] 7. 기초 문법: 함수 프로그래밍을 하다보면 똑같은 동작을 하는 코드들을 여러 번 사용해야 하는 경우가 많습니다. 이렇게 중복되는 코드들을 하나로 묶어 함수로 정의하여 사용할 수 있습니다. 함수를 사용하면 똑같은 코드를 계속해서 중복 작성하지 않고 훨씬 더 간결하면서 효율적인 코드를 작성할 수 있습니다. [함수 선언] : function 키워드 function 함수이름(매개변수) {함수의 기능} return 키워드를 사용하면 함수의 결과 값(반환 값)을 대입 연산자를 이용해 변수에 할당할 수 있습니다. 함수 내부에서 선언한 변수나 상수는 그 함수에서만 사용 가능한 지역 변수로서 함수 외부에서는 접근할 수 없습니다. 반대로 함수 외부에서 선언한 변수는 전역 변수로서 함수 내부에서 접근이 가능합니다. [함수 호출] 함수이름 (매개.. [JS] 6. 기초 문법: 조건문 조건문: 어떤 연산 결과의 참/거짓에 따라 각각 다른 명령을 실행할 수 있도록 함. 1) if문 [구조] if (조건식) {...} else if (조건식) {...} else {...} let a = 3; if (a >= 5) { //괄호 안의 조건식이 참인 경우 실행 console.log("5 이상의 수"); } else { //괄호 안의 조건식이 거짓인 경우 실행 console.log("5 미만의 수"); } let a = 5; if (a >= 10) { //괄호 안의 조건식이 참인 경우 실행 console.log("10 이상의 수"); } else if (a >= 5) { //괄호 안의 조건식이 참인 경우 실행 console.log("5 이상의 수"); } else if (a >= 0) { //괄.. [JS] 5. 기초 문법: 연산자 1) 대입 연산자 = : 변수에 값을 넣는 연산자 2) 산술 연산자 + - * / % : 사칙 연산, 나머지 계산을 하는 연산자 3) 연결 연산자 + : 두 개 이상의 문자열을 이어 붙이는 연산자 let a = "1"; let b = "2"; console.log(a+b); //12 출력 * 문자열과 숫자형 값을 '+' 연산자를 이용하여 연산하는 경우, 산술 연산인 더하기 연산이 되는 것이 아니라 숫자형 값을 문자열로 묵시적 형 변환하여 연결 연산이 일어납니다. 즉, '+' 연산자를 이용하여 연산할 때 피연산자 중 문자열이 하나라도 포함되어 있다면 문자열로 자동 형 변환이 일어납니다. let a = 1; let b = "2"; let c = true; let d = null; let e; console... [JS] 4. 기초 문법: 자료형과 형 변환 1. 자료형 자료형(Data Type): 값을 성질에 따라 분류한 것. 자바스크립트에서는 값을 크게 Primitive와 Non-Primitive 2개, 작게는 Primitive 5개와 Non-Primitive 3개로 나누어 총 8개의 자료형으로 분류합니다. [Primitive Type과 Non-Primitive Type] Primitive Type(원시 타입): 한 번에 하나의 값만 가질 수 있고 하나의 고정된 저장 공간을 사용. 내장형 타입 또는 기본형 타입이라고도 합니다. let num = 10; Non-Primitive Type(비 원시 타입): 한 번에 여러 개의 값을 가질 수 있고 여러 개의 고정되지 않은 동적 공간 사용. let array = [1,2,3,4]; [Primitive Type D.. [JS] 3. 기초 문법: 변수와 상수 1) 변수 변수: 프로그램이 실행되는 도중 계속해서 바뀌는 값을 저장. [변수 선언] ① let 키워드 (권장) let num = 10; // 변수 선언: let 변수명 = 값; console.log(num); // 10 num = 100; // num의 값 변경 console.log(num); // 100 ② var 키워드 var 키워드를 이용해서도 변수를 선언할 수 있지만, var는 같은 이름을 가지는 변수를 중복해서 선언하는 것을 허용하기 때문에 let 키워드를 사용하는 것이 좋습니다. var num1 = 10; var num1 = 20; //오류 발생하지 않음 let num2 = 10; let num2 = 20; // *오류 발생 [변수 이름 규칙] '_'(언더 스코어)와 '$'(달러)를 제외한 .. 이전 1 2 3 다음
