프로그래밍 공부 노트

변수 변수란 데이터를 저장하는 저장소이다. javascript에선 let 키워드를 사용하여 변수를 생성한다. 간단히 사용법을 알아보면 아래와 같다.  // 문자열, 숫자 등과 같은 자료형들을 저장할 수 있다. let letVariable = "변수1" ; // 한 줄에 변수를 한번에 선언할 수도 있다. 하지만 권장되지 않는다. let variable1 = "var1" , variable2 = "var2" , variable3 = "var3" ; // 한 줄에 한 개의 변수를 선언하면 가독성이 높아진다. let variable1 = "var1" ; let variable2 = "var2" ; let variable3 = "var3" ; 변수 명명 규칙 javascript에서는 변수의 이름을 작성할 때 두가지 제약 조건들이 있다. 1. 첫 글자로 숫자가 올 수 없다. 2. 문자, 숫자, $(달러사인), _(언더스코어) 만 사용할 수 있다. 그리고 변수명은 대문자와 소문자를 구별한다. 동일한 이름의 변수명이더라도 서로 다른 변수이다. 상수 변수와 동일하게 데이터를 저장한다. 하지만 약간의 차이점이 존재하는데 상수의 경우 변화하지 않는 데이터 값을 저장할 때 사용한다. 상수의 경우 let 예약어를 사용하지 않고 const  예약어를 사용한다. // example const name = 'Kim' ; const 예약어를 사용하여 상수를 선언하면 let 예약어와 달리 변수값을 재할당 할 수 없다.  재할당 할 경우 에러가 발생한다. const 예약어를 사용하여 상수를 사용하다보면 대문자로 선언하는 경우가 있고, 대소문자를 혼용하여 사용하는 경우가 있다. 일반적으로 대문자만을 사용하는 경우에는 이미 정해져있는 값을 할당할 때 사용하며, 대소문자를 혼용하는 경우에는 추후에 할당될 값이 아직 정해져있지 않았을 때 ...

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...