[TIL2] Javascript

Variables

let 키워드를 사용하면 변수 값을 수정
const 키워드를 사용한 변수는 수정할 수가 없음

변수 이름은 중복되면 안 되지만, 값은 얼마든지 중복 가능

Example) 변수의 선언과 할당을 분리

let address;
address = "선릉";
console.log(address);
//result: 선릉

Function

함수 정의

function add() {
  let sum = 3+3;
  return sum;
}

함수 호출

add();

Function Data 반환

함수를 호출해서, 변수에 저장하고
그 변수를 console.log()로 확인

let result4 = noParameter();
console.log(result4);

함수를 호출한 것을 바로 console.log()로 확인

console.log(noParameter());

함수가 반환을 생략하면 undefined라는 값을 반환

Parameter 함수 이름 옆 소괄호 자리에 적혀 있는 단어는 매개변수
외부로부터 들어오는 값을 담아 함수 내부에서 사용하도록 하는 변수의 역할

function getName(name) {
  return name + '님';
}

let result1 = getName('개발자');
//'개발자'와 같은 실질적인 값을 argument(인자)

console.log(result1);
// 콘솔에 '개발자님'이 출력됩니다.

Math Expressions

num++;

num = num + 1;

num--;

num = num + 1;

텍스트 문자열의 배열

console.log("2" + "2");
//result: 22

""(쌍따옴표)로 감싸져 있기때문에 컴퓨터는 숫자라고 인식하지 않음

String과 Number형을 더하면 항상 String 형으로 변환

if문

비교연산자

fullName === familyName + " " + "개발"

!==
사용해서 서로 '같지 않음'을 비교

===
엄격한(identity/strict) 비교연산자

==
느슨한 비교연산자

if ("3" == 3) {
  return true;
}

if ("3" === 3) {
  return false;
}

논리연산자

||
"또는(or)"에 해당하는 JavaScript 연산자

&&
모두 충족해야할 때 사용

Function(함수) - 데이터 받기

Bad example

function alertSuccess(name) {   
  let name = "wecode";
  alert(name + "님 로그인 성공!"); 
}

위와 같이 함수 내부에서 인자로 받은 변수(name)에 새로운 값("wecode")을 넣으면 안됨

Function(함수) - parameter, argument

매개변수(parameter)
함수 선언식의 괄호'()'안에 어떤 변수명을 쓰면, 우리는 그걸 매개변수 라고 부름

인자(argument)
어떤 함수를 호출하면서, 호출문의 괄호 안에 어떤 값 또는 값이 정의된 변수를 쓰면, 우리는 그걸 인자 라고 부름

Function(함수) - 여러 인자

function meetAt(year, month, day) {
  if(year, month, day) {
    return year+"/"+month+"/"+day;
  } if(year, month) {
    return year+"년 " + month + "월";
  } if(year) {
    return (year+"년");
  }
}
meetAt(1234, 5, 6);

더 간단한 코드...

function meetAt(year, month, date) {
  if (date) return year + '/' + month + '/' + date;
  if (month) return year + '년 ' + month + '월';
  if (year) return year + '년';
}

Function(함수) - 데이터 반환하기(2)

return 함수
return이라는 것은 함수를 호출했을 때, 함수가 값을 반환

함수와 return 키워드
return을 생략하면 함수는 undefined

함수 내부에서 다른 함수 호출하기

function getTax(price) {
  return price * 0.1;
}

function calculateTotal(price) {
  return price + getTax(price);
}

var result = calculateTotal(3500);
console.log(result);

Array

요소 자리에는 String, Number, Array 모두 가능

var anything = ["대전", 1987, ["하나", "둘", 3]];

Nested Array

const nestedArr = [[1], [2, 3]];

console.log(nestedArr[1]); // Output: [2, 3]
console.log(nestedArr[1][0]); // Output: 2

For문

배열 조작하기

push/unshift함수

push는 array의 마지막 부분, 즉 꼬리에 요소들을 추가
unshift는 array의 맨 앞부분, 즉 머리 부분에 요소를 추가

