WESTUDY : Week1 - TIL

42060 단어 JavaScriptJavaScript

What Will You Learn

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

Study Keyword

1. 변수가 필요한 이유와 선언하는 방법

  • 변수가 필요한 이유

변수란, 수학적 용어로는 '변할 수 있는 수'로, 컴퓨터 용어에서 수에서 데이터로 의미가 확장되어 '변할 수 있는 무언가'를 뜻한다. 즉, 변수는 '가변적인 데이터를 담을 수 있는 대상 혹은 공간(메모리)'의 의미를 가질 수 있다. 이는 식별자와 구분되는 의미이며, 식별자는 '변수명'을 뜻한다.

데이터를 담을 공간을 확보(선언 declare), 그 공간에 데이터를 담는 것(할당 assign), 이 두 동작을 통해 변수를 사용할 수 있다. 따라서 변수가 필요한 이유는 특정 데이터를 특정 메모리에 할당하여 필요할 때 이를 불려와 사용하기 위함이다.

  • 변수 선언 및 데이터 할당
    1) 변수를 선언하기 위해서는 '변수 선언 키워드 var, let, const', '변수명'이 필요하다.
    2) 선언한 변수에 데이터를 할당하기 위해서는 '대입 연산자 =', '담을 데이터'가 필요하다.
    let variableName; //1. 변수 선언
    variableName = 'String Data'; //2. 변수에 데이터 할당

    const variableName2 = 'IMMUTABLE'; //선언과 할당을 함께 할 수도 있다.

2. 자바스크립트 데이터 타입의 종류

데이터 타입으로 크게 '원시 타입 primitive type'과 '참조 타입 reference type'이 있다.

  • 원시 타입 데이터 : number, string, boolean, null, undefined

원시 타입 데이터는 변수에 할당될 때 메모리 상에 고정된 크기로 저장되고 해당 변수가 원시 데이터의 값을 보관한다. 모든 변수 선언, 초기화, 할당시 값이 저장된 메모리 영역에 직접적으로 접근한다. 즉, 새 값이 할당될 때 변수에 할당된 메모리 블럭에 저장된 값을 바로 변경한다는 뜻이다. → Access By Value

  • 참조 타입 데이터 : object, array, function

참조 타입 데이터는 크기가 정해져 있지 않고 변수에 할당될 때 값이 직접 해당 변수에 저장될 수 없으며, 변수에는 데이터에 대한 참조만 저장된다. 변수의 값이 저장된 힙(Heap) 메모리의 주소값을 저장한다. 참조 타입은 변수의 값이 저장된 메모리 블럭의 주소를 가지고 있고, Javascript 엔진이 변수가 가지고 있는 메모리 주소를 이용하여 변수의 값에 접근한다. → Access By Reference

3. number와 string의 메서드 각각 3개와 사용 방법

	//number
	Number.tostring() //문자열로 반환
	Number.isNan() //Nan인지 확인
	Number.parseInt() ===parseInt //int값으로 반환

	//string
	String.slice(시작인덱스,마지막 인덱스(옵션)) //시작 인덱스부터 문자열 추출
	String.subString(시작인덱스,마지막 인덱스(옵션)) //위와 같다. 네거티브 인덱스 (-) 사용 불가
	String.replace(string,string) //치환
	String.trim() //공백 제거

4. 함수가 필요한 이유

가장 큰 이유는 반복적인 프로그래밍을 피할 수 있기 때문이다. 특정 작업을 여러 번 반복해야 할 때 함수를 정의하고 필요할 때마다 호출하면 해당 작업을 반복해서 수행할 수 있다.

5. 함수의 정의와 호출의 차이점

    //정의
    function sayHello() {
    	console.log('Hello! Wecode! 👐');
    }

    //호출
    sayHello();

    /*
    정의하는 것만으로 함수를 사용할 수 없으며, 함수를 호출해야 실질적으로 사용이 가능하다.
    정의 부분에서 괄호 안에 들어가는 인자를 parameters, 호출 부분에서의 인자를 arguments 라고 한다.
    */

6. 조건문이 필요한 이유

프로그램이 어떠한 조건 혹은 기준에 따라 다른 결과와 흐름을 가져가도록 하기 위해서 조건문이 필요하다.

