WIL#1 ) Oct. 5th Week

luneah·2021년 10월 29일

Oct5 WIL keywords

Weekly I Learned

목록 보기

1/9

🚀 What I Learned

변수를 선언하는 방법과 차이점에 대해 설명할 수 있다.
다양한 자바스크립트 데이터 타입의 종류와 활용법에 대해 익힌다.
함수의 정의할 수 있고 정의와 호출의 차이점을 이해할 수 있다.
boolean 타입과 함께 조건문을 사용할 수 있다.

10월 5주차 스터디 키워드

변수가 필요한 이유와 선언하는 방법
자바스크립트 데이터 타입의 종류
number와 string의 메소드 각각 3개와 사용 방법
함수가 필요한 이유
함수의 정의와 호출의 차이점
조건문이 필요한 이유

🔑 변수(Variable)의 정의와 필요성

변수란 하나의 값(데이터)을 담고 저장할 수 있는 이름이 붙어있는 보관함이다.

Why Use?

A. 변수를 사용한다면 데이터를 변경하고 코드에 적용시키는 것이 훨씬 쉬워지고 효율적으로 바뀐다. 즉, 변수를 사용하면 코드의 재활용성과 가독성을 높여주고, 중복을 제거하여 유지보수를 쉽게 해준다는 장점이 있다.

변수 선언(Declaration)

변수 선언이란 쉽게 말해 변수를 생성하는 것이다. 좀 더 구체적으로 말하자면 값을 저장하기 위한 메모리 공간 확보(allocate) 후 변수 이름과 메모리 주소 연결(mapping)한다. 확보 해제 전까지 메모리 공간은 보호된다.

변수를 선언할 때는 변수 선언 키워드var, let, const 를 사용한다.

// 변수 선언문
var name;
let name;
const name;

선언 단계(Declaration phase)
변수 이름을 등록하여 자바스크립트 엔진에 변수의 존재를 알린다.
초기화 단계(Initialization phase)
값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당한다.

| var, let, const의 차이점

var : 오래된 방식, 중복 선언 가능, 재할당 가능

EX)
var a = 50;
var a = 70;
최종 a의 값은 70
제일 마지막으로 선언한 변수의 값이 호출됨.

let : 가장 많이 사용, 중복 선언 불가능, 재할당 가능

EX) 이미 선언 되었다고 console에 에러 나옴.
let a = 50;
let a = 50;
EX) a = 60으로 재할당 됨
let a = 50;
a = 60;

const : 변하지 않는 변수(=상수)를 선언할 때 사용, 재할당 불가능, 재선언시 에러 발생.
선언한 변수에 데이터를 할당하기 위해서는 '대입 연산자 =', '담을 데이터'가 필요하다.

EX)

const a = 50;
const a = 60;    // --> already been declared
a = 70;    // 재할당 불가

변수명 네이밍 규칙

이름은 의미 있게 짓는다.
여러 단어를 사용한 경우 camelCase 사용
변수 이름의 첫 글자는 반드시 "문자", "밑줄(_)", "달러 기호($)"로 시작

📍 추가로 공부한 것

변수 호이스팅(Variable Hoisting) : 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징

console.log(name); //undefined

var name = 'Jimmy';

console.log(name); //'Jimmy'

호이스팅이 없었다면?

변수 name을 선언하기 전에 console.log(name)을 통해 name을 참조하기 때문에 Reference Error가 발생해야 한다. 하지만, Reference Error 발생되지 않고 undefined가 출력된다.

Why? 변수 호이스팅!

모든 선언문은 런타임(코드가 한 줄씩 실행되는 시점) 이전 단계에서 실행된다. 실행되면서 모든 값을 undefined로 초기화한다.

(변수 선언뿐만이 아니라 함수, 클래스 선언문도 호이스팅이 된다.)

🔑 JS 데이터 타입

자바스크립트에는 다섯가지 기본 데이터 타입(Primitive type)이 있다.

numbers : 4, 9.3, -10
strings “Hello World”, “43”
Booleans : true, false
null : 빈 값
undefined : 값 할당되지 않음.

