본문 바로가기

분류 전체보기

 (104)
[JavaScript] let 키워드 ES6에 추가된 변수 선언 방법입니다. 중복 선언이 불가능 합니다.함수 범위 스코프 입니다. let_ex01.html 파일을 다음과 같이 만듭니다.123456789101112131415161718192021222324252627282930!DOCTYPE html>html lang="ko">head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>let 키워드/title>    script>        // 구분선을 그려주는 함수 선언        let line = () => console.log('-'.repeat(50));         let user_n..
[JavaScript] const 키워드 변경 불가능한 상수를 선언할때 사용합니다.const의 선언은 블록범위 입니다.const는 업데이트 하거나 다시 선언할 수 없습니다. const_ex01.html 파일을 다음과 같이 만듭니다.1234567891011121314151617181920212223242526!DOCTYPE html>html lang="ko">head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>const(상수 선언)/title>    script>        const PI = 3.141592;         // 원의 둘레를 구해주는 함수        function circum..
[JavaScript] var의 문제점 자밥스크립트에서 ES6가 출현하기 전에는 변수를 선언시 var 예약어 선언이 지배했습니다.그러나 var로 선언된 변수와 관련된 문제가 있습니다.  그렇기 때문에 변수를 선언하는 새로운 방법이 등장해야 했습니다.ES6 에서 변수선언에 사용되는 let, const 예약어를 배우기 전에 이전의 변수 선언의 문제점을 보도록 하겠습니다. 1. 중복 선언이 가능합니다.        // var를 이용하면 한번 정의된 변수를 재정의 할 수 있습니다.        var i = 1;        console.log(`i = ${i}`);        var i = 2; // 오류가 오류가 아닙니다.        console.log(`i = ${i}`); 2. 상수라고 대문자로 선언해도 변경이 가능합니다.      ..
[JavaScript] 화살표 함수(Arrow Function) 전통적인 자바스크립트에서 함수를 만들 때는 function 키워드를 사용하여 정의할 수 있습니다.  예를들어 두 수의 합을 구하는 함수는 다음과 같이 작성할 수 있습니다.                  function add1(x, y){            return x + y;        }        let add2 = function(x, y){            return x + y;        } ES6부터는 화살표 함수(arrow function)라는 새로운 문법 방식으로 함수를 만들 수 있게 되었습니다. 화살표 함수는  => 기호를 사용하여 function 키워드를 생략할 수 있습니다.function f(){} 를 const f = () => {};게 표현이 가능합니다.단순한 리..
[JavaScript] 템플릿 리터럴(Template literals) 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다.  여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있습니다.  이전 버전의 ES2015사양 명세에서는 "template strings" (템플릿 문자열) 라고 불려 왔습니다. 템플릿 리터럴은 이중 따옴표 나 작은 따옴표 대신 백틱(` `) 을 이용합니다. 여러줄의 문자열 사용하기예전에는 여러 줄의 내용을 입력하려면 newline characters(\n)를 사용하여 입력하거나 +(문자열 결합 연산자)를 이용하여 사용했었습니다.let multiLine1= "첫번째줄\n두번째줄\n세번째줄";let multiLine2 = "첫번째줄\n";multiLine2 += "두번째줄\n";multiLine2 += "세번째줄\n"; 하지만 템플릿 문자열을..
[JavaScript] Spread Operator(전개 연산자) 함수에서 사용 함수의 파라미터 부분에서도 비구조화 할당을 사용할 수 있습니다. 이러한 문법은 특히 API 응답 값을 처리하는데에 유용하게 사용됩니다. spread_ex10.html 파일을 다음과 같이 만듭니다.12345678910111213141516171819202122232425262728293031323334353637383940414243!DOCTYPE html>html lang="ko">head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>전개 연산자 함수에서 사용/title>    script>        function showUser({name, age, ..
[JavaScript] Spread Operator(전개 연산자) 객체의 결합/복사 객체에 대해서도 같이 적용이 됩니다. 다음의 예제를 참조해 보세요 객체의 복사spread_ex08.html 파일을 다음과 같이 만듭니다.123456789101112131415161718192021222324252627282930313233343536373839404142!DOCTYPE html>html lang="ko">head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>객체의 복사/title>    script>        let kimc = {                 name:"김종서", age:33, gender:true,            ..
[JavaScript] Spread Operator(전개 연산자) 배열의 결합/복사 배열의 결합spread_ex05.html 파일을 다음과 같이 만듭니다.123456789101112131415161718192021222324!DOCTYPE html>html lang="ko">head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>배열의 결합/title>    script>        let names = "한놈,두시기,석삼,너구리,오징어,육계장,칠면조,팔다리,구두쇠,쨍그랑".split(",");        let longevitys = "해,산,물,돌,달,소나무,불로초,거북,두루미,사슴".split(",");         // 예전 방식..

티스토리툴바