Note

01. console.log()

Javascript의 대표적인 출력, 디버깅 메서드

console.log(출력할 대상);
console.log('hello');
console.log(500000);
console.log(true);

02. 주석 처리

하나의 라인은 // 을 통해 주석 처리할 수 있으며,
여러 라인을 주석 처리할 경우에는 /* */ 을 사용한다.

// 한 줄을 주석 처리합니다.

/*
여러 줄을
주석 처리합니다.
*/

03. 변수 Variable

01) 변수란? 변수의 선언과 할당

  • 데이터를 담을 수 있는 대상, 공간
    변수를 선언한다. → Declare
    데이터를 할당한다. → Assign
//let을 이용하여 변수 선언 및 할당
let myAge = 30;
let myName = 'Junbeom Ham';

02) 데이터 타입

기본 타입 Primitive type

  • Number
    • 숫자 데이터 타입
    • 연산자(+, -, *, /, %) 사용 가능
  • String
    • 문자열 데이터 타입
    • ' ' 혹은 " " 블록을 통해 사용
      • 연산자를 사용하여 문자열 데이터끼리 하나의 문자열로 만들 수 있다. (문자와 숫자를 더하는 경우에도 사용 가능하며, 숫자가 문자열 데이터로 변환되어 하나의 문자열이 된다.)
  • Boolean
    • 논리형 데이터 타입
    • true 혹은 false 값만 가질 수 있다.
  • Undefined
    • 정의되지 않은 데이터 타입
    • 처음 선언된 경우 초기값은 undefined 이다.
    • 즉, 선언만 하고 대입 혹은 데이터를 할당하지 않은 경우 undefined 데이터를 갖게 된다.
    • 값이 없다는 점에서 null 과 비슷한 것 같지만 엄격하게는 같지 않다.
    console.log(null == undefined); //true
    console.log(null === undefined); //false

    console.log(typeof null); //object
    console.log(typeof undefined); //undefiend
  • Null
    • '값이 없음(blank)'을 의미하는 데이터
    • 데이터가 할당 되지 않은게 아니다. '값이 없음'이라는 null 값이 할당된 것이다.
    • null 은 동작이 원시적으로 보이기 때문에 원시 타입 중 하나로 표시된다.
    • typeof 연산자를 사용할 경우 object 를 반환한다. (Javascript의 자체 버그, The history of "typeof null" )
    console.log(typeof null); //object

참조 타입 Reference type

  • Object
    • 객체
    • key 와 value 한 쌍으로 데이터를 담을 수 있다.
    • { } 블록을 통해 사용
    let myObject = {
    	name: 'Junbeom',
    	isDeveloper: true
    }
  • Array
    • 배열
    • 담겨 있는 데이터를 요소 element 라고 한다.
    • [] 블록을 통해 사용
    let myArray = [
    'Junbeom', 30, true
    ]
  • Function
    • 함수
    function myFunction() {
    	let name = 'Junbeom Ham'
    	console.log(name)
    	return name
    }

03) 변수 이름 정하기

  • 변수 이름, 함수 이름, 연산자 모두 대소문자를 구분한다.
  • 첫 번째 문자는 반드시 글자나, 밑줄(_), 달러($) 중 하나이다.
  • camelCase 방식을 사용하는 것을 추천
  • snake_case 방식도 있으나 잘 사용하지 않는다.
//camelCase
let someVariable;
let anotherVariableName;
let thisVariableNameIsSoLong;

//snake_case
let first_second;
let my_profile_img;
let to_do_list_array;

04. 문자열 String

01) 문자열 더하기

  1. + 연산자 사용
let str = 'Hello';
str += ' ';
str += 'World';
console.log(str); //'Hello World'

[추가 TIP]

+ 연산자의 왼쪽 데이터 타입이 string 이면, Javascript가 자동적으로 오른쪽 데이터 또한 String 으로 변환한다. 이는 string 타입의 데이터와 object , number , null , undefined 타입의 데이터를 안전하게 합칠 수 있게 해준다.

console.log() 에서 + 연산자와 ,(콤마)를 사용하였을 때 같은 결과가 아닌 다른 결과를 보여준다. ( ,는 합치는 것이 아닌 각각 찍어서 보여주는 것)

