반응형

Front-End/자바스크립트 22

[자바스크립트] 타입 종류의 특징 및 예제(Primitive Data Type)

Primitive Data Type에 대해서 알아보고 자바스크립트 엔진에서 자동 캐스팅 되는 것을 확인해 보자. Primitive Data Type 종류 1. Number 타입 2. String 타입 3. Boolean 타입 4. Undefined 타입 5. Null 타입 1. number 타입 소스 코드 // Number let age = 31; let tall = 186.7; let inf = Infinity; let minusInf = -Infinity; let nan = NaN; console.log(age, typeof age); console.log(tall, typeof tall); console.log(inf, typeof inf); console.log(minusInf, typeof mi..

[자바스크립트] let, var, const 비교

자바스크립트의 변수를 선언하기 위해서는 let, var를 사용하고, 상수를 선언하기 위해서 const를 사용한다. 기본이지만 차이를 알고 사용하도록 하자. 1. let 변수 소스 코드 // 1. let 변수 알아보기 let age = 28; console.log("나이 : " + age); // 1-1. 그냥 변수로 덮어쓰는 것은 가능함 age = 27; console.log("나이 : " + age); 결과 나이 : 28 나이 : 27 let 변수는 변수이기 때문에 덮어쓰는 것이 가능하다. 하지만, 아래와 같이 재 선언하는 것은 불가능하다. 소스 코드 // 1-2. let을 한번더 선언하는 것은 불가능함 let age = 31; console.log("나이 : " + age); 결과 SyntaxErro..

[자바스크립트(Java Script)] 리스트 출력 map, forEach 예제

1. For문을 통해 리스트 값 가져오기 우리는 객체리스트를 가져올때 단순 for문을 통해서 아래와 같이 가저온다. ▼로그 결과 map과 foreach문을 사용해서 리스트의 값을 가져올 수 있다. 2. foreach 사용 예제 ▼로그 결과 3. map 사용 예제 map은 foreach 문과 다르게 return 값을 가지고 있다. return 값을 통해서 새로운 result 리스트를 생성하는 것을 아래에서 확인해보자. ▼로그 결과 result를 출력했을때, 객체의 name 만 들어있는 리스트가 있다는 것을 확인 할 수 있다. foreach문은 return 값이 없지만, map은 return값이 필요할때 유용하게 사용 할 수 있다.

JSON - 자바스크립트의 객체와 비교

JSON JSON : JavaScript Object Notation의 약자 JSON은 정보처리기사에서는 키 - 값 쌍이라고 배웠다. 자바 스크립트에서의 객체의 형식과 JSON은 거의 동일합니다. (자바 스크립트 객체 예제 링크) (key 값에 ""따옴표를 꼭 입력해야 하는 차이점은 있습니다.) 자바스크립트와 같이 사용하기에 큰 장점을 가진 데이터 포맷입니다. 자바 스크립트 JSON { "name" : "쇼니", "age" : 30 } { "name" : "shoney", "age" : 30 } 자바 스크립트에서는 key 값에 "(따옴표)가 없어도 됩니다. 하지만, JSON에서는 key에 "(따옴표)가 필수입니다. JSON의 장점은 다른 프로토콜 언어들에 비해 가독성이 높다는 장점이 있습니다. (키와 값..

[자바스크립트(Java Script)] 비동기 간단 예제

1. 비동기 소스 코드 기본적으로 위에서 부터 순차적으로 진행된다. 하지만, 비동기는 위의 소스코드가 먼저 실행되지 않는다는 것을 보여준다. 콜백 함수에서 사용했던 setTimeout 함수가 비동기 함수이다. (바로가기 : [자바스크립트(Java Script)] 콜백 함수) setTimeout 함수를 보면서 비동기를 이해하도록 하자 소스 코드 setTimeout(function () { console.log("3초 후에 출력됩니다."); }, 3000); console.log("바로 실행됩니다."); 결과 동기로 실행되었다면, "3초 후에 출력됩니다"의 로그가 먼저 작성되고 "바로 실행됩니다." 가 작성될 것이다. 하지만, 위의 결과를 보면 "바로 실행됩니다."가 먼저 실행된 것을 볼 수 있다. 이는 s..

[자바스크립트(Java Script)] 콜백 함수

1. 기본 콜백 함수 콜백 함수란 함수를 함수에서 불러 사용하는것이다. 다른 함수를 불러와서 사용 하기 때문에, 인풋 변수에 함수가 들어가는 것이 특징이다. helloFunction 이라는 함수를 getFunction 함수에서 호출 할 수 있다. 소스 코드 function helloFunction() { console.log("함수 호출"); } function getFunction(callback) { callback(); } getFunction(helloFunction); getFunction(function () { console.log("익명 함수 호출"); }); 결과 getFunction 함수는 함수를 넣어서 사용하기 때문에, 익명함수도 사용 가능합니다. (익명함수는 함수의 이름이 없기 때문..

[자바스크립트(Java Script)] 객체 간단 예제(2)

1. 객체 내부 function 구현 ​ const cat1 = { name: "다홍이1", sound: "다아옹1", say1: function say() { console.log(this.sound); } }; ​ const cat2 = { name: "다홍이2", sound: "다아옹2", say2: function () { console.log(this.sound); } }; ​ //cat1.say(); //이렇게 사용할 수 없다. function 뒤에 메서드 명을 따르지 않는다. cat1.say1(); cat2.say2(); ​ ​ 2. get, set 예제 ​ const customer1 = { point: 1, mileage: 10, get sum() { console.log("Sum met..

[자바스크립트(Java Script)] 객체 간단 예제(1)

객체 간단 예제 ​dog, ironMan, captainAmerica 객체를 만들어 줍니다. const dog ={ name : '멍멍이', age : 2 } ​ const ironMan = { name : '토니 스타크', actor : '로버트 다우니 주니어', alias : '아이언 맨' } ​ const captainAmerica = { name : '스티븐 로저스', actor : '크리스 에반스', alias : '캡틴 아메리카' } ​ console.log(dog); console.log(ironMan); console.log(captainAmerica); ​ 프린트 가능한 함수 생성 ​ 1. 그냥 프린트 함수 function print1(hero) { const text = `1: ${he..

[자바스크립트(Java Script)] 리스트 생성 예제

1. 리스트 생성방법 ​ const array = [1,2,3,4,5]; const animal = [{name:'독'},{name:'캣'}]; ​ console.log(array[2]); console.log(animal); console.log(animal[0]); console.log(animal[1]); console.log(animal[2]); //해당 항목은 없음 --> undefined로 출력됨 ​ ​ 2. 리스트 추가방법 ​ animal.push({name: '뿜'}); console.log(animal); console.log(animal[2]); ​ ​ 3. 길이 조회 ​ console.log(animal.length);

반응형