자바스크립트 기초 복습

해피데빙·2023년 10월 15일

변수의 선언과 값을 할당

변수의 타입 : 변수에 할당할 수 있는 형태 (원시 자료형, 참조 자료형)

함수

변수 선언 (공간에 이름), 할당 (공간에 값을 넣는 것)

let 변수 = 값, 변수 = 값;

변수

변수의 선언과 값의 할당

프로그래밍

데이터를 처리하는 것
컴퓨터에게 원하는 처리 방법을 명령하는 것

변수

데이터를 다루는 방법 중에 하나
변수를 관리하면 효율을 꾀할 수 있다

변수와 타입

변수

상황에 따라 변할 수 있는 값
이름(label)이 붙은 값
변수를 이용해 값을 다른 곳에서도 이용할 수 있다
변수명에 공백을 쓸 수 없어서 단어의 첫글자를 대문자로 써 붙인다
- ex. camleCase

동일한 변수를 이용해 대입할 수 있다

let sum = 1;
sum = sum + 2;
//console.log(sum); 3

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

선언

let 변수명;
- let 키워드를 이용
- 선언은 한번만 할 수 있다
- 선언만 하고 할당이 안되면 undefined라는 값을 가진다 (정의되지 않았다는 의미)

할당

변수명 = 값
변수명에 값을 대입하는 것

let myname; //선언

myname = Steve; //할당

let myname = Steve; //선언과 할당을 동시에

표현식

변수와 특정 값을 이용해서 연산을 하는 것
변수를 이용해서 값을 표현하는 식
결과물을 다시 변수로 담을 수 있다

정리

변수

어떤 데이터를 담는 메모리의 이름

선언

컴퓨터 메모리에 사용할 공간을 지정
공간을 부를 이름을 지정
값을 할당하기 전에는 undefined
선언은 한 번만 할 수 있다

할당

선언을 통해 확보한 공간에 값을 넣는 과정
선언으로 설정한 이름을 이용해 할당된 값을 사용할 수 있다
선언과 할당은 동시에 할 수 있다

표현식

변수를 이용해서 계산하는 식
식에서 변수를 값으로 변환하고 결과를 계산할 수 있다

타입

변수에 할당할 수 있는 형태, 변수의 형식
타입마다 다른 속성과 메서드가 있다
typeof 값 : 값의 타입을 확인할 수 있다
종류 : 문자열, 숫자, 불리언, undefined, 배열, 객체, 함수

원시 자료형과 참조 자료형

원시 자료형

string : 문자열
number : 소수, 정수 등 세부 타입이 있다
boolean (불리언, 불린): true, false
undefined : 타입이다

참조 자료형

배열
객체
함수

정리

타입

변수에 할당할 수 있는 형태, 변수의 형식
원시 자료형
- (문자열, 숫자, 불리언, undefined)
참조 자료형
- (배열, 객체, 함수)

함수

정의
- 기능의 단위
- 입력에 따라 작업을 하는 하나의 단위
- 작고 간단한 문제를 하나씩 해결해 전체적으로 크고 복잡한 문제 해결
구성
- keyword
- name
- parameter
- body
선언과 호출
- 선언
  - 변수 선언, 함수 표현식 할당
  - 함수의 결괏값이 변수에 할당되어 담기는 과정을 설명할 수 있다
  - 선언식, 표현식, 화살표 함수
- 호출
  - 리턴
  - 함수 자체와 구분 필요
  - 매개변수(parameter)와 전달인자(argument)

함수 선언과 호출

함수란

기능의 단위

코드의 묶음

입력과 출력의 매핑

리턴 값을 가진다
선언 (declaration)

함수를 제작하는 과정
1. 메모리에 정의한 이름의 공간이 지정된다 (선언)
2. 공간에 작성한 함수 내용이 들어간다 (할당)
3. 구성 요소
  - keyword : function
  - name : 함수 이름
  - parameter : 매개변수 / argument : 실제로 넣는 값
  - body : 함수 정의 시 작성한 코드 묶음
호출 (call)

함수 이름()
1. 메모리에 저장된 함수를 조회한다
2. 전달한 인자 값으로 매개변수가 대체된다 (파라미터 평가)
3. 바디가 순차적으로 실행된다
4. 함수가 리턴하면 호출된 장소로 돌아간다
5. 변수에 함수 리턴값을 담는 경우, 메모리의 지정된 공간에 값이 할당된다

함수 선언 방법

선언

선언 방법 (3가지)

함수 선언식
- 선언과 동시에 할당
함수 표현식
- 선언한 변수에 익명 함수 할당

화살표 함수
- 표현식을 기반으로 한다
- body에 return문만 있으면 return, 중괄호 생략 가능 / return 없이 소괄호 사용 가능
- 두줄 이상이면 return, 중괄호를 명시적으로 사용하는 것이 좋음

//선언식
function getRectangleArea (width, height) { 
	return width * height; 
}

//표현식
const getRectangleArea = function(width, height) { 
	return width * height 
}

//화살표 함수
const getRectangleArea = (width, height) => {
	return width * height
} 
const getRectangleArea = (width, height) ⇒ width * height;
const getRectangleArea = (width, height) ⇒ (width * height);

정리

정의