//string이 아닌 다른 타입의 데이터와 합쳐 문자열 더하기
let str = 'Values: ';
str += 42;
str += ' ';

str += {};
str += ' ';

str += null;

console.log(str); //'Values: 42 [object Object] null'

//console.log()에서 +와 ,의 차이
let num = 1;
let str = '문자';
console.log(num + str); //'1문자' (number와 string을 더하면 string이 된다.)
console.log(num, str); //1 '문자' (더한 것이 아니라 ,를 이용하여 각각 찍은 것이다.)
  1. array의 join() 메소드

array의 join() 메소드를 사용하하여 새로운 문자열을 만들 수 있다.

join() 메소드의 default separator(구분자)는 ',(콤마)'이며 빈문열, 띄어쓰기, / 등 다양한 문자열을 구분자로 활용하여 요소들을 합칠 때 사이사이에 넣어줄 수 있다.

['a', 'b', 'c'].join(); //'a,b,c'

['Hello', ' ', 'World'].join(''); //'Hello World'

['Good', 'luck', 'with', 'you'].join(' ')
//'Good luck with you'

['this', 'is', 'uri', 'string-concat'].join('/')
//'this/is/uri/string-concat'
  1. string의 concat() 메소드

string의 concat() 메소드는 하나 혹은 그 이상의 인자(parameter)를 받아 기존 문자열과 합쳐 수정된 문자열을 반환합니다. Javascript에서 string 은 불변(immutable)하므로 concat() 메소드는 기존 문자열에 영향을 주지 않습니다.

let str1 = 'Hello';
let str2 = str1.concat(' ', 'World');

console.log(str2); //'Hello World'
console.log(str1); //'Hello' (Strings are immutable)

concat() 메소드의 인자 값으로 string 이 아닌 다른 데이터 타입 또한 사용할 수 있다. 다만, concat() 메소드의 주체가 string 이 아닌 경우 TypeError가 발생한다. (array 타입에도 비슷한 역할을 하는 concat() 메소드가 존재하기 때문에 예외)

//str1의 value가 string이 아니거나 null일 경우, TypeError 발생
const str1 = 'Values: ';
const str2 = str1.concat(42, ' ', null);

console.log(str2); //'Values: 42 null;

array 에서도 concat() 메소드를 사용할 수 있는 등과 같은 이유로 concat() 사용시 잦은 에러가 발생할 수 있으니 특별한 이유가 없다면 + 연산자를 통한 '문자열 더하기'를 추천하는 편이다.

concat() 메소드를 꼭 사용한다면, 아래와 같이 빈 문자열에 문자열을 더할 때 사용하는 것을 추천한다.

''.concat('Hello', ' ', 'World');

02) 문자열의 총 길이 구하기

문자열의 길이를 구할 때는 "변수명.length" 혹은 "'stringValue'.length"를 사용한다.

String.trim() : 공백 제거 

const myString = 'Hello Wecode!';
console.log(myString.length); //13
console.log('Hello Wecode!'.length); //13

05. 함수 Function

Input → Function → Output

  • 선언 / 정의
  • 실행 / 호출

01) 함수의 정의와 호출

//정의
function sayHello() {
	console.log('Hello! Junbeom! 👐');
}

//호출
sayHello();

02) 함수의 반환 Return (Output)

  • return : 함수의 output을 반환할 수 있는 결과물
  • return 값은 변수에 할당 가능하다.
  • console.log() 는 단순히 화면에 출력해줄 뿐, 변수에 할당할 수 없다.
function getName() {
	let name = 'Junbeom';
	return name; //output
}

console.log(getName()); //'Junbeom'

let name2 = console.log('Junbeom');
//화면에 'Junbeom'은 출력되지만, name2 변수는 선언만 되고 값을 할당 받지 못한다.

console.log(name2); //undefined

03) 함수의 인자 Parameter (Input)

  • 함수를 선언할 때 () 괄호 안에 들어가는 인자를 Parameter 라고 한다.
  • 함수를 호출할 때 () 괄호 안에 들어가는 인자를 Argument 라고 한다.
function sayHello(name) {
	return 'Hello, ' + name + '!';
}

console.log(sayHello('Junbeom')); //'Hello, Junbeom!'

