공부일기

  else if ( guess > secretNumber ) {     if ( score > 1 ) {       document . querySelector ( ' .message ' ). textContent = ' Too High!! ' ;       score -- ;       document . querySelector ( ' .score ' ). textContent = score ;     } else {       document . querySelector ( ' .message ' ). textContent = ' You Lose!! ' ;       document . querySelector ( ' .score ' ). textContent = 0 ;     }     //when lower   } else if ( guess < secretNumber ) {     if ( score > 1 ) {       document . querySelector ( ' .message ' ). textContent = ' Too Low!! ' ;       score -- ;       document . querySelector ( ' .score ' ). textContent = score ;     } else {       document . querySelector ( ' .message ' ). textContent = ' You Lose!! ' ;       document ....

자바스크립트에서는 css 와 비슷하게 html에 접근할 수 있다. console . log ( document . querySelector ( ' .message ' )); 위 코드는  <p class="message">Start guessing...</p> 의 값을 가진다 보면 html class 가 message인 코드를 가져온 것이다. 여기서 class 를 가져올때는 . 을 사용하고 id 를 사용할때는 # 를 사용한다. console . log ( document . querySelector ( ' .message ' ). textContent ); 다음은 앞 코드에서 .textContext 가 추가 되었다. 이때는  Start guessing... 오직 문자만 가져오는 걸 확인 할 수 있다. DOM 은 document object Model : structured representation of HTML documents allows javascript to access html elements and styles to manipulate them. 기본적으로 html document 와 javascript code 간의 연결이라고 생각하면 된다. DOM 은 HTML 페이지가 로드 될때 자동적으로 생성되는데 이때 트리 구조를 가지게 된다. 각각의 HTML 요소들이 하나의 객체가 된다. (W3 SCHOOL) 위 그림은 DOM 을 대략적으로 보여준 사진이다. 여기서 document 가 가장 위에 있음을 확인 할 수 있고 이는 document 에 반드시 들어가야 다른 node 에 접속 가능하므로 document. 으로 먼저 쓴 것이 이해가 된다. 따라서 DOM 은 html 문서의 트리 데이터 구조라고 볼 수 있겠다. DOM은 자바스크립트의 일부가 아니라 WEB APIS(Application Programming Interface) 에서 사용할 수 있는 거고 자바스크립트는 그저 상호작용 할 뿐...

 코드 문제를 풀다 보면 직관적으로 이해가 가지 않는 문제가 주어질 때가 있다. 그럴 때는 문제를 푸는 단계를 설정하여 생각하면 문제가 정리가 되고 막연함이 줄어들 것이다. 먼저) 문제를 이해해야 한다. 문제를 이해하는 과정에는 필요한 개념을 확인하거나 어떤 방식으로 문제를 풀어나갈지 전체적인 설계이다. 두번째 론) 문제를 작은 문제들로 쪼개서 생각한다.  한번에 문제를 풀려고 하면 막연하고 놓치는 부분이 많다. 이 경우 문제를 작게 쪼개서 풀면 쪼갠 하나하나 작은 문제만 풀면 되므로 뭉친 실타래를 푸는 느낌과 같다. 잘게 쪼갠 문제가 풀리지 않는다면 이때는 구글이나 Stackoverflow에서 문제 해결하기 위한 코드를 찾는 것도 괜찮다. 이때는 복사 붙여 넣고 하는 것이 끝이 아니라 그 코드에 대한 개념만 익히고 직접 코드를 작성하는 것이 도움이 된다. 그렇게 작성한 코드가 오류가 발생한다면 개발자 도구(f11) 에서 source 창을 클릭하면 debug tool 이 나온다. f5 를 눌러 실행시키고 각 줄에서 코드가 어떻게 실행되고 있는지 확인하면 더 빠른 오류 수정이 가능하다.

 자바스크립트의 반복문에 대해 알아보자!. 프로그램을 작성하다 보면 반복적인 코드를 써야 할 때가 있다. 물론 한땀 한땀 써도 코드는 잘 돌아 가곘지만 문제는 DRY (Don't repeat youself) 의 원칙에 어긋난다. 반복문인 for 문에 대해 알아보자. for 문도 if/else 문과 같은 controll data structure이다. for ( let rep = 1 ; rep <= 10 ; rep ++ ) {     console . log ( ` lift ${ rep } ` ); } for ( [ initialization ] ; [ condition ] ; [ final - expression ] ) for문은 다음 세가지로 구분되며 먼저  intialization 에서는 식 또는 변수 선언을 해줍니다. 식일 경우는 변수 초기화를 위해 사용한다. condition 이 true 인 동안에만 for문이 작동합니다. final - expression 은 매번 반복문을 실행시키고 마지막에 실행할 식입니다. 보통 카운터 변수를 증감하거나 바꿀 때 사용한다. const years = [ 1231 , 1890 , 1493 , 2001 ]; const ages = []; for ( let i = 0 ; i < years . length ; i ++ ) {     ages . push ( 2020 - years [ i ]); } for 문과 array를 응용하면 간단한 문제가 많다. 반복문에서 사용하는 명령어로 continue 그리고 break 가 있다. continue 는  현재 실행하고 있는 반복을 중단시키고 다음 반복으로 가서 실행시킨다.(skip)처럼 사용된다. break 는 완전히 루프를 종료시킨다. for ( let i = 0 ; i < years . length ; i ++ ) {    ...

 함수 또한 그저 값이다! this 는 method가 선언된 객체와 같다. 배열도 객체다 자바스크립트 에서는 함수도 그저 value 이다. 따라서 객체의 특성, 키 로써도 이용가능하다. const jonas1 = {     birthYear : 2001 ,     calcYear : function ( birthYear ) {         return 2020 - birthYear ;     } 다음과 같이 객체 안에서 함수를 정의 할 수 있다. 이는 앞서 말했듯 함수 또한 결국 값이기 때문이다. const jonas1 = {     birthYear : 2001 ,     calcYear : function () {         return 2020 - this . birthYear ; }} 다음 함수를 보자. 위 함수와 비슷한 역할을 하지만 함수의 매개 변수가 빠져 있다. 이는 this 때문이다. 우선 method는 자바스크립트에서 객체 안에서 선언된 함수를 뜻하는데 이때 this 는 method 가 선언된 객체와 같은 역할을 한다. 따라서 this.birthYear 은 다시 말하자면 calcYear은 jonas1 이란 객체에서 선언된 method이고 결국 jonas1.birthYear 과 같다. 굳이 this를 쓰는 이유는 여기선 만약 jonas1 이란 객체명이 변경 되면 그 아래 있는 모든 jonas1 을 바꿔야 되기 때문이다.  const jonas1 = {     birthYear : 2001 ,     calcYear : function () {         this . age = 2020 - this . birthYear ;   ...

 object literal syntax property array는 ordered data structure  순서가 중요함 object는 unordered data structure  키가 그 역할을 대신한다. 자바스크립트의 object 에 대해 알아보자! 객체(object)는 자바스크립트의 데이터 구조로써 배열과 다르게 property(특성)을 가진다. const jonasArray = [     ' jonas ' ,     ' Schmedtmann ' ,     2022 - 2001 ,     ' teacher ' ,     [ ' Micheal ' , ' Peter ' , ' Steven ' ] ]; 위에 있는 배열과 같은 객체를 만든다면 const jonas = {     fristName : ' jonas ' ,     lastName : ' Schemedtmann ' ,     age : 2022 - 2001 ,     job : ' teacher ' ,     friends : [ ' Micheal ' , ' Peter ' , ' Steven ' ] }; 다음과 같다 배열과 다른 점은 {   } 중괄호를 사용하며 특성(property)이 존재한다. 객체를 선언 했으니 이를 꺼내는 방법에는  dot notation console . log ( jonas . lastName ); //dot notation  점(.) 을 이용하여 특성을 찾으면 그 특성 값을 내놓게 된다. 이때 . 은 연산자로써 연산자 계산 순서가 괄호 다음으로 높다. 그리고 . 뒤에는 표현형이 오면 안된다. bracket notation console . log ( jonas [ ' last ' + ' Nam...

자바스크립트의 Method에 대해 알아보자! 메쏘드는 배열을 쉽게 다루게 해주는 도구이며 연산자 같은 느낌이라고 생각한다. 수많은 매쏘드가 존재하지만 가장 기본적인 매쏘드에 대해 알아보자! const friends = [ ' Michael ' , ' Steven ' , ' Peter ' ]; 다음과 같은 배열이 있다. 더하는 매쏘드를 정리하자면 friends . push ( ' jay ' ); //function const newLength = friends . push ( ' jay ' ); friends . unshift ( ' john ' ); push 그리고 unshift가 있다. 우선 색깔을 봐도 되고 vscode에서 마우스를 가져다 대면 나오는 정보로는 함수이다. 함수는 input , transform , output 으로 작동 되는데  push 는 'jay' 를 배열의 마지막에 추가하고 배열의 크기를 반환한다. 2번째 줄에서 newLength의 저장된 값은 4이다. 원래 3에서 1이 추가된 4가 반환값으로 저장된것이다. unshift 는 'john' 을 맨 앞에 추가하는 매쏘드이다. 마찬가지로 1이 추가된 배열의 크기를 반환한다. friends . pop (); //last friends . shift (); pop 그리고 shift는 둘다 원소를 제거하는 매쏘드이다. pop은 맨 뒤에서 shift는 맨 앞에서 제거한다 그후 그 원소 값을 둘 다 반환한다. 특징으로 인자가 없다. 배열을 제거하는데 인자는 필요 없기 때문이다. console . log ( friends . indexOf ( ' Peter ' )); console . log ( friends . includes ( ' Micheal ' )); indexOf 와 includes 매쏘드는 배열 안에 찾는 값이 있는지 없는지 알아내는...

자바스크립트의 array 에 대해 알아보자! array는 자바스크립트의 대표적인 데이터 구조로써 array 와 object 가 있다. const friends = [ ' Michael ' , ' Steven ' , ' Peter ' ]; console . log ( friends ); 배열은 위와 같이 정의 할 수 있으며 function의 표현식과 비슷하게 정의된다. 대괄호로 감싸져 있고 배열을 이루는 원소는 , 로 구분되어 있다. 배열의 시작은 0 , 1 , 2 순서이다. friends[0] = 'Michael' 은 위 코드와 동일하게 작동한다. 그리고 개발자 콘솔창에 값을 가지는 걸로 보아 표현형임에 명심하자. const years = new Array ( 1991 , 1990 , 1890 ); 위 코드 같이 정의 할 수도 있다. console . log ( friends [ 0 ]); console . log ( friends [ 1 ]); console . log ( friends . length ); console . log ( friends [ friends . length - 1 ]); 배열 안에 있는 값을 넣을 수 도 있고 다음과 같이 가져올 수 도 있다. 특히 4번째 줄의 표현은 배열의 마지막 원소를 가져오는 표현방식 이므로 알아두자 const firstName = ' jonas ' ; const friends = [ ' Michael ' , ' Steven ' , ' Peter ' ]; const jonas = [ firstName , ' Schemled ' , 2020 - 1991 , friends ]; 배열 안의 원소는 표현형을 넣어도 문제 없다는 것에 명심하면서 다음 원소 들을 보면 배열 안에 변수 , 간단한 계산식 ,  배열 마저도 정상 작동한다. 이들은 모...

  자바스크립트 Arrow Function 에 대해 알아보자! 앞서 배웠던 함수 선언식 그리고 함수 표현식중 표현식의 다른 형태라고 보면 된다. const calcAge2 = function ( birthYear ) {     return 2022 - birthYear ; } 위에 있는 코드는 간단한 함수 표현식이다. const calcAge3 = birthYear => 2022 - birthYear ; 그리고 이 코드는 화살표 함수이고 두 함수는 같은 역할을 한다. 화살표 함수는 function 도 생략되고 한 줄로 쓸때 return 을 안써도 되서 매우 간단하다. const yearsUntilRetirement = ( birthYear , firstname ) => {     const age = 2032 - birthYear ;     const retirement = 65 - age ;     return ` ${ firstname } retires in ${ retirement } years ` ; } 함수에 쓸게 많아질 수록 화살표 함수는 불리한데 매개변수가 두개 이상일 경우 괄호로 묶어 줘야 하며 한 줄이 아니게 되면 { } 를 사용해 코드를 묶어줘야한다. 다른 함수와 마찬가지로 여러줄이면 return 또한 붙여 줘야 한다. 이상 간단한 화살표 함수에 대해 알아보았다. 마지막으로 세가지 함수의 헷갈리는 특징에 대해 간략하게 정리하자면 선언형 함수(declaration) : 함수가 선언되기 전에 사용 가능하다. 표현형 함수(expression)  :  변수 안에 함수의 value 를 저장한다. (표현형 임을 생각한다) 화살표 함수(arrow)        :  표현형의 한 종류 이며 한 줄 코드를 작성하기에 강력하다. 모두 다른 특징을 가졌...

 함수의 선언식과 표현식에 대해 알아보자 function clacAge1 ( birthYear ) {     return 2022 - birthYear ; } const age1 = clacAge1 ( 2001 ); 우선 위의 코드는 우리가 전 시간에 배웠던 코드로 함수 선언식이라고 한다. 그리고 함수의 표현식도 존재하는데 const calcAge2 = function ( birthYear ) {     return 2022 - birthYear ; } const age2 = calcAge2 ( 2001 ); 다음과 같다. 특이사항으로 함수의 이름이 없이 대입 연산자를 통해 이름이 생긴다. Expression 의 특징이 statement와 다르게 값을 내놓기 때문에 저렇게 변수 안에 함수를 대입 가능한 것이 다른 언어와 자바스크립트의 차이점이지 않을까 생각한다. 함수 표현식을 쓰는 이유가 또 있다. 이유는 호이스팅 에러 방지 인데 https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html 위 사이트에 자세히 설명 되어 있다. 그리고 이밖에도 여러 장점이 있으므로 함수 표현식을 쓰는게 더 유리할 수 있다.

자바스크립트의 function에 대해 알아보자!  함수는 값을 담아 두는 변수처럼 코드 문장들을 담아두고 재 사용 할 수 있게 하는 역할을 한다. function logger () {     console . log ( " My name is Jonas " ); } 위의 코드로 함수를 정의해 보았다. logger() 은 함수의 이름이다. 변수 선언과 비슷한 느낌이다. 그리고 {} 안에 실행 시킬 코드를 적어 보았다. logger (); logger (); logger (); 코드를 실행 시키면 함수 logger 안의 코드가 실행되고 My name is Jonas 문장이 세 번 반복될 것이다. 이때 calling / running / invoking functions 의 뜻은 함수를 실행 시킨다는 의미이다. function fruitProcessor ( apples , oranges ) {     console . log ( apples , oranges );     const juice = ` juice with ${ apples } apples and ${ oranges } oranges. ` ;     return juice ; } 함수의 기본적인 기능에 대한 코드를 적어봤다. 함수 선언 () 안에 apples 그리고 oranges 라는 변수가 있다. 이는 매개 변수로써 뒤에 설명할 인자(Argument) 에서 값이 전달된다. 마지막으로 return juice; 에서 return은 juice의 값을 함수에게 반환 시켜주는 역할을 한다. fruitProcessor ( 5 , 0 ); 함수를 다음과 같이 작동해 보았다. 인수 5 는 매개변수 apples 에 전달되고 인수 0 도 마찬가지로 전달된다. 하지만 나오는 값은 5,0 뿐이다. return juice의 값은 어디로 가게 된건지 헷갈린다. const appleJuice = fruitProcessor ...

 자바스크립트에는 엄격 모드라는 것이 존재한다. ECMAScript 5 에서 처음으로 소개되었으며 자바스크립트에 더욱 엄격한 오류 검사를 적용해 준다. ' use strict ' ; script의 위에 다음과 같은 코드를 쓰면 strict mode가 실행되는데  이걸 쓰기 전의 코드는 적용되지 않으니 주의 해야한다. let hasDriversLicense = false ; const passTest = true ; if ( passTest ) hasDriverLicense = true ; 위의 코드처럼 hasdriverlicense 변수를 잘못 썻으면 기존 모드에서는 console에 아무런 에러도 일어나지 않지만 strict mode를 사용 하면 어디에서 오류가 일어났는지 알려준다. let if = 12 ; if 는 자주 사용하는 명령문이다. 따라서 strict mode에선 이런 잘못된 변수 선언도 막아주는 역할을 해준다.

Conditional Operator에 대해 알아보자! Conditional Operator는 const drink = age >= 18 ? ' wine ' : ' water ' ; 다음과 같이 세가지의 구성요소로 이루어져 있어 ternary operator 라고 불린다. if /else statement와 같은 역할을 하는데 대신에 operator 라는 차이점과 매우 간단히 쓸 수 있다는 차이점이 있다. age >= 18 ? 'wine' 위 코드는 ? 앞 코드가 true 면 뒤에 'wine'을 실행한다는 의미이다. if 와 같다. 그럼 else 역할은 : 이 한다.  그리고 ternary operator는 앞서 배웠던 바로 값을 내놓는 expression 이기 때문에 바로 drink = ...  처럼 변수에 대입 가능하고 특히 terminal literal 에서 강력하다. expression이라  console . log ( ` i like to drink ${ age >= 18 ? ' wine ' : ' water ' } ` ); 위처럼 if/else라면 여러 코드를 써야 할 내용이 한 줄에 정리가 됨을 확인할 수 있다. ternary operator는 빠른 결정 그리고 if/else statement와 다른 expression의 특성을 활용한때 강력하게 사용된다.

javascript의 expression 그리고 statement에 대해 알아보자! expression은 간단히 말해서 value을 내놓는 코드 조각이다. 예를 들어  3+4 true && false 1991 위에 코드는 각각 의 값을 내놓는다. 이걸 expression 이라 할 수 있다. statement는 우리가 프로그램을 짜는 목적에 맞는 행동을 하는 코드이다. 간단히 if/else switch for 같이 값을 내놓진 않지만 행동을 한다. if( day === 'monday' ){  console.log( 3+4 ); } 위 if문 전체는 statement 이지만 빨간색으로 칠한 부분은 expression이 되는 것이다. 구분을 해야 되는 이유 중 하나로는  template literal 에서 ` $${ expression  }  ` 이 괄호 안에는 expression 만이 들어올 수 있음을 명심하고 다음에 설명한다.

자바스크립트의 스위치 명령문에 대해 알아보자 스위치 명령문은 if/else 와 비슷하다. 아래 쓰인 예시를 보자.  const day = ' wednesday ' ; switch ( day ) {     case ' monday ' :   //day === monday         console . log ( ' today is monday! ' );         console . log ( ' sad day ' );         break ; 위의 코드를 보면 괄호안에 어떤 변수가 필요한지 선언해야 한다. case 옆에는 변수안의 값이 일치하는지 확인하기 위한 요소이며 type coerison이 적용되지 않아 === 처럼 strict comparison operator 라고 생각하면된다.     case ' tuesday ' :         console . log ( ' today is tuesday! ' ); //if no break code is executed until break appear     case ' wednesday ' :     case ' saturday ' :         console . log ( ' my Favorite day! ' );         break ; 위에 tuesday 에서는 break; 를 뺏는데 이 경우 아래 break 코드가 나올때 까지 모든 코드를 실행 시킨다. 따라서 wednesday 그리고 saturday는 같은 결과를 가진다.     default :         console . log ( ' good day! ' )...