<SEB Full 34th 1주차-2>

1주차-2 강의 내용 정리ing

 

* ch-변수 intro

변수의 선언과 할당에 대한 이해

값으로 변환된 표현문이 변수에 할당되어 담기는 과정을 이해

연산자의 의미 “=”는 같다가 아니라 연산자임(좌변에 우변값을 할당)

 

-------------------

 

크롬 개발자 도구(f12)를 통해서 테스트 가능

 

ex)

let num1=6

console.log(num1*1)

console.log(num1*2)

console.log(num1*3)

console.log(num1*4)

console.log(num1*5)

console.log(num1*6)

 

1. 데이터 보관함 확보; 선언(declaration)

let age;

2. 보관함에 데이터 저장; 할당(assignment

age=12;

3. 선언과 할당 동시에 가능

let age=12;

 

코드의 각 한줄을 표현식(expression)이라 부른다.

표현식이 무슨뜻을 가지는지 알아가는 과정; 평가(evaluation)

 

-----------

* 변수-기초

 

선언은 “let”

할당은 “=” 연산자(좌변에 우변값을 대입한다는 뜻)

프로그래밍 세계에서 변수는 이름(label)이 붙은 값

대표적인 예 pi(원주율)

let pi=3.141592;

 

#한번 선언했던 변수를 다시 사용할 때는 let을 쓰지 않는다!

 

만약 할당이 없는 변수는?

선언만 한 경우: let myname;

 

> let myname;

← undefined (정의되지 않았다!라는 뜻)

 

--------------

 

 

*ch-타입 intro

 

타입이란 간단히 말해서 ‘조사’

변수에 할당할 수 있는 맞는 형태가 있음

ex) 커피는 맛있다(o)/ 커피은 맛있다(x)

 

원시자료형/ 참고자료형에 대한 이해

원시자료형: string, number, boolean, undefined, symbol, (null)

#원시자료형

고정된 저장 공간을 차지하는 데이터를 모두 원시 타입(primitive type) 데이터 라고 한다.

원시 자료형은 모두 하나의 데이터만을 담고 있다.

#참조자료형

자바스크립트에서 원시 자료형이 아닌 모든 것들은 참조 자료형이다. 대표적으로 배열과 객체, 함수가 있다.

참조 자료형은 여러 데이터를 담을 수 있다.

참조 자료형의 데이터는 heap이라고 부르는 별도의 데이터 보관함에 저장되고, 변수에는 데이터가 저장된 메모리 상의 주소가 저장된다.
원시 자료형과는 다르게 heap 안에 저장된 데이터는 원하는 대로 데이터 사이즈를 조정할 수 있다.

 

typeof 키워드를 활용하여 특정값의 타입 확인: 일종의 연산자

#typeof 연산자는 피연산자의 평가 전 자료형을 나타내는 문자열을 반환

ex) 

>console.log(typeof 12);
number

>console.log(typeof 'son');

string

>console.log(typeof true);
boolean

 

비교시 엄밀한 비교(=== 과 !==)에 대한 이해

# 동치 비교 및 동일성

4가지의 같음 알고리즘이 있는데 이 중에서

===(엄격한 같음; 항등, 삼중등호)

; 두 값이 같은지 비교시 값 뿐만 아니라 형(type)까지 동일한지 비교

-> 만약 값은 같아도 형이 다르면 === 에서는 false값을 반환

거의 항상 사용하는 올바른 비교 연산이다

숫자를 뺀 모든 값에 대해, 분명한 의미(semantics)를 사용한다.

 

==(느슨한 같음; 이중등호)

;두 값이 같은지만 비교한다

-> 두 값을 공통(common) 형으로 변환한 후에. 변환 후 (하나 또는 양쪽이 변환을 거칠 수 있음)

최종 같음 비교는 꼭 ===처럼 수행된다.

느슨한 같음은 대칭(symmetric)의 의미.

A=B 이면 B=A 된다는거

 

#반대로 !== vs != 도 생각해 볼 수 있다.

!==(엄격한 다름)

; 두 값이 같아도 형이 다르면 다르다고 본다

ex)console.log("1" !==1);  //true //값은 같아도 형이 다르므로 다른 객체로 판단하여 진실(true)로 봄

!=(느슨한 다름)

; 두 값을 공통형으로 변환한 후에 비교하므로 두 값만을 비교함

ex)console.log("1" !=1); //false //값만을 비교하므로 두 값이 같으므로 거짓(false)로 본다

 

 

변수에는 다양한 타입이 있음

숫자(number)/문자열(string)/boolean(true/false)

위 타입이 서로 섞인(compound) 타입도 있다(자료형)

; 배열, 객체

 

# undefined(원시자료형), 함수(참조자료형)도 타입이다!

 

-----------------

*ch-함수 intro

 

함수란 “작은 기능의 단위”(논리적인 일련의 작업을 하는)

함수 선언시 필요: keyword, name, parameter, body

함수의 호출과 리턴에 대한 이해

함수 그자체(func)과 함수 호출(func())을 구분하기!

