프로그래밍 공부 노트

SyntaxHighlighter v3.0.83 (소스 코드 하이라이터) 설치 및 사용법 https://loomio.kr/13 <pre class="brush:js;">  <script type="text/javascript">       이부분에 코드를 작성 </script> </pre>

default paramaters 매개변수에 들어올 인자값이 없는경우 매개변수 기본값 지정하기 매개변수 value1과 value2에 인자를 모두 받아야하는데 하나의 매개변수에만 인자값이 들어오고 나머지 하나에 들어오지않을경우 NaN을 반환한다.  하지만 위처럼 매개변수로 들어올 인자가 존재하지않더라도 리턴값을 반환할 수 있다. 위 사진처럼 parameter값으로 (2,2)를 받게될 경우 인자값을 그대로 연산하여 4를 반환한다. parameter값으로 두개의 인자가 아닌 (3)하나만 인자로 들어와도 parameter기본값으로 1이 지정되어있어서 똑같은 값 4가 반환된다. 마지막으로 sum함수에 매개변수로 어떠한 인자도 받지않는다 하더라도 parameter기본값으로 1이 지정되어있어서 2를 반환한다.

생성자 함수와 new 연산자 생성자 함수란 동일한 종류의 자동차를 지속적으로 찍어낼 수 있는 자동차 공자의 설비라인과 같다. 생성자 함수를 사용하는 이유는 재사용성을 높이기 위해서이다. 일단 생성자 함수를 사용하려면 두가지 규칙을 지켜야 한다. 1. 함수명의 첫번째 글자는 무조건 대문자여야 한다. 2. 반드시 "new" 연산자 키워드를 붙여야 한다. function Person ( name , firstScore , secondScore , thirdScore ) { this . name = name ; this . firstScore = firstScore ; this . secondScore = secondScore ; this . thirdScore = thirdScore ; this . sum = function () { return this . firstScore + this . secondScore + this . thirdScore ; }; } let kim = new Person ( "kim" , 10 , 20 , 30 ); let lee = new Person ( "lee" , 10 , 10 , 10 ); console . log ( kim ); /* Person { name: 'kim', firstScore: 10, secondScore: 20, thirdScore: 30, sum: [Function] } */ console . log ( lee ); /* Person { name: 'lee', firstScore: 10, secondScore: 10, thirdScore: 10, sum: [Function] } */ console . log ( kim . sum ()); //60 console . log ( lee . sum ()); //30 new Person과 같이

템플릿리터럴(template literal): `` 백틱을 사용하여 문자열과 변수의 데이터를 쉽게 합쳐줄 수 있다. 일반적으로 변수의 값과 문자열을 합쳐주려고하면 아래와 같이 큰 따옴표와 + 연산자를 사용해야한다. let won = 1000 ; let result = "핫도그의 가격은 " + won + "원 입니다." console . log ( result ); // 핫도그의 가격은 1000원 입니다. 이때 띄어쓰기도 신경써야하고 변수와 문자를 합쳐주기위해서 +도 붙여줘야하고 번거롭다. 하지만 템플릿 리터럴을 사용하면 이러한 문제들이 아래와 같이 쉽게 해결할 수 있다. let won = 1000 ; let result = `핫도그의 가격은 ${ won } 원 입니다.` console . log ( result ); // 핫도그의 가격은 1000원 입니다. 아래와 같은 방법으로도 사용이 가능하다. //추가적인 예시 const data = [ { name : 'person1' , number : 01012341234 , item : 'milk' } , { name : 'person2' , number : 000000111111 , item : 'orange' } ]; const template = `welcome ${ data [ 0 ]. name } ` ; console . log ( template ); // 결과값: welcome person1 추가적으로 태그드 템플릿 리터럴( Tagged template literal) 우리가 일반적으로 함수를 호출할때 function test1 () { console . log ( ' 함수 호출 ' ) ; } test1 () ; //함수 호출 이렇