undefined vs null

undefined는 자료형이 결정되지 않은 변수이고, null은 자료형은 객체인데, 비어있는 변수이다.

undefined : 변수를 선언만 하고 값을 할당하지 않음. 즉, 자료형이 결정되지 않은 상태이다. (선언하지 않은 변수도 콘솔이나 기타 메세지에는 undefined라고 뜨지만, 그 값을 가지는 것은 아니다.)

null : 변수를 선언하고, 'null'이라는 빈 값을 할당한 경우. 이 '빈 값'의 경우 객체형 데이터(array, object)의 빈 값을 의미한다. 이들 모두는 if문에서 false로 형 변환된다.

출처: https://enarastudent.tistory.com/entry/null과-undefined의-차이 [Coding Story]

자바스크립트에는 세가지 참조 데이터 타입(Reference type)이 있다.

Array : [21, 'Happy', true]
Object : {name: Kate, age: 21}
Function : 함수

function name(parameters) {
  ...함수 본문...
}

Array VS Object

Array : 순서가 있는 컬렉션이 필요할때 배열을 이용할 수 있다.
var friends = [“Charlie”, “Liz”, “David”, “Mattias”]
Object : Array는 순서가 있는 반면 Object는 순서가 의미가 없다. key값과 value값이 있다.
var person = {
    name: “Kate”,  // key: value
    age: “24”,
    city: “LA”
}

🔑 number와 string의 메소드와 사용 방법

number의 메소드 3개

1) .toString()

정수값을 문자열값으로 변환하는 메서드 : 숫자 → 문자

var num = 255;              // 정수값으로 Number 인스턴스 생성
var num2 = num.toString();  // 정수값을 문자열값으로 변환

console.log(num);    // 정수값 출력 -> 255
console.log(num2);   // 정수값을 문자열로 변환하여 출력 -> "255"

num은 정수 255를 그대로 출력
toString 메소드 사용시 —> 문자열 "255"로 변환
변수 사용 없이, 정수로 toString 메소드를 바로 사용하려면 정수값 사이드로 괄호()를 사용하여 감싸주어야 한다.

(255).toString();    // 255

2) .parseInt()

문자열 타입의 숫자를 정수로 변환하는 메서드
문자열을 파싱(분석)하여, 문자열로 된 부분 중 숫자만 찾아 뽑아서 변환합니다.
숫자로 변환할 수 없으면 NaN을 리턴합니다.

💡 NaN = Not-A-Number (= 숫자가 아님 = 숫자로써 읽을 수 없음)

Number.parseInt("12");         // 12
Number.parseInt("12.34");      // 12
Number.parseInt("12abc");   // 12
Number.parseInt("12a34b56");   // 12
Number.parseInt("abc56")); // NaN

3) .isNaN()

주어진 값이 NaN인지(숫자인지 아닌지) 판별하는 메소드.
isNaN 괄호 안의 값이 NaN이면(=숫자가 아니면) True(참), NaN이 아니면(=숫자가 맞으면) False(거짓)을 반환한다.

Number.isNaN(NaN);       // true
Number.isNaN(0 / 0);     // true

// 다음은 전역 함수인 isNaN()에서 잘못된 결과를 반환하는 예제임.
isNaN("NaN");            // true
isNaN(undefined);        // true
isNaN("abcde");         // true

// Number.isNaN() 메소드에서 맞는 결과를 반환하고 있음.
Number.isNaN("NaN");     // false
Number.isNaN(undefined); // false
Number.isNaN("문자열");  // false

아래는 NaN으로 취급하는 조건들이다.

숫자로서 읽을 수 없음 ex) parseInt("abc"), Number(undefined)

결과가 허수인 수학 계산식 ex) Math.sqrt(-1)

피연산자가 NaN ex) 7 * NaN

정의할 수 없는 계산식 ex) 0 * Infinity

문자열을 포함하면서 덧셈이 아닌 계산식 ex) "abc" / 3

String의 메소드 3개

1) .split()

