FrontEnd/Javascript
-
함수(function)FrontEnd/Javascript 2022. 5. 11. 14:58
- 스크립트를 저장하는 공간 1 2. 익명함수를 참조변수에 참조시킨다. 3. 함수 매개변수를 입력후 값을 전달 function 함수명( ) { 스크립트 코드; } 함수명( ); 참조변수 = function( ) { 스크립트 코드; } 참조변수( ); function 함수명(매개변수1, 매개변수2){ 스크립트 코드; } 함수명(값1, 값2); - 코드의 재활용을 높이기 위해서 함수를 사용 // 1. function greeting() { console.log("hello"); console.log("welcome"); } greeting(); // 2. function greeting2(name, area) { console.log("hello " + name); console.log("welcome " ..
-
Object Literal 방식FrontEnd/Javascript 2022. 5. 11. 12:09
- 자바스크립트는 객체를 생성하고 프로퍼티를 지정하는 객체 리터럴(object literal) 문법을 제공한다. // 내장 객체 생성 var car = new Object(); car.color = "white"; car.price = "1000만원"; car.getinfo = function() { document("색상: ", this.color); document("가격: ", this.price); } console.log(car); 위의 코드를 Object Literal 방식으로 바꾸면 // Object Literal 방식 var car = { "color": "white", "price": "1000만원", "getinfo": function() { document("색상: ", this.co..
-
선택문(switch 문)FrontEnd/Javascript 2022. 5. 11. 11:33
switch문 일치하는 경우에 값이 있을 경우 선택하여 해당 스크립트 코드를 수행합니다. // game이라는 변수에 바위라는 문자열 데이터가 들어가 있고 num이라는 변수를 선언 var game = "바위",num; // ()에 데이터가 저장된 변수를 넣음 // 일치하는 case가 아니라면 그냥 넘어가고 // 일치하는 case면 num에 지정된 값이 들어간다. switch(game) { case "가위":num = 1; break; case "바위":num = 2; break; case "보":num = 3; break; default: num = "error"; } // 2를 출력 console.log(num);
-
-
삼항조건 연산자FrontEnd/Javascript 2022. 5. 11. 10:46
삼항조건 연산자 - Javascript에서 세 개의 피연산자를 가지고 있는 유일한 연산자 논리형 데이터 ? 값1 : 값2 논리형 데이터 자리에 true이면 값1을 출력 논리형 데이터 자리에 false이면 값2를 출력 // 삼항조건연산자 var num1 = 10; var num2 = 20; var num3 = 3; var num4 = "10"; var result; // 논리형 데이터 자리에 true이기 때문에 num1값인 10을 출력 result = true ? num1 : num2; console.log(result);
-
논리 연산자FrontEnd/Javascript 2022. 5. 11. 10:41
논리 연산자 주어진 논리식을 판단하여, 참(true)과 거짓(false)을 반환합니다. 논리 연산자의 모든 동작의 결과를 보여주는 진리표(truth table)입니다. // 논리연산자 var num1 = 10; var num2 = 20; var num3 = 3; var num4 = "10"; var result; // false or false = false result = true && false || true && false; console.log(result) // true and true or false = true result2 = num1 < num2 && num1 == num4 || true && false; console.log(result2)
-
비교 연산자FrontEnd/Javascript 2022. 5. 11. 10:18
비교 연산자 피연산자 사이의 상대적인 크기를 판단하여, 참(true)과 거짓(false)을 반환한다. 모두 두 개의 피연산자를 가지는 이항 연산자이다. // 비교연산자 var num1 = 10; var num2 = 20; var num3 = 3; var num4 = "10"; var result; // 데이터 타입은 무시하기 떄문에 num4의 문자가 형변환되어 10이므로 결과값은 true라고 나온다. result1 = num1 == num4; console.log(result1); // 데이터 타입까지 비교를 하기 때문에 숫자 10과 문자 10은 다르기 때문에 결과값은 false라고 나온다. result2 = num1 === num4; console.log(result2); // num1과 num4의 값..
-
React에서 많이 사용하는 Javascript 문법FrontEnd/Javascript 2022. 5. 10. 17:32
object shorthand assignment - ES6에서는 객체를 반환하는데 있어서 불필요한 반복을 없앤다. *ES6 2009년에 ECMAScript 5(ES5 또느 ES2009) 버전을 발표했던 Ecma International은 2015에 ECMAScript 6 개정판을 발표하는데 이를 줄여서 ES6 라 부릅니다. 간혹 발표한 년도를 이용해 ES2015라 하기도 합니다. 변수를 var 에서 let, const 로 구분해 선언하고 함수 정의를 간결하게 할 수 잇는 화살표함수 등의 새로운 기능을 제공하였습니다. Javascript ES6란 – Javascript 2009년에 ECMAScript 5(ES5 또느 ES2009) 버전을 발표했던 Ecma International은 2015에 ECMASc..