프리코스 (5) 8/18 - JS pre 강의 : 1. Console

1. Console 

 

alert() 함수는 사용자에게 안내하고 싶은 텍스트를 보여줬다면, 

console.log() 함수는 개발자가 확인하고 싶은 내용을 출력하는 함수

 

개발자가 확인하고 싶은 내용을 출력하는 console.log() 함수의 결과는 브라우저에 내장된 '개발자 도구' 를 통해서 확인

 

---

• JS 가 출력하게 도와주는 것 (값을 화면에 띄어주는 것) 

• console.log ( )    괄호안에 출력할 대상, 값을 넣기 
•  “콘솔 찍어봅시다" 특정한 값을 화면에 나타내 봐라 

 

• 브라우저 안에 console탭이 있음 (오른쪽버튼, inspect 검사 , element옆에) 

 

*팁: javascript → relpit, jsbean 둘다 연습할 수 

연습하다보면 에러 나는 거 있겠찌만, 고치려고 하지말고, 지우고 잘 되늰 것만. 

Cf. 자바스크립트 약속어는 alert(), console.log()

자바스크립트 약속어는 alert(), console.log()

alert 라는 이름의 함수는 이미 존재하기 때문에 

내 마음대로 alert 라는 이름의 함수를 중복해서 만들면 안 됩니다.

약속어로 지정된 단어는 이미 사용중이기 때문에 개발할 때 함부로 사용할 수 없습니다.

---

1-1. 주석 처리하기

코드를 설명하는 코멘트 (실제 동작하는 코드가 X)

 

•  한 줄을 주석처리:

// (코드 한줄)

• 여러 줄을 주석처리: 아래와 같이 감싸주면 됩니다.

/*

 (코드 여러줄)

*/

 

---

1-2. 변수 variables

• 어떻게 선언하고 할당하는지 알면 됨 
• 변수는 값과 늘 한 세트 (이름이라는 변수에 값을 할당한다) 
• 변수를 쓰는 이유 너무 길고, 원할 때 언제나 꺼내오기 위해 쓰는 것/ 이름을 개똥에서 개발로 바꿨다면 ‘개똥'이라는 이유를 다 찾아내서 하나하나 바꿔줘야하는데/ name=’개똥' 이라고 변수 지정했다면 → name=’개발’ 이라고만 바꾸면 되니.

---

1-2-1. 변수 사용하기 위한 2단계

1. 선언 (declare): myNumber 자체를 선언 ‘ “myNumber”라는 변수를 사용하겠다’ 
2. 할당(assign) : 변수에 담고자 하는 값을 담는다/할당한다 → 변수가 대신 지칭하게 된다 (대입) 

대다수의 경우에, declare, assign 동시에 진행 

let myNumber=100;

let myNumber2 = 200;        변수(variable)에 값을 할당할 때 대입연산자(=)를 사용

console. log (myNumber2) 

→ 200 

let basketBookCount = 1;          변수 생성, 값 할당 

 

function addBook() {             함수 정의

basketBookCount = basketBookCount + 1; //  이전의 변수에 하나 더해줘 console.log(basketBookCount);

}

 

함수 첫 번째 실행 - basketBookCount는 2가 됨

addBook();  

 

함수 두 번째 실행 - basketBookCount는 3이 됨

addBook();

 

---

1-2-2. 변수의 생성(선언) vs. 값의 할당

 

생성 

• 변수를 생성하는 키워드 : let, const 등 
• 같은 이름의 변수를 두번 생성하지 않는다 (변수 이름 중복해서 사용할 수 없다) 

 let name= “김개발"

 let name=”김토딩"  불가★

---

1-2-3. 변수 수정 

• 변수 이름을 바꾸고 싶다.

( 수정하는 경우에는 letX ) 같은 이름으로 변수 수정 못함

 let name= “김개발"

 let name=”김토딩"  이렇게 한다고 해서 수정되는거 아니고, 변수 같게 생성 불가 

 

let name = "김개발"

name = "김코딩";     이렇게 하는 거

EX. const 키워드를 사용하여 myDream 변수를 선언하고,

        그 값으로 "being a good software developer" 이라는 문자열 타입의 값을 할당

     →  const myDream = "being a good software developer";

 

Ex, const word1 = 'tree'

    const length1=;

    length1에는 word1의 길이 값을 할당

→ const length1=word1.length;

 

• 변수에 값을 할당하기 위해서는 대입 연산자(=)를 활용합니다.
• 대입 연산자(=)는 오른쪽 항에 있는 값을 왼쪽에 있는 변수에 대입하는 역할

js에서 variables 

• 데이터(특정 값)를 담을 수 있는 대상 

console.log (100) console.log (20) 100, 20이 변수 

 

let myNumber=100;    (myNumber라는 변수에, 100 이라는 값을 담는다)