기능의 단위
입력과 출력 매핑
코드의 묶음
리턴값이 있다 (return이 없으면 undefined를 반환)

구성

keyword : function
name : 함수 이름
parameter : 매개변수 / argument : 실제 입력하는 값, 인자
body : 코드 묶음
return : 돌려주는 값

선언

메모리에 설정한 함수 이름으로 된 공간 지정
공간에 함수 내용 할당

방법 3가지

선언식

function 함수이름(매개변수){
//keyword name parameter
	매개변수를 이용한 코드
	return 리턴값
}

표현식

const 변수 = function(매개변수){
//익명 함수를 변수에 할당
	매개변수를 이용한 코드
	return 리턴값
}

화살표 함수

const 변수 = (매개변수) => {
//표현식에서 function 키워드를 화살표로 대체
	매개변수를 이용한 코드
	return 리턴값
}

const 변수 = (매개변수) => 리턴값
//리턴문만 있으면 중괄호, return 생략 가능
//리턴값에 소괄호 사용 가능

호출

메모리에서 해당 함수를 조회한다
함수 안 매개변수를 매개변수에 넘겨준 인자 값으로 대체한다
바디를 모두 실행한 결과값을 리턴한다
변수가 있는 경우 변수에 함수 결과값을 할당한다

코드 학습법

구글링
크롬 개발자 도구 (developer tools)

구글링

mdn은 자바스크립트 레퍼런스 문서, 가장 정확함
mdn 키워드 검색
- ex. mdn 변수 문자열 변경
mdn 문서를 보는 법

자연어 영어 문장으로 검색하기

ex. how to convert to string in javascript

신뢰할 수 있는지 알 수 없음

검색 결과에서 키워드를 얻어서 mdn + 키워드로 검색하기

검색 결과 상단에 나오는 키워드로 다시 검색

에러 발생 시 에러 자체를 검색하기 (stack overflow)

크롬 개발자 도구

오픈
- 우클릭 검사
- cmd + shift + c
탭
- elements
  - html
  - style 탭
    - css
- console
  - javascript
- sources
- network
extension
- blank new tab

조건문

truthy, falsy
비교연산자 (===, ! ==)
if, else if, else
&&, ||, !

조건문 기초

불리언 타입

true
false

조건문

어떤 조건을 판별하는 기준을 만드는 것
반드시 비교 연산자가 필요하다

Untitled

비교 연산자

<, >, === : 부등호, 등호
비교의 결과는 늘 불리언 (true, false)

Untitled

=== vs ==
- === : equal sign 3개는 무조건 같아야
- == : 예외케이스가 많음 (아래 보기)

Untitled

ex. 1 == ‘1’, 1 == true, null == undefined, [1] == true

Untitled

논리 연산자

교집합 : && (and 연산자) ex. true && true일 때만 true
합집합 : || (or 연산자) ex. false || false일 때만 false
not 연산자 : truthy, falsy 여부를 반전시킨다 ex. !false : true, !(3>2) : false, !undefined : true, !’Hello’ : false, ‘’: falsy
- 빈 문자열이 아닌 모든 문자열은 truthy

falsy

false
null
undefined
0
NaN
‘’

정리

불리언

true, false
falsy한 값
- null
- undefined (cf. undefined는 원시 자료형, 즉 타입. 함수의 리턴값이 없으면 undefined → 함수 이름이라는 변수를 선언했는데 할당할 값이 없는거니까)
- ‘’ (cf. ‘’가 아닌 모든 문자열은 truthy)
- 0
- NaN
- false

조건문

if(기준1){ 
	//기준1이 truthy하면 실행
} else if (기준2){
	//기준1이 falsy하고
	//기준2이 truthy하면 실행
} else {
	// 기준1,2 모두 falsy하면 실행
}

비교 연산자

=== : 정확한 비교
== : 느슨한 비교, truthy, falsy 기반 비교 ex. 1 == ‘1’, 1 == true, null == undefined, [1] == true

논리 연산자

&& : and 연산자, 교집합 - 둘다 true여야 true
|| : or 연산자, 합집합 - 둘다 false여야 false
! : not 연산자 - falsy, truthy 기준으로 반대

문자열

모든 글자의 나열
‘ 또는 “”를 사용해서 문자열 구분
문자열 : string
문자 하나 : character (축약어 : char)
length, 접근, 합, slice, substring, 대/소문자, 문자의 index, 포함 여부 확인, 배열로 바꾸기, 다시 문자열로 바꾸기

문자열 메서드

문자열은 read-only

str[index]

var str = 'code'
console.log(str[0]); //c
console.log(str[10]); //undefined

합치기
- +연산자 (-연산자는 안됨)
- string타입과 다른 타입 사이에 + 연산자를 사용하면 string 형식 변환 ex. ‘1’ + 7 = ‘17’
- str1.concat(str2, str3, …) 도 가능
str.length
- 전체 길이 반환
str.indexOf(검색어)
- 대소문자까지 확인
- 시작하는 위치를 찾는다
- 처음 일치하는 값을 돌려준다
- lastIndexOf도 0부터
str.split(나누는 기준) cf. csv : comma-separated value ex. csv.split(’\n’)
str.substring(start, end)
- start가 음수면 0으로 취급
- 앞이 더 크면 end로 취급
- end는 포함을 안한다
대소문자