구조 분해 할당은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있도록 해주는 JavaScript 표현식이다. ... 점 3개를 사용하여 배열이나 객체를 해체할 수 있다. 배열 구조분해 (Destructuring Array) const arr1 = [ 1 , 2 , 3 , 4 , 5 ] ; const arr2 = [ 6 , 7 , 8 , 9 , 10 ] ; const sumArr = [ ... arr1 , ... arr2] ; console . log (sumArr) ; //[1, 2, 3, 4, 5, 6, 7, 8, 9, 10] ... 를 사용하여 배열을 해체할 수 있다. 배열 안에 두개의 배열을 구조분해 해 놓으면 위에서 처럼 하나의 배열로 합칠 수 있다. const data = [ " person1 " , " person2 " , " person3 " , " person4 " ] ; const [ fisrt , , third ] = data ; console . log (fisrt , third) ; //person1 person3 배열 안에 first, thrid와 같이 변수를 작성하면 해당 변수가 지정된 인덱스와 일치하는 값이 해당 변수에 할당되어 출력된다. 배열 인덱스 1번은 작성하지 않았기 때문에 건너뛰고 인덱스 0과 2의 값만 할당하여 출력하고 있다. 객체 구조분해 (Destructuring Object) const person = { name : ' kim ' , address : ' korea ' , age : 30 , }; // 객체 Destructuring 하는방법 const { name , age } = person ; console . log (name , age) ; // kim 30 // obj객체에서 키 값을 다른 변수명으로 할당해

객체의 경우 값의 메모리 주소를 참조하기 때문에 객체에 특정한 값을 추가하거나 삭제 할 경우 원본 데이터가 변경되는 일이 발생한다. 객체를 변경하지 않고 원본 상태를 유지하면서 기존의 데이터를 그대로 갖고있으면서 새로운 값을 추가한 새로운 객체를 생성할 수 있다. list 배열 객체 원본 데이터는 변경하지 않으면서 mango를 추가한 새로은 list2 배열을 만들었다. list 배열과 list2 배열을 비교연산자로 비교해보면 false값을 반환한다. 즉, 기존의 list 배열을 참조하지않고 복제한것이다. concat 메서드를 이용해서도 가능하고 Array.from() aptjemfheh immutable array를 생성할 수 있다. 객체의 경우 Object.assign()을 사용하여 불변 객체를 생성할 수 있다. 이외에도 전개연산자를 사용하거나 immer 라는 라이브러리를 사용하여 불변 객체를 생성할 수 있다. 리액트를 공부하면서 불변성에 대해서 공부해 보았다. 

첫번째 차이점 - 접근 범위 var는 function level scope 즉, 함수 단위 범위를 가진다. let 과 const는 block level scope 즉, 중괄호{ } 단위 범위를 가진다. function level scope란   선언된 함수의 { } 중괄호 안에서 작성된 변수와 함수는 함수 블록 내부에서만 참조가 가능하다. 선언된 함수 블록을 제외한 if 조건문, for 와 같은 반복문 등의 블록 내부에서 선언된 변수 또는 함수는 전역변수이면서 전역함수이다. function person () { var name1 = "lee" ; let name2 = "kim" ; } console . log ( name1 ); // ReferenceError: name1 is not defined => var는 함수 레벨 스코프 이므로 접근 불가 console . log ( name2 ); // ReferenceError: name2 is not defined => let은 블록레벨 스코프 이므로 접근 불가 { var fruit = "apple" ; console . log ( fruit ); // apple } console . log ( fruit ); // apple => 함수 레벨 스코프이므로 var로 선언한 변수는 전역변수가 된다. if ( true ) { var name1 = "lee" ; let name2 = "kim" ; } console . log ( name1 ); // lee => var는 함수 레벨 스코프이므로 참조가능(전역변수) console . log ( name2 ); // ReferenceError: name2 is not defined => let은 블록레벨 스코프 이므로 접근 불가 function level scope 는 함수의 코드 블록만을 스코프로 인정한다. 함수 외