• myNumber:변수 이름, 100: 변수에 담긴 값
• 지금부터 숫자 100 대신 myNumber라는 변수 이름을 사용하겟다.

---

1-2-4. 변수 이름 정하기 

• 변수 이름을 정할 때, 첫 번째 문자는 반드시 글자나 밑줄(_), 달러기호($)중 하나 입니다.
• 두 번째 문자부터는 글자, 밑줄, 달러, 숫자 중에서 자유롭게 쓸 수 있습니다.

 

• 변수이름, 함수이름 등 camelCase(카멜케이스) 방식으로 쓸 것.

let someVariable; 

let anotherVariableName; 

let thisVariableNameIsSoLong;

 

• snake_case 표현법도 있지만 잘 사용하지 않음(변수이름에 -는 사용할 수 없으므로, _를 사용한 것)

 

let first_second;

let my_profile_img;

let to_do_list_array;

## 변수 이름 짓기 (Naming convention)

 

- 변수의 이름은 자유롭게 정할 수 있습니다.

 하지만 몇 가지 주의할 점이 있으며, 이러한 암묵적인 약속을 `컨벤션(convention)`이라 부릅니다.

- 변수의 이름을 정할 때 주의해야 할 `Naming Convention`은 아래와 같습니다.

 

1. 변수의 이름은 의미가 추측 가능하도록 
2. 한 파일에서 같은 변수 이름을 중복해서 사용할 수 없습니다.
3.  변수 이름은 대소문자를 구분합니다. (`myName`과 `MyName`은 다른 변수입니다.)
4.  자바스크립트 변수는 거의 대부분 `camelCase(카멜케이스)` 방식으로 사용합니다.

띄어쓰기가 안되니까 단어가 새로 시작할 때 대문자로 씁니다

 

- cf. camelCase(띄어쓰기를 첫단어 대문자) vs. snake_case (띄어쓰기를 _로 표현하는것)

    - `camelCase` ****란 낙타 등처럼 울퉁불퉁하다는 뜻입니다. 단어가 새로 시작할 때 대문자로 

    - example) `firstSecond`, `myProfileImg`, `toDoList`

    - `snake_case` 표현도 있습니다. 변수이름에 `-` 는 사용할 수 없으므로, `_` 를 사용한 것입니다.

    - example) `first_second`, `my_profile_img`, `to_do_list`

 

Cf. 파스칼케이스: camelCase와 같은데 첫글자도 대문자 

      camelCase: 첫 문자는 소문자

 

• Q. 프로그래머가 가장 힘들어하는 일은?
  
  
• 변수명 짓기는 왜 중요한 걸까요? 아래와 같이 크게 두 가지 이유가 있습니다.
  
  

따라서 모호하지 않고, 의미가 추측 가능한 변수명을 정하는 것이 중요합니다.

// BAD

let x = "김개발";

let asvasefsefwefwe = "위코드";

 

// GOOD

let personName = "김개발";

let bootcampName = "위코드";

---

1-2-5. var / let / const 변수 선언하는 키워드 

• var는 개발자들이 거의 사용 x (최신x) 
• const로 하고 바꾸게 되면 let으로 바꿔주기 

 

var

• JavaScript 의 변수 선언은 var 키워드를 통해서만 가능했습니다.
• 이후 버전이 업데이트 되면서(ES5 → ES6) let과 const라는 키워드가 새롭게 생겼습니다.
• var를 사용해도 되지만, 최신 버전에 맞는 문법(let, const)을 사용하는 것이 좋습니다.

---

let vs const 

 

let name = "wecode";                                // 이름은 개명 가능 

• let 은 이름을 wecode로 선언하고 할당했을때 name에 들어가는 값 수정 가능 →  변수 값을 수정할 수 

let name = "김개발"

name = "김코딩"; 

• 변수의 값이 수정될 수 있는 값이라면 let 키워드를 활용하여 변수를 선언합니다.

---

const

• 변수에 값을 할당/선언하고 수정할 일이 없다, 상수로 사용할 거다 →  const 키워드를 사용하여 변수를 선언합니다.
• const 키워드를 사용한 변수 값은 수정할 수가 없습니다.

const name = "김개발"

name = "김코딩";                const로 선언한 변수는 수정 불가 

둘중 뭐로 쓸지 고민될 땐 ,일단 const로 쓰기 (값이 바뀌지 않는게 안전, 대부분 개발자들이 변수를 잘★★바꾸지 않아서)

그 후 나중에 바뀔 일 있으면 그때 let으로★바꿔주기

---

let과 const의 차이점 말해보세요 (개발 면접 보면 자주 물어보는 질문)

 let vs. const : 

변수 선언 시 우선 const 로 선언한 후, 

이후 값을 수정해야 하는 경우가 발생하면 let 으로 바꿔주는 것도 방법입니다.