매개변수(parameter)와 전달인자(argument) 구분하기!

같은 기능을 하는 함수를 다양한 방법으로 바꾸어 표현해보기!

 

ex) 구구단 계산기

 

[keyword] [name] [parameter]

function mulTabPrint(num)

 

[body]

{

console.log(num*1);

…

console.log(num*9);

}

 

------------ 간단히 말하면 함수는 “코드의 묶음”(즐겨찾기 버튼) 이다

#함수는 호출 후에는 반드시 돌아온다(return;)

 

how to use

1. 버튼 제작: 선언(declaration)

2. 버튼 사용: 호출(call, invocation)

 

# 함수를 호출하면 함수의 매개변수(parameter)값이 함수 호출시에 전달된

인자(argument)의 값으로 변환된다.

ex)

let result=cal(10,20); //10, 20이 인자(argument)

 

function cal(param1,param2){//param1,param2가 매개변수(parameter)

console.log(param1+param2);

return param1*10;

}

 

#이때 함수 호출 값은 return값으로 바뀐다

let result=10*10=100;

-------------

 

*함수 기초

 

반복적인 실행되는 일이 필요한 경우→ 함수로 만드는게 편함!

# 함수는 항상 출력값을 반환한다(return)

# 만약 return을 사용하지 않았다면? undefined를 반환함(정의되지않음)

 

ex)

function getTA(base, height){

let triArea=(base*height)/2;

return triArea

}

 

console.log(getTA(2,4));

 

// return 값이 있어서 출력값이 4가 나옴을 확인(개발자도구 확인)

 

function getTA1(base, height){

let triArea=(base*height)/2;

 

}

 

console.log(getTA1(2,4));

확인란

// return 값이 없으니 출력값이 undefined으로 나옴

 

-------

 

함수는 “지시사항들의 묶음”이기도 하다!

 

Function getSomeCoffee(){

//1. 물을 끓이기

//2. 원두를 간다

//3. 드리퍼에 필터를 설치

//4. 드립커피를 추출

//5. 만들어진 커피를 제공(return)

}

 

 

함수 선언 방법: 크게 3가지

 

#요약내용

- 함수 선언식에서 함수 선언시에는 ;을 쓰지 않음!

- 함수 표현식에서 함수 선언시에는 ;을 붙인다!

 

 

1. 함수 선언식

example1(); // 함수 호출 (호이스팅) function example1() { console.log('hello'); } // 함수 선언

#함수 선언문은 반드시 함수 이름이 명시되어야함

#함수 선언식에서 함수를 선언할 때는 세미콜론(;)을 사용하지 않는다!

#함수 이름으로 함수를 호출: example();

 

2. 함수 표현식; 익명함수를 활용

const example2 = function () { console.log('hello') }; // 변수 example2에 함수 할당 example2(); // 함수 호출

# 위에 예에서 example2는 함수의 이름이 아니다!

#함수 표현식으로 함수를 표현할때는 세미콜론(;)을 붙인다!

#function은 익명함수이고 함수가 할당된 변수인 example2를 통해 호출할 수 있다

# 함수 표현식에서 const example2 = function exam2(){…} 과 같이 함수에 이름이 지정되었더라도 변수이름인 example2로 호출해야함! (함수에 이름을 정하는 것은 디버깅에 도움이 되기 때문)

# 함수 표현식에 함수 이름을 지정하였더라도 호출 방식에는 영향을 미치지 않음(호이스팅되지 않음)

# 호이스팅이란 “끌어올림”의 개념. 선언부가 코드 하단부에 있어도 코드 상단부에서 함수 호출이 가능!

 

3. 화살표 함수

const square = (x) => { return x*x };

 

#함수 표현식을 기반으로 함

#this의 값이 함수를 정의할 때 결정됨

; 원래 this는 ‘점 앞의’ 객체에 따라 자유롭게 결정되는데 반해

화살표 함수에서는 this값이 함수 정의시 이미 결정된다.

즉 화살표 함수 바깥의 this값이 화살표 함수의 this값이 된다

# argument 변수가 없다

; argument 변수가 정의되어 있지 않으므로 사용할 수 없다

#생성자로 사용할 수 없다

; 화살표 함수 앞에 new 연산자 붙여서 호출이x

#yield 키워드 사용 불가

; 화살표 함수 안에서는 yield 키워드 사용 불가. 그러므로 제너레이터로 사용x

# 함수 본문(body)에 return문만 있는 경우

; return과 {} 생략 가능

 

const getTriArea=(base,height)=>base*height/2 //정상작동(o)

const getTriArea=(base,height)=>{base*height/2} //작동x, undefined

왜냐하면 전자는 return문이라는 뜻(생략된뜻)이고 후자는 return문이 그냥 없는거니깐…?

 

# return문에 대해 소괄호를 사용 가능

 

const getTriArea=(base,height)=>(base*height/2) ///정상작동(o)

return이라는 뜻을 ()가 대체한 그런 느낌?

 

----------

 

함수를 선언할 때 parameter값이 매개변수고