String 인스턴스를 구분자(separator)를 기준으로 나눈 후, 나뉜 문자열을 하나의 배열로 반환한다.
split() 메소드는 인수로 구분자를 전달하지 않으면, 전체 문자열을 하나의 배열 요소로 가지는 길이가 1인 배열을 반환한다.

var str = "만나서 반가워요 여러분! 우린 최고예요.";
str.split();    // 구분자를 명시하지 않으면 아무런 동작도 하지 않음.
str.split("");  // 한 문자("")씩 나눔.
str.split(" "); // 띄어쓰기(" ")를 기준으로 나눔.
str.split("!"); // 느낌표("!")를 기준으로 나눔.

2) .concat()

문자열을 이어붙이는 메소드.
문자열에 다른 문자열을 이어붙이고 싶을 때, concat()의 괄호 안에 ,(콤마)로 이어붙일 문자열 변수를 나열.

var str = "자바스크립트";
str;                                           // 자바스크립트
str.concat("는 너무 멋져요!");                    // 자바스크립트는 너무 멋져요!
str.concat("는 너무 멋져요!", " 그리고 유용해요.");  // 자바스크립트는 너무 멋져요! 그리고 유용해요!
str;                                           // 자바스크립트

위의 예제에서 여러 번 concat() 메소드를 실행한 후의 변수 str의 문자열은 여전히 처음과 같다. 이처럼 자바스크립트에서 String 인스턴스의 값은 변경될 수(immutable) 없다. 따라서 모든 String 메소드는 결과값으로 새로운 문자열을 생성하여 반환한다.

3) .toUpper/LowerCase()

String 인스턴스의 모든 문자를 대문자나 소문자로 변환한 새로운 문자열을 반환한다.

var str = "JavaScript";
str.toUpperCase(); // JAVASCRIPT
str.toLowerCase(); // javascript

*자바스크립트의 기본적인 메소드

clear() : 콘솔 창 정리하는 method
alert() : 알림창 method
console.log() : JS 콘솔에 프린트되는 것. User에게는 보이지 않는다.
prompt() : User에게 질문창을 띄우기.
ex) var userName = prompt(“what is your name?");
userName = User의 인풋

🔑 함수가 필요한 이유

A. 동일한 코드를 여러 번 작성하는 방식보다 코드를 블록으로 그룹화하여 하나의 작업과 연결하여 재사용을 하는 방식이 효율적이다. 우리는 이러한 작업을 함수를 만들어 구현낼 수가 있다.

프로그래밍에서 특정 작업을 여러번 실행해야 할 상황을 마주했을 때 꼭 함수를 떠올리자.
함수는 필요할 때 마다 실행 시점을 개발자가 결정하여 호출하여 재사용이 가능하다.

미리 정의된 함수를 여러번 호출 할 수 있어 코드의 재사용 면에서 큰 유용성을 지닌다.
코드 중복을 억제하고 재사용성을 높여 유지보수의 편의성을 높여준다.
중복해서 써야하는 코드에 비해 개발자의 실수를 줄여 코드의 신뢰성을 높여준다.
객체 타입의 값으로서 식별자로서 함수의 역할 파악을 도와 코드의 가독성을 향상시킨다.

🔑 함수의 정의와 호출의 차이점

함수의 정의

함수는 함수 정의(function definition)를 통해서 생성된다. 함수 정의는 일련의 과정을 문(statements)으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이지 실행을 의미하는 것은 아니다.

함수를 정의할 수 있는 다양한 방법은 중 다음은 함수 선언문을 사용하여 정의한 함수이다.

함수 선언은 변수 선언처럼 함수 선언 키워드 뒤에 함수명(=식별자)을 적고 중괄호로 ({}) 블럭을 넣어준 뒤 블럭 내부에 함수가 실행할 코드를 작성해준다.
function introduceMySelf (name, age) { 
  return `Hello, I'm ${name}!, ${age}`;
}
❗️ 함수 선언시 주의할 점 : 자바스크립트는 호이스팅 기능으로 함수 선언이 상단으로 올라가기에 함수 선언이 정의 되기도 전에 접근하여 호출할 수도 있다는 점을 반드시 인지

함수 호출

함수 호출이란 미리 정의된 일련의 과정(함수의 정의), 정의된 함수를 실행하기 위해 필요한 입력인 인수를 매개변수를 통해 함수에 전달하여 함수실행 시키는 명령어이다.

함수를 호출할 땐 함수 내부 ()안에 필요한 인자를 넣어주면 되고 없다면 생략가능하다.
함수를 호출하면 코드 블록에 담긴 문들이 일괄적으로 실행되어 실행 결과로서 반환값을 반환한다.

function introduceMySelf (name, age) { 
  return `Hello, I'm ${name}!, ${age}`;
}

introduceMySelf("Kate, 21");  // 함수 호출 --> Hello, I'm Kate, 21

📍 추가로 공부한 것

지역 변수

함수 내에서 선언한 변수인 지역 변수(local variable)는 함수 안에서만 접근할 수 있다.

EX)