function addNumbers(num1, num2) {
	let result = num1 + num2;
	return result;
}

console.log(addNumbers(3, 5)); //8

06. 조건문 Conditional Statements

01) 비교 연산자

  1. 동등 ==
  2. 부등 !=
  3. 일치 ===
  4. 불일치 !==
  5. 보다 큰 >
  6. 보다 크거나 같음 >=
  7. 보다 작은 <
  8. 보다 작거나 같음 <=

  • 비교 연산자 == 와 === 의 차이

    == 는 Javascript가 강제로 형변환하여 값(value)이 같은지를 비교한다.

    === 는 값 뿐만 아니라 자료형도 함께 비교한다. → 엄격한 비교

    console.log(0 == false); //true (0의 값은 false와 동등하므로)
    console.log(0 === false); //false (유형이 다르기 때문에 false)

    console.log(2 == '2'); //true (자동 유형변환 비교)
    console.log(2 === '2'); //false (유형이 다르기 때문에 false)

    //(참고)null과 undefined 비교
    console.log(null == undefined); //true
    console.log(null === undefined); //false (null은 object, undefined는 undefined)

02) if ~ else if ~ else

조건문은 하단의 예시처럼 if, else if, else, (조건) , {실행 코드}를 통해 사용할 수 있다.

function sayHello(name) {
	if(name === 'Junbeom') { //조건1. name의 값이 Junbeom이면
		console.log('Hello, ' + name + '!');
	}
	else if(name === 'Ham') { //조건2. name의 값이 Ham이면
		console.log('Hello, ' + name + '!');
	}
	else { //조건1, 조건2 둘 다 충족되지 않으면
		console.log('Who are you?');
	}
}

sayHello('Junbeom'); //'Hello, Junbeom!'
sayHello('Ham'); //'Hello, Ham!'
sayHello('condition'); //'Who are you?'

03) 논리 연산자

  1. AND &&

    expr1 && expr2

    expr1을 false로 변환할 수 있으면 expr1을 반환한다. 그 외의 경우에는 expr2를 반환한다. 따라서 boolean 값과 함께 사용하면 둘 다 참일 때 true 를, 그 외에는 false를 반환한다.

    console.log(true && true); //true
    console.log(false && true); //false
    console.log('Cat' && 'Dog'); //'Dog'
    console.log(false && 'Dog'); //false
    true && console.log('Dog');
**[참고]** `string`에서 빈 문자열은 `false`로 변환 가능하며, 그 외에는 `true`로 변환 된다. → Truthy & Falsy

  1. OR ||

    expr1 || expr2

    expr1을 true로 변환할 수 있으면 expr1을 반환한다. 그 외의 경우에는 expr2를 반환한다. 따라서 boolean 값과 함께 사용하면 둘 중 하나가 참일 때 true 를, 그 외에는 false를 반환한다.

    console.log(true || true); //true
    console.log(false || true); //true
    console.log('Cat' || 'Dog'); //'Cat'
    console.log(false || 'Cat'); //'Cat'

  1. NOT !

    !expr

    expr을 true 로 변환할 수 있으면 false를 반환, 그 외에는 true를 반환한다.

    console.log(!true); //false
    console.log(!false); //true
    console.log(!'Cat'); //false

  1. Truthy & Falsy

    boolean자료형 외의 다른 자료형 값이 boolean 을 기대하는 문맥에서 true로 평가 되면 Truthy한 값이고, false로 평가되면 Falsy한 값이다.

    [TIP] Falsy 값을 외우고, 그 이외에는 Truthy라고 생각하자.

    Falsy한 값 예시

    false, 0, -0, 0n, '', null, undefined, NaN 등

    -0는 음수 zero, 0n은 BigInt, NaN은 Not-A-Number로 숫자가 아님을 뜻한다.

    [참고] BigInt

    BigInt는 Number 원시 값이 안정적으로 나타낼 수 있는 최대치인 2^53 - 1보다 큰 정수를 표현할 수 있는 내장 객체이다.

    정수 리터럴의 뒤에 n을 붙이거나(10n) 함수 BigInt()를 호출해 생성할 수 있다.

Java에서 String, StringBuffer, StringBuilder의 차이점 소개
웹개발 종합반 5주차 (study)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage