초보개발자의 성장블로그
자바스크립트 기초 강좌 ②
함수(function)
함수 함수명 매개변수
function sayHello(name){
console.log(`Hello, ${name}`);
}
sayHello('Mike');
//함수 작성
function showError(){
alert('에러가 발생했습니다. 다시 시도해주세요.');
}
showError(); // alert 경고창이 뜬다.
// 함수 작성
// 매개변수가 있는 함수
function sayHello(name){
const msg = `Hello, ${name}`;
console.log(msg);
}
sayHello('Mike'); // "Hello, Mike" 이 출력된다.
sayHello('Tom'); // "Hello, Tom" 이 출력된다.
sayHello('Jane'); // "Hello, Jane" 이 출력된다.
function sayHello(name){
console.log(name)
let msg = `Hello`;
if(name){
msg = `Hello, ${name}`; // msg +=' , ' + name; 또는 msg += ` , ${name}`; 와 같다.
}
console.log(msg);
}
sayHello() ; // 매개변수가 없다
// unndefined "Hello" 가 찍힌다.
//전역변수와 지역변수
let msg = "welcome";
console.log(msg); // "welcome" 출력된다 전역변수이다.
function sayHello(name){
let msg = "Hello"
console.log(msg + ' ' + name); // "Hello Mike" 출력된다. 지역변수이다.
}
sayHello('Mike'); //"Hello Mike"
console.log(msg) // "welcome" 출력된다. 전역변수이다.
let name = "Mike";
function sayHello(name){
console.log(name)
}
sayHello(); // undefined 출력된다.
sayHello('jane'); // "jane" 출력된다.
or은 마지막 ture를 반환한다.
function sayHello(name){
let newName = name || 'friend' ;
let msg = ` Hello, ${newName} `;
console.log(msg);
}
sayHello(); // "Hello, friend" 출력
sayHello('Jane'); // "Hello, Jane" 출력
function sayHello(name = 'friend'){ // name이 없을때 default값 friend 적용된다.
let msg = ` Hello, ${name} `;
console.log(msg);
}
sayHello(); // "Hello, friend" 출력
sayHello('Jane'); // "Hello, Jane" 출력
//return 으로 값 반환
function add(num1, num2){
return num1 + num2;
}
const result = add(2,3);
console.log(result) // 5 출력된다.
return이 없는 함수도 항상 undefined를 반환한다.
functio showError(){
alert('에러가 발생했습니다.');
}
const result = showError();
console.log(result); //undefined 출력된다.
그냥 return;은 함수를 종료하는 목적으로 사용된다.
function showError(){
alert('에러가 발생했습니다.');
return;
alert('이 코드는 절대 실행되지 않습니다.');
}
함수
한번에 한작업에 집중
읽기 쉽고 어떤 동작인지 알 수 있게 네이밍
showError //에러를 보여줌
getName //이름을 얻어옴
createUserData //유저데이터 생성
checkLogin //로그인 여부 체크
함수선언문 : 어디서든 호출 가능
sayHello(); // 동작한다. 스크립트언어지만, 자바스크립트 내부알고리즘때문
// 자바스크립트는 실행전 초기화단계에서 코드의 모든 함수 선언문을 찾아서 생성해둔다.
// 이를 호이스팅이라한다.
function sayHello(){
console.log('Hello');
}
sayHello();
함수표현식 :코드에 도달하면 생성
...
...
let sayHello = function() {
console.log('Hello');
}
sayHello();
화살표 함수
let add = function(num1, num2){
return num1 + num2;
}
위의 함수를 화살표 함수로 바꾸면
let add = (num1, num2) => num1 + num2;
function 이 없어지고 괄호 뒤쪽에 화살표가 생긴다.
return문은 중괄호가 아닌 일반 괄호로 바꿀수 있다.
return문이 1줄이라면 일반괄호도 생략할수 있다.
인수가 하나면 괄호도 생략할 수 있다.
let sayHello = name =>`Hello, ${name}`;
인수가 없는 함수는 괄호 생략 못한다.
let showError = () =>{
alert('error!');
}
return문에 여러문장이 있으면 일반괄호 사용못한다.
let add = (num1, num2) => {
const result = num1 + num2 ;
return result;
}
실습>
showError(); // 에러 난다.
let sayHello = function() {
console.log('Hello');
}
실습>
showError(); //error 출력된다.
function showError() {
console.log("error");
}
화살표함수로 바꿔보자
let showError = () =>{
console.log("error");
}
const sayHello = function(name) {
const msg = `Hello, ${name}`;
console.log(msg);
};
을 화살표함수로 바꾸자
const sayHello = (name) =>{
const msg = `Hello, ${name}`;
console.log(msg);
};
인수가 두개이고, return문 이 있는 함수표현식를 화살표함수로 바꿔보자
const add = function(num1, num2) {
const result = num1 + num2;
return result;
};
을 바꾸면
const add = (num1, num2) => num1 + num2;
객체
이름은 클락 , 나이는 33 인 슈퍼맨 객체를 만들어보자
const superman = {
name : 'clark',
age : 33,
}
객체는 중괄호로 작성하고 키와 값으로 구성된 프로퍼티가 들어가고 쉼표로 구분한다.
객체에 접근하고 싶을 때는 점 또는 대괄호를 사용할 수 있다.
접근
superman.name // 'clark'
superman['age'] //33
추가
superman.gender = 'male';
superman['hairColor'] = 'black';
삭제는 delete 키워드를 사용한다.
delete superman.hairColor;
객체 단축 프로퍼티
const name = 'clark';
const age = 33;
const superman = {
name : name,
age : age,
gender : 'male',
}
이 코드는 아래처럼 쓸수있다.
const superman = {
name, // name : name
age, // age : age
gender : 'male',
}
객체 프로퍼티 존재 여부 확인 방법
const superman = {
name : 'clark',
age : 33,
}
superman.birthDay; //undefined
'birthDay' in superamn; //false
'age' in superman; // ture
for...in 반복분
for...in 반복문을 사용하면 객체를 순회하면서 반복문을 사용할 수 있다.
for(let key in superman){
console.log(key)
console.log(superman[key])
}
실습
const superman = {
name : ' clark' ,
age : 30,
}
console.log(superman.name) //"clark" 이 출력된다.
console.log(superman['age']) // 30이 출력된다.
console.log(superman) // 객체 자체를 띄우면 Object { age : 30, name:"clark"} 이 출력된다.
superman.hairColor = 'black';
superman['hobby'] = 'football' ;
console.log(superman) // Object { age:30, hairColor : "black", hobby : "football", name: " clark"} 출력된다.
const superman = {
name : ' clark' ,
age : 30,
}
delte superman.age; // 나이를 지운다.
console.log(superman) //Object { name : "clark" } 이 출력된다.
이름과 나이를 받아서 객체를 반환하는 함수를 만들어보자.
function makeObject(name, age){
return {
name : name, // name 만 써도 된다.
age: age, //age 만 써도 된다.
hobby : "football"
};
}
const Mike = makeObject("Mike", 30);
console.log(Mike); // Object { age:30, hobby: "football", name:"Mike" } 가 출력된다.
in을 이용해서 프로퍼티가 존재하는지 확인해보자.
console.log("age" in Mike) // ture 출력
console.log("birthday" in Mike); //false 출력
인수를 유저 객체로 받고 나이를 확인하고, 성인인지 아닌지 구별해주는 함수가 있다고 해보자.
function isAdult(user){
if(user.age < 20){
return false;
}
return true;
}
const Mike = {
name:"Mike",
age:30
};
const Jane = {
name:"Jane"
};
console.logt(isAdult(Mike)) // true 라고 나온다.
console.log(isAdult(Jane)) // true 라고 나온다. 나이를 입력하지 않았는데 성인이라고 나오면 안된다.
function is Adult(user){
if(!('age' in user) || // user에 age가 없거나
user.age < 20){ //20살 미만이거나
return false;
}
return ture;
}
const Jane = {
name:"Jane"
};
console.log(isAdult(Jane)) // false라고 나온다.
for ... in 문 예제
const Mike = {
name : "Mike",
age : 30
};
for(key in Mike){ // key는 Mike 가 가지고 있는 프로퍼티를 의미하고, 다른 (x, a, b, data 아무거나 와도 상관없다)
console.log(key) // "name" "age" 가 출력된다.
console.log(Mike[key]) //Mike['name'] 돌고, Mike['age'] 이 돌아서 "Mike" 와 30이 출력된다.
}
이름은 클락 , 나이는 33 인 슈퍼맨 객체가 있는데,
const superman = {
name : 'clark',
age : 33,
fly : function(){
console.log('날아갑니다.')
}
}
superman.fly(); // 날아갑니다. 라고 출력된다.
이렇게 객체 프로퍼티로 할당된 함수를 method 라고 한다.
method
객체 프로퍼티로 할당 된 함수
위의 코드는
const superman = {
name : 'clark',
age: 33,
fly(){
console.log('날아갑니다.')
}
}
이렇게 function키워드를 생략해서 작성할수 있다.
객체와 메소드의 관계를 알아보자.
객체의 메소드로그에 객체의 네임프로퍼티를 넣고 싶을 때는 어떻게 할까?
const user={
name : 'Mike',
sayHello : function(){
console.log(`Hello, I'm _____`); // ${user.name} 을 빈칸에 넣으면 될까? 이 방식은 문제가 발생할 수 있다.
// 그러므로 이럴 때는 this라는 키워드를 사용한다. ${this.name}
}
}
user.sayHello(); // ${this.name}를 사용하면 Hello, I'm Mike 가 출력된다.
let boy = {
name:'Mike',
sayHello:function(){
console.log(`Hello, I'm ${this.name}`);
}
let girl = {
name:'Jane',
sayHello:function(){
console.log(`Hello, I'm ${this.name}`);
}
boy.sayHello(); // this가 boy를 가리킨다. Hello, I'm Mike 가 출력된다.
girl.sayHello(); // this가 girl를 가리킨다. Hello, I'm Jane 가 출력된다.
sayHello : () = >{
console.log(`Hello, I'm ${this.name}`);
}
만약 sayHello 메소드를 화살표함수로 선언하면 값은 달라진다.
화살표 함수는 일반 함수와는 달리 자신만의 this를 가지지 않음
화살표 함수 내부에서 this를 사용하면, 그 this는 외부에서 값을 가져 옴
let boy = {
name : 'Mike',
sayHello : () =>{
console.log(this); // this는 전역객체를 가리킨다. (브라우저 환경에는 window, Nodejs에서는 global 이다.)
}
}
boy.sayHello(); // this! = boy , this는 보이가 아니다.
실습>
let boy = {
name : "Mike",
showName : function() {
console.log(boy.name)
}
};
boy.showName(); // "Mike"를 출력한다.
let man = boy; // man을 만들어서 boy 를 할당한다. 객체를 새로만든건 아니다. 사람은 1명인데 boy로도 접근할 수 있고, man으로 접근할 수 있다.
man.name = "Tom"
console.log(boy.name) // "Tom" 이 찍힌다.
let boy = {
name : "Mike",
showName : function() {
console.log(boy.name)
}
};
let man = boy;
boy = null;
man.showName(); // uncaught TypeError: Cannot read property 'name' of null at pen.js:6 에러 발생
let boy = {
name : "Mike",
showName : function() {
console.log(this.name) // boy를 this로 바꾼다. this는 해당객체를 가리킨다.
}
};
let man = boy;
boy = null;
man.showName(); // Mike로 잘 출력된다.
let boy = {
name : "Mike",
sayThis: function() {
console.log(this) // Object{ name:"Mike", sayThis : function(){<->}} 출력된다. 객체를 반환한다.
}
};
여기서 showName을 화살표 함수로 바꾸면,
let boy = {
name:"Mike",
sayThis:() =>{
console.log(this); // Log Skipped: Sorry, this log was too large for our console. You might need to use the browser console instead 에러 발생, window(전역객체)를 conpen 사이트에서 표현할수 없어서 에러가 났다.
화살표함수를 사용하면 this는 boy 객체를 가리키는게 아니라 window(전역객체)를 가리킨다.
}
};
그래서 객체 메소드를 작성할 때는 화살표함수로 작성하지 않는 것이 좋다.
배열(array)
순서가 있는 리스트
1번에 철수
2번에 영희
...
30번에 영수
let students = ['철수', '영희', ... '영수']; // 대괄호로 묶어주고 index를 이용해서 0부터~ 읽을 수 있다.
console.log(students[0]); //철수
console.log(students[1]); //영희
console.log(students[29]); //영수
수정도 가능하다.
students[0] = '민정' ; // index 0번을 철수에서 민정으로 수정하였다.
console.log(students) // ['민정', '영희', ....
배열의 특징
배열은 문자 뿐만 아니라, 숫자, 객체, 함수 등도 포함할 수 있음
let arr= [
'민수', // 문자
3, //숫자
false, //boolean
{ //객체
name:'Mike',
age:30,
},
function(){ //함수
console.log('TEST');
}
};
length
배열의 길이를 구할 수 있다.
students.length // 30이 출력된다. 그배열이 가지고 있는 요소의 개수를 반환한다.
배열은 몇가지 메소드를 가지고 있다.
push()
배열 제일 뒤에 요소를 추가한다.
let days = ['월', '화', '수'] ;
days.push('목')
console.log(days) // ['월', '화', '수', '목' ] 출력된다.
pop()
배열 제일 뒤에 요소를 제거한다.
let days = ['월', '화', '수'] ;
days.pop()
console.log(days) // ['월', '화', ] 출력된다.
shift, unshift
배열 제일 앞에서 제거/추가한다.
추가
days.unshift('일);
console.log(days) // ['일', '월', '화', '수' ]
제거
days.shift();
console.log(days) // ['월', '화', '수']
push와 unshift는 days.unshift('금', '토' , '일' ); 이렇게 여러 요소를 한번에 추가할 수도 있다.
배열을 쓰는 가장 큰 이유 중 하나는 반복을 위해서이다.
① for문을 쓰는 방법
let days = ['월', '화', '수' ];
for(let index = 0; index <days.length; index++){
console.log(days[index]) // index는 0~2 까지 반복한다.
}
② for...of 을 쓰는방법이다. 객체를 순회하는 for..in과 헷갈리지 않게 주의하자.
물론 배열도 객체형이기 때문에, for..in을 쓸 수 있지만 장점보다 단점이 많으므로 권장하지 않는다.
for..of는 배열 days를 돌면서 요소를 day라는 이름으로 접근할 수 있다.
for문 보다는 간단하지만 index를 못 얻는다는 단점이 있다.
let days = ['월', '화', '수' ];
for(let day of days){
console.log(day)
}
실습
let days = ["mon", "tue", "wed"];
console.log(days[1]); // "tue" 가 출력된다.
days[1] = '화요일'
console.log(days) ; // ["mon", "화요일", "wed"] 출력된다. 화요일로 바뀐걸 알수있다.
console.log(days.length); // 3 이 출력된다.
days.push("thu") ;
console.log(days); //["mon", "화요일", "wed", "thu"] 가 출력된다.
days.unshift('sun');
console.log(days); //["sun", "mon", "화요일", "wed", "thu"] 가 출력된다.
let days = ["mon", "tue", "wed"];
days.push("thu") ;
days.unshift('sun');
for(let index = 0; index <days.length; index ++){
console.log(days[index]); // "sun" "mon" "tue" "wed" "thu" 가 출력된다.
}
for (let day of days) { // day는 x로 써도 된다.
console.log(day); // "sun" "mon" "tue" "wed" "thu" 가 출력된다.
}
① 변수를 만들 수 있다.
② 자료형에 대해 이해할 수 있다.
③ console , alert 등을 통해 값을 확인 할 수 있고, prompt와 confirm을 통해 사용자가 원하는 값을 입력받을 수 있다.
④ 연산자와 조건문을 통해, 각기 다른 상황을 대응할 수 있다.
⑤ 반복문으로 동일한 작업을 반복할 수 있다.
⑥ 함수와 객체 배열에 대해 배웠다.
'프론트엔드 > Javascript' 카테고리의 다른 글
| 자바스크립트 중급 강좌 ⑤ (0) | 2021.07.28 |
|---|---|
| 자바스크립트 중급 강좌 ④ (0) | 2021.07.28 |
| 자바스크립트 중급 강좌 ③ (0) | 2021.06.03 |
| 자바스크립트 중급 강좌 ② (0) | 2021.05.31 |
| 자바스크립트 중급 강좌 ① (0) | 2021.05.30 |