map함수는 배열에 사용되는 메서드이다. 배열안의 값들을 순차적으로 순회하면서 배열안의 각각의 요소들의 값을 변환시켜 배열 결과값을 반환해주는 메서드이다. 아래의 예시를 보자. // ex1) const a = [ 1 , 2 , 3 , 4 , 5 ]; let result = a . map (( v ) => v * 2 ) console . log ( result ); // [2, 4, 6, 8, 10] result . map ( b => b * 3 ); // [6, 12, 18, 24, 30] // ex2) const a = [ 1 , 2 , 3 , 4 , 5 ]; let aa = a . map (( v ) => { if ( v % 2 === 0 ) { return '짝수' ; } else { return '홀수' ; } }); console . log ( aa ); // ["홀수", "짝수", "홀수", "짝수", "홀수"] 또한 map메서드는 첫번째 인자로 배열의 데이터를 순차적으로 받지만 두번째 인자로 해당 데이터의 인덱스 값도 받을 수 있다. 결과 => 이러한 map 함수를 가지고 리액트에서 데이터를 출력할때 사용할 수 있으며 리액트로 예를들어 TODO List 를 만들었다고하면 리스트 중 특정 목록을 삭제하거나 수정해야 한다고 하면 각각의 데이터마다 고유한 key값을 가지고 수정, 삭제가 이루어지는데 그러한 key값을 생성하는데도 활용할 수 있다.

a 태그를 통해 만들어진 링크는 무조건 외부 페이지로만 이동하는것은 아니다. a 태그를 사용하여 페이지 내부의 특정 요소로 이동할 수 있는데 이를 내부 링크라고 한다. 내부링크는 사용할 때 href 속성값으로 #을 작성하고 그뒤에 이동하고자하는 요소의 id 속성 값을 작성한다.   < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Document </ title > </ head > < body > <!-- 링크를 클릭하면 href 속성에 #과 같이 작성된 값과 동일한 id 값을 가진 태그로 이동한다. --> < a href = "#1" > 1번 내용으로 이동 </ a > < a href = "#2" > 2번 내용으로 이동 </ a > < a href = "#3" > 3번 내용으로 이동 </ a > < a href = "#4" > 4번 내용으로 이동 </ a > < a href = "#5" > 5번 내용으로 이동 </ a > < h1 id = '1' > 1번 </ h1 > < p > Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit libero est i

배열은 순서가 있는 데이터를 저장할 때 사용되는 자료구조 이다. 예를들면 html 요소 목록, 1등부터 3등까지 순위 등등 순서대로 데이터를 정렬할때 사용한다. 배열은 값이 들어오는 순서대로 정렬되며 특별한 객체이다. 그렇다면 객체를 사용하여 데이터를 정렬해도 될 수 있다고 생각할 수 있지만 배열은 우리가 알고있는 객체와는 조금 다른 특별한 객체이며, 일반적인 객체의 경우 데이터 목록을 만들 수 있지만 순서대로 자료를 저장할 수 없다. 일반 객체는 배열처럼 데이터를 순서대로 작성하여도 순서대로 저장과 출력이 되지 않는다. 위에서 말했듯이 배열은 특별한 객체이다. 배열 또한 객체와 같이 프로퍼티를 추가하거나 하는등의 동작을 할 수 있다. 하지만 배열은 순서가있는 자료들을 다루는데 특화되어있으므로 일반적인 객체와 같이 프로퍼티를 추가한다던가 할 경우 순서대로 일을 처리하는것에 최적화되어 동작할 수 있는 방식을 방해하게 되므로 배열이 가지고있는 최적화된 성능이 떨어지게 된다. 그러므로 프로퍼티를 추가하거나 임의의 키를 사용해야 한다면 배열보다는 일반 객체를 사용하는것이 좋다. 배열은 일반적으로 아래와 같은 두가지 문법을 사용한다. let arr = []; let arr = new Array (); let fruits = [ "apple" , "banana" , "lemon" ]; console . log ( fruits [ 0 ]); // apple console . log ( fruits [ 1 ]); // banana console . log ( fruits [ 2 ]); // lemon 배열에는 문자열 이외에도 객체, 함수, boolean 그리고 자기 자신과 동일한 자료형인 배열 등등의 여러가지 자료형이 들어올 수 있다. 배열 안에 값을 출력하기 위해서는 인덱스 값을 사용하여야 한다. 일반적으로 사람들은 1번, 2번, 3번과 같이 숫자를 1부터 세지만 컴퓨터의 경우 0부터 숫자를 세기 때문에 첫