[JavaScript] 기초(1)

 

• console.log(); 개발자 도구 콘솔이나 터미널에 원하는 값을 출력할 수 있게 돕는 메서드
• JavaScript에서 주석은 // 다음에 작성하거나, /*, */ 사이에 작성하면 된다.

 

• 값(value): 하나의 고유한 의미를 가지는 코드.
• 표현식(expression): 값으로 평가될 수 있는 코드.
• 연산자(operator): 특정 연산을 수행할 수 있는 코드.

 

---

 

[데이터 타입]  → typeof 연산자를 이용해 타입을 확인할 수 있다.

typeof 100; // 'number'

 

 

1. Number

    : 숫자 (정수(integer)와 실수(float) 모두 표현 가능)

      산술 연산자(arithmetic operator)를 이용하여 간단한 사칙연산을 할 수 있다. (ex) +  -  *  /  %(나머지)

      좀 더 복잡한 계산을 위해서는 Math 내장 객체 사용.

Math.floor(100.621); // 100 --> 내림
Math.ceil(100.621);  // 101 --> 올림
Math.round(100.621); // 101 --> 반올림
Math.abs(-100); // 100 --> 절대값
Math.sqrt(2); // 1.4142135623730951 --> 루트
Math.pow(2, 5); // 32 -- 2의 5승 --> 지수, 거듭제곱

 

 

2. String

    : 문자열. 따옴표( '   ' ), 쌍따옴표( "   " ), 백틱( `   ` )으로 감싸면 된다.

      특수문자도 문자열로 만들 수 있으며, + 로 문자열을 이어붙일 수도 있다.

      백틱으로 만든 문자열은 줄바꿈도 가능!

 

→ .length 를 이용하여 문자열의 길이를 확인할 수 있다.

console.log('최초의 JavaScript는 Netscape의 Brendan Eich에 의해 만들었다.'.length); // 48

→ 문자열의 각 문자가 몇 번째에 위치하는지는 인덱스(Index)로 확인할 수 있다.

let str = 'codestates';
console.log(str[0]); // 'c'
console.log(str[4]); // 's'

※ 자바스크립트는 숫자를 0부터 센다는 점을 주의할 것. (Zero-based numbering)

 

→ 유용한 문자열 메서드

'HELLO WORLD'.toLowerCase(); // 'hello world' --> 문자열을 소문자로 변경
'hello world'.toUpperCase(); // 'HELLO WORLD' --> 문자열을 대문자로 변경
'hello '.concat('world'); // 'hello world' --> 문자열을 연결
'hello world'.slice(0, 5); // 'hello' --> 문자열의 일부 자르기

'🍎🍓🍉🍇'.indexOf('🍎'); // 0 --> 특정 문자가 몇 번째 위치하는지 확인.
'🍎🍓🍉🍇'.indexOf('🖥'); // -1 --> 포함되어 있지 않으면 -1 반환.

'🍎🍓🍉🍇'.includes('🍎'); // true
'🍎🍓🍉🍇'.includes('🖥'); // false  --> 특정 문자가 포함되어 있는지 확인.

 

 

3. Boolean

  : true or false

    ( + ) falsy란 불리언 타입은 아니지만, 자바스크립트에서 false로 여겨지는 값을 의미한다.

            true로 여겨지는 truthy값은 매우 많아서 falsy값을 암기하는 것이 좋다.

            ex. false / 0 / -0 / 0n / "" / '' / ``/ null /

                  undefined(아무것도 할당되어 있지 않다) / NaN('비어있는 상태'를 의도적으로 명시할 때 사용)

 

☞ 불리언은 비교연산자(comparison operator)로 두 값이 같은지 다른지를 확인할 때 유용하다.

    ● === / !== : 엄격한 동치. 두 피연산자의 값과 타입이 같으면 true, 하나라도 다르면 false. 동치 연산자!

    ● == / != : 느슨한 동치. 타입이 달라도 겂이 같으면 true. 현대 웹 개발(JavaScript)에서는 사용 권장 X

    ● > / < / >= / <= : 대소 관계 비교 연산자.

 

☞ 논리연산자(logical operator)로 두 값 간의 논리 관계를 확인할 수 있다.

    ● || : 논리합(or)

    ● && : 논리곱(and)

    ● ! : 논리 부정 연산자

!true // false
!(100 > 200) // true --> 오른쪽 피연산자와 반대의 사실을 반환
!0 // true
!'' // true
!1 // false
!'코드스테이츠' // false --> falsy, truthy의 반대 값을 반환

 

 

---

 

