[javascript] 자바스크립트 함수(function), 객체(object), 배열(array)

<함수>

함수 함수명(매개변수){ }; 

함수의 매개변수가 있을 수도 있고, 없을 수도 있다. 

함수를 만들면 중복이 줄어들고 유지 보수가 쉬워진다. 

 

매개변수 유무에 따라 이렇게 메시지를 변화시킬 수도 있다.

변수를 선언할때 먼저 const로 선언하고, 바뀔 가능성이 있으면 let으로 변경 가능 !

함수 안에서 사용하는 변수를 지역변수라고 하는데, 함수 내에서는 지역변수만 사용할 수 있다. (local variable)

모든 코드에서 사용할 수 있는 변수를 전역변수라고 한다. (global variable)

전역변수가 많아지면 관리가 어렵기 때문에 지역변수를 사용하기를 권장 

 

or는 마지막 True값을 반환하기 때문에, undefiend = name이라면, friend를 반환하고 이름을 입력하면 이름이 반환된다. 

왼쪽과 같이 default값을 지정해줄 수도 있다. default값은 name이 없을때만 활용 

 

return 문이 없으면 undefined를 반환해준다. 오른쪽 코드의 결과는 //undefined임. 또한, return을 입력하고 아무것도 입력 안해줘도 undefined라고 출력된다.return;만 있으면 그 즉시 함수가 종료되어, 함수를 종료시키는 목적으로도 사용한다. 

 

* 함수를 작성할때는 한번에 한 작업만 집중하도록 한다. 

* 함수를 작성할때는 읽기 쉽고 어떤 동작인지 알 수 있게 네이밍하기 

showError // 에러를 보여줌, getName //이름을 얻어옴, createUserData //유저데이터 생성, checkLogin // 로그인 여부 체크

 

<함수 표현식>

함수 선언문 <-> 함수 표현식 

함수선언문은 어디서든 호출 가능 = 인터프리터 언어(interpreted language)

자바스크립트에서는 함수선언문을 모두 확인하고, 선언된 함수 모임을 만들어놓는다. 따라서 함수선언문에서 sayHello()가 위로 가도 정상 작동한다! = hoisting 호이스팅 

 

함수표현식은 한줄씩 실행되고, 해당코드 순서가 되야 실행된다. 

 

<화살표 함수(arrorw function)>

return문은 소괄호로 바꾸기, return문이 한줄이면 괄호 생략 가능, 인수가 하나여도 괄호 생략 가능 

만약 인수가 없는 함수라면 괄호를 생략할 수 없음 ! 

 

함수 선언문을 화살표 함수로 바꾸기, 함수 표현식을 화살표 함수로 바꾸기 ! 

하나의 덧셈 함수를 (1) 함수 선언문 (2) 함수 표현식 (3) 화살표 함수로 표현하기

return문까지 생략해줄수도 있다. 화살표 함수는 자바스크립트에서 널리 활용되는 함수 ! (화살표 > 선언문 > 표현식)

 

<객체>

객체는 중괄호를 사용해서 작성하고, 객체의 프로퍼티(property)는 쉼표로 구분해준다.

객체에 접근하고 추가할때는 점이나 []대괄호를 사용하고, 객체를 삭제할때는 delete를 해준다. 

 왼쪽과 같이 단축 프로퍼티를 활용하는 것도 가능하다!

만약 존재하지 않는 프로퍼티를 호출하면 undefined가 나온다.

superman.birthDay; // undefined로 호출 되고, 'birthday' in superman; //false 거짓이라고 출력된다. 

 

*for ~ in 반복문을 사용하면 객체를 순회하면서 값을 얻을 수 있다. 

key값이 있을 동안(true)반복, 

console.log(key)로 key값 받아오기, console.log(superman[key])로 value값 받아오기 

console.log(객체)하면 객체가 반환된다!

 

함수를 활용하여 객체 만들기 

in을 활용하여 프로퍼티가 있는지 확인해보기 

Jane객체에는 age가 없는데 (user.age < 20)이 아닌 undefined이므로 true값이 반환 

이를 해결하기 위해서 age 프로퍼티가 user 안에 없거나 + age가 20살 이하라는 조건으로 변경 

객체를 만들고 key와 value값 가져오기

 

<메서드 method와 this>

메서드 method = 객체 프로퍼티로 할당된 함수

user.name이 아니라, this.name으로 넣어야 한다. this는 런타임에 따라 결정된다. 

*메서드의 this는 해당 객체를 가리킨다. 

* 화살표 함수는 일반 함수와 달리 자신만의 this를 가지지 않음 ! 화살표 함수 내부에서 this를 사용하면, 그 this는 외부에서 값을 가져온다. 브라우저 환경에서 전역 객체는 window, node.js환경에서 전역객체에서는 global이 된다. 이 오류는 코드펜 환경에서 윈도우를 띄울수 없을때 나타나는 오류 ! = this는 화살표 함수로 작성 ㄴㄴ 

 

<배열>

배열 = 순서가 있는 리스트

 

배열은 문자 뿐만 아니라, 숫자 객체 함수 등도 포함 할 수 있음 

length는 배열의 길이를 나타낼 수 있다. 

push()는 배열 끝에 문자 추가, 반대로 pop은 배열 끝에 문자 빼기 

unshift()는 배열 앞에 문자 추가, 반대로 shift는 배열 앞에 문자 빼기, push와 unshift는 여러개의 요소를 넣어도 동작 가능 ! 

배열을 쓰는 이유는 반복문을 돌리기 위함 ! : for

배열을 쓸 때 for - in은 쓰지 않고, for of를 사용한다 ! 배열 days를 돌면서 days를 day로 받는다는 특징이 있다. 하지만 index는 얻지 못한다는 단점이 있다. days[2] = 'tue'로 배열의 내용을 인덱스로 바꿀 수 있다.