함수를 호출할 때의 전달해 주는 값이 전달인자(argument)

 

 

함수 선언식 연습

function getRecArea(width, height){

let RecArea=width*height;

return RecArea;

}

 

console.log(getRecArea(4,5));

 

또는

 

let getRecArea(width, height){

let RecArea=width*height;

return RecArea;

}

getRecArea(5,5);

--------------

ch-코드 학습법

 

모르는 것을 검색하는 방법: 구글링

크롬 개발자 도구 사용법

; Chrome developer console의 기본적 사용법

; debugger 키워드를 활용한 단계적인 코드 실행

 

* 모르는 것을 검색하는 방법: 구글링

 

ex) 코플릿에서 [타입]covertToString 문제를 풀 수가 없어요

; 변수를 문자열로 변경하고 싶은 경우

 

검색키워드: 변수, 문자열, 변경

 

1. 문제가 구체화 되면 “mdn 키워드” 로 검색하기

 

mdn 변수 문자열 변경

 

mdn 문서가 가장 위에 뜨며 가장 정확한 레퍼런스이다.

 

#mdn? 일종의 자바스크립트 바이블, 레퍼런스 같은 것. 신뢰할 수 있는 자료들

(Mozilla Developer Network)

 

#그런데 mdn을 읽기가 너무 어렵다. 봐도 모르겠어요!

 

2. 자연어 문장으로 검색하기

; 영어로, javascript 키워드와 함께(in javascript)

 

how to [궁금한 것] in javascript

 

ex) 변수를 문자열로 변경하고 싶은 경우

how to convert to string in javascript

 

# 1,2를 혼합해서 검색 할 수도 있다

; 2에서의 검색 결과에서 얻은 키워드를 이용해 mdn 키워드 검

 

3. 에러 발생 시, 에러 자체를 검색해 보기

; 에러 메시지 자체를 검색 ㄱㄱ

# Stack Overflow를 활용(일종의 지식인 사이트)

 

답글 중에 초록색 체크 표시가 된 것이 채택된 답변

 

------------

 

* 크롬 개발자 도구 사용법

 

검사 기능(f12)

# 콘솔창에서 shift+enter 하면 줄바꿈

 

 

# 확장 프로그램: blank new tab

설치하면 깨끗한 빈 페이지가 나오므로 개발시 용이

 

---------

* coplit- 변수와 자료형

 

[coplit 사용법]

# 테스트 실행을 통해서 테스트 확인 후 제출하기

# 초기화 버튼을 통해 초기화한 후에 다시 풀 수도 있다

# 좌측 하단의 reference를 통해 힌트나 정답 해설지 확인 가능하지만 비추!

 

1. 변수 선언하기

let 키워드 사용

 

2. 변수 할당

3. 값의 표현(expression): 표현식

표현식이란 “하나의 값으로 표현되는 코드”를 의미

 

ex) 1+1 =2 ← 여기서의 2가 표현식이 되는 것

 

#자바스크립트도 이와 같이 글자,숫자,기호를 한글자씩 독해하여 하나의 값으로

컴파일(complie)한다.

 

4. 함수 연습(function)

; 문제를 어떻게 해결할 지에 대한 고민= 알고리즘

; 함수는 고민을 체계적으로 잘 구성한 하나의 작은 기능

 

5. 함수의 선언

함수는 크게 2가지 방식으로 선언 가능

#함수 선언식

;를 안붙임, 일반적인 선언법

#함수 표현식

;를 붙임, 익명함수 활용

 

#변수를 선언하고, 함수를 할당했다는 결론은 같다!

 

6. 함수의 호출(invoke; call)과 리턴(return)

함수() 형태로 호출가능

()안의 입력값 설정 가능한데 이 입력값을 “인자”(argument)라 부른다

 

함수가 호출되면 body의 코드가 실행되고 결과값이 return됨

body에 return 값이 없으면 undefined를 리턴

 

7. 타입(type)

자바스크립트의 모든 값(value)는 각자 타입을 가지고 있다

값에 맞는 타입으로 코딩해야 한다.

‘,”, 그냥(숫자) 이런식으로…

 

8. 타입에 따른 작동 방식의 차이

타입에 따라서 연산자 같은게 다르게 작동함

ex) + 연산자

string: 문자열을 이어붙임(concat)

number: 숫자들의 덧셈

 

#각 타입 별로 코드의 작동이 다르게 될 수 있으므로 타입에 맞는 올바른 문법 사용

 

9. 타입을 변경하기(형변환1): convertToNumber

웹의 정보를 가져오면 보통 string의 형태로 가져옴

→ 숫자로 세고 싶은 정보도 string으로 인식하므로 이럴 땐 타입 변경이 필요

Number() 함수 이용

// 함수므로 소문자가 아닌 대문자로 시작해야함을 유의!

 

10. 타입을 변경하기(형변환2): convertToString

반대로 웹에 보여줄 때는 string의 형태로 전달됨

→ 숫자도 string으로 변환해서 보여줘야 한다는 것

String() 함수 이용