▶ 변수 : 데이터를 편하게 다루기 위해 데이터에 이름을 붙이는 것

 

1. 선언 : 보관함 확보 

    let age;

 

2. 할당 : 보관함에 데이터 저장   

    age = 12;

 

→ 변수의 선언과 값의 할당을 동시에 할 수도 있다.     

     let age = 12; 

 

→ 아무것도 할당되지 않은 변수는 undefined가 자동으로 할당됨. (JavaScript의 독특한 특징)

 

→ 값의 재할당?  let 키워드로 선언한 변수에 새로운 값을 할당하는 것.                            

                           const 키워드를 사용하면 재할당이 금지됨. 

                           (cf) var 키워드는 과거에 사용되던 변수 선언 키워드. 사용 지양을 권장.

 

{네이밍 규칙} 

- 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)를 포함할 수 있다.

   단, 숫자로 시작하는 것은 안됨. (ex) let 1st; --> 사용 불가

- 예약어(프로그래밍 언어에서 사용되고 있거나 사용될 예정인 단어)는 식별자로 사용할 수 없다.

- 변수명은 변수의 존재 목적을 이해할 수 있도록 의미를 명확히 표현하는 것이 좋다.

 

→ JavaScript에서는 일반적으로 카멜 케이스(camelCase)를 사용한다.

     (ex) firstName, lastName

 

→ 템플릿 리터럴(template literal) : 백틱(`)으로 값을 감싸 문자열 타입을 만드는 방법.

     이 방법을 사용하면 문자열 내부에 변수를 삽입할 수 있다. 공백을 삽입할 때의 가독성도 더 높음.

let course = 'SEB FE';
let cohort = 43;
let name = 'choi yeseul';
console.log(`${course} ${cohort} ${name}`); // 'SEB FE 43 choi yeseul'

 

 

 

 

 

---

 

 

 오늘 배운 부분은 먼저 좀 봐뒀던 부분이라 크게 어렵진 않았다. 복습하면서 잘 몰랐던 부분을 찾고, 더 체계적으로 내용을 정리하는 느낌이라 좋았다. 오후 시간에는 처음으로 페어 분이랑 함께 코드 문제를 풀어봤다. 어려운 문제가 몇 개 있었는데, 첫 번째로 삼각형의 세 변을 입력받아 직각삼각형인지 여부를 리턴하는 함수를 만드는 문제가 있었다. 조건에 거듭제곱을 만드는 세 가지 방법을 모두 사용하라고 해서 구글링을 통해 찾아봤다.

 

<자바 스크립트에서 거듭제곱을 만드는 3가지 방법>

a*a ;

a**지수 ;

Math.pow(a,2) ;

 

정답으로 제출한 코드는 아래와 같다.

function isPythagorean(side1, side2, side3) {
  let firstSide = side1*side1;
  let secondSide = side2**2;
  let thirdSide = Math.pow(side3,2);

  let firstTotal = firstSide === secondSide + thirdSide;
  let secondTotal = secondSide === firstSide + thirdSide;
  let thirdTotal = thirdSide === firstSide + secondSide;

  return firstTotal || secondTotal || thirdTotal;
}

return 사용이 아직 어색한데, 간단하게 일단 답을 적는 부분이라고 생각하면 될 것 같다.

 

그리고 다음으로는 문자열 자르기 문제가 있었다. 다음 주 진도 부분인 if 문을 써야 하나 고민을 했는데, 페어 분이 문자열 메서드 중 slice를 사용해 보면 어떻겠냐고 하셨다. 그렇게 하니 코드가 무척 간단하게 나왔다.

function takeLetters(num, str) {
  
 let take = Math.min(num,str.length);

 return str.slice(0,take);
}

답을 보니 두 번째 줄은 꼭 쓰지 않아도 되는 부분이었다. .slice(a,b); 를 사용하면 문자열의 a번째부터 b번째 앞까지를 잘라주는데, (0부터 시작하는 것에 주의) 그러므로 이것만으로 문자열의 길이가 숫자보다 짧은 경우 문자열을 그대로 출력하게 된다. 

 

그리고 문자열을 대문자로 변환하려면 str.toUpperCase(); 을, 소문자로 변환하려면 str.toLowerCase(); 을 사용하면 된다는 점을 간단하게 기억해두면 좋을 것 같다.

 

마지막으로

function showTime(hour, min, sec) {
  return `현재 시각은 ${hour}시 ${min}분 ${sec}초 입니다.`;
}

이런 식으로 쓸 때, 굳이 함수 안에 let으로 변수를 선언하지 않아도 된다는 점도 체크해둘 만한 포인트인 것 같다.