pop함수
마지막 요소가 제거

데이터 타입

undefined
undefined라는 값은 var, let, const를 사용해서 변수를 정의

null
null은 아무것도 아닌 빈 객체를 가리고 있어서 object

boolean
true로 변환되는 값
문자열: 비어 있지 않은 모든 문자열
숫자: 0이 아닌 모든 숫자
객체: 모든 객체 ({}, [] 모두 포함)

false로 변환되는 값
문자열: "" (빈문자열)
숫자: 0, NaN
객체: null
undefined

let number = 0;
if (number) {
  // 실행 안됨
}

숫자
따옴표 없이 숫자만을 쓰는 경우

객체 (Object)
중괄호로 감싸진 key-value 쌍의 형태
ex. { key: value }

undefined라는 값은 var, let, const를 사용해서 변수를 정의

String

indexOf() 함수는 문자열에 특정 문자열이 들어있는지 확인
만약 있다면 몇번 째 순서에 해당 문자열이 있는지 알려주고
해당 문자열이 없다면 -1을 반환

String <-> Number 변환

typeof라는 연산자로 해당 변수가 무슨 type인지 알 수 있음

let a = '900';  
let b = 350; 
let c = Math.random(); 
let d = '5' + 5; 

console.log(typeof a); //result: 'string'
console.log(typeof b); //result: 'number'
console.log(typeof c);; //result: 'number'
console.log(typeof a); //result: 'string'

Nan = Not a number

console.log(2019+"2000");
console.log(2019-"2000");

+의 양쪽을 보고, 하나라도 String이 있으면
문자열로서 합쳐줌

그런데 -라면, String의 마이너스는 존재 하지 않으므로
양쪽의 값을 모두 숫자로 변환해서 계산

parseFloat()

parseFloat("1.901");

날짜와 시간

let rightNow = new Date();
let year = rightNow.getFullYear();
let month = rightNow.getMonth()+1;
let date = rightNow.getDate();
let day = rightNow.getDay();
let currentHour = rightNow.geproperty 이름은 중복될 수 없다.
property이름과 property값 사이에 :(콜론)으로 구분한다.
property를 추가할 때는 ,(쉼표)를 붙여준다.
property 값에는 어느 type이나 가능하다(string, number, array, object, function..)tHours();
let currentMin = rightNow.getMinutes();

Object

• property 이름은 중복될 수 없다.
• property이름과 property값 사이에 :(콜론)으로 구분한다.
• property를 추가할 때는 ,(쉼표)를 붙여준다.
• property 값에는 어느 type이나 가능하다(string, number, array, object, function..)

console.log(difficult.my name); //result: undefined
console.log(difficult['my name']);

스페이스가 포함된 키는 대괄호로 접근

console.log(difficult.33);
console.log(difficult['33']);

숫자로 된 키는 대괄호로 접근

중첩된 객체 (Nested Object)

let nestedObj = {
  type: {
    year: '2019',
    'comment-type': [{
      name: 'simple'
    }]
  }
}

console.log(nestedObj.type['comment-type'][0].name);

const mutableObj = {
  name: '객체'
};

mutableObj = {
   name: '수정'
}

mutableObj.name = '수정 됩니다!';

const로 선언된 변수는 절대 값이 안바뀜. 그러기 때문에 mutableObj에 새로운 객체를 할당하면 오류. 왜냐면 새로운 메모리 주소(reference)로 수정을 시도하기 때문.

하지만 mutableObj.name 로 프로퍼티를 접근해서 수정할 수 있음.
mutableObj가 저장된 reference가 바뀌는 것이 아니라 객체 내부의 프로퍼티 값이 수정되는 것이라 수정 가능.

Scope

Block
block이란 중괄호({}, curly brace)로 감싸진 것을 block

Global(전역) Scope
코드 어디서든 접근 가능해서 변수값을 확인할 수 있음

Array Methods

Array.map()

Array.forEach()
forEach는 단지 for문 대신 사용하는 반복 method 입니다.