function showMessage() {
  let message = "안녕하세요!"; // 지역 변수

  alert( message );
}

showMessage(); // 안녕하세요!

alert( message ); // ReferenceError: message is not defined (message는 함수 내 지역 변수이기 때문에 에러가 발생)

외부 변수

함수 내부에서 함수 외부의 변수인 외부 변수(outer variable)에 접근할 수 있다.

let userName = 'John';

function showMessage() {
  let message = 'Hello, ' + userName;
  alert(message);
}

showMessage(); // Hello, John

함수에선 외부 변수에 접근하는 것뿐만 아니라, 수정도 할 수 있다.

let userName = 'John';

function showMessage() {
  userName = "Bob"; // (1) 외부 변수를 수정함

  let message = 'Hello, ' + userName;
  alert(message);
}

alert( userName ); // 함수 호출 전이므로 John 이 출력됨

showMessage();

alert( userName ); // 함수에 의해 Bob 으로 값이 바뀜

외부 변수는 지역 변수가 없는 경우에만 사용할 수 있다.

함수 내부에 외부 변수와 동일한 이름을 가진 변수가 선언되었다면, 내부 변수는 외부 변수를 가린다.

let userName = 'John';

function showMessage() {
  let userName = "Bob"; // 같은 이름을 가진 지역 변수를 선언

  let message = 'Hello, ' + userName; // Bob
  alert(message);
}

// 함수는 내부 변수인 userName만 사용
showMessage();

alert( userName ); // 함수는 외부 변수에 접근하지 않음. 따라서 값이 변경되지 않고, John 이 출력됨.

전역 변수

위 예시의 userName처럼, 함수 외부에 선언된 변수는 전역 변수(global variable) 라고 부른다. 전역 변수는 같은 이름을 가진 지역 변수에 의해 가려지지만 않는다면 모든 함수에서 접근할 수 있다. 변수는 연관되는 함수 내에 선언하고, 전역 변수는 되도록 사용하지 않는 것이 좋다.

기본값

매개변수에 값을 전달하지 않으면 그 값은 undefined로 출력된다. 값을 전달하지 않아도 기본 값을 설정하고 싶다면 매개변수 옆에 =를 붙이고 기본값을 쓰면 된다.

EX)

function showMessage(from, text = "no text given") {
  alert( from + ": " + text );
}

showMessage("Ann"); // Ann: no text given
function showMessage(from, text = anotherFunction()) {
  // anotherFunction()은 text값이 없을 때만 호출됨
  // anotherFunction()의 반환 값이 text의 값이 됨
}

return 값이 긴 표현식인 경우

return과 값 사이에는 줄바꿈을 해서는 안 된다.

나쁜 예
return
 (some + long + expression + or + whatever * f(a) + f(b))
자바스크립트는 return문 끝에 세미콜론을 자동으로 넣기 때문에 이렇게 return문을 작성하면 안된다. 위의 코드는 아래 코드처럼 동작한다.
return;
 (some + long + expression + or + whatever * f(a) + f(b))
따라서 아무것도 반환하지 않는 것처럼 되어버린다.

표현식을 여러 줄에 걸쳐 작성하고 싶다면 표현식이 return 지시자가 있는 줄에서 시작하도록 작성해야 한다. 또는 아래와 같이 여는 괄호를 return 지시자와 같은 줄에 써줘도 괜찮다.

return (
  some + long + expression
  + or +
  whatever * f(a) + f(b)
  )

이렇게 하면 의도한 대로 표현식을 반환할 수 있다.

🔑 조건문이 필요한 이유

조건문은 주어진 조건식의 평가 결과에 따라 블록의 실행을 결정할 때 쓰이고 조건식은 불리언 값으로 평가될 수 있는 표현식으로 나타난다.
간략히 말하면 특정한 조건을 확인하고 해당 조건에 따라 어떠한 작업을 수행하게 해주는 문법이다.

조건문의 기본 구성

조건문의 구성은 크게 2가지로 분류할 수 있다.

if (60 <= x < 70) {
	return ("your grade is D")
} else of (70 <= x < 80) {
	return ("your grade is C")
}

조건부 (참과 거짓으로 나뉜다)
조건문을 실행시키기 위해서는 특정 조건을 달성해야한다. 만약 위 코드에 x에 71이 들어간다면, 첫번째 조건을 충족하지 못하고 false가 된다. 그러면 자동으로 두번째 조건으로 넘어가게 된다. 두번째 조건은 충족하니, true가 되므로 코드를 실행한다.
실행부 (결과 추출)
충족된 조건문의 코드를 실행하게 된다면, "your grade is C" 라는 결과물을 내게된다.

Why Use?

A. 조건문을 통해 많은 상황, 즉 조건에 따른 결정을 만듦으로서 이러한 현실의 상황을 모델링할 수 있다는 점 때문이다.

📍 추가로 공부한 것

switch 조건문

조건문에서 비교할 초이스(값)이 많은 경우, if~else문을 반복 사용하는 것보다 switch문을 이용하면 가독성을 높일 수 있다.

if~else 문의 조건식이 반드시 불리언 값으로 평가되는 반면, switch 문의 표현식은 불리언 값보다는 문자열, 숫자 값인 경우가 많다.
if~else 문은 논리적 참, 거짓으로 실행할 코드 블록을 결정하지만 switch 문은 논리적 참, 거짓보다는 다양한 상황(case)에 따라 실행할 코드 블록을 결정할 때 사용한다.

switch 문은 switch 문의 condition을 평가하여 그 값과 일치하는 표현식을 갖는 case 문으로 실행 순서를 이동시킨다.

| 문법
switch (condition) {
  case value1:
    statement1;
    break;
  case value2:
    statement2;
    break;
  ...
  default:
    statement3;
}

condition의 값이 value1이면 statement1을, value2면 statement2를, 그 어느 것도 아니라면 default가 적용되어 statement3을 실행한다.

조건이 맞아 break를 만나면 그 이후의 비교는 하지 않으며, switch문을 종료시킨다.

default문은 switch문의 가장 마지막에 위치하므로 default 문의 실행이 종료하면 switch 문을 빠져나간다. 따라서 break를 생략하는 것이 일반적이다.

luneah

하늘이의 개발 일기

다음 포스트

WIL#1 ) Oct. 5th Week

Weekly I Learned

🚀 What I Learned

10월 5주차 스터디 키워드

🔑 변수(Variable)의 정의와 필요성

Why Use?

변수 선언(Declaration)

| var, let, const의 차이점

변수명 네이밍 규칙

📍 추가로 공부한 것

Why? 변수 호이스팅!

🔑 JS 데이터 타입

undefined vs null

Array VS Object

🔑 number와 string의 메소드와 사용 방법

number의 메소드 3개

String의 메소드 3개

🔑 함수가 필요한 이유

🔑 함수의 정의와 호출의 차이점

함수의 정의

함수 호출

📍 추가로 공부한 것

지역 변수

외부 변수

전역 변수

기본값

return 값이 긴 표현식인 경우

🔑 조건문이 필요한 이유

조건문의 기본 구성

Why Use?

📍 추가로 공부한 것

switch 조건문

WIL#2 ) Nov. 1st Week

0개의 댓글